// hero.jsx — Two hero variants
// Variant A: editorial clássico (light, headline + colossal 17)
// Variant B: cinematográfico arrojado (dark, image background, asymmetric)

const { useState, useEffect, useRef } = React;

function useRotator(items, intervalMs = 3500) {
  const [i, setI] = useState(0);
  useEffect(() => {
    if (!items || items.length < 2) return;
    const id = setInterval(() => setI((x) => (x + 1) % items.length), intervalMs);
    return () => clearInterval(id);
  }, [items, intervalMs]);
  return [i, items ? items[i] : ''];
}

function CountUp({ to = 17, duration = 1500, trigger = true }) {
  const [n, setN] = useState(0);
  const startedRef = useRef(false);
  useEffect(() => {
    if (!trigger || startedRef.current) return;
    startedRef.current = true;
    const start = performance.now();
    const tgt = Number(to);
    if (!Number.isFinite(tgt)) { setN(to); return; }
    let raf;
    const step = (t) => {
      const p = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(tgt * eased));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [to, duration, trigger]);
  return <>{n}</>;
}

function HeroA({ t }) {
  const h = t.hero;

  return (
    <section className="hero hero-a" data-screen-label="01 Hero A — Editorial">
      <div className="stage">
        <h1 className="title">
          <span className="line">{h.first_name}</span>
          <span className="line"><em>{h.last_name_a}</em></span>
          <span className="line">{h.last_name_b}</span>
        </h1>
        <figure className="portrait-hero" aria-label="Ramón Ángel Díaz">
          <img src="images/ramon-portrait.webp" alt="Ramón Ángel Díaz" loading="eager" />
        </figure>
      </div>

      <div className="footrow">
        <div className="tagline">
          <span className="rot">Una vida ganando.</span>
        </div>
        <div className="stat">
          <span className="num tab-num">{h.stat_titles_n}</span>
          <span className="mono-label">{h.stat_titles}</span>
        </div>
        <div className="stat">
          <span className="num tab-num">{h.stat_clubs_n}</span>
          <span className="mono-label">{h.stat_clubs}</span>
        </div>
        <div className="stat">
          <span className="num tab-num">{h.stat_years_n}</span>
          <span className="mono-label">{h.stat_years}</span>
        </div>
      </div>
    </section>
  );
}

function HeroB({ t }) {
  const h = t.hero;
  const [, tagline] = useRotator(h.taglines, 3600);
  const [animTrigger, setAnimTrigger] = useState(false);
  useEffect(() => { const id = setTimeout(() => setAnimTrigger(true), 200); return () => clearTimeout(id); }, []);

  return (
    <section className="hero hero-b" data-screen-label="01 Hero B — Cinematográfico">
      <div className="bg-slot">
        <image-slot
          id="hero-b-bg"
          shape="rect"
          placeholder="Foto cinematográfica de Ramón à beira do campo — preferência preto e branco, contraste alto, momento de tensão / vitória"
        ></image-slot>
      </div>

      <div className="b-content">
        <div className="b-top">
          <div className="mono-label on-dark">{h.meta_left}</div>
        </div>

        <h1 className="b-headline">
          <span className="l1">RAMÓN DÍAZ</span>
          <span className="l2">{h.headline_b}</span>
        </h1>
      </div>

      <div className="b-side">
        <div className="ringed">
          <span>
            <CountUp to={h.stat_titles_n} trigger={animTrigger} duration={1800} />
          </span>
        </div>
        <div className="caption">{h.side_caption}</div>
      </div>

      <div className="b-bottom">
        <div className="cell">
          <span className="num"><span key={tagline} style={{display:'inline-block'}}>{tagline}</span></span>
        </div>
        <div className="cell">
          <span className="num tab-num">{h.stat_titles_n}</span>
          <span className="lbl">{h.stat_titles}</span>
        </div>
        <div className="cell">
          <span className="num tab-num">{h.stat_clubs_n}</span>
          <span className="lbl">{h.stat_clubs}</span>
        </div>
        <div className="cell">
          <span className="num tab-num">{h.stat_years_n}</span>
          <span className="lbl">{h.stat_years}</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroA, HeroB, useRotator, CountUp });