// ===== Sobre / Contato =====

function ScreenSobre() {
  return (
    <div className="min-h-full bg-surface-1">
      <nav className="sticky top-0 z-10 border-b border-pleita-line/60 bg-pleita-paper/85 backdrop-blur">
        <div className="max-w-7xl mx-auto px-6 md:px-10 h-16 flex items-center justify-between">
          <Logo size={22} />
          <div className="hidden md:flex items-center gap-7 text-sm text-pleita-stone">
            <a className="text-pleita-ink font-medium">Sobre</a>
            <a className="hover:text-pleita-ink">Preços</a>
            <a className="hover:text-pleita-ink">Blog</a>
            <a className="hover:text-pleita-ink">Legal</a>
          </div>
          <div className="flex items-center gap-2">
            <PleitaButton variant="ghost" size="sm">Entrar</PleitaButton>
            <PleitaButton size="sm">Começar grátis</PleitaButton>
          </div>
        </div>
      </nav>

      {/* Hero manifesto */}
      <section className="relative overflow-hidden" style={{ background: "linear-gradient(135deg, rgb(var(--pleita-ink)), rgb(var(--pleita-ink-2)))" }}>
        <div aria-hidden className="absolute -right-40 top-0 size-[500px] rounded-full" style={{ background: "rgb(159 232 112 / .10)" }} />
        <div className="max-w-7xl mx-auto px-6 md:px-10 py-20 md:py-28 relative">
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-lime mb-4">Manifesto · 2024</div>
          <h1 className="font-display text-pleita-paper leading-[1.05] max-w-4xl" style={{ fontSize: "clamp(40px, 6vw, 76px)" }}>
            O governo brasileiro compra <span className="text-pleita-lime">R$ 1,8 trilhão</span> por ano.<br />
            A maioria dos PMEs nem sabe disso<span className="text-pleita-lime">.</span>
          </h1>
          <p className="text-pleita-paper/70 text-lg mt-7 max-w-2xl leading-relaxed">
            A Pleita existe pra mudar esse mapa. Não basta digitalizar editais — é preciso traduzir, decidir e participar. É isso que nossos 6 agentes fazem por você, todo dia.
          </p>
        </div>
      </section>

      <div className="max-w-7xl mx-auto px-6 md:px-10 py-20 space-y-24">
        {/* Números */}
        <section className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-10">
          {[
            { v: "1.240+", l: "empresas usando hoje" },
            { v: "R$ 4,8M", l: "em contratos ganhos pelos clientes em 2026" },
            { v: "31%",    l: "dos iniciantes vencem em 90 dias" },
            { v: "23h",    l: "economizadas por edital" },
          ].map((s) => (
            <div key={s.l}>
              <div className="pl-num font-semibold text-pleita-ink leading-none" style={{ fontSize: "clamp(32px, 4vw, 56px)" }}>{s.v}</div>
              <div className="text-sm text-pleita-stone mt-3 leading-snug">{s.l}</div>
            </div>
          ))}
        </section>

        {/* Por que */}
        <section className="grid md:grid-cols-2 gap-16 items-center">
          <div>
            <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Nossa missão</div>
            <h2 className="font-display text-3xl md:text-4xl text-pleita-ink leading-tight">Democratizar o acesso ao maior mercado do Brasil<span className="text-pleita-lime">.</span></h2>
            <p className="text-pleita-stone mt-5 leading-relaxed">
              90% das licitações públicas são ganhas pelos mesmos 5% das empresas — não porque elas vendem melhor, mas porque <strong className="text-pleita-ink">entendem o jogo</strong>. Conhecem certidões, prazos, juridiquês, gestão de risco.
            </p>
            <p className="text-pleita-stone mt-3 leading-relaxed">
              A Pleita é a IA que iguala essa balança. Padaria, distribuidora, agência de TI, pequena construtora — todos com o mesmo "departamento licitatório" de um escritório de R$ 10 mil/mês.
            </p>
          </div>
          <div className="rounded-[10px] overflow-hidden border border-pleita-line bg-surface-2/40 aspect-[4/3] grid place-items-center p-10">
            <div className="text-center">
              <div className="text-7xl mb-4">🇧🇷</div>
              <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2">Sede</div>
              <div className="font-display text-2xl text-pleita-ink mt-1">São Paulo, Brasil</div>
              <div className="pl-num text-xs text-pleita-stone-2 mt-2">Av. Paulista, 1842 · Bela Vista · 01310-100</div>
            </div>
          </div>
        </section>

        {/* Valores */}
        <section>
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Como trabalhamos</div>
          <h2 className="font-display text-3xl text-pleita-ink mb-10 leading-tight">Cinco compromissos<span className="text-pleita-lime">.</span></h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
            {[
              ["🗣", "Falamos PT-BR claro", "Juridiquês existe? Traduzimos. Sempre."],
              ["🇧🇷", "Brasil first",       "Infra, suporte, time, dados — tudo aqui."],
              ["🔍", "Sem caixas-pretas",   "Mostramos como a IA chegou em cada decisão."],
              ["🤝", "Você no controle",   "Toda saída do robô tem revisão humana embutida."],
              ["💚", "LGPD nativo",        "Não é adesivo. É arquitetura desde o dia 1."],
            ].map(([i, t, d]) => (
              <article key={t} className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm">
                <div className="text-2xl mb-3">{i}</div>
                <div className="font-display text-base text-pleita-ink">{t}</div>
                <p className="text-xs text-pleita-stone mt-1 leading-snug">{d}</p>
              </article>
            ))}
          </div>
        </section>

        {/* Time */}
        <section>
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Time</div>
          <h2 className="font-display text-3xl text-pleita-ink mb-10 leading-tight">Quem está construindo<span className="text-pleita-lime">.</span></h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[
              { ini: "AB", n: "Anderson Bezerra",       cargo: "CEO · ex-Stone",                  bio: "Construiu 3 fintechs antes da Pleita." },
              { ini: "CL", n: "Carolina Lima",          cargo: "CTO · ex-Nubank",                 bio: "Lidera plataforma e arquitetura LGPD." },
              { ini: "RS", n: "Ricardo Sá",             cargo: "Head de IA · ex-iFood, USP",      bio: "10 anos em sistemas multi-agentes." },
              { ini: "JP", n: "Juliana Prado",          cargo: "Jurídico · ex-Vinhas Advogados",  bio: "Especialista em licitações há 12 anos." },
              { ini: "MS", n: "Marcos Salim",           cargo: "Head Vendas · ex-Conta Azul",     bio: "Tudo sobre PMEs brasileiras." },
              { ini: "DM", n: "Daniela Matos",          cargo: "Design · ex-Loft",                bio: "Defende a clareza ferozmente." },
              { ini: "PV", n: "Pedro Vargas",           cargo: "Suporte · ex-Resultados Digitais", bio: "Responde no WhatsApp em 3 min." },
              { ini: "AC", n: "Ana Castro",             cargo: "Marketing · ex-Hotmart",          bio: "Conta as histórias de quem ganha." },
            ].map((p) => (
              <article key={p.ini} className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm">
                <span className="size-12 rounded-full bg-pleita-ink text-pleita-paper grid place-items-center pl-num text-base font-semibold">{p.ini}</span>
                <div className="mt-3 font-display text-base text-pleita-ink">{p.n}</div>
                <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">{p.cargo}</div>
                <p className="text-xs text-pleita-stone mt-2 leading-snug">{p.bio}</p>
              </article>
            ))}
          </div>
        </section>

        {/* Investors / press */}
        <section className="grid md:grid-cols-2 gap-6">
          <div className="rounded-[10px] bg-surface-card border border-pleita-line p-6 shadow-pl-sm">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">Investidores</div>
            <ul className="space-y-2 text-sm text-pleita-stone">
              <li>🌱 <strong className="text-pleita-ink">Canary</strong> — pre-seed 2024</li>
              <li>🚀 <strong className="text-pleita-ink">Maya Capital</strong> — seed 2025</li>
              <li>🇧🇷 <strong className="text-pleita-ink">Bossanova</strong> — co-investidor</li>
              <li>👥 <strong className="text-pleita-ink">10 angels</strong> — operadores de SaaS e GovTech</li>
            </ul>
          </div>
          <div className="rounded-[10px] bg-surface-card border border-pleita-line p-6 shadow-pl-sm">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">Imprensa</div>
            <ul className="space-y-2 text-sm text-pleita-stone">
              <li>📰 <strong className="text-pleita-ink">Folha de S.Paulo</strong> — "IA para licitar" · mar/2026</li>
              <li>🎙 <strong className="text-pleita-ink">Startup Talks</strong> · ep. 142 · fev/2026</li>
              <li>📺 <strong className="text-pleita-ink">CBN</strong> — quadro GovTech Brasil · jan/2026</li>
            </ul>
          </div>
        </section>

        {/* Contato */}
        <section className="rounded-[10px] overflow-hidden relative" style={{ background: "rgb(var(--pleita-ink))" }}>
          <div aria-hidden className="absolute -right-20 -top-20 size-72 rounded-full" style={{ background: "rgb(159 232 112 / .12)" }} />
          <div className="relative p-10 md:p-14 grid md:grid-cols-2 gap-10 text-pleita-paper">
            <div>
              <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-lime mb-3">Contato</div>
              <h2 className="font-display text-3xl md:text-4xl text-pleita-paper leading-tight">Fale com a gente<span className="text-pleita-lime">.</span></h2>
              <ul className="space-y-3 mt-7 text-pleita-paper/80 text-sm">
                <li>💚 <strong className="text-pleita-paper">WhatsApp</strong> · (11) 9 1234-5678 · 8h–22h</li>
                <li>📧 <strong className="text-pleita-paper">E-mail</strong> · ola@pleita.pro</li>
                <li>🔐 <strong className="text-pleita-paper">LGPD</strong> · dpo@pleita.pro</li>
                <li>📞 <strong className="text-pleita-paper">Imprensa</strong> · press@pleita.pro</li>
                <li>📍 <strong className="text-pleita-paper">Sede</strong> · Av. Paulista 1842, sl. 504 · São Paulo/SP</li>
              </ul>
            </div>
            <form className="space-y-3" onSubmit={(e) => e.preventDefault()}>
              <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-lime">Envie sua mensagem</div>
              <input placeholder="Seu nome" className="w-full rounded-md bg-pleita-paper/10 border border-pleita-paper/20 px-3 py-2.5 text-sm text-pleita-paper placeholder:text-pleita-paper/40 outline-none focus:border-pleita-lime" />
              <input placeholder="E-mail" type="email" className="w-full rounded-md bg-pleita-paper/10 border border-pleita-paper/20 px-3 py-2.5 text-sm text-pleita-paper placeholder:text-pleita-paper/40 outline-none focus:border-pleita-lime" />
              <select className="w-full rounded-md bg-pleita-paper/10 border border-pleita-paper/20 px-3 py-2.5 text-sm text-pleita-paper outline-none focus:border-pleita-lime">
                <option className="text-pleita-ink">Quero entender o produto</option>
                <option className="text-pleita-ink">Suporte com minha conta</option>
                <option className="text-pleita-ink">Parceria / Imprensa</option>
                <option className="text-pleita-ink">LGPD</option>
              </select>
              <textarea rows="4" placeholder="Sua mensagem…" className="w-full rounded-md bg-pleita-paper/10 border border-pleita-paper/20 px-3 py-2.5 text-sm text-pleita-paper placeholder:text-pleita-paper/40 outline-none focus:border-pleita-lime resize-none" />
              <button className="w-full pl-num text-xs px-4 py-3 rounded-md bg-pleita-lime text-pleita-ink font-semibold">Enviar →</button>
            </form>
          </div>
        </section>
      </div>
    </div>
  );
}

window.ScreenSobre = ScreenSobre;