import type { ReactNode } from "react";

function Block({ kicker, title, sub, children, alt }: { kicker: string; title: string; sub?: string; children: ReactNode; alt?: boolean }) {
  return (
    <section className={`py-14 ${alt ? "border-y border-border/60 bg-secondary/30" : ""}`}>
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="brand-gradient h-1 w-12 rounded-full" />
        <p className="mt-3 text-xs font-semibold uppercase text-muted-foreground">{kicker}</p>
        <h2 className="mt-2 text-2xl font-bold sm:text-3xl">{title}</h2>
        {sub && <p className="mt-3 max-w-3xl leading-relaxed text-muted-foreground">{sub}</p>}
        <div className="mt-8">{children}</div>
      </div>
    </section>
  );
}

const empresas = [
  ["Brasil Urbano", "Núcleo operacional", "Incorporadora. É onde o produto nasce: origina, avalia a viabilidade e desenvolve."],
  ["Oro", "Arquitetura, urbanismo & design", "Projeto e produto, com responsabilidade técnica registrada no CAU."],
  ["LCP", "Engenharia & construção", "Execução da obra, do projeto ao empreendimento entregue."],
  ["AI8", "Tecnologia & BI", "Dados que orientam preço, estoque e estratégia comercial."],
  ["Un1kComm", "Marketing & publicidade", "Gera demanda e abastece a força de vendas com leads qualificados."],
  ["Habita Brasil", "Crédito · correspondente bancário", "Viabiliza o crédito associativo que converte demanda em venda."],
  ["Nivo One", "Franquias & vendas", "Rede de franquias imobiliárias, com capilaridade em cada cidade."],
  ["Núcleo Urbanismo", "Loteamentos", "Braço de loteamentos, em constituição, com marca registrada no INPI (Classe 36)."],
  ["Baldo Brambilla & Carvalho", "Advogados", "Assessoria jurídica integrada ao ecossistema."],
  ["Instituto Caju", "Responsabilidade social", "Braço social do ecossistema."],
];

export function BrasilUrbanoEcosystem() {
  return (
    <>
      <Block kicker="Por que este nome" title="Brasil + Urbano: a escala do problema e a forma da solução.">
        <div className="grid gap-4 md:grid-cols-2">
          {[
            ["Brasil", "A escala do problema", "O maior déficit habitacional do país está na entrada do mercado: milhões de famílias buscando o primeiro imóvel. O Minha Casa Minha Vida sustenta essa demanda estrutural, com subsídio e juros acessíveis."],
            ["Urbano", "A forma da solução", "Transformar essa demanda em cidade: empreendimentos econômicos e populares, desenhados para o público certo e viabilizados pelo crédito associativo, o financiamento à produção."],
          ].map(([t, k, d]) => (
            <article key={t} className="rounded-lg border border-border bg-card p-6">
              <h3 className="text-3xl font-bold">{t}</h3>
              <p className="mt-1 text-xs font-semibold uppercase text-muted-foreground">{k}</p>
              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{d}</p>
            </article>
          ))}
        </div>
      </Block>

      <Block alt kicker="Dez empresas, uma só estratégia" title="Dez empresas, uma só estratégia." sub="A Garrah & Co é a holding que orquestra o ecossistema: conecta dado, crédito, marca e venda pela mesma meta de VGV. Cada empresa cobre um elo do ciclo, do terreno ao crédito e à venda em escala. A Brasil Urbano é o núcleo operacional, onde o produto nasce.">
        <div className="rounded-lg bg-ink p-5 text-ink-foreground">
          <p className="text-lg font-bold">Garrah & Co</p>
          <p className="text-sm text-ink-foreground/70">Holding e hub estratégico do ecossistema.</p>
        </div>
        <div className="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
          {empresas.map(([n, k, d]) => (
            <article key={n} className="rounded-lg border border-border bg-card p-4">
              <h3 className="font-semibold">{n}</h3>
              <p className="mt-1 text-[11px] font-semibold uppercase text-muted-foreground">{k}</p>
              <p className="mt-2 text-xs leading-relaxed text-muted-foreground">{d}</p>
            </article>
          ))}
        </div>
        <p className="mt-4 text-xs leading-relaxed text-muted-foreground">Brasil Urbano, Oro, AI8 e Un1kComm com CNPJ ativo e registro na JUCESP. Habita Brasil e Nivo One operam sob O Novo Mercado (CRECI-SP 48214-1). Núcleo Urbanismo em constituição, marca registrada no INPI (Classe 36). LCP, Baldo Brambilla & Carvalho e Instituto Caju integram o ecossistema desde 2026.</p>
      </Block>

      <Block kicker="Prova de capacidade" title="Incorporadoras estruturadas do zero pelos fundadores." sub="Produto, equipes, sistemas, política comercial e de crédito, marketing e vendas.">
        <div className="grid gap-4 md:grid-cols-3">
          {[
            ["Casa Habita", "2020–2022 · Pernambuco", "Produto, comercial e estruturação das equipes de marketing e vendas. Produtos que somam R$ 200 mi de VGV, com nome, tipologia, precificação e campanha desenvolvidos pelo grupo."],
            ["PraMorar Brasil", "2019–atual · Fortaleza", "Estruturação 360° a partir de uma construtora: da validação de áreas à entrega e à assistência técnica."],
            ["Conceito Viver", "Estruturada em 2021", "Transformação de uma empresa de obra pública em incorporadora de obra econômica, com escopo 360°."],
          ].map(([n, k, d]) => (
            <article key={n} className="rounded-lg border border-border bg-card p-6">
              <h3 className="font-semibold">{n}</h3>
              <p className="mt-1 text-xs font-semibold uppercase text-muted-foreground">{k}</p>
              <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{d}</p>
            </article>
          ))}
        </div>
      </Block>

      <Block alt kicker="Da terra à chave" title="A esteira da incorporação, em quatro etapas.">
        <ol className="grid gap-4 md:grid-cols-4">
          {[
            ["Viabilidade e aquisição", "Aquisição da área, due diligence jurídico e viabilidade de VGV, TIR e margem."],
            ["Projeto e registro", "Produto, projetos e aprovações, e Registro de Incorporação. Sem registro, não se vende."],
            ["Vendas e crédito", "Marketing, lançamento e demanda mínima. O crédito é o motor do funding."],
            ["Entrega e resultado", "Obra, gestão de carteira e repasse, habite-se e entrega das chaves."],
          ].map(([t, d], i) => (
            <li key={t} className="relative border-t-2 border-primary pt-4">
              <span className="absolute -top-2.5 left-0 size-4 rounded-full brand-gradient" />
              <p className="font-semibold">{i + 1} · {t}</p>
              <p className="mt-1 text-sm text-muted-foreground">{d}</p>
            </li>
          ))}
        </ol>
        <p className="mt-6 text-xs leading-relaxed text-muted-foreground">Fonte: apresentação institucional da Brasil Urbano, julho de 2026. VGV lançado refere-se às operações estruturadas pelos fundadores e não é resultado financeiro da Brasil Urbano. Desempenho passado não é garantia de resultados futuros.</p>
      </Block>
    </>
  );
}