// desidium-sections-a.jsx — Nav, Hero, Divisions, Why
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

/* ---------------- NAV ---------------- */
function Nav({ lang, setLang, scrolled, go, open, setOpen }) {
  const n = I18N.nav;
  // "join" ("Become a model") temporarily hidden — re-add ["join","route:join"] to restore.
  const items = [["roster","#roster"],["studio","#studio"],["cases","#cases"],["journal","route:journal"],["contact","#contact"]];
  return (
    <header className={"nav " + (scrolled ? "nav--solid" : "")}>
      <a className="nav-wordmark" href="#top" onClick={(e)=>{e.preventDefault();go("#top");}}>DESIDIUM</a>
      <nav className="nav-links">
        {items.map(([k,href]) => (
          <a key={k} className={k==="join"?"nav-join":""} href={href.indexOf("#")===0?href:"#"} onClick={(e)=>{e.preventDefault();go(href);}}>{L(n[k],lang)}</a>
        ))}
      </nav>
      <div className="nav-right">
        <LangToggle lang={lang} setLang={setLang} />
        <button className={"nav-burger " + (open?"is-open":"")} onClick={()=>setOpen(!open)} aria-label="Menu">
          <span></span><span></span>
        </button>
      </div>
    </header>
  );
}

/* ---------------- HERO ---------------- */
// Split hero: one autoplaying reel per talent, side-by-side (stacked on mobile).
// Respects prefers-reduced-motion and the tweaks "motion" toggle by pausing on the first frame.
function HeroReels({ reels, lang, motion }) {
  const wrap = useRefA(null);
  const base = (window.desidiumWp && window.desidiumWp.themeUri) || "";
  useEffectA(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const sync = () => {
      const play = motion !== false && !mq.matches;
      wrap.current && wrap.current.querySelectorAll("video").forEach(v => {
        if (play) { const p = v.play(); p && p.catch && p.catch(()=>{}); } else { v.pause(); }
      });
    };
    sync();
    mq.addEventListener("change", sync);
    return () => mq.removeEventListener("change", sync);
  }, [motion]);
  return (
    <div className="hero-film hero-reels" ref={wrap}>
      {reels.map((r, i) => (
        <figure className="hero-reel" key={r.id} style={{ "--i": i }}>
          <video
            src={base + "/" + r.src}
            muted autoPlay loop playsInline
            preload={i === 0 ? "auto" : "metadata"}
            aria-label={L(r.label, lang)}
          />
          <div className="film-grain"></div>
          <figcaption className="film-label">{L(r.label, lang)}</figcaption>
        </figure>
      ))}
    </div>
  );
}

function Hero({ lang, go, motion }) {
  const h = I18N.hero;
  const [loaded, setLoaded] = useStateA(false);
  useEffectA(() => { const t = setTimeout(()=>setLoaded(true), 80); return ()=>clearTimeout(t); }, []);
  return (
    <section className="hero" id="top">
      {h.reels && h.reels.length
        ? <HeroReels reels={h.reels} lang={lang} motion={motion} />
        : <Film label={L(h.reel,lang)} showPlay={false} showScrub={true} className="hero-film" />}
      <div className={"hero-inner " + (loaded?"is-loaded":"")}>
        <div className="hero-side">{L(h.reel,lang)}</div>
        <div className="hero-bottom">
          <div className="hero-head">
            <div className="hero-kicker reveal-line"><span>{L(h.kicker,lang)}</span></div>
            <h1 className="hero-h1">
              <span className="reveal-line"><span>{L(h.line1,lang)}</span></span>
              <span className="reveal-line"><span>{L(h.line2a,lang)}</span></span>
              <span className="reveal-line"><span><em>{L(h.line2b,lang)}</em></span></span>
            </h1>
          </div>
          <div className="hero-aside reveal-line">
            <p>{L(h.sub,lang)}</p>
            <button className="btn-terra" onClick={()=>go("#roster")}>{L(h.cta,lang)} <span className="arr">→</span></button>
          </div>
        </div>
        <button className="hero-scroll" onClick={()=>go("#studio")}>
          <span>{L(h.scroll,lang)}</span><span className="hero-scroll-line"></span>
        </button>
      </div>
    </section>
  );
}

/* ---------------- DIVISIONS ---------------- */
// Small overlay card on a division image: talent name, one-liner, Instagram + case-study links.
function TalentCard({ t, lang, go }) {
  const isExternal = /^https?:\/\//.test(t.caseHref || "");
  return (
    <div className="talent-card">
      <div className="talent-role">{L(t.role, lang)}</div>
      <div className="talent-name">{t.name}</div>
      <p className="talent-desc">{L(t.desc, lang)}</p>
      <div className="talent-links">
        {t.instagram && (
          <a className="talent-link" href={t.instagram} target="_blank" rel="noopener noreferrer">
            <svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.8">
              <rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1" fill="currentColor" stroke="none"/>
            </svg>
            Instagram <span className="arr">↗</span>
          </a>
        )}
        {t.caseHref && (isExternal
          ? <a className="talent-link" href={t.caseHref}>{L(t.caseLabel, lang)} <span className="arr">→</span></a>
          : <button className="talent-link" onClick={() => go(t.caseHref)}>{L(t.caseLabel, lang)} <span className="arr">→</span></button>
        )}
      </div>
    </div>
  );
}

function Divisions({ lang, motion, go }) {
  const d = I18N.divisions;
  return (
    <section className="divisions" id="studio">
      <div className="section-head">
        <Reveal motion={motion} className="section-label">{L(d.label,lang)}</Reveal>
        <Reveal motion={motion} delay={80}><h2 className="section-title">{L(d.title,lang)}</h2></Reveal>
      </div>
      <div className="div-list">
        {d.items.map((it, i) => (
          <div className={"div-row " + (i%2 ? "div-row--rev" : "")} key={it.no}>
            <Reveal motion={motion} className="div-media">
              <Portrait caption={L(it.name,lang)} src={it.image} position="center top" showCaption={!it.image} />
              {!it.image && <div className="div-bignum">{it.no}</div>}
              {it.talent && <TalentCard t={it.talent} lang={lang} go={go} />}
            </Reveal>
            <div className="div-body">
              <Reveal motion={motion} className="div-kicker">{L(it.kicker,lang)}</Reveal>
              <Reveal motion={motion} delay={60}><h3 className="div-name">{L(it.name,lang)}</h3></Reveal>
              <Reveal motion={motion} delay={120}><p className="div-lede">{L(it.body,lang)}</p></Reveal>
              <ul className="div-services">
                {it.services.map((s, j) => (
                  <Reveal as="li" motion={motion} delay={160 + j*70} key={j}>
                    <span className="svc-no">{String(j+1).padStart(2,"0")}</span>
                    <span>{L(s,lang)}</span>
                  </Reveal>
                ))}
              </ul>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------------- WHY ---------------- */
function Why({ lang, motion }) {
  const w = I18N.why;
  return (
    <section className="why">
      <Reveal motion={motion} className="section-label why-label">{L(w.label,lang)}</Reveal>
      <div className="why-grid">
        {w.items.map((it, i) => (
          <Reveal motion={motion} delay={i*90} className="why-card" key={i}>
            <div className="why-no">{it.no}</div>
            <h4 className="why-t">{L(it.t,lang)}</h4>
            <p className="why-d">{L(it.d,lang)}</p>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Divisions, Why });