import FlowTicker from "../islands/FlowTicker.tsx";
import LeadForm from "../islands/LeadForm.tsx";
import { define } from "../utils.ts";

const benefits = [
  {
    title: "Estoque Inteligente",
    description:
      "Curadoria de itens e SKUs com disponibilidade em tempo real e regras de corte por UF para reduzir rupturas.",
    points: ["Reposição preditiva", "Alertas de validade", "Painel único de entregas"],
  },
  {
    title: "Preços Direto da Distribuidora",
    description:
      "Negociação de tabela B2B com repasse imediato das condições do laboratório, sem intermediários ocultos.",
    points: ["Split automático", "Frete otimizado", "Comissões configuráveis"],
  },
  {
    title: "Conformidade ANVISA",
    description:
      "Rastreabilidade de lote, validade e número de registro ANVISA presentes em cada pedido e nota fiscal.",
    points: ["Políticas por categoria", "Logs auditáveis", "Integração com ERPs"],
  },
];

const supplierHighlights = [
  "Acesso imediato a milhares de farmácias",
  "Portal financeiro com split e comprovantes",
  "Gestão de campanhas comerciais unificada",
  "Suporte técnico para integrações de catálogo",
];

export default define.page(function Home(ctx) {
  ctx.state.title = "Save in Med | Marketplace B2B Farmacêutico";

  return (
    <div class="page-wrapper">
      <header class="container hero">
        <div class="hero-card">
          <span class="hero-badge">Marketplace B2B farmacêutico</span>
          <h1 class="hero-title">
            Economia real em medicamentos com a agilidade que a farmácia precisa
          </h1>
          <p class="hero-subtitle">
            A Save in Med conecta farmácias a laboratórios líderes em um único
            checkout, com compliance sanitário nativo e inteligência logística.
          </p>

          <div class="hero-grid">
            <div class="metric-card">
              <p>Redução média de custo</p>
              <strong style="font-size: 1.4rem;">-12% no carrinho</strong>
            </div>
            <div class="card" style="border: 1px dashed var(--border);">
              <div class="pill">Integração simplificada</div>
              <p>
                Hub para receber pedidos, emitir notas e acionar transportadoras em até 48 horas.
              </p>
            </div>
          </div>

          <div class="badge-list">
            <span class="badge">Pedidos multiorigem</span>
            <span class="badge">Pagamento Mercado Pago</span>
            <span class="badge">Tabela por UF</span>
          </div>

          <div class="actions">
            <a class="button-primary" href="#contato">Quero vender ou comprar</a>
            <a class="button-secondary" href="#integracao">Entender integrações</a>
          </div>
        </div>

        <div class="hero-card">
          <div class="section-header" style="margin-bottom: 0.5rem;">
            <span class="section-kicker">Fluxo operacional</span>
            <h2 class="section-title" style="font-size: 1.6rem;">Pedidos centralizados</h2>
            <p class="section-description">
              Um painel único para farmácias cria e acompanha pedidos com múltiplos laboratórios,
              reduzindo chamados e divergências fiscais.
            </p>
          </div>
          <div class="integration-flow island-shell">
            <FlowTicker />
          </div>
          <div class="notice">Configuração pronta para captura de leads e onboarding assistido.</div>
        </div>
      </header>

      <main>
        <section class="container section" id="beneficios">
          <div class="section-header">
            <span class="section-kicker">Benefícios principais</span>
            <h2 class="section-title">Uma plataforma desenhada para performance B2B</h2>
            <p class="section-description">
              Controle de estoque inteligente, regras tributárias por UF e pagamento dividido nativo
              garantem margens saudáveis para farmácias e laboratórios.
            </p>
          </div>

          <div class="card-grid">
            {benefits.map((item) => (
              <div class="card" key={item.title}>
                <div class="pill">{item.title}</div>
                <h3>{item.title}</h3>
                <p>{item.description}</p>
                <div class="chip-row">
                  {item.points.map((point) => <span class="chip" key={point}>{point}</span>)}
                </div>
              </div>
            ))}
          </div>
        </section>

        <section class="container section" id="fornecedores">
          <div class="split-grid">
            <div class="highlight-box">
              <span class="pill" style="background: rgba(255,255,255,0.15); color: #fff;">
                Para fornecedores
              </span>
              <h2 class="section-title" style="color: #fff; font-size: 1.8rem;">
                Laboratórios vendem diretamente para a rede
              </h2>
              <p>
                Estrutura de compliance, conciliação financeira e visibilidade de sell-out por praça,
                sem perder controle sobre tabela e políticas comerciais.
              </p>
              <div class="badge-list" style="gap: 0.4rem;">
                <span class="badge" style="background: rgba(255,255,255,0.12); color: #fff;">Portal do fornecedor</span>
                <span class="badge" style="background: rgba(255,255,255,0.12); color: #fff;">Múltiplos CNPJs</span>
              </div>
            </div>

            <div class="card" style="gap: 1rem;">
              <h3>Por que participar</h3>
              <ul class="list">
                {supplierHighlights.map((item) => (
                  <li key={item}>
                    <span class="pill" aria-hidden="true">✓</span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
              <p class="section-description" style="margin-top: 0.5rem;">
                Nossa equipe de onboarding cuida da carga de catálogo, credenciamento de contas e setup
                financeiro para você começar a vender em poucos dias.
              </p>
            </div>
          </div>
        </section>

        <section class="container section" id="integracao">
          <div class="section-header">
            <span class="section-kicker">Integração</span>
            <h2 class="section-title">Save in Med centraliza pedidos de vários laboratórios</h2>
            <p class="section-description">
              O marketplace orquestra catálogos, tabelas e faturamento, entregando para a farmácia
              um único carrinho com split, impostos e tracking consolidados.
            </p>
          </div>

          <div class="split-grid">
            <div class="card">
              <div class="pill">Governança</div>
              <h3>Catálogo único e políticas por UF</h3>
              <p>
                Múltiplos laboratórios compartilham o mesmo carrinho, mantendo regras de preço, descontos
                e restrições regionais preservadas.
              </p>
              <ul class="list">
                <li><strong>Erros fiscais reduzidos</strong> graças ao cálculo nativo de ICMS e ST.</li>
                <li><strong>Compliance</strong> de lotes e validade em todos os documentos.</li>
                <li><strong>Integração</strong> via webhooks, planilhas ou conectores de ERP.</li>
              </ul>
            </div>

            <div class="card island-shell">
              <div class="pill">Animação ao vivo</div>
              <FlowTicker />
            </div>
          </div>
        </section>

        <section class="container section" id="contato">
          <LeadForm />
        </section>
      </main>

      <footer class="container footer">
        <p>
          Save in Med • Marketplace B2B farmacêutico — performance, conformidade e eficiência
          para a próxima geração de compras hospitalares e de farmácia.
        </p>
      </footer>
    </div>
  );
});