// ===== Casos de uso por segmento =====

const SEGMENTS = [
  { id: "ti",         ico: "💻", n: "TI & SaaS",         color: "#2563EB",
    desc: "Software, equipamentos, manutenção, helpdesk",
    cnae: ["62.01-5", "62.04-0", "62.09-1"],
    matches: 247, win: 38,
    casos: [
      ["Locação de impressoras", "TRF 3ª Região", "R$ 385k"],
      ["Software gestão escolar", "SEDUC-GO",     "R$ 890k"],
      ["Manutenção de servidores","TJ-MG",        "R$ 442k"],
    ],
    pain:    "Editais técnicos com especificação genérica",
    pleita:  "Analista cruza specs vs catálogo MEC/COBRA, Coach traduz CFOP em PT-BR",
  },
  { id: "comercio",   ico: "🛒", n: "Comércio & Distribuição", color: "#0891B2",
    desc: "Material de escritório, EPI, alimentos não-perecíveis, suprimentos",
    cnae: ["46.45-1", "47.74-1", "46.36-2"],
    matches: 412, win: 31,
    casos: [
      ["Material escolar 2026", "SEDUC-PE",      "R$ 2,42M"],
      ["Suprimentos hosp. lote 7","SES-RJ",       "R$ 1,18M"],
      ["EPI para servidores",   "Pref. Campinas","R$ 184k"],
    ],
    pain:    "Margem apertada, mediana de preço PNCP escondida",
    pleita:  "Financeiro calcula mediana histórica + BDI dinâmico em 1.3s",
  },
  { id: "construcao", ico: "🏗️", n: "Construção & Engenharia", color: "#B45309",
    desc: "Obras civis, pavimentação, reformas, projetos arquitetônicos",
    cnae: ["41.20-4", "42.13-8", "71.11-1"],
    matches: 168, win: 24,
    casos: [
      ["Pavimentação asfáltica · lote 4",    "DNIT",   "R$ 18,9M"],
      ["Reforma de UBS",                     "SES-MG", "R$ 642k"],
      ["Projeto executivo escola",           "FNDE",   "R$ 312k"],
    ],
    pain:    "Cláusulas restritivas, qualificação técnica complexa",
    pleita:  "Jurídico com RAG TCU detecta cláusulas atípicas, gera impugnação em 12s",
  },
  { id: "alimentos",  ico: "🍞", n: "Alimentos & Refeições", color: "#059669",
    desc: "Padaria, hortifrúti, restaurante coletivo, gêneros alimentícios",
    cnae: ["10.91-1", "47.21-1", "56.20-1"],
    matches: 89, win: 42,
    casos: [
      ["Pão francês escola estadual", "SEDUC-GO",  "R$ 142k/ano"],
      ["Alimentação hospitalar",      "SES-PR",    "R$ 2,8M/ano"],
      ["Hortifrúti rede municipal",   "Pref. SP",  "R$ 4,2M/ano"],
    ],
    pain:    "Logística diária, sazonalidade, certificações sanitárias",
    pleita:  "Cockpit pós-vitória organiza cronograma de entregas + alertas de NF",
  },
  { id: "saude",      ico: "💊", n: "Saúde & Equipamentos", color: "#DC2626",
    desc: "Medicamentos, EPI hospitalar, equipamentos médicos, manutenção",
    cnae: ["46.44-3", "47.71-7", "32.50-7"],
    matches: 156, win: 28,
    casos: [
      ["Medicamentos · lote 7",    "SES-RJ", "R$ 4,87M"],
      ["Manutenção raio-X",        "INCA",   "R$ 884k"],
      ["EPI hospitalar",           "FIOCRUZ","R$ 244k"],
    ],
    pain:    "Registro ANVISA, validade longa, fiscalização rigorosa",
    pleita:  "Documentalista valida ANVISA + lote/validade + cofre regulatório",
  },
  { id: "consultoria",ico: "📚", n: "Consultoria & Serviços", color: "#7C3AED",
    desc: "Treinamentos, auditoria, assessoria contábil, jurídica, RH",
    cnae: ["69.20-6", "70.20-4", "85.99-6"],
    matches: 198, win: 35,
    casos: [
      ["Treinamento servidores", "ENAP",   "R$ 184k"],
      ["Auditoria contábil",     "TCE-SP", "R$ 422k"],
      ["Consultoria LGPD",       "BNDES",  "R$ 678k"],
    ],
    pain:    "Comprovação técnica, atestados, dimensionamento da equipe",
    pleita:  "Coach monta dossiê técnico, Documentalista organiza atestados",
  },
];

function ScreenCasos() {
  const [active, setActive] = React.useState("ti");
  const s = SEGMENTS.find((x) => x.id === active) || SEGMENTS[0];
  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="hover:text-pleita-ink">Como funciona</a>
            <a className="hover:text-pleita-ink">Preços</a>
            <a className="text-pleita-ink font-medium">Casos de uso</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>

      <header className="max-w-7xl mx-auto px-6 md:px-10 pt-12 md:pt-16">
        <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">Casos de uso</div>
        <h1 className="font-display text-4xl md:text-5xl text-pleita-ink leading-tight max-w-3xl">A Pleita serve para todo segmento que vende para o governo<span className="text-pleita-lime">.</span></h1>
        <p className="text-sm text-pleita-stone mt-3 max-w-2xl">Escolha o seu segmento abaixo e veja exemplos reais de empresas que estão ganhando contratos públicos.</p>
      </header>

      <div className="max-w-7xl mx-auto px-6 md:px-10 mt-10 mb-16">
        {/* Tabs de segmento */}
        <div className="flex gap-2 overflow-x-auto scrollbar-pl pb-1 mb-8 -mx-6 px-6">
          {SEGMENTS.map((seg) => {
            const isActive = seg.id === active;
            return (
              <button
                key={seg.id}
                onClick={() => setActive(seg.id)}
                className={`shrink-0 rounded-full px-4 py-2.5 flex items-center gap-2 transition-all whitespace-nowrap ${
                  isActive
                    ? "bg-pleita-ink text-pleita-paper shadow-pl-sm"
                    : "bg-surface-card border border-pleita-line text-pleita-stone hover:text-pleita-ink hover:bg-surface-2"
                }`}
              >
                <span className="text-base">{seg.ico}</span>
                <span className="text-sm font-medium">{seg.n}</span>
              </button>
            );
          })}
        </div>

        {/* Segment detail */}
        <article key={s.id} className="grid lg:grid-cols-12 gap-6">
          {/* Esquerda */}
          <div className="lg:col-span-7 space-y-5">
            <div className="rounded-[10px] overflow-hidden border border-pleita-line shadow-pl-sm">
              <header className="px-7 py-6 flex items-center gap-4 text-pleita-paper" style={{ background: s.color }}>
                <div className="size-14 rounded-xl bg-white/15 grid place-items-center text-3xl backdrop-blur">{s.ico}</div>
                <div>
                  <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-paper/70 mb-1">Segmento</div>
                  <h2 className="font-display text-3xl leading-tight">{s.n}</h2>
                </div>
              </header>
              <div className="bg-surface-card p-7">
                <p className="text-base text-pleita-stone leading-relaxed">{s.desc}</p>
                <div className="mt-4 flex flex-wrap gap-2">
                  {s.cnae.map((c) => (
                    <span key={c} className="pl-num text-[10px] uppercase tracking-wider px-2.5 py-1 rounded-md font-semibold bg-surface-2 text-pleita-stone-2">CNAE {c}</span>
                  ))}
                </div>
              </div>
            </div>

            {/* Casos reais */}
            <div className="rounded-[10px] bg-surface-card border border-pleita-line shadow-pl-sm overflow-hidden">
              <header className="px-7 py-4 border-b border-pleita-line">
                <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-1">Editais ganhos · últimos 6 meses</div>
                <h3 className="font-display text-lg text-pleita-ink">Empresas {s.n.toLowerCase().split(" ")[0]} usando Pleita</h3>
              </header>
              <ul className="divide-y divide-pleita-line/60">
                {s.casos.map(([obj, org, val], i) => (
                  <li key={i} className="px-7 py-4 grid grid-cols-12 items-center gap-3 hover:bg-surface-2/40">
                    <span className="col-span-7 text-sm text-pleita-ink truncate">{obj}</span>
                    <span className="col-span-3 pl-num text-xs text-pleita-stone-2 truncate">{org}</span>
                    <span className="col-span-2 pl-num text-sm text-right font-semibold" style={{ color: s.color }}>{val}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="rounded-[10px] bg-surface-card border border-pleita-line p-7 shadow-pl-sm">
              <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">Dor específica do segmento</div>
              <p className="font-display text-lg text-pleita-ink leading-snug">{s.pain}<span className="text-pleita-lime">.</span></p>
              <div className="mt-4 pt-4 border-t border-pleita-line/60">
                <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">Como a Pleita resolve</div>
                <p className="text-sm text-pleita-stone leading-relaxed">{s.pleita}.</p>
              </div>
            </div>
          </div>

          {/* Direita */}
          <aside className="lg:col-span-5 space-y-5">
            <div className="grid grid-cols-2 gap-3">
              <div className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm">
                <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">Matches/mês</div>
                <div className="pl-num font-semibold text-3xl text-pleita-ink mt-1">{s.matches}</div>
                <div className="pl-num text-[11px] text-pleita-stone-2 mt-1">no PNCP nacional</div>
              </div>
              <div className="rounded-[10px] p-5 shadow-pl-sm" style={{ background: s.color, color: "#fff" }}>
                <div className="pl-num text-[10px] uppercase tracking-wider opacity-80">Win rate Pleita</div>
                <div className="pl-num font-semibold text-3xl mt-1">{s.win}%</div>
                <div className="pl-num text-[11px] opacity-80 mt-1">vs 11% sem ML</div>
              </div>
            </div>

            <div className="rounded-[10px] overflow-hidden border border-pleita-line shadow-pl-sm">
              <div className="px-6 py-5" style={{ background: `${s.color}15` }}>
                <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">Caso destaque</div>
                <p className="font-display text-base text-pleita-ink leading-snug">"Em 6 meses, dobramos faturamento só com licitação pública."</p>
              </div>
              <div className="p-6 bg-surface-card flex items-center gap-3">
                <span className="size-11 rounded-full text-white grid place-items-center pl-num text-xs font-semibold" style={{ background: s.color }}>EX</span>
                <div className="min-w-0">
                  <div className="text-sm text-pleita-ink font-medium truncate">Empresa exemplo · {s.n}</div>
                  <div className="pl-num text-[11px] text-pleita-stone-2">cliente Veterano · 14 meses</div>
                </div>
                <button className="ml-auto pl-num text-xs text-pleita-info hover:underline whitespace-nowrap">ler →</button>
              </div>
            </div>

            <div className="rounded-[10px] p-7 shadow-pl-md" style={{ background: "rgb(var(--pleita-ink))" }}>
              <div className="text-pleita-lime text-2xl mb-2">▶</div>
              <div className="font-display text-xl text-pleita-paper leading-tight">Você está em {s.n.toLowerCase().split(" ")[0]}? <br/>Comece com a gente<span className="text-pleita-lime">.</span></div>
              <p className="pl-num text-xs text-pleita-paper/60 mt-3">14 dias grátis · sem cartão</p>
              <button className="mt-4 w-full rounded-full bg-pleita-lime text-pleita-ink py-2.5 text-sm font-semibold hover:bg-pleita-lime-2">Ver oportunidades pra mim →</button>
            </div>
          </aside>
        </article>
      </div>
    </div>
  );
}

window.ScreenCasos = ScreenCasos;