// precos-page.jsx — Página de Preços
const {
  IconArrowRight, IconArrowUpRight, IconHouse, IconCoins, IconHammer,
  IconShield, IconChart, IconCompass, IconBrain, IconKey, IconSearch,
  IconCheck, IconLayers, IconDoc, IconHandshake, IconBell, IconFolder,
  IconWhatsapp, IconChat, IconTimer
} = window.Icons;

/* ---------- Hero ---------- */
function PrecosHero() {
  return (
    <section className="precos-hero canvas">
      <div className="container">
        <div className="precos-hero-inner">
          <div>
            <div className="eyebrow">Planos &amp; preços</div>
            <h1>
              Um plano para cada<br/>
              estágio da sua <span className="accent">operação</span>
            </h1>
            <p className="lede">
              Do primeiro flip ao portfólio com dezenas de imóveis simultâneos.
              Comece com o essencial, expanda com o time, escale com governança.
            </p>
          </div>

          <aside className="hero-side-meta" aria-label="Resumo dos planos">
            <div className="row">
              <div className="ix">01</div>
              <div>
                <p className="t">Preço fixo por plano.</p>
                <p className="d">Você assina um plano, não paga por operador nem por imóvel. O que define o preço é o tamanho da operação.</p>
              </div>
            </div>
            <div className="row">
              <div className="ix">02</div>
              <div>
                <p className="t">Comece grátis, sem prazo.</p>
                <p className="d">O plano Free é gratuito para sempre. Use para conhecer o Flipper Hub no seu primeiro imóvel, sem cartão.</p>
              </div>
            </div>
            <div className="row">
              <div className="ix">03</div>
              <div>
                <p className="t">7 dias para testar os planos pagos.</p>
                <p className="d">Experimente o plano que escolher por 7 dias, sem cartão. Cadastre seus imóveis reais e veja a operação organizada.</p>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

/* ---------- Billing toggle + Plan cards ---------- */
function PrecosPlanos() {
  const [billing, setBilling] = React.useState('anual'); // 'mensal' | 'anual'

  const fmt = (n) => n.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  const fmtInt = (n) => n.toLocaleString('pt-BR');

  const plans = [
    {
      id: 'free',
      name: 'Free',
      tag: 'Para conhecer o Flipper Hub na prática.',
      desc: 'Comece a operar com o essencial, sem cartão e sem prazo. Para quem está testando o método ou tocando o primeiro imóvel.',
      meta: 'Grátis para sempre · sem cartão',
      cta: { primary: 'Começar grátis' },
      featured: false,
      free: true,
      featuresHead: 'Inclui',
      features: [
        <><strong>1 imóvel ativo</strong> em operação</>,
        <>Ficha do imóvel com etapas e histórico</>,
        <>Análise de viabilidade básica</>,
        <>Suporte pela central de ajuda</>,
      ],
    },
    {
      id: 'essencial',
      name: 'Essencial',
      tag: 'Para o primeiro flip ou a primeira operação séria.',
      desc: 'O essencial para sair da planilha e tratar cada imóvel como uma operação completa.',
      monthly: 147,
      annualMonthly: 117.60,
      annualTotal: 1411.20,
      cta: { primary: 'Testar 7 dias grátis' },
      featured: false,
      featuresHead: 'Inclui',
      features: [
        <><strong>Imóveis ilimitados</strong> em pipeline e operação</>,
        <>Ficha do imóvel com etapas, documentos e histórico</>,
        <>Análise de viabilidade com cenários e ITBI</>,
        <>Financeiro do imóvel: custos, aportes, repasses</>,
        <>Importação de planilha</>,
        <>Suporte por e-mail · resposta em até 1 dia útil</>,
      ],
    },
    {
      id: 'profissional',
      name: 'Profissional',
      tag: 'Para o time que opera vários imóveis ao mesmo tempo.',
      desc: 'Operação completa do garimpo ao fechamento, com obra, comercial e prestação de contas.',
      monthly: 297,
      annualMonthly: 237.60,
      annualTotal: 2851.20,
      cta: { primary: 'Testar 7 dias grátis' },
      featured: true,
      badge: 'Mais escolhido',
      featuresHead: 'Tudo do Essencial, mais',
      features: [
        <>Múltiplos usuários na mesma conta, com papéis e permissões</>,
        <>Módulo de <strong>obra e reforma</strong>: cronograma, medições, fornecedores</>,
        <>Módulo <strong>comercial</strong>: canais de saída, propostas, repasses</>,
        <>Prestação de contas por imóvel e por investidor</>,
        <>Integração com WhatsApp Business e e-mail</>,
        <>Suporte prioritário · resposta em até 4h úteis</>,
      ],
    },
    {
      id: 'enterprise',
      name: 'Enterprise',
      tag: 'Para operações com vários times e governança.',
      desc: 'Para quem opera com escala, múltiplos times e precisa de controle, integrações e suporte dedicado.',
      monthly: 497,
      annualMonthly: 397.60,
      annualTotal: 4771.20,
      cta: { primary: 'Testar 7 dias grátis' },
      featured: false,
      featuresHead: 'Tudo do Profissional, mais',
      features: [
        <>Múltiplos usuários com papéis avançados e permissões granulares</>,
        <>Integração com WhatsApp Business, e-mail e webhooks</>,
        <>Onboarding assistido com o time do Flipper Hub</>,
        <>Suporte prioritário · resposta em até 2h úteis</>,
      ],
    },
  ];

  return (
    <section className="section canvas tight" id="planos">
      <div className="container">
        <div className="billing-bar">
          <div className="billing-toggle" role="tablist" aria-label="Periodicidade de cobrança">
            <button role="tab" aria-pressed={billing === 'mensal'} onClick={() => setBilling('mensal')}>
              Mensal
            </button>
            <button role="tab" aria-pressed={billing === 'anual'} onClick={() => setBilling('anual')}>
              Anual <span className="save-tag">−20%</span>
            </button>
          </div>
          <div className="billing-helper">
            Preços em reais (R$). Impostos não inclusos. Sem fidelidade.
          </div>
        </div>

        <div className="plans">
          {plans.map(p => {
            const isAnnual = billing === 'anual';
            const displayPrice = p.free ? null : (isAnnual ? p.annualMonthly : p.monthly);
            return (
              <div className={`plan ${p.featured ? 'featured' : ''} ${p.free ? 'free' : ''}`} key={p.id}>
                {p.badge && <div className="plan-badge">{p.badge}</div>}

                <div className="plan-head">
                  <div className="plan-name">{p.name}</div>
                  <div className="plan-tag">{p.tag}</div>
                  <p className="plan-desc">{p.desc}</p>
                </div>

                <div className={`plan-price ${p.free ? 'free' : ''}`}>
                  {p.free ? (
                    <>
                      <div className="row">
                        <span className="amount">Grátis</span>
                      </div>
                      <div className="meta">{p.meta}</div>
                    </>
                  ) : (
                    <>
                      <div className="row">
                        <span className="currency">R$</span>
                        <span className="amount">{fmt(displayPrice)}</span>
                        <span className="per">/mês</span>
                      </div>
                      {isAnnual ? (
                        <div className="price-extra">
                          <span className="strike">de R$ {fmt(p.monthly)}/mês</span>
                          <span className="dot">·</span>
                          <span className="save">economize 20%</span>
                        </div>
                      ) : (
                        <div className="price-extra">
                          <span className="hint">ou R$ {fmt(p.annualMonthly)}/mês no anual</span>
                        </div>
                      )}
                      <div className="meta">
                        {isAnnual
                          ? <>Cobrado anualmente · R$ {fmt(p.annualTotal)}/ano</>
                          : <>Cobrado mensalmente · cancele quando quiser</>}
                      </div>
                    </>
                  )}
                </div>

                <div className="plan-cta">
                  <a className="btn btn-primary" href="#assinar">
                    {p.cta.primary} <IconArrowRight size={16} />
                  </a>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------- Tese (quote band) ---------- */
function PrecosTese() {
  return (
    <section className="section canvas tight">
      <div className="container">
        <div className="quote-band">
          <p className="quote">
            Um plano para cada<br/>
            tamanho de <em>operação.</em>
          </p>
          <div className="src">Lógica de cobrança · Flipper Hub</div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Compare table ---------- */
function PrecosComparativo() {
  const sections = [
    {
      title: 'Operação do imóvel',
      rows: [
        { feat: 'Imóveis ativos', desc: 'Em pipeline, em obra ou em comercialização.', cells: ['1', 'Ilimitado', 'Ilimitado', 'Ilimitado'] },
        { feat: 'Ficha do imóvel', desc: 'Etapas, documentos, histórico e responsáveis.', cells: [true, true, true, true] },
        { feat: 'Análise de viabilidade', desc: 'Cenários, ITBI, custos previstos e margem.', cells: ['Básica', true, true, true] },
        { feat: 'Financeiro do imóvel', desc: 'Custos, aportes, repasses e resultado por ativo.', cells: [false, true, true, true] },
      ],
    },
    {
      title: 'Obra, comercial e fechamento',
      rows: [
        { feat: 'Módulo de obra', desc: 'Cronograma, medições e gestão de fornecedores.', cells: [false, false, true, true] },
        { feat: 'Módulo comercial', desc: 'Canais de saída, propostas e repasses.', cells: [false, false, true, true] },
        { feat: 'Prestação de contas', desc: 'Por imóvel, sócio ou investidor.', cells: [false, false, true, true] },
        { feat: 'Comparativo de portfólio', desc: 'Visão consolidada entre operações.', cells: [false, false, true, true] },
      ],
    },
    {
      title: 'Inteligência e dados',
      rows: [
        { feat: 'Importação de planilhas', cells: [false, true, true, true] },
        { feat: 'Múltiplos usuários', desc: 'Papéis e permissões na mesma conta.', cells: [false, false, true, true] },
        { feat: 'Integração WhatsApp + e-mail', cells: [false, false, true, true] },
        { feat: 'Permissões granulares', desc: 'Controle fino de acessos por área.', cells: [false, false, false, true] },
      ],
    },
    {
      title: 'Suporte',
      rows: [
        { feat: 'Tempo de resposta', cells: ['Central de ajuda', '1 dia útil', '4h úteis', '2h úteis'] },
        { feat: 'Onboarding assistido', desc: 'Time do Flipper Hub apoia a configuração inicial.', cells: [false, false, false, true] },
      ],
    },
  ];

  const renderCell = (v) => {
    if (v === true) return <span className="check"><IconCheck size={14} /></span>;
    if (v === false) return <span className="dash">—</span>;
    return <span className="v">{v}</span>;
  };

  return (
    <section className="section surface">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow muted">Comparativo</div>
          <h2 className="h-display sm">Cada plano, ponta a ponta</h2>
          <p className="body-lg">
            Tudo que está em cada plano, organizado pelas mesmas etapas que você
            já vive na sua operação. Sem letras miúdas.
          </p>
        </div>

        <div className="compare-wrap">
          <table className="compare-table">
            <thead>
              <tr>
                <th>Recursos</th>
                <th>
                  <span className="col-name">Free</span>
                  <span className="col-tag">Para conhecer na prática.</span>
                </th>
                <th>
                  <span className="col-name">Essencial</span>
                  <span className="col-tag">Para o primeiro flip.</span>
                </th>
                <th className="col-featured">
                  <span className="col-name">Profissional</span>
                  <span className="col-tag">Para o time que opera vários imóveis.</span>
                </th>
                <th>
                  <span className="col-name">Enterprise</span>
                  <span className="col-tag">Para operações com vários times.</span>
                </th>
              </tr>
            </thead>
            <tbody>
              {sections.map((s, si) => (
                <React.Fragment key={si}>
                  <tr className="section-row">
                    <td colSpan={5}>{s.title}</td>
                  </tr>
                  {s.rows.map((r, ri) => (
                    <tr key={ri}>
                      <td className="feat-name">
                        {r.feat}
                        {r.desc && <span className="desc">{r.desc}</span>}
                      </td>
                      <td className="cell">{renderCell(r.cells[0])}</td>
                      <td className="cell">{renderCell(r.cells[1])}</td>
                      <td className="cell">{renderCell(r.cells[2])}</td>
                      <td className="cell">{renderCell(r.cells[3])}</td>
                    </tr>
                  ))}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

/* ---------- Trust strip ---------- */
function PrecosTrust() {
  const cells = [
    { icon: <IconShield size={22} />, t: 'Dados em servidores no Brasil.', d: 'Hospedagem em datacenter nacional, com backups diários e LGPD desde o primeiro dia.' },
    { icon: <IconTimer size={22} />, t: '7 dias para testar.', d: 'Sem cartão, sem contrato. Cadastre imóveis reais e veja a operação organizada.' },
    { icon: <IconHandshake size={22} />, t: 'Sem fidelidade.', d: 'Cancele a qualquer momento. Você leva os dados da sua operação com você.' },
    { icon: <IconChat size={22} />, t: 'Suporte humano, em português.', d: 'Time real, conversa real, no fuso real. WhatsApp, e-mail e chat na plataforma.' },
  ];
  return (
    <section className="section canvas tight">
      <div className="container">
        <div className="trust-strip">
          {cells.map((c, i) => (
            <div className="trust-cell" key={i}>
              <div className="icon">{c.icon}</div>
              <div className="t">{c.t}</div>
              <div className="d">{c.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function PrecosFAQ() {
  const items = [
    { q: 'Como funciona a cobrança?',
      d: 'Cobrança por plano, com preço fixo. Você não paga por operador nem por imóvel — o que define o plano é o tamanho e a complexidade da sua operação.' },
    { q: 'Existe limite de imóveis?',
      d: 'No Free, você opera 1 imóvel ativo. Nos planos Essencial, Profissional e Enterprise, você pode cadastrar quantos imóveis quiser, em qualquer estágio: prospecção, análise, obra, comercialização ou fechado.' },
    { q: 'O Free é mesmo gratuito para sempre?',
      d: 'Sim. O Free não tem prazo, não pede cartão e não vira cobrança automática. Use o tempo que precisar para conhecer o Flipper Hub no seu primeiro imóvel.' },
    { q: 'Como funciona o teste de 7 dias?',
      d: 'Você cria sua conta, escolhe um plano pago e usa todas as funcionalidades dele por 7 dias. Sem cartão de crédito. Ao fim, você decide se assina ou volta para o Free.' },
    { q: 'Posso mudar de plano depois?',
      d: 'Sim, em qualquer momento. Upgrades são imediatos com cobrança proporcional. Downgrades valem a partir do próximo ciclo, mantendo seus dados intactos.' },
    { q: 'Atendem a fundos e gestoras?',
      d: 'Sim. Para operações com capital de terceiros, montamos uma proposta sob medida: workspaces separados, trilha de auditoria, SSO, relatórios para comitê e SLA contratual. Fale com vendas na faixa "Sob medida".' },
    { q: 'Quais formas de pagamento aceitam?',
      d: 'Cartão de crédito, boleto e PIX para o anual. Para propostas sob medida, emitimos nota fiscal e operamos com contrato e prazo de pagamento combinados.' },
    { q: 'Posso cancelar a qualquer momento?',
      d: 'Sim. Não há fidelidade nos planos Essencial, Profissional e Enterprise. Propostas sob medida seguem o contrato firmado. Em qualquer caso, você pode exportar todos os dados da sua operação.' },
  ];
  return (
    <section className="section surface">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow muted">Perguntas frequentes</div>
          <h2 className="h-display sm">Antes de assinar, talvez você queira saber</h2>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <div className="faq-item" key={i}>
              <p className="q">{it.q}</p>
              <p className="a">{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA ---------- */
function PrecosCTA() {
  return (
    <section className="section canvas">
      <div className="container">
        <div className="cta-stage">
          <h2>Comece pela operação,<br/>não pela ferramenta</h2>
          <p>
            Crie sua conta no Free e organize seu primeiro imóvel de verdade.
            Quando a operação crescer, o plano cresce junto — sem reprecificar
            a cada compra.
          </p>
          <div className="cta-actions">
            <a className="btn btn-primary btn-lg" href="#assinar">
              Começar grátis <IconArrowRight size={16} />
            </a>
          </div>
          <div style={{ marginTop: 28, fontSize: 13, color: 'var(--fg-subtle)' }}>
            Sem cartão · 7 dias para testar os planos pagos · Português, real, do Brasil
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Page ---------- */
function PrecosPage() {
  return (
    <>
      <PrecosHero />
      <PrecosPlanos />
      <div className="reveal"><PrecosTrust /></div>
      <div className="reveal"><PrecosFAQ /></div>
      <div className="reveal"><PrecosCTA /></div>
    </>
  );
}

window.PrecosPage = PrecosPage;