// Trainer Connect — Landing Page (parte 3: Planos, Beta, FAQ, CTA, Footer)

// ====================================================================
// 6 · PLANOS
// ====================================================================

function LandingPlanos() {
  const isMobile = window.useMedia('(max-width: 900px)');
  const [annual, setAnnual] = React.useState(false);

  const plans = [
    {
      id: 'free', name: 'Free',
      tagline: 'Pra começar a profissionalizar.',
      monthly: '0', annual: '0',
      annualHint: null,
      cap: 'até 10 alunos',
      features: [
        'Cadastro de alunos',
        'Anamnese guiada',
        'Biblioteca de exercícios',
        'Rotinas e treinos',
        'Acompanhamento de evolução',
      ],
      cta: 'Criar conta',
      ctaVariant: 'secondary',
      ctaHref: 'https://app.trainerconnect.fit/signup',
    },
    {
      id: 'start', name: 'Start',
      tagline: 'Quando o WhatsApp começou a doer.',
      monthly: '19,90', annual: '199',
      annualHint: '2 meses grátis',
      cap: 'até 30 alunos',
      featured: true,
      features: [
        'Tudo do Free',
        'Cobrança recorrente Pix',
        'Status financeiro por aluno',
        'Bloqueio automático em atraso',
        'Alertas de inadimplência',
        'Dashboard operacional',
      ],
      cta: 'Começar Start',
      ctaVariant: 'primary',
      ctaHref: 'https://app.trainerconnect.fit/signup?plan=start',
    },
    {
      id: 'pro', name: 'Pro',
      tagline: 'Pra quem já vive disso.',
      monthly: '39,90', annual: '399',
      annualHint: '2 meses grátis',
      cap: 'alunos ilimitados',
      features: [
        'Tudo do Start',
        'Visão ampliada de KPIs',
        'Alertas avançados',
        'Prioridade em novos módulos',
        'Suporte direto',
      ],
      cta: 'Falar conosco',
      ctaVariant: 'secondary',
      ctaHref: 'mailto:silvio@trainerconnect.fit?subject=Plano%20Pro',
    },
  ];

  return (
    <section id="planos" style={{
      padding: isMobile ? '40px 20px' : '96px 32px',
      borderTop: '1px solid var(--tc-line-1)',
      background: 'var(--tc-bg-1)',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionEyebrow num="05" label="Planos" />
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          gap: 24, flexWrap: 'wrap', marginTop: 12,
        }}>
          <h2 style={{
            margin: 0,
            fontFamily: 'Inter Tight', fontWeight: 600, letterSpacing: '-0.025em',
            fontSize: isMobile ? 'clamp(28px, 7vw, 36px)' : 'clamp(32px, 3.5vw, 44px)',
            maxWidth: 680, lineHeight: 1.1,
          }}>
            Comece de graça.<br/>
            <span style={{ color: 'var(--tc-fg-3)' }}>Cresça quando crescer.</span>
          </h2>

          {/* Toggle mensal/anual */}
          <div style={{
            display: 'inline-flex', padding: 3,
            background: 'var(--tc-bg-0)', border: '1px solid var(--tc-line-1)',
            borderRadius: 10, gap: 2,
          }}>
            <button onClick={() => setAnnual(false)} style={{
              padding: '8px 14px', borderRadius: 7,
              background: !annual ? 'var(--tc-bg-3)' : 'transparent',
              color: !annual ? 'var(--tc-fg-0)' : 'var(--tc-fg-2)',
              fontSize: 13, fontWeight: !annual ? 600 : 500,
              transition: 'background 120ms, color 120ms',
            }}>Mensal</button>
            <button onClick={() => setAnnual(true)} style={{
              padding: '8px 14px', borderRadius: 7,
              background: annual ? 'var(--tc-bg-3)' : 'transparent',
              color: annual ? 'var(--tc-fg-0)' : 'var(--tc-fg-2)',
              fontSize: 13, fontWeight: annual ? 600 : 500,
              transition: 'background 120ms, color 120ms',
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              Anual
              <span style={{
                fontFamily: 'JetBrains Mono', fontSize: 10, fontWeight: 600,
                padding: '2px 6px', borderRadius: 999,
                background: 'var(--tc-success-bg)', color: 'var(--tc-success)',
                border: '1px solid var(--tc-success-line)',
              }}>-17%</span>
            </button>
          </div>
        </div>

        {/* Cards */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 12, marginTop: 48,
          alignItems: 'stretch',
        }}>
          {plans.map((p) => (
            <PlanoCard key={p.id} plan={p} annual={annual}/>
          ))}
        </div>

        {/* Linha sutil sobre Loja */}
        <div style={{
          marginTop: 24, padding: '18px 22px',
          background: 'var(--tc-bg-2)',
          border: '1px solid var(--tc-line-1)',
          borderRadius: 14,
          display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 10,
            background: 'var(--tc-bg-3)', border: '1px solid var(--tc-line-2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--tc-fg-1)', flexShrink: 0,
          }}>
            <Icon name="store" size={18}/>
          </div>
          <div style={{ flex: 1, minWidth: 240 }}>
            <div style={{ fontFamily: 'Inter Tight', fontSize: 15, fontWeight: 600, letterSpacing: '-0.015em' }}>
              Vendendo programas e treinos avulsos?
            </div>
            <div style={{ fontSize: 13, color: 'var(--tc-fg-2)', marginTop: 4, lineHeight: 1.5 }}>
              A taxa da loja é <span style={{ fontFamily: 'JetBrains Mono', color: 'var(--tc-fg-1)' }}>10%</span> por venda
              <span style={{ color: 'var(--tc-fg-3)' }}> · </span>
              mínimo <span style={{ fontFamily: 'JetBrains Mono', color: 'var(--tc-fg-1)' }}>R$ 2,99</span>
              <span style={{ color: 'var(--tc-fg-3)' }}> · </span>
              independente do plano contratado.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PlanoCard({ plan, annual }) {
  const isMobile = window.useMedia('(max-width: 900px)');
  const featured = plan.featured;
  const price = annual ? plan.annual : plan.monthly;
  const isFree = plan.id === 'free';

  return (
    <div style={{
      position: 'relative',
      background: featured ? 'var(--tc-bg-3)' : 'var(--tc-bg-2)',
      border: `1px solid ${featured ? 'var(--tc-line-3)' : 'var(--tc-line-1)'}`,
      borderRadius: 20,
      padding: isMobile ? 24 : 28,
      display: 'flex', flexDirection: 'column', gap: 24,
      boxShadow: featured ? '0 24px 60px rgba(0,0,0,0.4)' : 'none',
      transform: featured && !isMobile ? 'translateY(-4px)' : 'none',
    }}>
      {featured && (
        <div style={{
          position: 'absolute', top: -10, left: 24,
          padding: '4px 10px',
          background: 'var(--tc-accent)', color: 'var(--tc-accent-fg)',
          borderRadius: 999, fontSize: 10, fontWeight: 600,
          letterSpacing: '0.06em', textTransform: 'uppercase',
          display: 'flex', alignItems: 'center', gap: 4,
        }}>
          <Icon name="star" size={10}/> Mais popular
        </div>
      )}

      <div>
        <div style={{
          fontFamily: 'Inter Tight', fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em',
        }}>{plan.name}</div>
        <div style={{ fontSize: 13, color: 'var(--tc-fg-2)', marginTop: 4 }}>{plan.tagline}</div>
      </div>

      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
          <span style={{ fontFamily: 'JetBrains Mono', fontSize: 14, color: 'var(--tc-fg-2)', fontWeight: 500 }}>R$</span>
          <span style={{
            fontFamily: 'JetBrains Mono', fontSize: 44, fontWeight: 600,
            letterSpacing: '-0.04em', lineHeight: 1,
          }}>{price}</span>
          <span style={{ fontSize: 13, color: 'var(--tc-fg-2)' }}>
            /{annual ? 'ano' : 'mês'}
          </span>
        </div>
        {annual && plan.annualHint && !isFree ? (
          <div style={{ marginTop: 6, fontSize: 12, color: 'var(--tc-success)', fontFamily: 'JetBrains Mono' }}>
            {plan.annualHint}
          </div>
        ) : (
          <div style={{ marginTop: 6, fontSize: 12, color: 'var(--tc-fg-3)' }}>&nbsp;</div>
        )}
      </div>

      <div style={{
        padding: '10px 12px',
        background: featured ? 'var(--tc-bg-2)' : 'var(--tc-bg-1)',
        border: '1px solid var(--tc-line-1)',
        borderRadius: 10,
        fontSize: 12, color: 'var(--tc-fg-1)',
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <Icon name="users" size={13} style={{ color: 'var(--tc-fg-2)' }}/>
        <span style={{ fontWeight: 500 }}>{plan.cap}</span>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        {plan.features.map((f, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, color: 'var(--tc-fg-1)' }}>
            <Icon name="check" size={14} style={{ color: featured ? 'var(--tc-fg-0)' : 'var(--tc-fg-2)', marginTop: 2, flexShrink: 0 }}/>
            <span style={{ lineHeight: 1.45 }}>{f}</span>
          </div>
        ))}
      </div>

      <a href={plan.ctaHref}
        className={`tc-btn tc-btn--${plan.ctaVariant} tc-btn--lg tc-btn--block`}
        style={{ width: '100%' }}>
        {plan.cta}
      </a>
    </div>
  );
}

// ====================================================================
// 7 · BETA (transparência)
// ====================================================================

function LandingBeta() {
  const isMobile = window.useMedia('(max-width: 768px)');
  return (
    <section style={{
      padding: isMobile ? '40px 20px' : '96px 32px',
      borderTop: '1px solid var(--tc-line-1)',
    }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        <SectionEyebrow num="06" label="Beta aberto" />
        <div style={{
          marginTop: 28,
          background: 'var(--tc-bg-2)',
          border: '1px solid var(--tc-line-1)',
          borderRadius: 20,
          padding: isMobile ? 24 : 40,
          display: 'flex', gap: isMobile ? 20 : 32,
          flexDirection: isMobile ? 'column' : 'row',
          alignItems: isMobile ? 'flex-start' : 'center',
        }}>
          <div style={{
            width: isMobile ? 56 : 84, height: isMobile ? 56 : 84, borderRadius: '50%',
            background: 'var(--tc-bg-3)', border: '1px solid var(--tc-line-2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'Inter Tight', fontSize: isMobile ? 20 : 26, fontWeight: 600,
            letterSpacing: '0.02em', color: 'var(--tc-fg-0)',
            flexShrink: 0,
          }}>SB</div>

          <div style={{ flex: 1 }}>
            <h2 style={{
              margin: 0,
              fontFamily: 'Inter Tight', fontWeight: 600, letterSpacing: '-0.025em',
              fontSize: isMobile ? 22 : 28, lineHeight: 1.15,
            }}>
              <span style={{ color: 'var(--tc-fg-0)' }}>O Trainer Connect está em beta com personals reais.</span>
              <span style={{ color: 'var(--tc-fg-3)' }}> Junte-se aos primeiros, mande feedback direto pra mim, ajude a construir o produto.</span>
            </h2>
            <div style={{ marginTop: 20, display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
              <div>
                <div style={{ fontFamily: 'Inter Tight', fontSize: 15, fontWeight: 600 }}>Silvio Baroni</div>
                <div style={{ fontSize: 12, color: 'var(--tc-fg-2)' }}>Criador · Trainer Connect</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ====================================================================
// 8 · FAQ
// ====================================================================

const FAQ_ITEMS = [
  {
    q: 'Funciona pra personal autônomo PF (sem CNPJ)?',
    a: 'Sim. Você usa sua conta PF normalmente e recebe os pagamentos dos alunos direto na sua chave Pix. Sem precisar abrir CNPJ.',
  },
  {
    q: 'Como funciona a cobrança automática dos alunos?',
    a: 'Você cadastra o valor mensal e o dia de vencimento. O sistema gera Pix automaticamente, manda pro aluno e bloqueia o acesso dele se atrasar (com carência que você define).',
  },
  {
    q: 'Posso testar antes de pagar?',
    a: 'Sim. O plano Free é para sempre e atende até 10 alunos. Sem cartão. Sem trial que vence.',
  },
  {
    q: 'Posso vender programas e treinos avulsos?',
    a: 'Sim, em qualquer plano. A taxa por venda é 10% (mínimo R$ 2,99). Você define o preço, a plataforma processa.',
  },
  {
    q: 'Meus dados ficam comigo?',
    a: 'Sim. Conformidade com LGPD. Você pode exportar tudo a qualquer momento. Se cancelar, seus dados são preservados por 30 dias e depois deletados conforme você pedir.',
  },
  {
    q: 'Onde os pagamentos caem?',
    a: 'Direto na sua conta. O Trainer Connect não retém dinheiro de mensalidade — só atua como ponte entre você e seu aluno. Na loja, o split é automático: você recebe 90%, plataforma 10%.',
  },
  {
    q: 'Posso migrar de planilha pro Trainer Connect?',
    a: 'Sim. No primeiro acesso temos um fluxo de importação. Durante o beta, eu acompanho a migração com você pessoalmente.',
  },
  {
    q: 'Tem app pra Android e iOS?',
    a: 'Sim, funciona como app no celular (PWA). Aluno e personal usam pelo navegador como se fosse app nativo, com ícone na tela inicial e notificações. App nativo está no roadmap.',
  },
];

function LandingFAQ() {
  const isMobile = window.useMedia('(max-width: 768px)');
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{
      padding: isMobile ? '40px 20px' : '96px 32px',
      borderTop: '1px solid var(--tc-line-1)',
      background: 'var(--tc-bg-1)',
    }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <SectionEyebrow num="07" label="FAQ" />
        <h2 style={{
          margin: '12px 0 0',
          fontFamily: 'Inter Tight', fontWeight: 600, letterSpacing: '-0.025em',
          fontSize: isMobile ? 'clamp(28px, 7vw, 36px)' : 'clamp(32px, 3.5vw, 44px)',
          lineHeight: 1.1,
        }}>
          Perguntas frequentes.
        </h2>

        <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {FAQ_ITEMS.map((item, i) => (
            <FAQItem key={i} item={item} isOpen={open === i} onToggle={() => setOpen(open === i ? -1 : i)}/>
          ))}
        </div>

        <div style={{
          marginTop: 32, padding: '20px 22px',
          background: 'var(--tc-bg-2)', border: '1px solid var(--tc-line-1)',
          borderRadius: 14,
          display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
        }}>
          <Icon name="send" size={16} style={{ color: 'var(--tc-fg-2)' }}/>
          <div style={{ flex: 1, minWidth: 200 }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Outra dúvida?</div>
            <div style={{ fontSize: 13, color: 'var(--tc-fg-2)', marginTop: 2 }}>Manda direto pra mim, respondo em até 24h.</div>
          </div>
          <a href="mailto:silvio@trainerconnect.fit" className="tc-btn tc-btn--secondary">Falar com o criador</a>
        </div>
      </div>
    </section>
  );
}

function FAQItem({ item, isOpen, onToggle }) {
  return (
    <div style={{
      background: 'var(--tc-bg-2)',
      border: `1px solid ${isOpen ? 'var(--tc-line-2)' : 'var(--tc-line-1)'}`,
      borderRadius: 14,
      overflow: 'hidden',
      transition: 'border-color 160ms var(--tc-ease)',
    }}>
      <button onClick={onToggle} style={{
        width: '100%', padding: '18px 22px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        textAlign: 'left',
      }}>
        <span style={{
          fontFamily: 'Inter Tight', fontSize: 16, fontWeight: 600, letterSpacing: '-0.015em',
          color: 'var(--tc-fg-0)', lineHeight: 1.35,
        }}>{item.q}</span>
        <span style={{
          width: 28, height: 28, borderRadius: '50%',
          background: 'var(--tc-bg-3)', border: '1px solid var(--tc-line-2)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--tc-fg-1)',
          transition: 'transform 200ms var(--tc-ease)',
          transform: isOpen ? 'rotate(180deg)' : 'none',
          flexShrink: 0,
        }}>
          <Icon name="chevronDown" size={14}/>
        </span>
      </button>
      {isOpen && (
        <div style={{
          padding: '0 22px 20px',
          fontSize: 14, color: 'var(--tc-fg-1)', lineHeight: 1.6,
        }}>
          {item.a}
        </div>
      )}
    </div>
  );
}

// ====================================================================
// 9 · CTA FINAL
// ====================================================================

function LandingCTA() {
  const isMobile = window.useMedia('(max-width: 768px)');
  return (
    <section style={{
      padding: isMobile ? '40px 20px' : '96px 32px',
      borderTop: '1px solid var(--tc-line-1)',
    }}>
      <div style={{
        maxWidth: 1000, margin: '0 auto',
        background: 'var(--tc-bg-2)',
        border: '1px solid var(--tc-line-1)',
        borderRadius: 24,
        padding: isMobile ? '40px 24px' : '72px 56px',
        textAlign: 'center',
        position: 'relative', overflow: 'hidden',
      }}>
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: 'radial-gradient(closest-side at 50% 0%, rgba(255,255,255,0.05), transparent)',
        }}/>
        <div style={{ position: 'relative' }}>
          <h2 style={{
            margin: 0,
            fontFamily: 'Inter Tight', fontWeight: 600, letterSpacing: '-0.03em',
            fontSize: isMobile ? 'clamp(32px, 8vw, 42px)' : 'clamp(40px, 4.5vw, 56px)',
            lineHeight: 1.05,
          }}>
            Pronto pra parar<br/>
            <span style={{ color: 'var(--tc-fg-3)' }}>de usar planilha?</span>
          </h2>
          <p style={{
            margin: '20px auto 0', maxWidth: 520,
            fontSize: isMobile ? 15 : 16, color: 'var(--tc-fg-1)', lineHeight: 1.55,
          }}>
            Crie sua conta grátis. Sem cartão. Cancela quando quiser.
          </p>

          <div style={{ marginTop: 32, display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: 10 }}>
            <a href="https://app.trainerconnect.fit/signup" className="tc-btn tc-btn--primary tc-btn--lg">
              Criar conta grátis · até 10 alunos
              <Icon name="arrowRight" size={16}/>
            </a>
          </div>

          <p style={{
            margin: '20px 0 0',
            fontSize: 12, color: 'var(--tc-fg-3)', fontFamily: 'JetBrains Mono',
          }}>
            ~2 minutos pra cadastrar seu primeiro aluno.
          </p>
        </div>
      </div>
    </section>
  );
}

// ====================================================================
// 10 · FOOTER
// ====================================================================

function LandingFooter() {
  const isMobile = window.useMedia('(max-width: 768px)');
  return (
    <footer style={{
      padding: isMobile ? '40px 20px 28px' : '64px 32px 32px',
      borderTop: '1px solid var(--tc-line-1)',
      background: 'var(--tc-bg-0)',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr 1fr',
          gap: isMobile ? 32 : 56,
        }}>
          {/* Col 1 — Brand */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                <rect width="24" height="24" rx="6" fill="#fff"/>
                <path d="M5 8h14M9.5 8v9M14.5 9.5v6.5a2 2 0 0 0 2 2h2.5" stroke="#0a0a0a" strokeWidth="1.6" strokeLinecap="round"/>
              </svg>
              <span style={{ fontFamily: 'Inter Tight', fontWeight: 600, fontSize: 15, letterSpacing: '-0.02em' }}>Trainer Connect</span>
            </div>
            <p style={{
              margin: '14px 0 0', maxWidth: 320,
              fontSize: 13, color: 'var(--tc-fg-2)', lineHeight: 1.55,
            }}>
              O sistema dos seus alunos. Cadastro, treino, evolução e cobrança em um lugar só.
            </p>
          </div>

          {/* Col 2 */}
          <FooterCol title="Produto" items={[
            { label: 'Como funciona', href: '#como-funciona' },
            { label: 'Recursos', href: '#recursos' },
            { label: 'Planos', href: '#planos' },
            { label: 'FAQ', href: '#faq' },
          ]}/>
          {/* Col 3 */}
          <FooterCol title="Empresa" items={[
            { label: 'Termos de uso', href: '/termos' },
            { label: 'Privacidade', href: '/privacidade' },
            { label: 'Contato', href: 'mailto:silvio@trainerconnect.fit' },
          ]}/>
        </div>

        <div style={{
          marginTop: 40, paddingTop: 20,
          borderTop: '1px solid var(--tc-line-1)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          gap: 16, flexWrap: 'wrap',
        }}>
          <div style={{ fontSize: 11, color: 'var(--tc-fg-3)', fontFamily: 'JetBrains Mono', letterSpacing: '0.02em' }}>
            © 2026 Silvio Baroni Tecnologia · CNPJ 39.400.788/0001-69
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 11, color: 'var(--tc-fg-3)' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--tc-success)' }}/>
              <span style={{ fontFamily: 'JetBrains Mono' }}>Beta · v0.9</span>
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{
        fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em',
        color: 'var(--tc-fg-3)', fontWeight: 600, fontFamily: 'JetBrains Mono',
      }}>{title}</div>
      <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((item, i) => (
          <a key={i} href={item.href} style={{
            fontSize: 14, color: 'var(--tc-fg-1)',
            transition: 'color 120ms',
          }} onMouseEnter={(e) => e.currentTarget.style.color = 'var(--tc-fg-0)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'var(--tc-fg-1)'}>
            {item.label}
          </a>
        ))}
      </div>
    </div>
  );
}

// ====================================================================
// PÁGINA COMPLETA
// ====================================================================

function LandingPage() {
  const [menuOpen, setMenuOpen] = React.useState(false);
  return (
    <div style={{ background: 'var(--tc-bg-0)', color: 'var(--tc-fg-0)' }}>
      <LandingHeader onOpenMobile={() => setMenuOpen(true)}/>
      <LandingMobileMenu open={menuOpen} onClose={() => setMenuOpen(false)}/>
      <main>
        <LandingHero/>
        <LandingPainPoints/>
        <LandingHowItWorks/>
        <LandingFeatures/>
        <LandingModulos/>
        <LandingPlanos/>
        <LandingBeta/>
        <LandingFAQ/>
        <LandingCTA/>
      </main>
      <LandingFooter/>
    </div>
  );
}

window.LandingPlanos = LandingPlanos;
window.PlanoCard = PlanoCard;
window.LandingBeta = LandingBeta;
window.LandingFAQ = LandingFAQ;
window.FAQItem = FAQItem;
window.LandingCTA = LandingCTA;
window.LandingFooter = LandingFooter;
window.LandingPage = LandingPage;