// ===== Landing screen =====
function ScreenLanding() {
  return (
    <div className="bg-pleita-paper text-pleita-stone min-h-full">
      {/* Nav */}
      <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="hover:text-pleita-ink">Como funciona</a>
            <a className="hover:text-pleita-ink">Para iniciantes</a>
            <a className="hover:text-pleita-ink">Para profissionais</a>
            <a className="hover:text-pleita-ink">Preços</a>
            <a className="hover:text-pleita-ink">Blog</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 */}
      <section className="relative overflow-hidden pl-grain">
        <div className="absolute top-6 left-1/2 -translate-x-1/2 size-2 rounded-full bg-pleita-lime" />
        <div className="max-w-7xl mx-auto px-6 md:px-10 pt-20 pb-24 grid md:grid-cols-12 gap-12 items-center">
          <div className="md:col-span-7">
            <span className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 inline-flex items-center gap-2">
              <span className="size-1.5 rounded-full bg-pleita-lime" /> SaaS de licitações com IA · LGPD nativa
            </span>
            <h1 className="font-display font-medium text-5xl md:text-6xl text-pleita-ink mt-5 leading-[1.05] tracking-tight">
              A Pleita pleiteia<br/>por você<span className="text-pleita-lime">.</span>
            </h1>
            <p className="text-lg text-pleita-stone mt-6 max-w-xl leading-relaxed">
              Time de IAs especialistas que monitora editais, decide o que vale a pena e prepara sua participação. Você foca no negócio.
            </p>
            <div className="flex flex-wrap items-center gap-3 mt-8">
              <PleitaButton size="lg">Começar grátis · 14 dias sem cartão</PleitaButton>
              <PleitaButton variant="ghost" size="lg">Ver demonstração ↗</PleitaButton>
            </div>
            <div className="pl-num text-xs text-pleita-stone-2 mt-6">
              ✦ +1.240 empresas · ⏱ 23 horas economizadas por edital · 🏆 31% dos iniciantes vencem em 90 dias
            </div>
          </div>

          {/* Comitê dos 6 agentes — escada */}
          <div className="md:col-span-5 relative h-[440px]">
            {Object.values(AGENTS).map((a, i) => (
              <div
                key={a.key}
                className={`absolute rounded-2xl bg-surface-card border ${a.border} p-4 shadow-pl-md w-[280px]`}
                style={{ top: i * 56, left: i * 24, zIndex: i }}
              >
                <div className="flex items-center gap-3">
                  <div className="size-10 rounded-xl bg-surface-2 grid place-items-center text-xl">{a.emoji}</div>
                  <div className="flex-1 min-w-0">
                    <div className="font-display font-medium text-pleita-ink text-sm">{a.name}</div>
                    <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">{a.model}</div>
                  </div>
                  <span className="pl-num text-xs px-2 py-0.5 rounded-full bg-pleita-lime/30 text-pleita-ink font-semibold">
                    {[94, 88, 91, 86, 97, 92][i]}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Prova social */}
      <section className="border-y border-pleita-line bg-pleita-paper-2/40 py-8">
        <div className="max-w-7xl mx-auto px-6 md:px-10 flex flex-wrap items-center justify-between gap-6">
          <span className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2">+1.240 empresas economizaram 23h por edital</span>
          <div className="flex items-center gap-8 text-pleita-stone-2 font-display text-sm">
            <span>Sebrae</span><span>Fecomércio</span><span>Junta Comercial</span><span>ConfeaCAU</span><span>FIESP</span>
          </div>
        </div>
      </section>

      {/* Tira o medo */}
      <section className="max-w-7xl mx-auto px-6 md:px-10 py-20">
        <SectionHeader
          eyebrow="Para quem nunca licitou"
          title="Nunca vendeu pro governo? A Pleita te leva da primeira proposta ao primeiro contrato."
        />
        <div className="grid md:grid-cols-3 gap-4">
          {[
            { ico: "📍", t: "Onde buscar cada documento", d: "Linkamos direto pro emissor — receita, junta, prefeitura. Você não precisa saber tudo." },
            { ico: "🗓️", t: "Acompanha cada prazo",        d: "Avisamos com 7 dias de antecedência. Edital novo, sessão de pregão, recurso." },
            { ico: "🎓", t: "Coach explica em PT-BR claro", d: "BDI, ARP, ETP — o Coach traduz o juridiquês quando você precisar." },
          ].map((c) => (
            <article key={c.t} className="rounded-2xl bg-surface-card border border-pleita-line p-7 hover:shadow-pl-md transition-shadow">
              <div className="size-11 rounded-xl bg-pleita-paper-2 grid place-items-center text-2xl">{c.ico}</div>
              <h3 className="font-display font-medium text-lg text-pleita-ink mt-4">{c.t}</h3>
              <p className="text-sm text-pleita-stone mt-2 leading-relaxed">{c.d}</p>
            </article>
          ))}
        </div>
      </section>

      {/* Os 6 agentes */}
      <section className="bg-pleita-paper-2/30 border-y border-pleita-line">
        <div className="max-w-7xl mx-auto px-6 md:px-10 py-20">
          <SectionHeader
            eyebrow="O comitê dos 6"
            title="Seis agentes IA que decidem juntos."
            description="Cada um lê o edital sob a sua ótica. O Coach junta tudo num veredito 🟢🟡🔴."
          />
          <div className="grid md:grid-cols-3 gap-4">
            {Object.values(AGENTS).map((a) => (
              <AgentCard key={a.key} agentKey={a.key} highlight={a.key === "coach"} />
            ))}
          </div>
        </div>
      </section>

      {/* Como funciona */}
      <section className="max-w-7xl mx-auto px-6 md:px-10 py-20">
        <SectionHeader eyebrow="Em 3 passos" title="Como funciona" />
        <div className="grid md:grid-cols-3 gap-6">
          {[
            ["1", "Conecte sua empresa", "CNPJ, certidões, atestados. Em 4 minutos a Pleita conhece sua operação."],
            ["2", "A Pleita decide o que vale", "O comitê analisa cada edital novo. Veredito 🟢🟡🔴 + 3 motivos."],
            ["3", "Você ganha mais com menos", "Peças jurídicas, checklist de habilitação, kanban. Tudo num lugar."],
          ].map(([n, t, d]) => (
            <article key={n} className="relative">
              <div className="pl-num text-6xl font-medium text-pleita-lime/40 leading-none">{n}</div>
              <h3 className="font-display font-medium text-xl text-pleita-ink mt-3">{t}</h3>
              <p className="text-sm text-pleita-stone mt-2 leading-relaxed">{d}</p>
            </article>
          ))}
        </div>
      </section>

      {/* Pricing */}
      <section className="max-w-7xl mx-auto px-6 md:px-10 py-20">
        <SectionHeader eyebrow="Preços" title="Comece pequeno. Cresça quando vencer." />
        <div className="grid md:grid-cols-4 gap-3">
          {[
            { ico: "🌱", n: "Primeira Licitação", p: 49,   d: "Para o MEI que nunca participou." },
            { ico: "🚀", n: "Em Marcha",          p: 197,  d: "Até 5 editais/mês ativos.", popular: true },
            { ico: "🏆", n: "Veterano",           p: 497,  d: "Multi-usuário · BI competitivo." },
            { ico: "💼", n: "Assessoria",         p: 1497, d: "White-label · multi-cliente." },
          ].map((tier) => (
            <article key={tier.n} className={`rounded-2xl border p-6 ${tier.popular ? "bg-pleita-ink text-pleita-paper border-pleita-ink" : "bg-surface-card border-pleita-line"}`}>
              {tier.popular && <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded-full bg-pleita-lime text-pleita-ink font-semibold">Mais popular</span>}
              <div className="text-2xl mt-3">{tier.ico}</div>
              <h3 className={`font-display font-medium text-lg mt-2 ${tier.popular ? "text-pleita-paper" : "text-pleita-ink"}`}>{tier.n}</h3>
              <div className={`pl-num font-semibold text-3xl mt-3 ${tier.popular ? "text-pleita-lime" : "text-pleita-ink"}`}>R$ {tier.p}<span className="text-sm font-normal opacity-60">/mês</span></div>
              <p className={`text-sm mt-2 ${tier.popular ? "text-pleita-paper/80" : "text-pleita-stone"}`}>{tier.d}</p>
              <button className={`w-full mt-5 rounded-full py-2 text-sm font-medium ${tier.popular ? "bg-pleita-lime text-pleita-ink" : "border border-pleita-line text-pleita-ink hover:bg-pleita-paper-2"}`}>
                Começar
              </button>
            </article>
          ))}
        </div>
        <div className="mt-4 inline-flex items-center gap-2 rounded-full bg-pleita-paper-2 px-4 py-2 text-xs text-pleita-stone">
          <span className="text-base">🤝</span> <strong className="text-pleita-ink">Concierge</strong> · revisão por advogado parceiro · +R$ 297/peça
        </div>
      </section>

      {/* CTA final */}
      <section className="bg-pleita-ink text-pleita-paper">
        <div className="max-w-7xl mx-auto px-6 md:px-10 py-20 text-center">
          <h2 className="font-display font-medium text-4xl md:text-5xl tracking-tight">Comece gratuitamente.<br/><span className="text-pleita-lime">14 dias sem cartão.</span></h2>
          <div className="mt-8 flex justify-center gap-3">
            <PleitaButton size="lg">Criar minha conta</PleitaButton>
            <button className="text-sm text-pleita-paper/80 hover:text-pleita-paper px-5 py-2.5">Falar com vendas →</button>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-pleita-line bg-pleita-paper-2/40 py-10">
        <div className="max-w-7xl mx-auto px-6 md:px-10 grid md:grid-cols-5 gap-8 text-sm">
          <div>
            <Logo size={20} />
            <p className="pl-num text-[11px] text-pleita-stone-2 mt-3">© 2026 Pleita · pleita.pro</p>
          </div>
          {[
            { t: "Produto", l: ["Funcionalidades", "Para iniciantes", "Para profissionais", "Preços"] },
            { t: "Empresa", l: ["Sobre", "Blog", "Imprensa", "Contato"] },
            { t: "Recursos", l: ["Central de ajuda", "Status", "API", "Mudanças"] },
            { t: "Legal",   l: ["LGPD", "Termos", "Privacidade", "DPO"] },
          ].map((c) => (
            <div key={c.t}>
              <div className="pl-num text-[10px] uppercase tracking-[0.14em] text-pleita-stone-2 mb-3">{c.t}</div>
              <ul className="space-y-2 text-pleita-stone">{c.l.map((x) => <li key={x}><a className="hover:text-pleita-ink">{x}</a></li>)}</ul>
            </div>
          ))}
        </div>
      </footer>
    </div>
  );
}

window.ScreenLanding = ScreenLanding;