import { define } from "../utils.ts";

const highlights = [
  {
    title: "Hierarquia de Permissões",
    description:
      "Perfis separados para Farmácia (comprador), Distribuidora (vendedor) e Administrador do marketplace com trilhas dedicadas.",
  },
  {
    title: "Rastreabilidade de Lote",
    description:
      "Produtos carregam lote e validade obrigatórios em todo pedido, garantindo conformidade sanitária de ponta a ponta.",
  },
  {
    title: "Split nativo Mercado Pago",
    description:
      "Preferências de pagamento prontas para retenção automática de comissão do marketplace e repasse ao seller.",
  },
  {
    title: "Impostos por UF",
    description:
      "Camada de cálculo preparada para tabelas de substituição tributária estadual, simplificando faturamento fiscal.",
  },
];

export default define.page(function Home(ctx) {
  ctx.state.title = "SaveInMed | Marketplace B2B";

  return (
    <div class="min-h-screen bg-gradient-to-b from-sky-50 via-white to-sky-100 text-gray-900">
      <header class="py-10 px-6 md:px-10">
        <div class="max-w-5xl mx-auto grid gap-6 lg:grid-cols-2 items-center">
          <div>
            <p class="text-sm uppercase tracking-widest text-sky-700 font-semibold">
              Planejamento B2B Farmacêutico
            </p>
            <h1 class="text-4xl md:text-5xl font-bold mt-2 leading-tight">
              Nova fundação de Performance para o Marketplace SaveInMed
            </h1>
            <p class="mt-4 text-lg text-gray-700 leading-relaxed">
              Arquitetura renovada com backend em Go ultrarrápido, Postgres 17 e Clean Architecture.
              Ideal para transações de alto volume e integração nativa com Mercado Pago.
            </p>
            <div class="mt-6 grid gap-3 sm:grid-cols-2">
              <div class="p-4 rounded-xl bg-white shadow-sm border border-sky-100">
                <p class="text-sm text-gray-600">Core em Go 1.24+</p>
                <p class="font-semibold">net/http, pgx, json-iter, gzip</p>
              </div>
              <div class="p-4 rounded-xl bg-white shadow-sm border border-sky-100">
                <p class="text-sm text-gray-600">Infra pronta para produção</p>
                <p class="font-semibold">Docker distroless + Swagger</p>
              </div>
            </div>
          </div>
          <div class="bg-white shadow-md rounded-2xl border border-sky-100 p-6 space-y-3">
            <h2 class="text-xl font-semibold">Stack de diretórios</h2>
            <ul class="text-sm text-gray-700 space-y-2">
              <li><strong>/backend-go</strong>: Performance Core (Pagamentos)</li>
              <li><strong>/backend-nest</strong>: Gestão de usuários, CRM e regras de negócio</li>
              <li><strong>/frontend-market</strong>: App da farmácia em React + Vite</li>
              <li><strong>/website</strong>: Landing page institucional</li>
              <li><strong>/docker</strong>: Compose com Postgres e backends</li>
            </ul>
          </div>
        </div>
      </header>

      <main class="px-6 md:px-10 pb-16">
        <div class="max-w-5xl mx-auto">
          <section class="grid md:grid-cols-2 gap-6">
            {highlights.map((item) => (
              <div class="p-6 bg-white rounded-2xl shadow-sm border border-sky-100" key={item.title}>
                <h3 class="font-semibold text-lg text-sky-800">{item.title}</h3>
                <p class="mt-2 text-gray-700 leading-relaxed">{item.description}</p>
              </div>
            ))}
          </section>

          <section class="mt-10 p-6 bg-white rounded-2xl shadow-sm border border-emerald-100">
            <h3 class="text-xl font-semibold text-emerald-700">Foco em Observabilidade e Resiliência</h3>
            <p class="mt-2 text-gray-700 leading-relaxed">
              Conexões pgx otimizadas, middlewares de compressão e roteamento do Go 1.22+ garantem baixa latência.
              O repositório vem com schema base e UUID v7 ordenável para índices mais eficientes.
            </p>
          </section>
        </div>
      </main>
    </div>
  );
});