/* Page 1 — Hero (yellow). Bilingual via useLang. Spline + props are language-
   independent so the 3D scene is not remounted on language switch. */

function Page1() {
  const { L, lang } = useLang();
  const t = L.hero;
  return (
    <section id="top" className={`p1-section p1-section--${lang}`} style={{ padding:'120px 0 80px', minHeight:'100vh', display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
      <spline-viewer
        class="p1-spline"
        events-target="global"
        url="https://prod.spline.design/cTchpi7k1mhJAvU3/scene.splinecode?v=2"
        loading-anim-type="none"
        style={{ position:'absolute', inset:0, width:'100%', height:'100%', zIndex:2, background:'transparent' }}
      />
      <div className="wrap" style={{ position:'relative', zIndex:3 }}>
        <div className="p1-meta">
          <span>{t.meta.left}</span>
          <span>{t.meta.mid}</span>
        </div>
      </div>

      <div className="p1-spacer" style={{ flex:1 }} />

      <div className="wrap p1-copy" style={{ position:'relative', zIndex:3 }}>
        <Reveal as="h1" className="display display-hero" style={{ marginBottom:'clamp(24px,3.4vw,44px)' }}>
          {t.title.line1}<br/>{t.title.pre2}<span className="ital" style={{ textTransform:'none' }}>{t.title.accent}</span>
        </Reveal>
        <div className="p1-lede">
          <Reveal className="body-lg text-wrap-pretty" style={{ maxWidth:640 }}>
            {t.sub}
          </Reveal>
          <div className="p1-cta-stack">
            <Reveal delay={120} style={{ display:'flex', flexWrap:'wrap', gap:14, alignItems:'center' }}>
              <CTAButton>{t.cta}</CTAButton>
              <a href="/products.html" className="btn btn--ghost">
                <span>{t.cta2}</span>
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 8h12M9 3l5 5-5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square"/></svg>
              </a>
            </Reveal>
            <Reveal delay={200} className="p1-microcopy">{t.microcopy}</Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Page1 = Page1;