/* Site content sections */

function SectionHeader({eyebrow, title, desc, align="left", light=false}) {
  return <div style={{maxWidth: align==="center"?820:820, margin: align==="center"?"0 auto":0, textAlign:align}}>
    {eyebrow && <Eyebrow color={light?BRAND[300]:BRAND[600]}>{eyebrow}</Eyebrow>}
    <h2 data-section-title style={{fontFamily:"'Fraunces'", fontWeight:300, fontSize:"clamp(40px, 5vw, 68px)", lineHeight:1.02, letterSpacing:"-0.032em", margin:0, color:light?"white":BRAND.ink900}}>{title}</h2>
    {desc && <p style={{fontSize:18, lineHeight:1.55, color:light?BRAND.ink300:BRAND.ink700, maxWidth:640, marginTop:24, marginLeft:align==="center"?"auto":0, marginRight:align==="center"?"auto":0}}>{desc}</p>}
  </div>;
}

function Problem() {
  return <section data-section id="produto" style={{padding:"140px 40px", background:BRAND.paper2, borderBottom:`1px solid ${BRAND.ink200}`}}>
    <div style={{maxWidth:1280, margin:"0 auto"}}>
      <SectionHeader eyebrow="O problema" title="Validação por amostragem deixa risco em cima da mesa."
        desc="Uma carteira típica tem 400+ contratos. Auditoria humana inspeciona 10% a 20%, com evidência em PDFs estáticos. No dia D+30, o problema aparece no balanço."/>
      <div data-grid-3 style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:24, marginTop:72}}>
        {[
          ["01","Amostragem cega","Analista pega aleatoriamente 40 de 400 contratos. Os 360 restantes entram sem parecer. O problema sempre mora onde ninguém olhou."],
          ["02","Evidência estática","PDF do portal do órgão vira screenshot num email. Sem hash, sem timestamp, sem re-verificação. Quando a disputa aparece, a fonte já não existe."],
          ["03","Revisão não escala","Equipe de risco com 3 pessoas não consegue validar 5 mil contratos/mês. Trava pipeline, atrasa cessão, perde janela comercial."],
        ].map(([n,t,d])=>(
          <div data-problem-card key={n} style={{background:"white", border:`1px solid ${BRAND.ink200}`, padding:32, borderRadius:12}}>
            <Mono color={BRAND[600]}>{n}</Mono>
            <div style={{fontFamily:"'Fraunces'", fontWeight:400, fontSize:26, letterSpacing:"-0.02em", lineHeight:1.15, marginTop:16, color:BRAND.ink900}}>{t}</div>
            <p style={{fontSize:14, lineHeight:1.6, color:BRAND.ink700, marginTop:14}}>{d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>;
}

function Solution() {
  return <section data-section id="como" style={{padding:"140px 40px", background:BRAND.paper}}>
    <div style={{maxWidth:1280, margin:"0 auto"}}>
      <SectionHeader eyebrow="Como funciona" title="Determinismo por contrato, não por amostra."
        desc="Você sobe o CNAB. O motor roda 13 validações contra múltiplas fontes — portal do órgão, registradora, base de documentos, histórico do sacado. Cada finding carrega evidência imutável."/>
      <div data-grid-4 style={{marginTop:72, display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:1, background:BRAND.ink200, border:`1px solid ${BRAND.ink200}`, borderRadius:12, overflow:"hidden"}}>
        {[
          ["01","Upload","CNAB 444 pela API ou portal. Reconciliação automática com o arquivo de cessão."],
          ["02","Enrich","Coleta multi-fonte: portais ao vivo, registradoras, documentos do sacado, histórico."],
          ["03","Verificar","13 checks determinísticos por contrato. Regras extraídas de decretos via LLM, aprovadas por compliance."],
          ["04","Parecer","Status por contrato com trilha assinada. Export auditado para gestora, custódia, auditoria externa."],
        ].map(([n,t,d])=>(
          <div data-step-card key={n} style={{background:"white", padding:32, minHeight:280, display:"flex", flexDirection:"column"}}>
            <div style={{fontFamily:"'JetBrains Mono'", fontSize:11, color:BRAND[600], letterSpacing:"0.14em"}}>{n}</div>
            <div style={{fontFamily:"'Fraunces'", fontSize:28, fontWeight:400, letterSpacing:"-0.02em", marginTop:16}}>{t}</div>
            <p style={{fontSize:13.5, lineHeight:1.6, color:BRAND.ink700, marginTop:12, flex:1}}>{d}</p>
            <Mark size={24} color={BRAND[300]}/>
          </div>
        ))}
      </div>

      {/* Validation catalog */}
      <div data-dark-card style={{marginTop:64, background:BRAND.ink950, borderRadius:14, padding:"56px 48px", color:"white", position:"relative", overflow:"hidden"}}>
        <div style={{position:"absolute", inset:0, backgroundImage:`linear-gradient(${BRAND.ink900} 1px, transparent 1px), linear-gradient(90deg, ${BRAND.ink900} 1px, transparent 1px)`, backgroundSize:"64px 64px", opacity:0.4}}/>
        <div data-grid-split style={{position:"relative", display:"grid", gridTemplateColumns:"1fr 1.4fr", gap:64}}>
          <div>
            <Eyebrow color={BRAND[300]}>Motor · 13 validações</Eyebrow>
            <div data-dark-card-title style={{fontFamily:"'Fraunces'", fontSize:44, fontWeight:300, letterSpacing:"-0.025em", lineHeight:1.05}}>
              Cada contrato, <span style={{fontStyle:"italic", fontWeight:400}}>treze provas.</span>
            </div>
            <p style={{fontSize:14.5, lineHeight:1.65, color:BRAND.ink300, marginTop:20, maxWidth:360}}>
              Regras versionadas por convênio, aprovadas por compliance em Prolastro Revisões. Sem caixa-preta — cada check mostra sua fonte, seu critério e seu resultado.
            </p>
          </div>
          <div data-grid-2-inner style={{display:"grid", gridTemplateColumns:"repeat(2,1fr)", gap:"8px 32px", alignContent:"start"}}>
            {[
              "Averbação viva no portal do órgão",
              "Margem consignável do sacado",
              "Teto de taxa por convênio / prazo",
              "Prazo máximo de contrato vs idade",
              "Assinatura eletrônica com ICP-Brasil",
              "Documento de identificação vigente",
              "Histórico de INAPTO no sacado",
              "Duplicidade inter-originadores",
              "Consistência CNAB × PDF × portal",
              "Nome e CPF reconciliados",
              "Elegibilidade do órgão/UF/categoria",
              "Consentimento LGPD registrado",
              "Rubrica correta na folha",
            ].map((l,i)=>(
              <div key={l} style={{display:"flex", gap:14, padding:"10px 0", borderBottom:`1px solid ${BRAND.ink900}`, alignItems:"center"}}>
                <Mono color={BRAND[300]}>{String(i+1).padStart(2,"0")}</Mono>
                <span style={{fontSize:13.5, color:BRAND.ink100}}>{l}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>;
}

function Security() {
  return <section data-section id="seguranca" style={{padding:"140px 40px", background:BRAND.paper2, borderTop:`1px solid ${BRAND.ink200}`, borderBottom:`1px solid ${BRAND.ink200}`}}>
    <div style={{maxWidth:1280, margin:"0 auto"}}>
      <div data-grid-split style={{display:"grid", gridTemplateColumns:"1fr 1.2fr", gap:96, alignItems:"start"}}>
        <div data-sticky style={{position:"sticky", top:100}}>
          <SectionHeader eyebrow="Segurança e conformidade" title="Construído para quem audita e é auditado."
            desc="Todo parecer é assinado, todo dado de sacado é mascarado por default. Reveal exige ação explícita, e toda ação vai para a trilha."/>
        </div>
        <div data-grid-2 style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:1, background:BRAND.ink200, border:`1px solid ${BRAND.ink200}`, borderRadius:12, overflow:"hidden"}}>
          {[
            ["LGPD · by design","CPF mascarado `***.***.***-XX` em todas as telas. Reveal logado com motivo. Consentimento granular por sacado."],
            ["SoD embutido","Analista ≠ aprovador ≠ auditor. Papéis separados no Postgres, políticas Row-Level-Security."],
            ["Evidência imutável","Cada parecer hasheado (SHA-256) e carimbado. Disputa reabre com mesma fonte, mesmo timestamp, mesmo resultado."],
            ["Auditor externo","Acesso read-only com export assinado. Zero fricção em apuração da CVM, B3 ou BACEN."],
            ["Criptografia","TLS 1.3 em trânsito, AES-256 em repouso. Chaves gerenciadas em KMS. Backups cross-region."],
            ["Disponibilidade","SLA 99.9% com dashboard público. Resiliência multi-AZ. RTO 1h, RPO 15min."],
          ].map(([t,d])=>(
            <div key={t} style={{background:"white", padding:28, minHeight:170}}>
              <div style={{fontSize:15, fontWeight:600, color:BRAND.ink900}}>{t}</div>
              <p style={{fontSize:13, lineHeight:1.6, color:BRAND.ink700, marginTop:10}}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>;
}

function Quote() {
  return <section data-quote style={{padding:"140px 40px", background:BRAND.paper}}>
    <div style={{maxWidth:1080, margin:"0 auto"}}>
      <svg width="48" height="36" viewBox="0 0 48 36" fill={BRAND[300]}>
        <path d="M0 36V24c0-9.9 5.1-18.2 15.4-24l4.6 7.2c-6.3 3.4-10.1 7.8-11.4 13.2H20V36H0zm28 0V24c0-9.9 5.1-18.2 15.4-24L48 7.2c-6.3 3.4-10.1 7.8-11.4 13.2H48V36H28z"/>
      </svg>
      <blockquote data-quote-text style={{margin:"28px 0 0", fontFamily:"'Fraunces'", fontWeight:300, fontSize:"clamp(32px, 3.6vw, 48px)", lineHeight:1.2, letterSpacing:"-0.02em", color:BRAND.ink900}}>
        Substituiu três planilhas e duas semanas de reconciliação humana. Em uma carteira de 480 contratos o Prolastro achou <span style={{fontStyle:"italic", fontWeight:400, color:BRAND[600]}}>14 averbações mortas</span> que nossa amostragem anterior nunca pegaria.
      </blockquote>
      <div style={{display:"flex", alignItems:"center", gap:16, marginTop:40, paddingTop:32, borderTop:`1px solid ${BRAND.ink200}`}}>
        <div style={{width:48, height:48, borderRadius:"50%", background:BRAND[600], color:"white", display:"flex", alignItems:"center", justifyContent:"center", fontFamily:"'Inter'", fontWeight:500, fontSize:16}}>RS</div>
        <div>
          <div style={{fontSize:15, fontWeight:600, color:BRAND.ink900}}>Rafael Sampaio</div>
          <div style={{fontSize:13, color:BRAND.ink700}}>Head de Risco · Cedar Capital FIDC</div>
        </div>
      </div>
    </div>
  </section>;
}

function CTA({onPortal}) {
  return <section id="contato" style={{padding:"140px 40px", background:BRAND.ink950, color:"white", position:"relative", overflow:"hidden"}}>
    <div style={{position:"absolute", inset:0, backgroundImage:`linear-gradient(${BRAND.ink900} 1px, transparent 1px), linear-gradient(90deg, ${BRAND.ink900} 1px, transparent 1px)`, backgroundSize:"80px 80px", opacity:0.5}}/>
    <div data-cta-padding data-grid-split style={{position:"relative", maxWidth:1080, margin:"0 auto", display:"grid", gridTemplateColumns:"1.2fr 1fr", gap:80, alignItems:"center"}}>
      <div>
        <Eyebrow color={BRAND[300]}>Fale com o time</Eyebrow>
        <h2 data-cta-title style={{fontFamily:"'Fraunces'", fontWeight:300, fontSize:"clamp(40px, 5vw, 72px)", lineHeight:1, letterSpacing:"-0.032em", margin:0}}>
          Sua próxima cessão<br/>com <span style={{fontStyle:"italic", fontWeight:400, color:BRAND[300]}}>lastro verificado.</span>
        </h2>
        <p style={{fontSize:17, lineHeight:1.6, color:BRAND.ink300, marginTop:28, maxWidth:540}}>
          Demo guiada de 30 minutos com dados fictícios. Trazemos um exemplo de carteira e mostramos findings reais que o motor acharia.
        </p>
        <div data-button-row style={{display:"flex", gap:14, marginTop:40, flexWrap:"wrap"}}>
          <Button kind="negative" size="lg" href="mailto:demo@prolastro.com.br">Agendar demo</Button>
          <Button kind="outline" size="lg" onClick={onPortal}><span style={{color:"white"}}>Já sou cliente — portal →</span></Button>
        </div>
      </div>
      <div data-cta-card style={{background:"rgba(255,255,255,0.04)", border:`1px solid ${BRAND.ink900}`, borderRadius:12, padding:32}}>
        <Mono color={BRAND[300]}>Contato · São Paulo</Mono>
        <div style={{marginTop:24, display:"flex", flexDirection:"column", gap:18}}>
          {[["Comercial","comercial@prolastro.com.br"],["Suporte","suporte@prolastro.com.br"],["Imprensa","press@prolastro.com.br"],["Segurança","security@prolastro.com.br"]].map(([l,e])=>(
            <div key={l} style={{display:"flex", justifyContent:"space-between", alignItems:"center", paddingBottom:14, borderBottom:`1px solid ${BRAND.ink900}`}}>
              <span style={{fontSize:13, color:BRAND.ink300}}>{l}</span>
              <Mono color="white">{e}</Mono>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>;
}

Object.assign(window, { Problem, Solution, Security, Quote, CTA });