/* global React */

const SPEAKING_TOPICS = [
  { num: '01', title: 'Building an AI company without the hype.' },
  { num: '02', title: 'Designing a business around the life you want.' },
  { num: '03', title: 'Fatherhood and the founder operating system.' },
  { num: '04', title: 'Outdoor life as a CEO ritual.' },
];

function Speaking() {
  return (
    <section className="fk-section" id="speaking" data-screen-label="05 Speaking">
      <div className="fk-section__inner">
        <div className="section-marker">
          <span className="num">04 —</span><span>speaking</span>
        </div>
        <div className="speaking-row">
          <div className="speaking-photo speaking-photo--small">
            <img src="assets/photos/alcove-portrait-bw.jpg" alt="Farid, portrait" />
          </div>
          <div className="speaking-copy">
            <h2 className="fk-h1">
              taking the mic <span className="fk-display__caveat">more, on purpose.</span>
            </h2>
            <p className="lede">
              I don't speak often — yet. It's something I want to do more of. If your event lines up with
              what I actually think about, I'd love to hear from you.
            </p>
            <div className="speaking-topics-compact" role="list" aria-label="Speaking topics">
              {SPEAKING_TOPICS.map((t) => (
                <div className="speaking-topic-compact" role="listitem" key={t.num}>
                  <span className="num">{t.num}</span>
                  <span className="title">{t.title}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 28 }}>
              <a className="fk-btn fk-btn--accent" href="#contact" onClick={(e) => {
                e.preventDefault();
                document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                window.dispatchEvent(new CustomEvent('contact-preselect', { detail: 'speaking' }));
              }}>
                Invite me to speak <span aria-hidden="true">→</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Speaking = Speaking;