/* Site navigation + hero + footer */

function Nav({ onPortal }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", h); return () => window.removeEventListener("scroll", h);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
  }, [menuOpen]);
  const navLinks = [["Produto","#produto"],["Como funciona","#como"],["Segurança","#seguranca"],["Clientes","#clientes"],["Empresa","#empresa"]];
  return <>
    <nav data-nav style={{
    position:"sticky", top:0, zIndex:50, height:64,
    background: scrolled ? "rgba(251,250,247,0.88)" : "transparent",
    backdropFilter: scrolled ? "saturate(140%) blur(12px)" : "none",
    borderBottom: scrolled ? `1px solid ${BRAND.ink200}` : "1px solid transparent",
    transition:"all 200ms cubic-bezier(0.2,0,0,1)",
    display:"flex", alignItems:"center", padding:"0 40px",
  }}>
    <a href="#top" style={{textDecoration:"none"}}><Lockup size={26}/></a>
    <div data-nav-center style={{flex:1, display:"flex", justifyContent:"center", gap:40}}>
      {navLinks.map(([l,h])=>(
        <a key={l} href={h} style={{fontFamily:"'Inter'", fontSize:13.5, color:BRAND.ink700, textDecoration:"none", fontWeight:500}}>{l}</a>
      ))}
    </div>
    <div style={{flex:1, display:"flex", justifyContent:"flex-end", gap:12, alignItems:"center"}}>
      <span data-nav-cta-secondary><Button kind="ghost" size="sm" href="#contato">Falar com time</Button></span>
      <span data-desktop-only><Button kind="dark" size="sm" onClick={onPortal}>
        Acessar portal
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{marginLeft:4}}>
          <path d="M5 12h14M13 5l7 7-7 7"/>
        </svg>
      </Button></span>
      <button data-mobile-only onClick={()=>setMenuOpen(true)} aria-label="Abrir menu" style={{display:"none", background:"none", border:"none", padding:8, cursor:"pointer"}}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={BRAND.ink900} strokeWidth="2" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
      </button>
    </div>
  </nav>
  <div data-mobile-menu data-open={menuOpen}>
    <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:16}}>
      <Lockup size={26}/>
      <button onClick={()=>setMenuOpen(false)} aria-label="Fechar" style={{background:"none", border:"none", padding:8, cursor:"pointer"}}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={BRAND.ink900} strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6l-12 12"/></svg>
      </button>
    </div>
    {navLinks.map(([l,h])=>(
      <a key={l} href={h} className="mm-link" onClick={()=>setMenuOpen(false)}>{l}</a>
    ))}
    <div style={{marginTop:24, display:"flex", flexDirection:"column", gap:12}}>
      <Button kind="primary" size="lg" href="#contato" onClick={()=>setMenuOpen(false)}>Agendar demo</Button>
      <Button kind="outline" size="lg" onClick={(e)=>{setMenuOpen(false); onPortal(e);}}>Acessar portal →</Button>
    </div>
  </div>
  </>;
}

function Hero({ onPortal }) {
  return <section id="top" style={{position:"relative", overflow:"hidden", background:BRAND.paper, paddingBottom:120}}>
    <div style={{position:"absolute", inset:0, backgroundImage:`linear-gradient(${BRAND.ink200} 1px, transparent 1px), linear-gradient(90deg, ${BRAND.ink200} 1px, transparent 1px)`, backgroundSize:"80px 80px", opacity:0.35, maskImage:"linear-gradient(to bottom, black 20%, transparent 95%)", WebkitMaskImage:"linear-gradient(to bottom, black 20%, transparent 95%)"}}/>
    <div data-hero-padding style={{position:"relative", maxWidth:1280, margin:"0 auto", padding:"112px 40px 0"}}>
      <div data-grid-hero style={{display:"grid", gridTemplateColumns:"1.35fr 1fr", gap:80, alignItems:"start"}}>
        <div>
          <Eyebrow>Infra de verificação de lastro · FIDC</Eyebrow>
          <h1 data-hero-title style={{
            fontFamily:"'Fraunces',serif", fontWeight:300, margin:0,
            fontSize:"clamp(52px, 6.6vw, 108px)", lineHeight:0.94, letterSpacing:"-0.038em",
            color:BRAND.ink900,
          }}>
            Pare de validar<br/>lastro por <span style={{fontStyle:"italic", fontWeight:400, color:BRAND[600]}}>amostragem.</span>
          </h1>
          <p style={{fontSize:20, lineHeight:1.55, color:BRAND.ink700, maxWidth:560, marginTop:36}}>
            Prolastro é a camada determinística que verifica 100% dos contratos de uma carteira de consignado público — com evidência multi-fonte, trilha assinada e parecer por contrato em minutos.
          </p>
          <div data-button-row style={{display:"flex", gap:14, marginTop:40, flexWrap:"wrap"}}>
            <Button kind="primary" size="lg" href="#contato">Agendar demo</Button>
            <Button kind="outline" size="lg" onClick={onPortal}>Acessar portal do cliente →</Button>
          </div>
          <div data-hero-stats style={{display:"flex", gap:40, marginTop:64, paddingTop:32, borderTop:`1px solid ${BRAND.ink200}`}}>
            {[["13","validações por contrato"],["100%","da carteira auditada"],["≤ 4 min","por 500 contratos"]].map(([n,l])=>(
              <div key={l}>
                <div data-stat-num style={{fontFamily:"'Fraunces'", fontSize:36, fontWeight:400, letterSpacing:"-0.025em", color:BRAND.ink900}}>{n}</div>
                <div style={{fontSize:12.5, color:BRAND.ink500, marginTop:4, maxWidth:140, lineHeight:1.4}}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <HeroCard/>
      </div>
    </div>
  </section>;
}

function HeroCard() {
  // Mock "parecer" product card
  return <div data-hero-card style={{
    background:"white", border:`1px solid ${BRAND.ink200}`, borderRadius:14,
    boxShadow:"0 30px 60px rgba(14,17,24,0.08), 0 10px 20px rgba(14,17,24,0.04)",
    overflow:"hidden", marginTop:20,
  }}>
    <div style={{padding:"14px 18px", borderBottom:`1px solid ${BRAND.ink200}`, display:"flex", alignItems:"center", justifyContent:"space-between", background:BRAND.paper2}}>
      <div style={{display:"flex", gap:8, alignItems:"center"}}>
        <Mark size={16}/>
        <Mono muted>Análise CA-2026-04-412 · consignado INSS</Mono>
      </div>
      <div style={{fontFamily:"'JetBrains Mono'", fontSize:10, padding:"2px 8px", borderRadius:4, background:"oklch(0.94 0.08 155)", color:"oklch(0.36 0.12 155)", letterSpacing:"0.08em"}}>APTO</div>
    </div>
    <div style={{padding:24}}>
      <div style={{display:"grid", gridTemplateColumns:"auto 1fr", gap:"4px 16px", alignItems:"baseline"}}>
        <div data-hero-card-big-num style={{fontFamily:"'Fraunces'", fontSize:72, fontWeight:300, letterSpacing:"-0.03em", color:BRAND.ink900, lineHeight:0.9}}>85<span style={{fontSize:36, color:BRAND.ink500}}>%</span></div>
        <div>
          <div style={{fontSize:13, fontWeight:500}}>Taxa de aprovação</div>
          <div style={{fontSize:12, color:BRAND.ink500, marginTop:2}}>346 de 408 contratos aptos</div>
        </div>
      </div>
      <div style={{marginTop:20, height:6, borderRadius:3, background:BRAND.ink100, overflow:"hidden", display:"flex"}}>
        <div style={{width:"85%", background:"oklch(0.52 0.14 155)"}}/>
      </div>
    </div>
    <div style={{borderTop:`1px solid ${BRAND.ink200}`, padding:"0 24px"}}>
      {[
        ["Averbação viva no portal","13/13","ok"],
        ["Margem consignável respeitada","13/13","ok"],
        ["Taxa dentro do teto do órgão","12/13","warn"],
        ["Contrato assinado eletronicamente","13/13","ok"],
        ["Documentos do sacado vigentes","13/13","ok"],
      ].map(([l,v,s],i,a)=>(
        <div key={l} style={{display:"flex", alignItems:"center", padding:"12px 0", borderBottom: i<a.length-1?`1px solid ${BRAND.ink100}`:"none", gap:12}}>
          <div style={{width:8, height:8, borderRadius:"50%", background: s==="ok"?"oklch(0.6 0.14 155)":s==="warn"?"oklch(0.7 0.15 80)":"oklch(0.6 0.18 25)"}}/>
          <div style={{flex:1, fontSize:13}}>{l}</div>
          <Mono muted>{v}</Mono>
        </div>
      ))}
    </div>
    <div style={{padding:"14px 24px", borderTop:`1px solid ${BRAND.ink200}`, background:BRAND.paper2, display:"flex", justifyContent:"space-between", alignItems:"center"}}>
      <Mono muted>hash  0xa3f…b21e · 2026-04-21 14:22</Mono>
      <Mono color={BRAND[600]}>Ver parecer →</Mono>
    </div>
  </div>;
}

function Clients() {
  return <section data-clients id="clientes" style={{padding:"64px 40px", background:BRAND.paper, borderTop:`1px solid ${BRAND.ink200}`, borderBottom:`1px solid ${BRAND.ink200}`}}>
    <div style={{maxWidth:1280, margin:"0 auto"}}>
      <div style={{fontFamily:"'JetBrains Mono'", fontSize:11, letterSpacing:"0.16em", textTransform:"uppercase", color:BRAND.ink500, textAlign:"center", marginBottom:32}}>
        Usado por risco de FIDC · originadores · auditores independentes
      </div>
      <div data-clients-grid style={{display:"grid", gridTemplateColumns:"repeat(6, 1fr)", gap:48, alignItems:"center", opacity:0.72}}>
        {["Cedar Capital","Pátria Crédito","Valor FIDC","Atlântico","Norte Originadora","Audita"].map(n=>(
          <div key={n} style={{fontFamily:"'Fraunces'", fontSize:17, fontWeight:500, letterSpacing:"-0.01em", color:BRAND.ink700, textAlign:"center"}}>{n}</div>
        ))}
      </div>
    </div>
  </section>;
}

function Footer() {
  return <footer data-footer style={{background:BRAND.ink950, color:BRAND.ink300, padding:"88px 40px 48px"}}>
    <div style={{maxWidth:1280, margin:"0 auto"}}>
      <div data-footer-grid style={{display:"grid", gridTemplateColumns:"1.4fr repeat(4, 1fr)", gap:48, paddingBottom:56, borderBottom:`1px solid ${BRAND.ink900}`}}>
        <div>
          <Lockup size={28} color="white" symbolColor={BRAND[300]}/>
          <p style={{fontSize:13.5, lineHeight:1.6, color:BRAND.ink300, marginTop:20, maxWidth:320}}>
            A favor do lastro. Infra de verificação para FIDCs de crédito consignado público.
          </p>
          <div style={{marginTop:24, display:"flex", gap:12}}>
            <a href="#" style={{padding:"8px 12px", border:`1px solid ${BRAND.ink700}`, borderRadius:6, fontSize:12, color:BRAND.ink300, textDecoration:"none", fontFamily:"'JetBrains Mono'", letterSpacing:"0.04em"}}>LinkedIn</a>
          </div>
        </div>
        {[
          ["Produto",["Motor de validação","Convênios","Sacados","Monitoramento","Portal do cliente"]],
          ["Empresa",["Sobre","Clientes","Carreiras","Imprensa"]],
          ["Recursos",["Documentação","Segurança","Status","Changelog"]],
          ["Legal",["Termos","Privacidade","LGPD","DPA"]],
        ].map(([t,items])=>(
          <div key={t}>
            <div style={{fontFamily:"'JetBrains Mono'", fontSize:10.5, letterSpacing:"0.14em", color:BRAND.ink500, textTransform:"uppercase", marginBottom:16}}>{t}</div>
            {items.map(i=>(
              <a key={i} href="#" style={{display:"block", fontSize:13.5, color:BRAND.ink300, textDecoration:"none", padding:"5px 0"}}>{i}</a>
            ))}
          </div>
        ))}
      </div>
      <div data-footer-bottom style={{display:"flex", justifyContent:"space-between", paddingTop:32, fontSize:12, color:BRAND.ink500}}>
        <Mono muted>© 2026 Prolastro · CNPJ 00.000.000/0001-00 · São Paulo, BR</Mono>
        <Mono muted>v1.0 · prolastro.com.br</Mono>
      </div>
    </div>
  </footer>;
}

Object.assign(window, { Nav, Hero, Clients, Footer });