// Landing.jsx — full marketing landing page for ConstructHub.
// One scrollable composition rendered inside a design-canvas artboard.

const INDIGO = '#4F6EF7';
const INDIGO_SOFT = '#EEF1FF';

// Subtle grid background (used in hero only) — drawn as SVG so it's crisp.
function GridBackground({ opacity = 0.6 }) {
  return (
    <svg className="absolute inset-0 w-full h-full pointer-events-none" aria-hidden="true"
         style={{ opacity, maskImage: 'radial-gradient(ellipse at top, black 30%, transparent 75%)' }}>
      <defs>
        <pattern id="grid" width="48" height="48" patternUnits="userSpaceOnUse">
          <path d="M 48 0 L 0 0 0 48" fill="none" stroke="#E4E4E7" strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid)" />
    </svg>
  );
}

// ─── Banner header ───────────────────────────────────────────────────
// The marketing landing opens with the SocialShareCard (the 1200×630 OG
// banner from InviteCard.jsx) rendered full-bleed at 720px tall. No nav
// items, no login link — the design choice is to invite the user to
// scroll and investigate the page on their own terms.
//
// SocialShareCard is published on `window` by InviteCard.jsx, which is
// loaded before this script in index.html. If it's missing (e.g. the
// design canvas is being viewed in isolation), we render nothing rather
// than crashing.
function MarketingNav() {
  const SocialShareCard = window.SocialShareCard;
  if (!SocialShareCard) return null;
  return (
    <div className="relative w-full" style={{ height: 720 }}>
      <SocialShareCard />
    </div>
  );
}

// ─── Hero ────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="relative overflow-hidden border-b border-zinc-100">
      <GridBackground />
      <div className="relative max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 pt-16 sm:pt-20 lg:pt-24 pb-16 lg:pb-20">
        <div className="max-w-[820px]">
          <div className="inline-flex items-center gap-2 h-7 px-3 rounded-full border border-zinc-200 bg-white/80 text-[11.5px] font-medium uppercase tracking-[0.12em] text-zinc-500 mb-6">
            <span data-pulse className="h-1.5 w-1.5 rounded-full" style={{ background: INDIGO }}></span>
            ERP · Ibéria · Materiais de construção
          </div>
          <h1 className="ch-hero-h1 text-[36px] sm:text-[48px] lg:text-[64px] leading-[1.04] font-semibold tracking-[-0.025em] text-zinc-900">
            O ERP feito para quem<br/>
            <span className="text-zinc-400">vende materiais de </span>
            <span className="relative inline-block">
              construção
              <svg className="absolute -bottom-2 left-0 right-0 w-full" viewBox="0 0 320 14" fill="none">
                <path d="M2 9 C 80 3, 160 3, 318 8" stroke={INDIGO} strokeWidth="3" strokeLinecap="round"/>
              </svg>
            </span>.
          </h1>
          <p className="ch-hero-sub text-[15px] sm:text-[17px] lg:text-[18px] text-zinc-600 leading-relaxed mt-6 sm:mt-7 max-w-[680px]">
            Faturação AT e-fatura, SAF-T PT, encomendas, obras e stock — numa plataforma
            desenhada para <strong className="text-zinc-900">distribuidores</strong> e <strong className="text-zinc-900">retalhistas</strong> de
            materiais de construção em Portugal e Espanha.
          </p>
          <div className="ch-hero-cta mt-7 sm:mt-9 flex flex-wrap items-center gap-3">
            <a href="#convite" className="group h-12 px-5 rounded-md text-[14px] font-medium inline-flex items-center gap-2 transition-all hover:shadow-lg hover:-translate-y-0.5"
               style={{ background: '#18181B', color: 'white' }}>
              Pedir demonstração
              <L name="arrow-right" className="w-4 h-4 transition-transform group-hover:translate-x-1" />
            </a>
            <a href="#tour" className="group h-12 px-5 rounded-md border border-zinc-200 bg-white text-[14px] font-medium inline-flex items-center gap-2 text-zinc-900 hover:bg-zinc-50 hover:border-zinc-300 transition-colors">
              <L name="play-circle" className="w-4 h-4 transition-transform group-hover:scale-110" />
              Ver como funciona · 2 min
            </a>
            <span className="text-[12.5px] text-zinc-500 sm:ml-3">
              Beta privada · outono de 2026
            </span>
          </div>

          <div className="mt-12 flex flex-wrap items-center gap-x-7 gap-y-3 text-[11.5px] text-zinc-500">
            {[
              { icon: 'shield-check',  text: 'AT e-fatura nativo' },
              { icon: 'file-text',     text: 'SAF-T PT validado' },
              { icon: 'lock',          text: 'RGPD compliant' },
              { icon: 'languages',     text: '100% PT-PT' },
              { icon: 'sparkles',      text: 'Assistente IA integrado' },
            ].map(p => (
              <span key={p.text} className="inline-flex items-center gap-1.5">
                <L name={p.icon} className="w-3.5 h-3.5" />{p.text}
              </span>
            ))}
          </div>
        </div>

        {/* Right-side floating product preview */}
        <div className="absolute top-24 right-8 w-[440px] hidden lg:block">
          <ProductPreviewCard />
        </div>
      </div>
    </section>
  );
}

// Stylized product preview — a faux dashboard tile, drawn flat.
function ProductPreviewCard() {
  return (
    <div className="rounded-xl border border-zinc-200 bg-white shadow-2xl overflow-hidden"
         style={{ boxShadow: '0 30px 60px -20px rgba(15,15,20,0.18), 0 8px 20px -10px rgba(15,15,20,0.08)' }}>
      <div className="h-9 border-b border-zinc-100 flex items-center px-3 gap-2 bg-zinc-50/60">
        <span className="h-2 w-2 rounded-full bg-zinc-300"></span>
        <span className="h-2 w-2 rounded-full bg-zinc-300"></span>
        <span className="h-2 w-2 rounded-full bg-zinc-300"></span>
        <span className="text-[10.5px] text-zinc-400 ml-2">ConstructHub · Compras</span>
        <span className="flex-1"></span>
        <span className="text-[10.5px] text-zinc-400">JP</span>
      </div>
      <img src="assets/screenshots/tour-compras.png" alt="ConstructHub · Compras"
           className="block w-full h-auto" loading="lazy" />
    </div>
  );
}

// ─── Trust strip removed: we don't yet have customers in named cities. ─
// Keep this comment so nobody re-adds it without real data.

// ─── Problem ─────────────────────────────────────────────────────────
function Problem() {
  return (
    <section className="border-b border-zinc-100">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24">
        <div className="flex flex-col gap-8 lg:grid lg:grid-cols-12 lg:gap-12 lg:items-start">
          <div className="lg:col-span-5">
            <div className="text-[11px] uppercase tracking-[0.16em] text-zinc-500 font-semibold mb-3">O problema</div>
            <h2 className="text-[28px] sm:text-[32px] lg:text-[40px] leading-[1.1] font-semibold tracking-tight">
              ERPs genéricos não percebem<br/>o seu negócio.
            </h2>
          </div>
          <div className="lg:col-span-7 text-[15px] sm:text-[16px] leading-relaxed text-zinc-600 space-y-4">
            <p>
              Os ERPs internacionais foram desenhados para vender livros ou software — não cimento, areia ou aço.
              Não falam com a AT, não exportam SAF-T PT, não percebem IVA reduzido em obras de reabilitação,
              e tratam um empreiteiro como se fosse um consumidor final.
            </p>
            <p>
              Os ERPs antigos portugueses falam o idioma — mas vivem em janelas Windows dos anos 2000,
              não funcionam no telemóvel do chefe de obra, e o catálogo é uma folha de Excel.
            </p>
            <p className="text-zinc-900 font-medium">
              ConstructHub é uma terceira opção. ERP moderno, na nuvem, em PT-PT, feito de raiz
              para a forma como o sector trabalha.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Three products ──────────────────────────────────────────────────
function Products() {
  const items = [
    {
      tag: 'Para si',
      icon: 'layout-dashboard',
      title: 'Build',
      sub: 'O ERP do distribuidor',
      body: 'Painel, catálogo, encomendas, faturação AT, armazém, obras, equipa, relatórios. Tudo o que precisa para gerir o negócio num só sítio.',
      points: ['Faturação AT e-fatura', 'Catálogo com fotos', 'Multi-loja, multi-armazém', 'Obras e empreiteiros'],
      href: '#tour',
    },
    {
      tag: 'Para os seus clientes',
      icon: 'shopping-cart',
      title: 'Portal',
      sub: 'A loja B2B dos seus clientes',
      body: 'Os seus empreiteiros e construtoras entram, vêem o catálogo com os preços contratados, fazem encomendas, acompanham entregas, pagam.',
      points: ['Preços por contrato', 'Limite de crédito', 'Histórico de encomendas', 'Pagamento online'],
      href: '#tour',
    },
    {
      tag: 'Para todos',
      icon: 'sparkles',
      title: 'Assistente IA',
      sub: 'A IA que conhece a sua obra',
      body: 'Assistente em português com contexto de todas as suas obras, encomendas e faturas. Pergunte, peça-lhe que repita encomendas, recalcule IVA, identifique atrasos.',
      points: ['100% em português', 'Contexto das suas obras', 'Acesso só ao que autoriza', 'Confirma antes de agir'],
      accent: true,
      href: '#ia',
    },
  ];
  return (
    <section id="produto" className="border-b border-zinc-100">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24">
        <div className="text-[11px] uppercase tracking-[0.16em] text-zinc-500 font-semibold mb-3">O que construímos</div>
        <h2 className="text-[28px] sm:text-[32px] lg:text-[40px] leading-[1.1] font-semibold tracking-tight mb-10 lg:mb-12 max-w-[640px]">
          Três produtos. Uma plataforma.
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {items.map(p => (
            <div key={p.title}
                 className={'group rounded-2xl border bg-white p-7 relative transition-all hover:-translate-y-1 hover:shadow-xl ' +
                   (p.accent ? 'border-zinc-900' : 'border-zinc-200 hover:border-zinc-300')}>
              <div className="flex items-center gap-2 text-[10.5px] uppercase tracking-[0.12em] font-semibold mb-6"
                   style={{ color: p.accent ? INDIGO : '#71717A' }}>
                <span className="h-1.5 w-1.5 rounded-full" style={{ background: p.accent ? INDIGO : '#A1A1AA' }}></span>
                {p.tag}
              </div>
              <div className="h-12 w-12 rounded-xl grid place-items-center mb-5 transition-transform group-hover:scale-110"
                   style={{ background: p.accent ? '#18181B' : '#F4F4F5', color: p.accent ? '#FFFFFF' : '#18181B' }}>
                <L name={p.icon} className="w-5 h-5" />
              </div>
              <div className="text-[24px] font-semibold tracking-tight">{p.title}</div>
              <div className="text-[13px] text-zinc-500 mt-1 mb-4">{p.sub}</div>
              <p className="text-[14px] text-zinc-700 leading-relaxed mb-6">{p.body}</p>
              <ul className="space-y-2 mb-6">
                {p.points.map(pt => (
                  <li key={pt} className="flex items-center gap-2 text-[12.5px] text-zinc-700">
                    <L name="check" className="w-3.5 h-3.5" style={{ color: p.accent ? INDIGO : '#10B981' }} />
                    {pt}
                  </li>
                ))}
              </ul>
              <a href={p.href} className="text-[12.5px] font-medium inline-flex items-center gap-1 text-zinc-900 hover:underline underline-offset-4">
                Conhecer {p.title} <L name="arrow-right" className="w-3 h-3" />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Feature grid ────────────────────────────────────────────────────
function Features() {
  const features = [
    { icon: 'file-check', title: 'Faturação AT e-fatura',
      body: 'Séries certificadas, hash RSA-SHA1 imutável, ATCUD + QR em cada documento. SAF-T PT em 1 clique. Comunicação directa à AT em produção (sandbox por defeito).' },
    { icon: 'percent', title: 'IVA 6 / 13 / 23%',
      body: 'Suporta taxa reduzida em reabilitação e intermédia em construção nova. Regimes do Continente, Madeira, Açores e isento art.º 53.' },
    { icon: 'badge-check', title: 'NIF / NIPC validado',
      body: 'Validação local pelo dígito de controlo. Pesquisa VIES para preencher nome e morada a partir do NIF.' },
    { icon: 'hard-hat', title: 'Obras como entidade central',
      body: 'Cada obra agrupa encomendas, faturas, fornecedores e empreiteiros. Não é só uma tag.' },
    { icon: 'package', title: 'Catálogo com fotos',
      body: 'SKUs, preços por contrato, fotos e fornecedores associados. Tudo no mesmo lugar.' },
    { icon: 'warehouse', title: 'Stock multi-armazém',
      body: 'Lojas, armazéns, estaleiros de obra. Transferências internas e rutura de stock proativa.' },
    { icon: 'truck', title: 'Encomendas a fornecedores',
      body: 'Criação de PO, receção, conferência. Notificações automáticas quando os materiais chegam.' },
    { icon: 'banknote', title: 'Crédito e prazos',
      body: 'Cartão via Stripe. Limites de crédito por cliente, prazos de pagamento, juros de mora. Multibanco e MB Way no roadmap.' },
    { icon: 'smartphone', title: 'Interface responsiva',
      body: 'O chefe de obra consulta uma entrega no telemóvel. O comprador aprova encomendas no tablet.' },
    { icon: 'shield', title: 'RGPD na base',
      body: 'Dados em datacenters UE. Logs de auditoria completos. Exportação Excel/CSV em todas as listas.' },
    { icon: 'languages', title: '100% em português (PT)',
      body: 'Não é uma tradução. Todos os termos foram escolhidos com profissionais portugueses.' },
    { icon: 'plug-zap', title: 'Liga ao que já usa',
      body: 'API REST. Exportação Excel. Importação de catálogo por ficheiro. Integração com Primavera, Sage ou PHC sob pedido.' },
  ];
  return (
    <section id="recursos" className="border-b border-zinc-100 bg-zinc-50/40">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24">
        <div className="flex flex-col gap-6 mb-10 lg:grid lg:grid-cols-12 lg:gap-12 lg:mb-14 lg:items-end">
          <div className="lg:col-span-7">
            <div className="text-[11px] uppercase tracking-[0.16em] text-zinc-500 font-semibold mb-3">Tudo no sítio</div>
            <h2 className="text-[28px] sm:text-[32px] lg:text-[40px] leading-[1.1] font-semibold tracking-tight">
              Especificado para o sector,<br/>não adaptado depois.
            </h2>
          </div>
          <div className="lg:col-span-5 text-[14px] text-zinc-600 leading-relaxed">
            Conhecemos a diferença entre uma fatura, uma fatura-recibo e uma nota de crédito.
            Sabemos por que a entrega às 8h em Almada vai chegar às 11h. Por isso o ConstructHub
            está pronto a usar — não precisa de meses de implementação.
          </div>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-zinc-200 rounded-xl overflow-hidden border border-zinc-200">
          {features.map(f => (
            <div key={f.title} className="group bg-white p-6 hover:bg-zinc-50 transition-colors">
              <L name={f.icon} className="w-5 h-5 text-zinc-900 mb-4 transition-transform group-hover:scale-110 group-hover:-translate-y-0.5" style={{ strokeWidth: 1.5 }} />
              <div className="text-[14px] font-semibold tracking-tight text-zinc-900 mb-1.5">{f.title}</div>
              <div className="text-[12.5px] text-zinc-600 leading-relaxed">{f.body}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── AI feature spotlight ─────────────────────────────────────
function AISpotlight() {
  return (
    <section id="ia" className="border-b border-zinc-100 bg-zinc-900 text-white relative overflow-hidden">
      <div className="absolute inset-0 opacity-[0.04]" aria-hidden="true">
        <svg width="100%" height="100%">
          <defs>
            <pattern id="dotgrid" width="32" height="32" patternUnits="userSpaceOnUse">
              <circle cx="2" cy="2" r="1" fill="white" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#dotgrid)" />
        </svg>
      </div>
      <div className="relative max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 flex flex-col gap-10 lg:grid lg:grid-cols-12 lg:gap-12">
        <div className="lg:col-span-6">
          <div className="inline-flex items-center gap-2 h-7 px-3 rounded-full text-[11.5px] font-medium uppercase tracking-[0.12em]"
               style={{ background: INDIGO, color: 'white' }}>
            <L name="sparkles" className="w-3 h-3" />
            Assistente IA · Novo
          </div>
          <h2 className="text-[30px] sm:text-[36px] lg:text-[44px] leading-[1.08] font-semibold tracking-tight mt-6">
            A IA que conhece<br/>
            as <span className="text-white/40">suas obras.</span>
          </h2>
          <p className="text-[15px] sm:text-[16px] text-white/70 mt-6 leading-relaxed max-w-[480px]">
            O assistente tem contexto das suas encomendas, faturas, fornecedores e obras —
            e fala português. Pergunte naturalmente. Peça-lhe para agir. Confirma sempre antes de escrever.
          </p>

          <div className="mt-8 space-y-4">
            {[
              { i: 'message-circle-question', t: 'Pergunte qualquer coisa', s: '“Que obra teve mais margem no último trimestre?” “Quem aprovou a EC-0241?”' },
              { i: 'wand-2',                  t: 'Peça acções',             s: '“Repete a encomenda do Mafra para a próxima semana.” “Compõe email à Tabique sobre o IVA.”' },
              { i: 'shield-check',            t: 'Privado por padrão',      s: 'O assistente vê apenas o que autoriza. As conversas pertencem-lhe e podem ser exportadas ou apagadas a qualquer momento.' },
              { i: 'check-circle-2',          t: 'Confirma antes de escrever', s: 'Antes de criar uma encomenda, alterar uma fatura ou enviar um email, o resultado é-lhe sempre apresentado para aprovação.' },
            ].map(p => (
              <div key={p.t} className="flex items-start gap-4">
                <div className="h-9 w-9 rounded-md grid place-items-center shrink-0 bg-white/10">
                  <L name={p.i} className="w-4 h-4" />
                </div>
                <div className="min-w-0">
                  <div className="text-[14px] font-semibold">{p.t}</div>
                  <div className="text-[12.5px] text-white/60 mt-0.5">{p.s}</div>
                </div>
              </div>
            ))}
          </div>

          <a href="#tour" className="mt-9 inline-flex items-center gap-2 text-[13px] font-medium text-white hover:underline underline-offset-4">
            Como funciona o assistente <L name="arrow-right" className="w-3.5 h-3.5" />
          </a>
        </div>

        <div className="lg:col-span-6 flex flex-col items-center justify-center gap-5">
          <ChatPreviewCard />
          <div className="rounded-2xl border border-white/15 bg-white/[0.04] px-5 py-4 flex items-center gap-4 w-full max-w-[460px]">
            <div className="h-10 w-10 rounded-lg grid place-items-center shrink-0"
                 style={{ background: INDIGO }}>
              <L name="check-circle-2" className="w-5 h-5 text-white" />
            </div>
            <div className="min-w-0">
              <div className="text-[12.5px] font-semibold">
                Nunca age sem confirmar
              </div>
              <div className="text-[11.5px] text-white/60 mt-1 leading-relaxed">
                Qualquer alteração — encomenda, fatura, email — passa pela sua aprovação antes de acontecer.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ChatPreviewCard() {
  return (
    <div className="w-full max-w-[460px] rounded-2xl bg-white text-zinc-900 overflow-hidden"
         style={{ boxShadow: '0 30px 80px -20px rgba(0,0,0,0.5)' }}>
      <div className="h-11 border-b border-zinc-100 flex items-center px-4 gap-3">
        <div className="h-7 w-7 rounded-full grid place-items-center text-white" style={{ background: '#18181B' }}>
          <L name="sparkles" className="w-3.5 h-3.5" />
        </div>
        <div className="min-w-0 flex-1">
          <div className="text-[12.5px] font-semibold">Assistente IA</div>
          <div className="text-[10.5px] text-zinc-500">IA da ConstructHub</div>
        </div>
        <L name="more-horizontal" className="w-3.5 h-3.5 text-zinc-400" />
      </div>
      <div className="p-4 space-y-4">
        <div className="flex items-start gap-2 justify-end">
          <div className="max-w-[80%] rounded-2xl bg-zinc-100 px-3.5 py-2 text-[12.5px] text-zinc-900">
            Que obra teve mais margem no T2?
          </div>
        </div>
        <div className="flex items-start gap-3">
          <div className="h-7 w-7 rounded-full grid place-items-center text-white shrink-0" style={{ background: '#18181B' }}>
            <L name="sparkles" className="w-3 h-3" />
          </div>
          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap gap-1 mb-2">
              {['Ler Obras', 'Ler Faturas', 'Calcular margem'].map(t => (
                <span key={t} className="inline-flex items-center gap-1 h-6 px-2 rounded-md border border-zinc-200 bg-zinc-50 text-[10.5px] text-zinc-600">
                  <L name="check" className="w-2.5 h-2.5 text-emerald-600" />{t}
                </span>
              ))}
            </div>
            <div className="text-[12.5px] text-zinc-800 leading-relaxed">
              No T2 a sua melhor obra foi <strong>Loures · Reabilitação</strong> com <strong className="tabular-nums">31% de margem</strong>, à frente de Almada B em 9 pontos.
            </div>
            <div className="mt-2.5 grid grid-cols-3 gap-1.5">
              {[
                ['Loures',  '31 %', true],
                ['Sintra',  '24 %'],
                ['Almada',  '22 %'],
              ].map((s, i) => (
                <div key={i} className={'rounded-md border p-2 ' + (s[2] ? 'border-zinc-900 bg-zinc-50' : 'border-zinc-200')}>
                  <div className="text-[10px] text-zinc-500">{s[0]}</div>
                  <div className="text-[14px] font-semibold tabular-nums">{s[1]}</div>
                </div>
              ))}
            </div>
            <div className="mt-3 flex flex-wrap gap-1">
              {['Porquê Loures?', 'Aplica ao T1', 'Exporta PDF'].map(t => (
                <button key={t} className="h-6 px-2 rounded-full border border-zinc-200 bg-white text-[10.5px] text-zinc-700">
                  {t}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div className="p-3 border-t border-zinc-100 flex items-center gap-2">
        <div className="flex-1 h-9 rounded-md border border-zinc-200 px-3 flex items-center text-[12px] text-zinc-400">Continue a conversa…</div>
        <button className="h-9 w-9 rounded-md grid place-items-center text-white" style={{ background: '#18181B' }}>
          <L name="arrow-up" className="w-3.5 h-3.5" />
        </button>
      </div>
    </div>
  );
}

// ─── Numbers ─────────────────────────────────────────────────────────
function Numbers() {
  return (
    <section className="border-b border-zinc-100">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20 grid grid-cols-2 lg:grid-cols-4 gap-8">
        {[
          { n: '100%',    l: 'em português PT' },
          { n: '6/13/23', l: 'IVA suportado nativo' },
          { n: '<2 s',    l: 'resposta média da IA' },
          { n: '30 dias', l: 'teste sem cartão' },
        ].map(s => (
          <div key={s.l}>
            <div className="text-[32px] sm:text-[36px] lg:text-[44px] font-semibold tracking-tight tabular-nums">{s.n}</div>
            <div className="text-[12.5px] text-zinc-500 mt-1">{s.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── Pricing tease ───────────────────────────────────────────────────
function Pricing() {
  const plans = [
    { name: 'Loja',   sub: 'Para uma loja única, equipa pequena.',
      points: ['Build + Portal', 'Facturação AT', 'Assistente IA — uso básico', 'Suporte por email'] },
    { name: 'Distribuidor', sub: 'Multi-armazém, multi-loja.', recommended: true,
      points: ['Tudo do plano Loja', 'Equipa alargada', 'Multi-armazém', 'Assistente IA — uso intensivo', 'Suporte prioritário'] },
    { name: 'Grupo',  sub: 'Cadeias e grupos com SLA dedicado.',
      points: ['Implementação acompanhada', 'Assistente IA dedicado', 'SAML · SSO', 'SLA contratual'] },
  ];
  return (
    <section id="planos" className="border-b border-zinc-100">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24">
        <div className="text-[11px] uppercase tracking-[0.16em] text-zinc-500 font-semibold mb-3">Planos</div>
        <h2 className="text-[28px] sm:text-[32px] lg:text-[40px] leading-[1.1] font-semibold tracking-tight mb-3">
          Três planos. Sem surpresas.
        </h2>
        <p className="text-[15px] text-zinc-600 max-w-[600px] mb-10 lg:mb-12">Os preços finais serão anunciados com o lançamento público, no <strong>outono de 2026</strong>. Os participantes da beta privada ficam com condições preferenciais durante o primeiro ano.</p>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {plans.map(p => (
            <div key={p.name} className={'group rounded-2xl border bg-white p-7 relative transition-all hover:-translate-y-1 hover:shadow-xl ' + (p.recommended ? 'border-zinc-900' : 'border-zinc-200 hover:border-zinc-300')}>
              {p.recommended && (
                <span className="absolute -top-3 left-7 inline-flex items-center gap-1 h-6 px-2.5 rounded-full text-[10.5px] font-semibold uppercase tracking-[0.08em]" style={{ background: INDIGO, color: 'white' }}>
                  <L name="sparkles" className="w-3 h-3" />Recomendado
                </span>
              )}
              <div className="text-[18px] font-semibold tracking-tight">{p.name}</div>
              <div className="text-[12.5px] text-zinc-500 mt-1">{p.sub}</div>
              <div className="mt-6 flex items-baseline gap-1">
                <span className="text-[28px] font-semibold tracking-tight">Sob consulta</span>
              </div>
              <div className="text-[11.5px] text-zinc-500 mt-1">A anunciar no lançamento</div>
              <a href="#convite" className={'mt-6 h-10 rounded-md font-medium text-[13px] inline-flex items-center justify-center gap-1.5 w-full transition-all ' +
                (p.recommended ? 'hover:shadow-md' : 'border border-zinc-200 bg-white text-zinc-900 hover:bg-zinc-50 hover:border-zinc-300')}
                style={p.recommended ? { background: '#18181B', color: 'white' } : {}}>
                {p.name === 'Grupo' ? 'Falar com vendas' : 'Pedir convite para a beta'}
                <L name="arrow-right" className="w-3.5 h-3.5" />
              </a>
              <ul className="mt-7 space-y-2.5 pt-6 border-t border-zinc-100">
                {p.points.map(pt => (
                  <li key={pt} className="flex items-start gap-2 text-[12.5px] text-zinc-700">
                    <L name="check" className="w-3.5 h-3.5 mt-0.5 shrink-0" style={{ color: p.recommended ? INDIGO : '#10B981' }} />
                    {pt}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="mt-8 text-[12.5px] text-zinc-500 text-center">
          Todos os planos incluem AT e-fatura, SAF-T PT, RGPD, suporte em português, actualizações grátis.
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ────────────────────────────────────────────────────────────
function FAQ() {
  const qs = [
    { q: 'Funciona com a Autoridade Tributária?', a: 'Sim. Comunicação directa com a AT, séries certificadas, SAF-T PT exportável em 1 clique. Validado por contabilistas certificados.' },
    { q: 'Posso migrar do Primavera / Sage / PHC?', a: 'Sim. Importamos catálogo, clientes e histórico via ficheiro Excel ou ligação directa quando disponível. Cobrimos a migração nos planos Distribuidor e Grupo.' },
    { q: 'O assistente IA vê os meus dados?', a: 'Apenas o que autoriza. Pode definir por papel a que módulos o assistente tem acesso, e o histórico de conversas pertence-lhe — pode exportá-lo ou apagá-lo a qualquer momento. Antes de qualquer alteração, o assistente apresenta-lhe sempre o resultado para aprovação.' },
    { q: 'Funciona offline na obra?', a: 'O Portal funciona em modo limitado offline (catálogo + rascunhos). O ERP completo precisa de ligação, mas é leve em 3G.' },
    { q: 'Quantos utilizadores posso ter?', a: 'Loja: 3. Distribuidor: 15. Grupo: ilimitado. Sempre com SSO e papéis (admin, comprador, chefe de obra, financeiro).' },
  ];
  return (
    <section id="faq" className="border-b border-zinc-100">
      <div className="max-w-[920px] mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24">
        <div className="text-[11px] uppercase tracking-[0.16em] text-zinc-500 font-semibold mb-3">Perguntas frequentes</div>
        <h2 className="text-[26px] sm:text-[30px] lg:text-[36px] leading-[1.1] font-semibold tracking-tight mb-8 lg:mb-10">Tudo o que precisa de saber.</h2>
        <div className="divide-y divide-zinc-100 border-y border-zinc-100">
          {qs.map((it, i) => (
            <details key={i} className="group py-5">
              <summary className="flex items-center gap-3 cursor-pointer list-none">
                <span className="text-[15px] font-medium flex-1">{it.q}</span>
                <L name="plus" className="w-4 h-4 text-zinc-400 group-open:rotate-45 transition-transform" />
              </summary>
              <p className="text-[14px] text-zinc-600 leading-relaxed mt-3 pr-8">{it.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Invite block — links to the standalone card ─────────────────────
// All CTAs are wired:
//   • "Pedir convite"        → mailto: with prefilled subject + body
//   • "Marcar 30 minutos"    → mailto: variant
//   • Mini invite card       → cards/invite.html?name=&company=&number=
//                              (clicking opens the full A5 artboard
//                              with the same demo placeholder data)
// The mailto fallback means the flow works in the browser today with no
// backend; swap to Cal.com / Tally / your own form once you have one.
const INVITE_EMAIL = 'equipa@rmar.site';
const INVITE_DEMO_NAME    = 'João Faria';
const INVITE_DEMO_COMPANY = 'Materiais Faria, Lda.';
const INVITE_DEMO_NUMBER  = '014 / 025';

function inviteCardHref({ name, company, number } = {}) {
  const p = new URLSearchParams();
  if (name)    p.set('name', name);
  if (company) p.set('company', company);
  if (number)  p.set('number', number);
  return 'cards/invite.html' + (p.toString() ? '?' + p.toString() : '');
}

function mailtoHref({ subject, body }) {
  return `mailto:${INVITE_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
}

const PEDIR_CONVITE_MAILTO = mailtoHref({
  subject: 'Beta privada · pedido de convite',
  body: [
    'Olá equipa ConstructHub,',
    '',
    'Gostaria de saber mais sobre a beta privada.',
    '',
    'Nome: ',
    'Empresa: ',
    'NIF/NIPC: ',
    'Cidade: ',
    'Telefone: ',
    '',
    'O que melhor descreve a empresa? (distribuidor / retalhista / fabricante / empreiteiro / outro)',
    '',
    'Que ERP usa hoje? ',
    '',
    'Obrigado.',
  ].join('\r\n'),
});

const MARCAR_CONVERSA_MAILTO = mailtoHref({
  subject: 'ConstructHub · marcar 30 minutos',
  body: [
    'Olá equipa ConstructHub,',
    '',
    'Gostaria de marcar uma conversa de 30 minutos para conhecer melhor o produto.',
    '',
    'Nome: ',
    'Empresa: ',
    'Disponibilidade (datas/horas): ',
    'Telefone (opcional): ',
    '',
    'Obrigado.',
  ].join('\r\n'),
});

function InviteBlock() {
  return (
    <section id="convite" className="border-b border-zinc-100 bg-zinc-900 text-white">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 flex flex-col gap-10 lg:grid lg:grid-cols-12 lg:gap-12 lg:items-center">
        <div className="lg:col-span-7">
          <div className="inline-flex items-center gap-2 h-7 px-3 rounded-full text-[11.5px] font-medium uppercase tracking-[0.12em]"
               style={{ background: 'rgba(255,255,255,0.08)', color: 'white' }}>
            <span data-pulse className="h-1.5 w-1.5 rounded-full" style={{ background: INDIGO }}></span>
            Convite · acesso antecipado
          </div>
          <h2 className="text-[32px] sm:text-[40px] lg:text-[48px] leading-[1.05] font-semibold tracking-tight mt-6">
            Junte-se à beta privada.
          </h2>
          <p className="text-[15px] sm:text-[16px] text-white/70 mt-5 max-w-[520px] leading-relaxed">
            Estamos a receber os primeiros <strong className="text-white">25 distribuidores</strong> portugueses para a beta privada.
            Acesso antecipado, suporte directo da equipa fundadora e <strong className="text-white">condições preferenciais</strong> durante o primeiro ano.
          </p>
          <div className="mt-8 flex flex-wrap items-center gap-3">
            <button type="button" onClick={() => window.openRegister && window.openRegister()}
               className="h-12 px-5 rounded-md text-zinc-900 bg-white text-[14px] font-medium inline-flex items-center gap-2">
              Pedir convite <L name="arrow-right" className="w-4 h-4" />
            </button>
            <a href={MARCAR_CONVERSA_MAILTO}
               className="h-12 px-5 rounded-md border border-white/20 text-[14px] font-medium inline-flex items-center gap-2 text-white hover:bg-white/5">
              <L name="calendar" className="w-4 h-4" />Marcar 30 minutos
            </a>
            <a href={inviteCardHref({
                 name: INVITE_DEMO_NAME, company: INVITE_DEMO_COMPANY, number: INVITE_DEMO_NUMBER,
               })}
               target="_blank" rel="noopener"
               className="h-12 px-5 rounded-md text-[14px] font-medium inline-flex items-center gap-2 text-white/80 hover:text-white">
              <L name="external-link" className="w-3.5 h-3.5" />Ver carta de convite
            </a>
          </div>
          <div className="mt-6 text-[11.5px] text-white/50">
            Sem cartão de crédito · sem compromisso · resposta em 1 dia útil
          </div>
          <div className="mt-8 pt-6 border-t border-white/10">
            <div className="text-[12.5px] text-white/70 mb-3">Ainda não está pronto? Avisamos quando lançarmos.</div>
            {typeof NewsletterForm === 'function' ? <NewsletterForm /> : null}
          </div>
        </div>

        {/* Mini invitation card preview — clickable, opens the full A5 artboard */}
        <div className="lg:col-span-5">
          <a href={inviteCardHref({
               name: INVITE_DEMO_NAME, company: INVITE_DEMO_COMPANY, number: INVITE_DEMO_NUMBER,
             })}
             target="_blank" rel="noopener"
             aria-label="Abrir carta de convite (exemplo)"
             className="block group">
            <InviteCardPreview />
          </a>
        </div>
      </div>
    </section>
  );
}

// Slim, preview-only version of the card; the standalone artboard at
// cards/invite.html renders the full A5 thing with QR + footer band.
function InviteCardPreview() {
  return (
    <div className="rounded-2xl bg-white text-zinc-900 p-6 relative overflow-hidden mx-auto lg:mr-0 lg:ml-auto transition-transform group-hover:-translate-y-1"
         style={{ aspectRatio: '5/7', maxWidth: 380, boxShadow: '0 40px 80px -20px rgba(0,0,0,0.4)' }}>
      <div className="absolute top-0 left-0 right-0 h-1.5" style={{ background: INDIGO }}></div>
      <div className="flex items-center justify-between text-[10.5px] uppercase tracking-[0.16em] text-zinc-500 font-semibold">
        <span>Convite pessoal</span>
        <span className="font-mono">N.º 014 / 025</span>
      </div>
      <div className="mt-12">
        <div className="text-[10.5px] uppercase tracking-[0.16em] text-zinc-400 font-semibold mb-3">Está convidado para</div>
        <div className="text-[28px] leading-[1.1] font-semibold tracking-tight">
          O lançamento da beta privada do <span style={{ color: INDIGO }}>ConstructHub</span>.
        </div>
      </div>
      <div className="mt-10 grid grid-cols-2 gap-x-4 gap-y-3 text-[11px]">
        <div>
          <div className="uppercase tracking-[0.12em] text-zinc-400 font-semibold text-[10px]">Acesso</div>
          <div className="text-[13px] font-semibold mt-1">Beta privada</div>
        </div>
        <div>
          <div className="uppercase tracking-[0.12em] text-zinc-400 font-semibold text-[10px]">Janela</div>
          <div className="text-[13px] font-semibold mt-1">Outono de 2026</div>
        </div>
      </div>
      <div className="absolute bottom-6 left-6 right-6 flex items-center gap-2">
        <span className="h-7 w-7 rounded-md grid place-items-center text-white font-bold text-[11px]" style={{ background: '#18181B' }}>CH</span>
        <span className="text-[11px] font-semibold tracking-tight">ConstructHub</span>
        <span className="flex-1"></span>
        <span className="text-[10px] text-zinc-400 group-hover:text-zinc-700 transition-colors inline-flex items-center gap-1">
          <L name="external-link" className="w-2.5 h-2.5" />Abrir carta
        </span>
      </div>
    </div>
  );
}

// ─── Footer ──────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="bg-white">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-12 gap-x-6 gap-y-10 lg:gap-10">
        <div className="col-span-2 sm:col-span-4 lg:col-span-4">
          <div className="flex items-center gap-2.5 mb-4">
            <span className="h-7 w-7 rounded-md grid place-items-center text-white font-bold text-[13px]" style={{ background: '#18181B' }}>CH</span>
            <span className="text-[15px] font-semibold tracking-tight">ConstructHub</span>
          </div>
          <p className="text-[13px] text-zinc-600 leading-relaxed max-w-[280px]">
            O ERP feito para quem vende materiais de construção. Em Portugal, em português.
          </p>
          <div className="mt-6 flex items-center gap-2">
            {['briefcase', 'play-circle', 'mail'].map(s => (
              <a key={s} href="#" className="h-8 w-8 rounded-md border border-zinc-200 grid place-items-center hover:bg-zinc-50">
                <L name={s} className="w-3.5 h-3.5 text-zinc-600" />
              </a>
            ))}
          </div>
        </div>
        {[
          { t: 'Produto',   items: [
            ['Build · ERP', '#produto'],
            ['Portal B2B', '#produto'],
            ['Assistente IA', '#ia'],
            ['Planos', '#planos'],
            ['Roadmap', '#'],
          ] },
          { t: 'Sector',    items: [['Distribuidores', '#'], ['Retalhistas', '#'], ['Fabricantes', '#'], ['Empreiteiros', '#'], ['Sucessos', '#']] },
          { t: 'Empresa',   items: [['Sobre nós', '#'], ['Carreiras', '#'], ['Imprensa', '#'], ['Contacto', '#convite'], ['Beta privada', '#convite']] },
          { t: 'Legal',     items: [['Privacidade', '#'], ['Termos', '#'], ['RGPD', '#'], ['Segurança', '#'], ['SAF-T PT', '#']] },
        ].map(col => (
          <div key={col.t} className="lg:col-span-2">
            <div className="text-[11px] uppercase tracking-[0.12em] text-zinc-900 font-semibold mb-4">{col.t}</div>
            <ul className="space-y-2.5">
              {col.items.map(([label, href]) => (
                <li key={label}><a href={href} className="text-[12.5px] text-zinc-600 hover:text-zinc-900">{label}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div className="border-t border-zinc-100">
        <div className="max-w-[1200px] mx-auto px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between text-[11.5px] text-zinc-500 flex-wrap gap-3">
          <div>© 2026 ConstructHub · Portugal</div>
          <div className="flex items-center gap-4">
            <span className="inline-flex items-center gap-1"><L name="check-circle-2" className="w-3 h-3 text-emerald-600" />Sistema operacional</span>
            <span>PT · ES · EN</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function LandingPage() {
  return (
    <div className="w-full bg-white" style={{ fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' }}>
      <MarketingNav />
      <Problem />
      <Products />
      <ProductTour />
      <Features />
      <AISpotlight />
      <Numbers />
      <Pricing />
      <FAQ />
      <InviteBlock />
      <Footer />
      {typeof RegisterModal === 'function' ? <RegisterModal /> : null}
    </div>
  );
}

Object.assign(window, { LandingPage });