// sections-top.jsx — Nav, Hero, Problem
const {useState:useStateT,useEffect:useEffectT,useRef:useRefT} = React;

/* ---------------------------------------------------------------- NAV */
function Nav({onAudit}){
  const [scrolled,setScrolled]=useStateT(false);
  const [menuOpen,setMenuOpen]=useStateT(false);
  const {t}=useLang();
  useEffectT(()=>{
    const on=()=>setScrolled(window.scrollY>24);
    on(); window.addEventListener("scroll",on,{passive:true});
    return()=>window.removeEventListener("scroll",on);
  },[]);
  const links=[
    [t("nav.product"),"#how"],
    [t("nav.leakage"),"#leakage"],
    [t("nav.integrations"),"#integrations"],
    [t("nav.pricing"),"#pricing"],
    [t("nav.faq"),"#faq"],
  ];
  return (<>
    <header style={{position:"fixed",top:0,left:0,right:0,zIndex:30,
      transition:"all .4s ease"}}>
      <div style={{
        margin:scrolled?"10px auto":"0 auto",maxWidth:"100%",
        transition:"all .45s cubic-bezier(.2,.8,.2,1)"}}>
      <div className="wrap" style={{
        display:"flex",alignItems:"center",justifyContent:"space-between",gap:24,
        maxWidth:scrolled?"var(--maxw)":"100%",
        height:scrolled?62:78,
        background:scrolled?"rgba(247,245,239,.78)":"transparent",
        backdropFilter:scrolled?"blur(16px) saturate(1.3)":"none",
        borderRadius:scrolled?100:0,
        border:scrolled?"1px solid var(--line)":"1px solid transparent",
        boxShadow:scrolled?"0 10px 40px -24px rgba(20,20,22,.5)":"none",
        transition:"all .45s cubic-bezier(.2,.8,.2,1)",
        marginInline:"auto"}}>
        <a href="#top"><Logo size={scrolled?28:34}/></a>
        <nav style={{display:"flex",gap:30,alignItems:"center"}} className="nav-links">
          {links.map(([label,h])=>(
            <a key={h} href={h} style={{fontSize:14.5,fontWeight:500,color:"var(--ink-2)",
              letterSpacing:"-.01em",transition:"color .2s"}}
              onMouseEnter={e=>e.currentTarget.style.color="var(--ink)"}
              onMouseLeave={e=>e.currentTarget.style.color="var(--ink-2)"}>{label}</a>
          ))}
        </nav>
        <div style={{display:"flex",gap:12,alignItems:"center",flexShrink:0}}>
          <LangSwitch/>
          <a href="#" style={{fontSize:14.5,fontWeight:600,color:"var(--ink)",whiteSpace:"nowrap"}} className="signin">{t("nav.signIn")}</a>
          <NavBurger open={false} onClick={()=>setMenuOpen(true)}/>
          <Btn variant="primary" arrow={false} onClick={onAudit}>{t("nav.cta")}</Btn>
        </div>
      </div>
      </div>
    </header>
    <MobileMenu open={menuOpen} onClose={()=>setMenuOpen(false)} links={links}
      ctaLabel={t("nav.cta")} onAudit={onAudit} signinLabel={t("nav.signIn")} langSwitch={<LangSwitch/>}/>
  </>);
}

/* ---------------------------------------------------------------- HERO */
function Hero({onAudit}){
  const {t}=useLang();
  const floatRef=useParallax(0.10);
  return (
    <section id="top" style={{position:"relative",paddingTop:"clamp(150px,17vh,210px)",
      paddingBottom:"clamp(60px,8vh,110px)",overflow:"hidden"}}>
      {/* faint grid + gradient wash */}
      <div aria-hidden="true" style={{position:"absolute",inset:0,zIndex:0,pointerEvents:"none",
        background:"radial-gradient(120% 80% at 80% -10%, rgba(255,255,255,.9), transparent 60%)"}}/>
      <div aria-hidden="true" className="texgrid" style={{position:"absolute",inset:0,zIndex:0,opacity:.5,pointerEvents:"none",transition:"opacity .4s ease",
        backgroundImage:"linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px)",
        backgroundSize:"clamp(48px,6vw,84px) clamp(48px,6vw,84px)",
        maskImage:"radial-gradient(80% 70% at 50% 30%,#000 30%,transparent 80%)"}}/>

      <div className="wrap" style={{position:"relative",zIndex:1}}>
        <Reveal as="div"><span className="eyebrow">{t("hero.eyebrow")}</span></Reveal>
        <h1 className="d-xl" style={{marginTop:22,marginBottom:0}}>
          <ClipLines lines={[t("hero.h1l1"),t("hero.h1l2"),t("hero.h1l3")]} step={100}/>
        </h1>

        <div className="hero-grid" style={{marginTop:"clamp(30px,4vw,54px)",
          display:"grid",gridTemplateColumns:"minmax(0,1fr) minmax(0,.92fr)",
          gap:"clamp(28px,5vw,72px)",alignItems:"end"}}>
          {/* left */}
          <div>
            <Reveal delay={300} className="lead" style={{maxWidth:"44ch"}}>
              {t("hero.lead")}
            </Reveal>
            <Reveal delay={400} style={{marginTop:30,display:"flex",gap:14,flexWrap:"wrap"}}>
              <Btn variant="primary" onClick={onAudit}>{t("hero.ctaPrimary")}</Btn>
              <Btn variant="ghost" href="#how">{t("hero.ctaSecondary")}</Btn>
            </Reveal>
            <Reveal delay={500} style={{marginTop:30,display:"flex",alignItems:"center",gap:14}}>
              <Mono style={{fontSize:12.5,color:"var(--muted)",letterSpacing:".04em",lineHeight:1.6}}>
                {t("hero.tagline")}
              </Mono>
            </Reveal>
          </div>
          {/* right — floating product mock */}
          <div ref={floatRef} style={{willChange:"transform"}}>
            <Reveal delay={250}><DriftMock/></Reveal>
          </div>
        </div>

        {/* stat strip */}
        <Reveal delay={200} style={{marginTop:"clamp(54px,7vw,92px)"}}>
          <div className="hairline" style={{marginBottom:30}}/>
          <div className="stat-strip" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:"clamp(18px,3vw,40px)"}}>
            {[
              ["1.2–4%","hero.stat1Label"],
              [t("hero.stat2Num"),"hero.stat2Label"],
              [t("hero.stat3Num"),"hero.stat3Label"],
              ["100%","hero.stat4Label"],
            ].map(([n,lk],i)=>(
              <div key={i}>
                <div style={{fontFamily:"var(--display)",fontWeight:600,fontSize:"clamp(30px,3.4vw,46px)",
                  letterSpacing:"-.03em",lineHeight:1}}>{n}</div>
                <div style={{marginTop:10,fontSize:14.5,color:"var(--muted)",maxWidth:"22ch",lineHeight:1.4}}>{t(lk)}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* product mockup: a drift finding card */
function DriftMock(){
  const {t}=useLang();
  return (
    <div
      className="card"
      role="region"
      aria-label="Example mockup of SopiSafe drift finding showing Acme Cloud overbilling by €3,240/mo due to rate increases (invoiced €21.60 vs agreed €18.00) and excessive seat counts (billed 138 seats vs contract cap of 120)"
      style={{padding:0,overflow:"hidden",
        boxShadow:"0 50px 90px -50px rgba(20,20,22,.45), 0 14px 30px -20px rgba(20,20,22,.25)"}}
    >
      {/* window bar */}
      <div style={{display:"flex",alignItems:"center",gap:10,padding:"13px 16px",
        borderBottom:"1px solid var(--line)",background:"var(--paper-2)"}}>
        <span style={{display:"flex",gap:6}}>
          {["#e0ddd2","#e0ddd2","#e0ddd2"].map((c,i)=><i key={i} style={{width:9,height:9,borderRadius:9,background:c,display:"block"}}/>)}
        </span>
        <Mono style={{fontSize:11.5,color:"var(--muted)",marginLeft:6}}>app.sopisafe.com / drift / INV-2026-0912</Mono>
      </div>
      <div style={{padding:"20px 20px 22px"}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",gap:12}}>
          <div>
            <Mono style={{fontSize:11,color:"var(--muted)",letterSpacing:".08em"}}>{t("drift.status")}</Mono>
            <div style={{fontFamily:"var(--display)",fontWeight:600,fontSize:21,marginTop:6,letterSpacing:"-.02em"}}>Acme Cloud — Platform seats</div>
          </div>
          <span style={{fontFamily:"var(--mono)",fontSize:11,fontWeight:600,color:"var(--drift)",
            background:"var(--drift-soft)",padding:"6px 10px",borderRadius:8,whiteSpace:"nowrap"}}>RISK 91</span>
        </div>

        {/* compare rows */}
        <div style={{marginTop:18,display:"grid",gap:1,background:"var(--line)",borderRadius:12,overflow:"hidden",border:"1px solid var(--line)"}}>
          {[
            [t("drift.row1Label"),"Order form \xb7 12 Mar 2025","€18.00 / seat",false],
            [t("drift.row2Label"),"INV-2026-0912","€21.60 / seat",true],
            [t("drift.row3Label"),t("drift.row3Sub"),"138",true],
          ].map(([k,sub,v,bad],i)=>(
            <div key={i} style={{display:"grid",gridTemplateColumns:"1fr auto",gap:8,
              padding:"13px 14px",background:"var(--paper)",alignItems:"center"}}>
              <div>
                <div style={{fontWeight:600,fontSize:14}}>{k}</div>
                <Mono style={{fontSize:11,color:"var(--muted)"}}>{sub}</Mono>
              </div>
              <div style={{fontFamily:"var(--mono)",fontWeight:600,fontSize:15,
                color:bad?"var(--drift)":"var(--ink)"}}>{v}</div>
            </div>
          ))}
        </div>

        {/* impact bar */}
        <div style={{marginTop:16,display:"flex",alignItems:"center",justifyContent:"space-between",
          padding:"14px 16px",borderRadius:12,background:"var(--ink)",color:"var(--paper)"}}>
          <div>
            <Mono style={{fontSize:10.5,letterSpacing:".1em",opacity:.6}}>{t("drift.impact")}</Mono>
            <div style={{fontFamily:"var(--display)",fontWeight:600,fontSize:24,marginTop:2,letterSpacing:"-.02em"}}>
              €3,240<span style={{opacity:.55,fontSize:15,fontWeight:500}}>{" "}{t("drift.perMonth")}</span></div>
          </div>
          <span className="btn" style={{background:"var(--paper)",color:"var(--ink)",padding:"10px 15px",fontSize:13.5}}>
            {t("drift.buildCta")}<Arrow/></span>
        </div>
        <div style={{marginTop:14,display:"flex",gap:7,flexWrap:"wrap"}}>
          {["drift.tag1","drift.tag2","drift.tag3","drift.tag4"].map(k=>(
            <span key={k} style={{fontFamily:"var(--mono)",fontSize:10.5,color:"var(--ink-2)",
              border:"1px solid var(--line)",padding:"5px 9px",borderRadius:7}}>{t(k)}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------- PROBLEM (dark) */
function Problem(){
  const {t}=useLang();
  const numRef=useParallax(0.06);
  return (
    <section className="dark on-dark" style={{position:"relative",background:"var(--dark)",
      color:"var(--on-dark)",overflow:"hidden"}}>
      <div aria-hidden="true" style={{position:"absolute",inset:0,
        background:"radial-gradient(90% 60% at 15% 0%, rgba(242,239,231,.06), transparent 55%)"}}/>
      <div className="wrap section" style={{position:"relative"}}>
        <div style={{display:"grid",gridTemplateColumns:"minmax(0,1fr) minmax(0,1fr)",gap:"clamp(36px,6vw,90px)",alignItems:"start"}}
          className="prob-grid">
          <div>
            <Reveal><span className="eyebrow">{t("prob.eyebrow")}</span></Reveal>
            <h2 className="d-lg" style={{marginTop:22,color:"var(--on-dark)"}}>
              <ClipLines lines={[t("prob.heading1"),t("prob.heading2"),t("prob.heading3")]} step={90}/>
            </h2>
            <Reveal delay={300} style={{marginTop:26,fontSize:"clamp(17px,1.4vw,20px)",
              color:"var(--on-dark-muted)",maxWidth:"46ch",lineHeight:1.55}}>
              {t("prob.body")}
            </Reveal>
            <Reveal delay={420} style={{marginTop:30}}>
              <Btn variant="ghost" href="#leakage">{t("prob.cta")}</Btn>
            </Reveal>
          </div>

          {/* live-ish ledger that drifts */}
          <div ref={numRef}>
            <Reveal delay={150}><Ledger/></Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function Ledger(){
  const {t}=useLang();
  const onTerms=t("ledger.onTerms");
  const rows=[
    ["Jan","€18.00 / seat",onTerms,false],
    ["Feb","€18.00 / seat",onTerms,false],
    ["Mar","€19.80 / seat",t("ledger.note1"),true],
    ["Apr","€19.80 / seat",t("ledger.note2"),true],
    ["May","€21.60 / seat",t("ledger.note3"),true],
    ["Jun","€21.60 / seat",t("ledger.note4"),true],
  ];
  const [n,setN]=useStateT(0);
  const [ref,seen]=useInView({threshold:0.4});
  useEffectT(()=>{
    if(!seen) return;
    let i=0; const id=setInterval(()=>{i++;setN(i);if(i>=rows.length)clearInterval(id);},420);
    return()=>clearInterval(id);
  },[seen]);
  return (
    <div
      ref={ref}
      role="region"
      aria-label="Interactive timeline showing how Acme Cloud's rate silently drifted from the agreed €18.00 per seat rate in January and February to €19.80 in March, up to €21.60 and 138 seats in June, resulting in €19,440 of unrecovered cost"
      style={{border:"1px solid var(--line-dark)",borderRadius:14,overflow:"hidden",
        background:"linear-gradient(180deg,var(--dark-2),var(--dark))"}}
    >
      <div style={{display:"flex",justifyContent:"space-between",padding:"15px 18px",borderBottom:"1px solid var(--line-dark)"}}>
        <Mono style={{fontSize:11.5,color:"var(--on-dark-muted)",letterSpacing:".08em"}}>{t("ledger.header")}</Mono>
        <Mono style={{fontSize:11.5,color:"var(--on-dark-muted)"}}>FY26</Mono>
      </div>
      <div>
        {rows.map(([m,rate,note,bad],i)=>{
          const shown=i<n;
          return (
            <div key={i} style={{display:"grid",gridTemplateColumns:"54px 1fr auto",gap:12,alignItems:"center",
              padding:"14px 18px",borderBottom:i<rows.length-1?"1px solid var(--line-dark)":"none",
              opacity:shown?1:0,transform:shown?"none":"translateY(8px)",
              transition:"opacity .5s ease, transform .5s ease",
              background:shown&&bad?"rgba(220,80,50,.06)":"transparent"}}>
              <Mono style={{fontSize:12,color:"var(--on-dark-muted)"}}>{m}</Mono>
              <span style={{fontFamily:"var(--mono)",fontSize:14,fontWeight:600,
                color:bad?"var(--drift)":"var(--on-dark)"}}>{rate}</span>
              <span style={{fontFamily:"var(--mono)",fontSize:11,
                color:bad?"var(--drift)":"var(--on-dark-muted)"}}>{note}</span>
            </div>
          );
        })}
      </div>
      <div style={{padding:"16px 18px",display:"flex",justifyContent:"space-between",alignItems:"center",
        background:"var(--dark-3)"}}>
        <Mono style={{fontSize:11,color:"var(--on-dark-muted)",letterSpacing:".08em"}}>{t("ledger.footer")}</Mono>
        <span style={{fontFamily:"var(--display)",fontWeight:600,fontSize:22,color:"var(--drift)"}}>
          {n>=rows.length? <Counter to={19440} prefix="€"/> : "€—"}</span>
      </div>
    </div>
  );
}

Object.assign(window,{Nav,Hero,Problem,DriftMock,Ledger});