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

/* ---------------- NAV ---------------- */
function Nav({ lang, setLang, scrolled, go, open, setOpen }) {
  const n = I18N.nav;
  const items = [["roster","#roster"],["studio","#studio"],["cases","#cases"],["journal","route:journal"],["contact","#contact"],["join","route:join"]];
  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">
        <button className="lang-toggle" onClick={()=>setLang(lang==="en"?"es":"en")}>
          <span className={lang==="en"?"on":""}>EN</span>
          <span className="sep">/</span>
          <span className={lang==="es"?"on":""}>ES</span>
        </button>
        <button className={"nav-burger " + (open?"is-open":"")} onClick={()=>setOpen(!open)} aria-label="Menu">
          <span></span><span></span>
        </button>
      </div>
    </header>
  );
}

/* ---------------- HERO ---------------- */
function Hero({ lang, go }) {
  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">
      <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)}<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 ---------------- */
function Divisions({ lang, motion }) {
  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)} />
              <div className="div-bignum">{it.no}</div>
            </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 });