/* global React */

const HERO_PHOTOS = [
  { src: 'assets/photos/portrait-plaid.jpg', label: 'Newport Beach · 2026', pos: 'center 28%' },
  { src: 'assets/photos/marina-railing.jpg', label: 'Lido Marina · 2026', pos: 'center 22%' },
  { src: 'assets/photos/cafe-portrait.jpg', label: 'Lido · 2026', pos: 'center 22%' },
  { src: 'assets/photos/walking-deck.jpg', label: 'Boardwalk · 2026', pos: 'center 20%' },
];
window.HERO_PHOTOS = HERO_PHOTOS;

function Hero({ onJump, heroIndex }) {
  const photo = HERO_PHOTOS[heroIndex % HERO_PHOTOS.length] || HERO_PHOTOS[0];
  return (
    <section className="fk-hero" id="top" data-screen-label="01 Hero">
      <div className="topo-bg" aria-hidden="true" />
      <div className="fk-section__inner">
        <div className="fk-hero__grid">
          <div className="fk-hero__copy">
            <div className="fk-eyebrow">
              <span style={{ color: 'var(--accent)' }}>00 —</span>
              <span>Farid Kheloco</span>
              <span className="fk-dot" />
              <span>CEO, Purely Works</span>
              <span className="fk-dot" />
              <span>SoCal</span>
            </div>
            <h1 className="fk-display">
              building companies<br />
              <span className="fk-display__caveat">around the life</span><br />
              I actually want.
            </h1>
            <p className="fk-lede">
              I run Purely Works — an AI and automation company designed to move at startup speed without
              the long-term lock-in. The rest of the week I'm with my kids, in the desert, or writing about
              what it takes to do both.
            </p>
            <div className="fk-hero__cta">
              <a className="fk-btn fk-btn--accent" href="#work" onClick={(e) => { e.preventDefault(); onJump('work'); }}>
                See Purely Works <span aria-hidden="true">→</span>
              </a>
              <a className="fk-btn fk-btn--ghost" href="#contact" onClick={(e) => { e.preventDefault(); onJump('contact'); }}>
                Book a conversation
              </a>
            </div>
            <div className="fk-hero__ticker" aria-label="status">
              <div>
                <span className="fk-eyebrow">Currently</span>
                <span className="val">shipping, scaling, dad-ing</span>
              </div>
              <div>
                <span className="fk-eyebrow">Based</span>
                <span className="val">southern california</span>
              </div>
              <div>
                <span className="fk-eyebrow">Open to</span>
                <span className="val">collabs · stages · clients</span>
              </div>
            </div>
          </div>
          <div className="fk-hero__portrait">
            <img
              key={photo.src}
              src={photo.src}
              alt="Portrait of Farid Kheloco"
              style={{ objectPosition: photo.pos }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;