/* =================================================================
   Hero variants — 3 directions for the top of the page.
   Selected via Tweaks ("topDirection"): index | reel | vault
   ================================================================= */

/* shared scroll cue */
function ScrollCue({ label, onClick }) {
  if (onClick) {
    return (
      <button className="scrollcue" data-hot onClick={onClick}>
        <span className="mono-label">{label}</span>
        <span className="scrollcue-line" />
      </button>
    );
  }
  return (
    <div className="scrollcue">
      <span className="mono-label">{label}</span>
      <span className="scrollcue-line" />
    </div>
  );
}

/* ---- letter-by-letter title ---- */
function SplitTitle({ text, className }) {
  return (
    <span className={`split ${className || ''}`} aria-label={text}>
      {text.split('').map((ch, i) => (
        <span className="split-ch" key={i} style={{ '--d': `${i * 0.04 + 0.2}s` }}>
          {ch === ' ' ? '\u00A0' : ch}
        </span>
      ))}
    </span>
  );
}

/* =========================================================
   A · INDEX  — quiet, film-credit. Big serif name, numbered index.
   ========================================================= */
function HeroIndex({ data, lang, onCue }) {
  const m = data.meta;
  return (
    <header className="hero hero-index">
      <div className="hx-top">
        <span className="mono-label">{L(m.roleLine, lang)}</span>
        <span className="mono-label faint tnum">EST. {m.sinceYear}</span>
      </div>

      <div className="hx-name">
        <SplitTitle text={m.nameEn} className="hx-name-en" />
        <span className="hx-name-jp reveal">{m.nameJp}</span>
      </div>

      <p className="hx-tag reveal" style={{ transitionDelay: '.5s' }}>{L(m.tagline, lang)}</p>

      <ol className="hx-index">
        {data.categories.map((c, i) => (
          <li key={c.id}>
            <a className="hx-idx-row reveal" href={`#/${c.route}`} data-hot style={{ transitionDelay: `${0.6 + i * 0.09}s` }}>
              <span className="mono-label tnum">{c.no}</span>
              <span className="hx-idx-label">{L(c.label, lang)}</span>
              <span className="hx-idx-count mono-label tnum">{String(data.works[c.id].length).padStart(2,'0')}</span>
              <span className="hx-idx-arr">→</span>
              <span className="hx-idx-rule" />
            </a>
          </li>
        ))}
      </ol>

      <ScrollCue label="SCROLL" onClick={onCue} />
    </header>
  );
}

/* =========================================================
   B · REEL — kinetic. Looping marquee of titles, big name, motion.
   ========================================================= */
function HeroReel({ data, lang, onCue }) {
  const m = data.meta;
  const allTitles = [
    ...data.works.film, ...data.works.app, ...data.works.web,
  ].map((w) => w.title);
  const lineA = allTitles.filter((_, i) => i % 2 === 0);
  const lineB = allTitles.filter((_, i) => i % 2 === 1);

  const Marquee = ({ items, reverse, speed }) => (
    <div className={`mq ${reverse ? 'rev' : ''}`} style={{ '--sp': `${speed}s` }}>
      <div className="mq-track">
        {[...items, ...items, ...items].map((t, i) => (
          <span className="mq-item" key={i}>{t}<i className="mq-dot">·</i></span>
        ))}
      </div>
    </div>
  );

  return (
    <header className="hero hero-reel">
      <div className="hr-marquees" aria-hidden="true">
        <Marquee items={lineA} speed={42} />
        <Marquee items={lineB} reverse speed={54} />
        <Marquee items={lineA} speed={38} />
      </div>

      <div className="hr-center">
        <span className="mono-label hr-role reveal in">{L(m.roleLine, lang)}</span>
        <h1 className="hr-name">
          <SplitTitle text={m.nameEn} />
        </h1>
        <span className="hr-jp">{m.nameJp}</span>
        <p className="hr-tag">{L(m.tagline, lang)}</p>
      </div>

      <div className="hr-bottom">
        <span className="mono-label tnum">{String(data.works.film.length + data.works.app.length + data.works.web.length).padStart(2,'0')} WORKS</span>
        <ScrollCue label="SCROLL" onClick={onCue} />
        <span className="mono-label faint tnum">EST. {m.sinceYear}</span>
      </div>
    </header>
  );
}

/* =========================================================
   C · VAULT — terminal / catalog. Typed header + dense mono grid.
   ========================================================= */
function useTyping(text, speed = 38, start = true) {
  const [out, setOut] = useState('');
  useEffect(() => {
    if (!start) return;
    let i = 0; let raf;
    const tick = () => {
      i += 1; setOut(text.slice(0, i));
      if (i < text.length) raf = setTimeout(tick, speed);
    };
    raf = setTimeout(tick, 300);
    return () => clearTimeout(raf);
  }, [text, start]);
  return out;
}

function HeroVault({ data, lang, onCue }) {
  const m = data.meta;
  const typed = useTyping(`> ${m.nameEn.toLowerCase().replace(' ', '_')} --portfolio`, 34);
  const all = [...data.works.film, ...data.works.app, ...data.works.web];
  return (
    <header className="hero hero-vault">
      <div className="hv-bar">
        <span className="mono-label">SAKUYA_MIZUNO / ARCHIVE</span>
        <span className="mono-label faint tnum">{all.length} ENTRIES · EST.{m.sinceYear}</span>
      </div>

      <div className="hv-term">
        <span className="hv-prompt mono-label">{typed}<i className="caret" /></span>
      </div>

      <div className="hv-name">
        <span className="hv-name-en">{m.nameEn}</span>
        <span className="hv-name-jp">{m.nameJp}</span>
      </div>
      <p className="hv-tag mono-label">{L(m.tagline, lang)}</p>

      <div className="hv-grid" aria-hidden="true">
        {all.map((w, i) => (
          <div className="hv-cell" key={w.id} style={{ '--d': `${i * 0.03}s` }}>
            <span className="mono-label tnum">{String(i + 1).padStart(2, '0')}</span>
            <span className="hv-cell-t">{w.title}</span>
            <span className="mono-label faint tnum">{w.year}</span>
          </div>
        ))}
      </div>

      <ScrollCue label="SCROLL ↓ INDEX" onClick={onCue} />
    </header>
  );
}

function Hero({ direction, data, lang, onCue }) {
  if (direction === 'reel') return <HeroReel data={data} lang={lang} onCue={onCue} />;
  if (direction === 'vault') return <HeroVault data={data} lang={lang} onCue={onCue} />;
  return <HeroIndex data={data} lang={lang} onCue={onCue} />;
}

Object.assign(window, { Hero, HeroIndex, HeroReel, HeroVault, ScrollCue, SplitTitle });