// Hero component — 3 variations exposed via window.__heroVariant

const { useState, useEffect } = React;

function Hero({ variant = 'stacked' }) {
  const [time, setTime] = useState('');

  useEffect(() => {
    const update = () => {
      const d = new Date();
      const sf = d.toLocaleTimeString('en-US', {
        timeZone: 'America/Los_Angeles',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false,
      });
      setTime(sf);
    };
    update();
    const id = setInterval(update, 30000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero" data-variant={variant} data-screen-label="01 Hero">
      <nav className="nav">
        <div className="nav-left">
          <a
            href="#top"
            className="mark"
            onClick={(e) => {
              e.preventDefault();
              window.scrollTo({ top: 0, behavior: 'smooth' });
            }}
          >
            JS
          </a>
        </div>
        <div className="nav-center">
          <a href="#experience">Experience</a>
          <a href="#about">About</a>
          <a
            href="https://www.figma.com/deck/xgTXbFEn4MZgVFC1LCMSsz/Jennifer-Shen-Portfolio?node-id=1-87&t=7f8yrnrIVRRLWWL4-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1"
            target="_blank"
            rel="noreferrer"
          >
            Portfolio ↗
          </a>
        </div>
        <div className="nav-right">
          <span className="meta">SF · {time || '—'}</span>
        </div>
      </nav>

      {variant === 'stacked' && <HeroStacked />}
      {variant === 'editorial' && <HeroEditorial />}
      {variant === 'marquee' && <HeroMarquee />}
    </section>
  );
}

function HeroStacked() {
  return (
    <div className="hero-stacked">
      <div className="hero-meta-row">
        <span className="label">Portfolio · MMXXVI</span>
        <span className="label">Currently Sr. Product Design Manager, Roblox</span>
      </div>
      <h1 className="hero-title">
        <span className="line morph-word">Jennifer</span>
        <span className="line line-serif"><em>Shen</em><span className="ampersand">.</span></span>
      </h1>
      <div className="hero-footer-row">
        <p className="hero-sub">
          I decode complexity to solve <em>people problems</em><br/>
          and deliver indispensable products.
        </p>
        <div className="hero-tags">
          <span>Design systems</span>
          <span>·</span>
          <span>Discovery</span>
          <span>·</span>
          <span>Platform</span>
        </div>
      </div>
    </div>
  );
}

const ROTATING_WORDS = ['ambiguity', 'complexity', 'systems', 'patterns'];

function HeroEditorial() {
  const [wordIndex, setWordIndex] = useState(0);
  const [displayWord, setDisplayWord] = useState(ROTATING_WORDS[0]);

  useEffect(() => {
    const id = setInterval(() => {
      setWordIndex(i => (i + 1) % ROTATING_WORDS.length);
    }, 4000);
    return () => clearInterval(id);
  }, []);

  useEffect(() => {
    const target = ROTATING_WORDS[wordIndex];
    const chars = 'abcdefghijklmnopqrstuvwxyz';
    const scrambleSpeed = 45;   // ms per frame
    const lockDelay   = 90;     // ms between each letter locking
    const lockOffset  = 200;    // ms before the first letter locks
    let frame = 0;
    let cancelled = false;

    const tick = () => {
      if (cancelled) return;
      const elapsed = frame * scrambleSpeed;
      let out = '';
      let done = true;
      for (let i = 0; i < target.length; i++) {
        const lockAt = lockOffset + i * lockDelay;
        if (elapsed >= lockAt) {
          out += target[i];
        } else {
          out += chars[Math.floor(Math.random() * chars.length)];
          done = false;
        }
      }
      setDisplayWord(out);
      frame++;
      if (!done) setTimeout(tick, scrambleSpeed);
    };
    tick();
    return () => { cancelled = true; };
  }, [wordIndex]);

  return (
    <div className="hero-editorial">
      <h1 className="edit-title">
        <span className="edit-row edit-row-1">
          <span className="morph">I</span>&nbsp;<span className="morph">DECODE</span>
        </span>
        <span className="edit-row edit-row-2">
          <em className="serif cycle-word">{displayWord}</em>
        </span>
        <span className="edit-row edit-row-3">
          <span className="morph">TO</span>&nbsp;<span className="morph">SOLVE</span>&nbsp;<span className="morph">PEOPLE</span>
        </span>
        <span className="edit-row edit-row-4">
          <span className="morph">PROBLEMS.</span>
        </span>
      </h1>
    </div>
  );
}

function HeroMarquee() {
  const line = 'Jennifer Shen — Product Design ';
  return (
    <div className="hero-marquee">
      <div className="marquee-intro">
        <p>
          <span className="serif"><em>Hello.</em></span> I'm a design leader working at the edges
          of platform, play, and craft. Recently at <span className="ul">Roblox</span>;
          before that <span className="ul">Google</span>, <span className="ul">Meta</span>, <span className="ul">Adobe</span>.
        </p>
      </div>
      <div className="marquee-track" aria-hidden="true">
        <div className="marquee-inner">
          {Array.from({length: 6}).map((_, i) => (
            <span key={i} className="marquee-item">
              {line}<em className="serif">·</em>&nbsp;
            </span>
          ))}
        </div>
        <div className="marquee-inner">
          {Array.from({length: 6}).map((_, i) => (
            <span key={i} className="marquee-item">
              {line}<em className="serif">·</em>&nbsp;
            </span>
          ))}
        </div>
      </div>
      <div className="marquee-footer">
        <span>Available for senior &amp; staff design leadership roles</span>
        <span className="dot" />
        <span>2026</span>
      </div>
    </div>
  );
}

window.Hero = Hero;