// Órbita — Landing Page pública (tela inicial do produto)
//
// Escura por padrão (THEMES.dark), com switch pro cliente trocar pra clara —
// mesma ThemeProvider/useTheme do resto do app, então a preferência já
// persiste (localStorage) e vale pro app inteiro, não só aqui.
//
// Portado do design aprovado no Claude Design ("Landing Page v1 (dark).html"),
// com as cores amarradas aos tokens de THEMES (não mais o âmbar antigo fixo)
// pra funcionar nos dois temas. O CTA principal leva direto ao cadastro:
// a astróloga se inscreve na hora e confirma o e-mail, sem fila de beta.

// O scroll deste protótipo pode estar no <body>, no <html> ou na janela,
// conforme a tela. Lê os três.
const posicaoDoScroll = () =>
  document.body.scrollTop || document.documentElement.scrollTop || window.scrollY || 0;

// O que sobe ao entrar na tela. Herói fora: ele já tem a entrada própria.
const REVEAL_SELECTOR = [
  '.section-label', '.section-title', '.section-sub',
  '.step-card', '.feature-grid', '.testimonial-card', '.pricing-card',
  '.faq-item', '.cta-title', '.cta-sub',
].join(', ');

const LP_CSS = (theme) => `
  .orbita-lp {
    background: ${theme.bg}; color: ${theme.fg};
    font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6;
    overflow-x: hidden; -webkit-font-smoothing: antialiased; position: relative;
  }
  .orbita-lp *, .orbita-lp *::before, .orbita-lp *::after { box-sizing: border-box; }
  .orbita-lp a { text-decoration: none; }

  /* Nav */
  .orbita-lp nav { position: sticky; top: 0; z-index: 500; padding: 0 20px; height: 56px; display: flex; align-items: center; justify-content: space-between; background: transparent; border-bottom: 1px solid transparent; transition: background .3s, backdrop-filter .3s, border-color .3s; }
  .orbita-lp nav.scrolled { background: ${theme.headerBg}; backdrop-filter: blur(18px); border-color: ${theme.border}; }
  .orbita-lp .nav-logo { display: flex; align-items: center; gap: 8px; }
  .orbita-lp .nav-logo span { font-family: 'Instrument Serif', serif; font-size: 20px; color: ${theme.fg}; letter-spacing: -0.01em; }
  .orbita-lp .nav-links { display: none; align-items: center; gap: 4px; }
  .orbita-lp .nav-links button { padding: 6px 12px; border-radius: 999px; font-size: 13px; color: ${theme.fgMuted}; background: none; border: none; cursor: pointer; font-family: 'Inter', sans-serif; transition: color .15s; }
  .orbita-lp .nav-links button:hover { color: ${theme.fg}; }
  .orbita-lp .nav-right { display: flex; align-items: center; gap: 8px; }
  .orbita-lp .theme-toggle { width: 32px; height: 32px; border-radius: 999px; border: 1px solid ${theme.border}; background: ${theme.inputBg}; color: ${theme.fgMuted}; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; flex-shrink: 0; }
  .orbita-lp .btn-nav { padding: 7px 16px; border-radius: 999px; border: 1px solid ${theme.accent}59; background: ${theme.accent}1a; color: ${theme.accent}; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; font-family: 'Inter', sans-serif; white-space: nowrap; }
  .orbita-lp .btn-nav:hover { background: ${theme.accent}30; }

  /* Layout */
  .orbita-lp .section-pad { padding: 56px 0; }
  .orbita-lp .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
  .orbita-lp .container-sm { max-width: 700px; margin: 0 auto; padding: 0 20px; }

  /* Buttons */
  .orbita-lp .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 999px; border: none; background: linear-gradient(135deg, ${theme.accent}, ${theme.hot}); color: ${theme.bg}; font-size: 14px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; transition: opacity .15s, transform .15s; box-shadow: 0 4px 24px ${theme.accent}4d; }
  .orbita-lp .btn-primary:hover { opacity: .88; transform: translateY(-1px); }
  .orbita-lp .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; border: 1px solid ${theme.border}; background: transparent; color: ${theme.fg}; font-size: 14px; font-weight: 400; cursor: pointer; font-family: 'Inter', sans-serif; transition: all .15s; }
  .orbita-lp .btn-ghost:hover { background: ${theme.inputBg}; }

  /* Hero */
  .orbita-lp #hero { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; padding: 80px 0 56px; overflow: hidden; position: relative; }
  .orbita-lp .hero-glow { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; pointer-events: none; background: radial-gradient(ellipse at 50% 20%, ${theme.accent}24 0%, transparent 65%); }
  .orbita-lp .hero-stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
  .orbita-lp .star { position: absolute; border-radius: 50%; background: ${theme.fg}; }
  .orbita-lp .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: ${theme.accent}1a; border: 1px solid ${theme.accent}38; font-size: 11px; font-weight: 500; color: ${theme.accent}; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 20px; }
  .orbita-lp .hero-title { font-family: 'Instrument Serif', serif; font-size: clamp(36px, 8vw, 68px); font-weight: 400; line-height: 1.1; letter-spacing: -.025em; margin: 0 0 18px; }
  .orbita-lp .hero-title em { font-style: italic; color: ${theme.accent}; }
  .orbita-lp .hero-sub { font-size: clamp(14px, 2vw, 17px); color: ${theme.fgMuted}; line-height: 1.65; max-width: 500px; margin: 0 0 36px; }
  .orbita-lp .hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
  .orbita-lp .hero-note { font-size: 11px; color: ${theme.fgDim}; margin-top: 14px; }
  .orbita-lp .orbital-wrap { display: none; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 460px; height: 460px; pointer-events: none; }
  .orbita-lp .orbital-ring { position: absolute; border-radius: 50%; border: 1px solid; top: 50%; left: 50%; transform: translate(-50%,-50%); }
  @keyframes orbLpOrbit { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
  @keyframes orbLpOrbitRev { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(-360deg); } }
  @keyframes orbLpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  @keyframes orbLpRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes orbLpTwinkle { 0%, 100% { opacity: var(--star-o); } 50% { opacity: calc(var(--star-o) * 0.25); } }
  @keyframes orbLpDrift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, 10px); } }

  /* Entrada do herói: cada bloco sobe com um atraso a mais que o anterior. */
  .orbita-lp .hero-in > * { animation: orbLpRise .7s cubic-bezier(.2,.7,.3,1) backwards; }
  .orbita-lp .hero-in > *:nth-child(1) { animation-delay: .05s; }
  .orbita-lp .hero-in > *:nth-child(2) { animation-delay: .15s; }
  .orbita-lp .hero-in > *:nth-child(3) { animation-delay: .25s; }
  .orbita-lp .hero-in > *:nth-child(4) { animation-delay: .35s; }
  .orbita-lp .hero-in > *:nth-child(5) { animation-delay: .45s; }
  .orbita-lp .orbital-wrap { animation: orbLpRise 1.1s cubic-bezier(.2,.7,.3,1) .2s backwards; }
  .orbita-lp .hero-glow { animation: orbLpDrift 22s ease-in-out infinite; }

  /* Reveal: a classe só é aplicada por JS (ver useReveal), então sem JS nada some. */
  .orbita-lp .reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1); }
  .orbita-lp .reveal.is-in { opacity: 1; transform: none; }

  .orbita-lp .star { animation: orbLpTwinkle var(--star-dur, 4s) ease-in-out var(--star-delay, 0s) infinite; }

  /* Quem pediu menos movimento no sistema recebe a página parada. */
  @media (prefers-reduced-motion: reduce) {
    .orbita-lp *, .orbita-lp *::before, .orbita-lp *::after {
      animation: none !important;
      transition-duration: .01ms !important;
    }
    .orbita-lp .reveal { opacity: 1; transform: none; }
  }
  .orbita-lp .orbit-1 { width: 420px; height: 420px; border-color: ${theme.accent}12; animation: orbLpOrbit 40s linear infinite; }
  .orbita-lp .orbit-2 { width: 300px; height: 300px; border-color: ${theme.accent}1c; animation: orbLpOrbitRev 25s linear infinite; }
  .orbita-lp .orbit-3 { width: 190px; height: 190px; border-color: ${theme.accent}2b; animation: orbLpOrbit 16s linear infinite; }
  .orbita-lp .orbit-planet { position: absolute; border-radius: 50%; top: 50%; left: 50%; }
  .orbita-lp .planet-sun { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: radial-gradient(circle at 35% 35%, ${theme.accent}, ${theme.hot}); box-shadow: 0 0 50px ${theme.accent}73; }
  .orbita-lp .planet-a { width: 10px; height: 10px; margin: -5px 0 0 205px; background: ${theme.info}; box-shadow: 0 0 10px ${theme.info}99; }
  .orbita-lp .planet-b { width: 8px; height: 8px; margin: -145px 0 0 -4px; background: ${theme.success}; box-shadow: 0 0 8px ${theme.success}99; }
  .orbita-lp .planet-c { width: 6px; height: 6px; margin: -3px 0 0 -91px; background: ${theme.hot}; box-shadow: 0 0 7px ${theme.hot}99; }


  .orbita-lp .section-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: ${theme.accent}; margin-bottom: 12px; display: block; }
  .orbita-lp .section-title { font-family: 'Instrument Serif', serif; font-size: clamp(26px, 5vw, 44px); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 12px; }
  .orbita-lp .section-sub { font-size: 14px; color: ${theme.fgMuted}; line-height: 1.65; margin: 0; }

  /* How it works */
  .orbita-lp .steps-grid { display: flex; flex-direction: column; gap: 2px; margin-top: 40px; border: 1px solid ${theme.border}; border-radius: 20px; overflow: hidden; }
  .orbita-lp .step-card { padding: 28px 24px; background: ${theme.card}; backdrop-filter: blur(12px); transition: background .2s; }
  .orbita-lp .step-card { transition: background .25s, transform .25s; }
  .orbita-lp .step-card:hover { background: ${theme.accent}0d; transform: translateY(-3px); }
  .orbita-lp .step-num { font-family: 'DM Mono', monospace; font-size: 11px; color: ${theme.accent}; letter-spacing: .1em; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
  .orbita-lp .step-num::after { content: ''; flex: 1; height: 1px; background: ${theme.accent}2e; }
  .orbita-lp .step-icon { font-size: 24px; margin-bottom: 12px; }
  .orbita-lp .step-title { font-family: 'Instrument Serif', serif; font-size: 18px; margin: 0 0 8px; font-weight: 400; }
  .orbita-lp .step-desc { font-size: 13px; color: ${theme.fgMuted}; line-height: 1.7; margin: 0; }

  /* Features */
  .orbita-lp .feature-block { padding: 48px 0; border-top: 1px solid ${theme.border}; }
  .orbita-lp .feature-grid { display: flex; flex-direction: column; gap: 32px; }
  .orbita-lp .feature-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
  .orbita-lp .feature-h { font-family: 'Instrument Serif', serif; font-size: clamp(22px, 4vw, 30px); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 12px; }
  .orbita-lp .feature-p { font-size: 13px; color: ${theme.fgMuted}; line-height: 1.75; margin: 0 0 16px; }
  .orbita-lp .feature-bullets { display: flex; flex-direction: column; gap: 8px; }
  .orbita-lp .feature-bullet { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: ${theme.fgMuted}; }
  .orbita-lp .bullet-dot { width: 5px; height: 5px; border-radius: 50%; background: ${theme.accent}; flex-shrink: 0; margin-top: 5px; }

  .orbita-lp .ui-mock { background: ${theme.surface}; border: 1px solid ${theme.border}; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 60px rgba(0,0,0,0.25); }
  .orbita-lp .mock-bar { padding: 10px 14px; border-bottom: 1px solid ${theme.border}; display: flex; align-items: center; gap: 6px; background: ${theme.bg}99; }
  .orbita-lp .mock-dot { width: 7px; height: 7px; border-radius: 50%; }
  .orbita-lp .mock-body { padding: 16px; }
  .orbita-lp .transcript-line { font-family: 'DM Mono', monospace; font-size: 10px; color: ${theme.fgDim}; margin-bottom: 12px; line-height: 1.6; }
  .orbita-lp .transcript-line .ts { color: ${theme.accent}73; margin-right: 6px; }
  .orbita-lp .transcript-line .hl { background: ${theme.accent}2e; border-bottom: 1.5px dotted ${theme.accent}80; border-radius: 2px; padding: 0 2px; color: ${theme.fgMuted}; }
  .orbita-lp .card-mock { background: ${theme.card}; border: 1px solid ${theme.border}; border-radius: 10px; padding: 12px 14px; margin-bottom: 7px; }
  .orbita-lp .card-mock.accepted { border-color: ${theme.success}47; }
  .orbita-lp .card-mock-title { font-size: 12px; font-weight: 500; margin-bottom: 4px; }
  .orbita-lp .card-mock-sub { font-size: 10px; color: ${theme.fgMuted}; line-height: 1.55; }
  .orbita-lp .badge-mock { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
  .orbita-lp .portal-month { display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; margin-top: 10px; }
  .orbita-lp .portal-month-cell { padding: 6px 4px; border-radius: 8px; text-align: center; border: 1px solid; font-size: 9px; }

  /* Testimonials */
  .orbita-lp .testimonials-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
  .orbita-lp .testimonial-card { background: ${theme.card}; border: 1px solid ${theme.border}; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 14px; transition: border-color .2s, transform .2s; }
  .orbita-lp .testimonial-card:hover { border-color: ${theme.accent}33; transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
  .orbita-lp .quote { font-family: 'Instrument Serif', serif; font-size: 16px; font-style: italic; color: ${theme.fg}; line-height: 1.55; margin: 0; }
  .orbita-lp .testimonial-author { display: flex; align-items: center; gap: 10px; }
  .orbita-lp .author-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; }
  .orbita-lp .author-name { font-size: 13px; font-weight: 500; }
  .orbita-lp .author-handle { font-size: 11px; color: ${theme.fgDim}; }
  .orbita-lp .stars-rating { color: ${theme.accent}; font-size: 12px; letter-spacing: 2px; }

  /* Pricing */
  .orbita-lp .pricing-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
  .orbita-lp .pricing-card { background: ${theme.card}; border: 1px solid ${theme.border}; border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; position: relative; transition: transform .2s; }
  .orbita-lp .pricing-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
  .orbita-lp .pricing-card.featured { background: linear-gradient(160deg, ${theme.accent}1a, ${theme.hot}0d); border-color: ${theme.accent}47; }
  .orbita-lp .plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, ${theme.accent}, ${theme.hot}); color: ${theme.bg}; font-size: 10px; font-weight: 700; padding: 3px 14px; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
  .orbita-lp .plan-name { font-size: 13px; font-weight: 600; color: ${theme.fgMuted}; margin-bottom: 6px; }
  .orbita-lp .plan-price { font-family: 'Instrument Serif', serif; font-size: 38px; color: ${theme.fg}; line-height: 1; margin-bottom: 3px; }
  .orbita-lp .plan-period { font-size: 12px; color: ${theme.fgDim}; margin-bottom: 3px; }
  .orbita-lp .plan-desc { font-size: 12px; color: ${theme.fgMuted}; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid ${theme.border}; }
  .orbita-lp .plan-features { display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; flex: 1; }
  .orbita-lp .plan-feature { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; color: ${theme.fgMuted}; }
  .orbita-lp .plan-feature .check { color: ${theme.success}; flex-shrink: 0; margin-top: 1px; }
  .orbita-lp .plan-feature .miss { color: ${theme.fgDim}; flex-shrink: 0; margin-top: 1px; }
  .orbita-lp .plan-cta { width: 100%; display: flex; justify-content: center; font-size: 13px; }

  /* FAQ */
  .orbita-lp .faq-list { margin-top: 40px; display: flex; flex-direction: column; }
  .orbita-lp .faq-item { border-bottom: 1px solid ${theme.border}; }
  .orbita-lp .faq-q { width: 100%; background: none; border: none; color: ${theme.fg}; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; padding: 18px 0; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .orbita-lp .faq-icon { color: ${theme.accent}; font-size: 18px; flex-shrink: 0; transition: transform .2s; }
  .orbita-lp .faq-item.open .faq-icon { transform: rotate(45deg); }
  .orbita-lp .faq-a { font-size: 13px; color: ${theme.fgMuted}; line-height: 1.7; padding-bottom: 18px; margin: 0; }

  /* CTA final */
  .orbita-lp #cta-final { text-align: center; position: relative; overflow: hidden; }
  .orbita-lp .cta-glow { position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); width: 700px; height: 400px; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, ${theme.accent}29, transparent 65%); }
  .orbita-lp .cta-title { font-family: 'Instrument Serif', serif; font-size: clamp(30px, 5vw, 56px); font-weight: 400; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 16px; }
  .orbita-lp .cta-sub { font-size: 14px; color: ${theme.fgMuted}; margin: 0 0 36px; }

  /* Footer */
  .orbita-lp footer { border-top: 1px solid ${theme.border}; padding: 32px 0 24px; }
  .orbita-lp .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .orbita-lp .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .orbita-lp .footer-links button { font-size: 12px; color: ${theme.fgDim}; background: none; border: none; cursor: pointer; padding: 0; font-family: 'Inter', sans-serif; transition: color .15s; }
  .orbita-lp .footer-links button:hover { color: ${theme.fgMuted}; }
  .orbita-lp .footer-copy { font-size: 12px; color: ${theme.fgDim}; }

  /* ══ RESPONSIVE — mesmos breakpoints do resto do app: 640 / 900 / 1100 ══ */
  @media (min-width: 640px) {
    .orbita-lp nav { padding: 0 40px; height: 60px; }
    .orbita-lp .section-pad { padding: 72px 0; }
    .orbita-lp .testimonials-grid { display: grid; grid-template-columns: repeat(2,1fr); }
    .orbita-lp .pricing-grid { display: grid; grid-template-columns: repeat(2,1fr); }
  }
  @media (min-width: 900px) {
    .orbita-lp nav { padding: 0 48px; }
    .orbita-lp .nav-links { display: flex; }
    .orbita-lp .section-pad { padding: 80px 0; }
    .orbita-lp .steps-grid { flex-direction: row; }
    .orbita-lp .step-card { flex: 1; border-right: 1px solid ${theme.border}; }
    .orbita-lp .step-card:last-child { border-right: none; }
    .orbita-lp .feature-grid { flex-direction: row; align-items: center; gap: 56px; }
    .orbita-lp .feature-grid.reverse { flex-direction: row-reverse; }
    .orbita-lp .feature-grid > * { flex: 1; }
    .orbita-lp .testimonials-grid { grid-template-columns: repeat(3,1fr); }
    .orbita-lp .pricing-grid { grid-template-columns: repeat(3,1fr); }
    .orbita-lp .orbital-wrap { display: block; }
    .orbita-lp .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
  }
  @media (min-width: 1100px) {
    .orbita-lp .section-pad { padding: 88px 0; }
  }
`;

const LP_STEPS = [
  { icon: '🎙', title: 'Envie o áudio ou transcrição', desc: 'Grave a sessão no celular ou use um texto existente. Aceita MP3, M4A, WAV, TXT e DOCX, sem configuração.' },
  { icon: '✨', title: 'A IA estrutura o conteúdo', desc: 'Em menos de 5 minutos, a IA extrai temas astrológicos, organiza os 12 meses e cria cards editáveis para cada camada.' },
  { icon: '🌐', title: 'Publique com um clique', desc: 'Revise e aprove os cards. Publique o portal com link único, com sua marca e suas cores.' },
];

const LP_TESTIMONIALS = [
  { initials: 'CB', color: 'accent', name: 'Clarissa B.', handle: 'Astróloga · São Paulo', quote: '"Eu levava dois dias depois de cada consulta para organizar o material. Agora leva 10 minutos. Minhas consulentes adoraram o portal."' },
  { initials: 'RP', color: 'info', name: 'Renata P.', handle: 'Astrologia Evolutiva · BH', quote: '"A função de reescrita do card é genial. As 3 sugestões alternativas sempre me dão um bom ponto de partida para o tom que quero."' },
  { initials: 'FM', color: 'success', name: 'Fernanda M.', handle: 'Astrologia Humanista · RJ', quote: '"Minha consulente me disse que era a primeira vez que ela conseguia entender a sessão depois de ler o portal com calma. Me emocionei."' },
];

const LP_PLANS = [
  {
    id: 'inicio', name: 'Início', price: 'R$89', desc: 'Para quem está começando a prática profissional',
    features: ['10 sessões/mês', 'Portal da consulente', 'Transcrição automática', 'Cards com IA'],
    missing: ['Reescrita de cards (✨)', 'Check-in de consulentes'],
  },
  {
    id: 'atelier', name: 'Atelier', price: 'R$189', desc: 'Para a prática profissional consolidada', featured: true,
    features: ['25 sessões/mês', 'Portal da consulente', 'Transcrição automática', 'Cards com IA', 'Reescrita de cards (✨)', 'Check-in de consulentes'],
    missing: [],
  },
  {
    id: 'studio', name: 'Studio', price: 'R$389', desc: 'Para escolas e práticas em equipe',
    features: ['Sessões ilimitadas', 'Tudo do Atelier', 'Até 5 astrólogas', 'Analytics avançado', 'API access', 'Onboarding dedicado'],
    missing: [],
  },
];

const LP_FAQ = [
  { q: 'Preciso saber programar?', a: 'Não. O Órbitas foi criado para astrólogas, não para desenvolvedoras. Tudo é feito por interfaces visuais, sem código.' },
  { q: 'A IA entende termos astrológicos?', a: 'Sim. Nosso modelo foi ajustado com vocabulário astrológico, trânsitos, aspectos, casas, planetas, progressões, revolução solar.' },
  { q: 'Minha consulente pode editar o portal?', a: 'Não. O portal é somente leitura para a consulente. Só você, como astróloga, tem controle editorial total.' },
  { q: 'Como funciona o limite do teste grátis?', a: 'O teste vale por 3 dias corridos ou 3 sessões processadas — o que vier primeiro. Depois disso, escolha um plano pra continuar.' },
  { q: 'Os dados ficam seguros?', a: 'Sim. As sessões são processadas com criptografia. Nunca usamos o conteúdo das suas consultas para treinar modelos.' },
  { q: 'Posso cancelar quando quiser?', a: 'Sim, sem fidelidade. Se cancelar, mantém acesso até o fim do período pago. Portais ficam ativos por 30 dias após o cancelamento.' },
];

const LandingScreen = ({ onEnter, onSignup }) => {
  const { theme, themeId, setThemeId } = useTheme();
  const [scrolled, setScrolled] = React.useState(false);
  const [openFaq, setOpenFaq] = React.useState(null);
  const [showTerms, setShowTerms] = React.useState(null);

  // Quem rola aqui é o <body> (o protótipo põe o overflow nele), então
  // window.scrollY fica travado em 0 e o nav nunca ganhava o fundo ao descer.
  // Lê os três e ouve no document, que pega o evento venha de onde vier.
  React.useEffect(() => {
    const onScroll = () => setScrolled(posicaoDoScroll() > 32);
    onScroll();
    document.addEventListener('scroll', onScroll, { passive: true, capture: true });
    return () => document.removeEventListener('scroll', onScroll, { capture: true });
  }, []);

  // Cada bloco sobe quando entra na tela. A classe que esconde é aplicada aqui,
  // em layout effect (antes da pintura, sem piscada) — assim, se o JS não rodar,
  // a página aparece inteira em vez de ficar invisível. Sem IntersectionObserver,
  // ou com "menos movimento" ligado no sistema, também não esconde nada.
  React.useLayoutEffect(() => {
    const raiz = document.querySelector('.orbita-lp');
    if (!raiz || typeof IntersectionObserver === 'undefined') return;
    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return;

    const alvos = Array.from(raiz.querySelectorAll(REVEAL_SELECTOR));
    const porPai = new Map();
    alvos.forEach(el => {
      const i = porPai.get(el.parentElement) ?? 0;
      porPai.set(el.parentElement, i + 1);
      // Irmãos entram em cascata, no máximo 5 degraus pra não arrastar demais.
      el.style.transitionDelay = `${Math.min(i, 5) * 70}ms`;
      el.classList.add('reveal');
    });

    // Um salto de scroll (arrastar a barra, cmd+End) pode pular um bloco inteiro
    // entre dois quadros — o observer nunca o vê intersectando e ele ficaria
    // invisível pra sempre. A varredura solta tudo que já passou do topo da tela.
    const varrer = () => {
      let restam = false;
      alvos.forEach(el => {
        if (el.classList.contains('is-in')) return;
        if (el.getBoundingClientRect().top < window.innerHeight) {
          el.classList.add('is-in');
          obs.unobserve(el);
        } else restam = true;
      });
      return restam;
    };

    const obs = new IntersectionObserver((entradas) => {
      entradas.forEach(e => {
        if (!e.isIntersecting) return;
        e.target.classList.add('is-in');
        obs.unobserve(e.target); // entra uma vez; não fica sumindo ao rolar de volta
      });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });

    alvos.forEach(el => obs.observe(el));
    const aoRolar = () => { if (!varrer()) document.removeEventListener('scroll', aoRolar, { capture: true }); };
    document.addEventListener('scroll', aoRolar, { passive: true, capture: true });
    varrer();

    return () => {
      obs.disconnect();
      document.removeEventListener('scroll', aoRolar, { capture: true });
    };
  }, []);

  const stars = React.useMemo(() => Array.from({ length: 44 }, (_, i) => {
    const size = i % 7 === 0 ? 2 : 1;
    const op = theme.id === 'light' ? 0.05 + (i % 5) * 0.012 : 0.04 + (i % 5) * 0.022;
    return {
      key: i, size,
      left: `${Math.sin(i * 137.5) * 50 + 50}%`,
      top: `${Math.cos(i * 97.3) * 50 + 50}%`,
      opacity: op,
      // Cada estrela pulsa no seu tempo; senão a tela inteira pisca junto.
      dur: `${3.5 + (i % 9) * 0.7}s`,
      delay: `${(i % 11) * 0.45}s`,
    };
  }), [theme.id]);

  const months = ['Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez','Jan','Fev','Mar'];
  const brandSwatches = [theme.accent, theme.hot, theme.info, theme.success, '#C49BC9'];

  return (
    <div className="orbita-lp">
      <style>{LP_CSS(theme)}</style>
      <GrainOverlay />

      {/* ── NAV ── */}
      <nav className={scrolled ? 'scrolled' : ''}>
        <a href="#hero" className="nav-logo" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
          <OrbitasMark size={24} color={theme.gold} />
          <span>Órbitas</span>
        </a>
        <div className="nav-links">
          <button onClick={() => document.getElementById('como')?.scrollIntoView({ behavior: 'smooth' })}>Como funciona</button>
          <button onClick={() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })}>Funcionalidades</button>
          <button onClick={() => document.getElementById('depoimentos')?.scrollIntoView({ behavior: 'smooth' })}>Depoimentos</button>
          <button onClick={() => document.getElementById('planos')?.scrollIntoView({ behavior: 'smooth' })}>Planos</button>
          <button onClick={() => document.getElementById('faq')?.scrollIntoView({ behavior: 'smooth' })}>FAQ</button>
        </div>
        <div className="nav-right">
          <button
            className="theme-toggle"
            onClick={() => setThemeId(themeId === 'dark' ? 'light' : 'dark')}
            title={themeId === 'dark' ? 'Mudar para modo claro' : 'Mudar para modo escuro'}
            aria-label="Alternar tema claro/escuro"
          >
            {themeId === 'dark' ? '◕' : '◗'}
          </button>
          <button className="btn-nav" onClick={onEnter}>Entrar →</button>
        </div>
      </nav>

      {/* ── HERO ── */}
      <section id="hero">
        <div className="hero-glow" />
        <div className="hero-stars">
          {stars.map(s => (
            <div key={s.key} className="star" style={{ width: s.size, height: s.size, left: s.left, top: s.top, opacity: s.opacity, '--star-o': s.opacity, '--star-dur': s.dur, '--star-delay': s.delay }} />
          ))}
        </div>
        <div className="orbital-wrap">
          <div className="orbital-ring orbit-1" /><div className="orbital-ring orbit-2" /><div className="orbital-ring orbit-3" />
          <div className="orbit-planet planet-sun" /><div className="orbit-planet planet-a" /><div className="orbit-planet planet-b" /><div className="orbit-planet planet-c" />
        </div>
        <div className="container">
          <div className="hero-in" style={{ maxWidth: 640, position: 'relative', zIndex: 1 }}>
            <h1 className="hero-title">
              Transforme suas consultas<br />
              em <em>experiências inesquecíveis</em>
            </h1>
            <p className="hero-sub">
              A plataforma que transforma o áudio ou transcrição de sessões astrológicas em portais digitais personalizados, para cada consulente viver seu mapa todo o ano.
            </p>
            <div className="hero-ctas">
              <button className="btn-primary" onClick={onSignup}>
                Criar conta
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
              </button>
              <button className="btn-ghost" onClick={() => document.getElementById('como')?.scrollIntoView({ behavior: 'smooth' })}>Como funciona</button>
            </div>
            <p className="hero-note">Sem cartão · 3 dias grátis ou 3 sessões · Cancela quando quiser</p>
          </div>
        </div>
      </section>

      {/* ── HOW IT WORKS ── */}
      <section id="como" className="section-pad">
        <div className="container">
          <div style={{ textAlign: 'center', maxWidth: 520, margin: '0 auto' }}>
            <span className="section-label">Como funciona</span>
            <h2 className="section-title">Do áudio ao portal em minutos</h2>
            <p className="section-sub">Você conduz a consulta como sempre fez. O Órbitas cuida de tudo que vem depois.</p>
          </div>
          <div className="steps-grid">
            {LP_STEPS.map((s, i) => (
              <div key={i} className="step-card">
                <div className="step-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="step-icon">{s.icon}</div>
                <h3 className="step-title">{s.title}</h3>
                <p className="step-desc">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── FEATURES ── */}
      <section id="features">
        <div className="feature-block">
          <div className="container">
            <div className="feature-grid">
              <div>
                <div className="feature-tag" style={{ background: `${theme.info}1f`, border: `1px solid ${theme.info}40`, color: theme.info }}>◎ Editor de Cards</div>
                <h3 className="feature-h">Revise antes de publicar. Sempre.</h3>
                <p className="feature-p">A IA sugere, você decide. Cada card pode ser aceito, editado ou descartado. O botão "✨ Reescrever" oferece 3 versões alternativas.</p>
                <div className="feature-bullets">
                  <div className="feature-bullet"><div className="bullet-dot" />Vinculação card ↔ trecho da transcrição</div>
                  <div className="feature-bullet"><div className="bullet-dot" />Edição inline com "antes × depois"</div>
                  <div className="feature-bullet"><div className="bullet-dot" />Filtros: pendentes, editados, aceitos, descartados</div>
                  <div className="feature-bullet"><div className="bullet-dot" />Atalhos de teclado: A, E, D</div>
                </div>
              </div>
              <div className="ui-mock">
                <div className="mock-bar">
                  <div className="mock-dot" style={{ background: theme.hot }} /><div className="mock-dot" style={{ background: '#F4C261' }} /><div className="mock-dot" style={{ background: theme.success }} />
                  <span style={{ fontSize: 10, color: theme.fgDim, marginLeft: 6 }}>Editor · Revolução Solar</span>
                </div>
                <div className="mock-body" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                  <div>
                    <div style={{ fontSize: 8, letterSpacing: '0.1em', textTransform: 'uppercase', color: theme.fgDim, marginBottom: 8 }}>Transcrição</div>
                    <div className="transcript-line"><span className="ts">02:15</span><span className="hl">Saturno passa pela casa dez</span>. É um trânsito que ocorre uma vez…</div>
                    <div className="transcript-line"><span className="ts">04:20</span>A janela de <span className="hl">dez a vinte de agosto</span>. Marte em oposição…</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 8, letterSpacing: '0.1em', textTransform: 'uppercase', color: theme.fgDim, marginBottom: 8 }}>Cards</div>
                    <div className="card-mock accepted">
                      <div className="badge-mock" style={{ background: `${theme.success}1f`, color: theme.success }}>✓ Aceito</div>
                      <div className="card-mock-title">Ano de consolidação</div>
                      <div className="card-mock-sub">Saturno na Casa 10 pede entrega.</div>
                    </div>
                    <div className="card-mock">
                      <div className="badge-mock" style={{ background: theme.inputBg, color: theme.fgDim }}>◎ Sugerido</div>
                      <div className="card-mock-title">Alerta: 10–20 ago</div>
                      <div className="card-mock-sub">Adiar reuniões importantes.</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="feature-block">
          <div className="container">
            <div className="feature-grid reverse">
              <div>
                <div className="feature-tag" style={{ background: `${theme.accent}1a`, border: `1px solid ${theme.accent}38`, color: theme.accent }}>◈ Portal da Consulente</div>
                <h3 className="feature-h">Sua marca. Sua consulente. O ano inteiro.</h3>
                <p className="feature-p">Cada consulente recebe um portal com link único, personalizado com suas cores e nome. Acessa o painel anual, aprofunda em cada mês e registra check-ins.</p>
                <div className="feature-bullets">
                  <div className="feature-bullet"><div className="bullet-dot" />Linha do tempo de 12 meses com tooltips</div>
                  <div className="feature-bullet"><div className="bullet-dot" />Detalhamento: foco, risco, oportunidade, ações</div>
                  <div className="feature-bullet"><div className="bullet-dot" />Check-in semanal de humor</div>
                  <div className="feature-bullet"><div className="bullet-dot" />Alertas de janelas críticas em destaque</div>
                </div>
              </div>
              <div className="ui-mock">
                <div className="mock-bar">
                  <div className="mock-dot" style={{ background: theme.hot }} /><div className="mock-dot" style={{ background: '#F4C261' }} /><div className="mock-dot" style={{ background: theme.success }} />
                  <span style={{ fontSize: 9, color: theme.fgDim, marginLeft: 6, fontFamily: 'DM Mono, monospace' }}>orbita.app/c/mariana-rs-2026</span>
                </div>
                <div className="mock-body">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, paddingBottom: 10, borderBottom: `1px solid ${theme.border}` }}>
                    <div style={{ width: 26, height: 26, borderRadius: '50%', background: `${theme.accent}33`, border: `1.5px solid ${theme.accent}66`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 8, fontWeight: 600, color: theme.accent }}>LV</div>
                    <div>
                      <div style={{ fontSize: 10, fontWeight: 500 }}>Luciana Vega Astrologia</div>
                      <div style={{ fontSize: 8, color: theme.fgDim }}>Portal da consulta</div>
                    </div>
                  </div>
                  <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 14, marginBottom: 4 }}>Consolidar, não expandir.</div>
                  <div style={{ fontSize: 9, color: theme.fgMuted, marginBottom: 12 }}>Um ano de colheita interior</div>
                  <div style={{ fontSize: 8, color: theme.fgDim, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 6 }}>12 meses</div>
                  <div className="portal-month">
                    {months.map((m, i) => (
                      <div key={m} className="portal-month-cell" style={{
                        background: i === 0 ? `${theme.accent}24` : `${theme.fg}08`,
                        borderColor: i === 0 ? `${theme.accent}4d` : `${theme.fg}0f`,
                        color: i === 0 ? theme.accent : theme.fgDim,
                      }}>{m}</div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="feature-block">
          <div className="container">
            <div className="feature-grid">
              <div>
                <div className="feature-tag" style={{ background: 'rgba(196,155,201,0.14)', border: '1px solid rgba(196,155,201,0.3)', color: '#C49BC9' }}>◆ Sua Identidade</div>
                <h3 className="feature-h">O produto é seu, não nosso.</h3>
                <p className="feature-p">Configure nome da marca, logo, cor principal e subdomínio. Seus consulentes nunca veem a marca Órbitas, só a sua.</p>
                <div className="feature-bullets">
                  <div className="feature-bullet"><div className="bullet-dot" />Subdomínio: orbita.app/c/suamarca</div>
                  <div className="feature-bullet"><div className="bullet-dot" />Cor principal em todo o portal</div>
                  <div className="feature-bullet"><div className="bullet-dot" />Preview em tempo real no onboarding</div>
                  <div className="feature-bullet"><div className="bullet-dot" />Upload de logo próprio</div>
                </div>
              </div>
              <div className="ui-mock">
                <div className="mock-bar">
                  <div className="mock-dot" style={{ background: theme.hot }} /><div className="mock-dot" style={{ background: '#F4C261' }} /><div className="mock-dot" style={{ background: theme.success }} />
                  <span style={{ fontSize: 10, color: theme.fgDim, marginLeft: 6 }}>Configurações · Marca</span>
                </div>
                <div className="mock-body">
                  <div style={{ fontSize: 9, color: theme.fgDim, marginBottom: 5 }}>Nome da marca</div>
                  <div style={{ background: theme.inputBg, border: `1px solid ${theme.accent}4d`, borderRadius: 7, padding: '8px 10px', fontSize: 11, color: theme.fg, marginBottom: 12 }}>Luciana Vega Astrologia</div>
                  <div style={{ fontSize: 9, color: theme.fgDim, marginBottom: 6 }}>Cor principal</div>
                  <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
                    {brandSwatches.map((c, i) => (
                      <div key={c + i} style={{ width: 20, height: 20, borderRadius: '50%', background: c, boxShadow: i === 0 ? `0 0 0 2px ${theme.surface}, 0 0 0 3.5px ${c}` : 'none' }} />
                    ))}
                  </div>
                  <div style={{ fontSize: 9, color: theme.fgDim, marginBottom: 5 }}>Endereço do portal</div>
                  <div style={{ display: 'flex', background: theme.inputBg, border: `1px solid ${theme.border}`, borderRadius: 7, overflow: 'hidden' }}>
                    <span style={{ padding: '7px 8px', fontSize: 9, color: theme.fgDim, fontFamily: 'DM Mono, monospace', whiteSpace: 'nowrap' }}>orbita.app/c/</span>
                    <span style={{ padding: '7px 8px 7px 0', fontSize: 9, color: theme.accent, fontFamily: 'DM Mono, monospace' }}>lucianavega</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── TESTIMONIALS ── */}
      <section id="depoimentos" className="section-pad" style={{ borderTop: `1px solid ${theme.border}` }}>
        <div className="container">
          <div style={{ textAlign: 'center', maxWidth: 480, margin: '0 auto' }}>
            <span className="section-label">Depoimentos</span>
            <h2 className="section-title">O que as astrólogas estão dizendo</h2>
          </div>
          <div className="testimonials-grid">
            {LP_TESTIMONIALS.map(t => (
              <div key={t.name} className="testimonial-card">
                <div className="stars-rating">★★★★★</div>
                <p className="quote">{t.quote}</p>
                <div className="testimonial-author">
                  <div className="author-avatar" style={{ background: `${theme[t.color]}2e`, color: theme[t.color] }}>{t.initials}</div>
                  <div><div className="author-name">{t.name}</div><div className="author-handle">{t.handle}</div></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── PRICING ── */}
      <section id="planos" className="section-pad" style={{ background: `${theme.fg}03` }}>
        <div className="container">
          <div style={{ textAlign: 'center', maxWidth: 480, margin: '0 auto' }}>
            <span className="section-label">Planos</span>
            <h2 className="section-title">Simples, transparente, justo</h2>
            <p className="section-sub">3 dias grátis ou 3 sessões em qualquer plano — o que vier primeiro.</p>
          </div>
          <div className="pricing-grid">
            {LP_PLANS.map(plan => (
              <div key={plan.id} className={`pricing-card${plan.featured ? ' featured' : ''}`}>
                {plan.featured && <div className="plan-badge">Mais escolhido</div>}
                <div className="plan-name" style={plan.featured ? { color: theme.accent } : undefined}>{plan.name}</div>
                <div className="plan-price" style={plan.featured ? { color: theme.accent } : undefined}>{plan.price}</div>
                <div className="plan-period">/mês</div>
                <div className="plan-desc">{plan.desc}</div>
                <div className="plan-features">
                  {plan.features.map(f => <div key={f} className="plan-feature"><span className="check">✓</span> {f}</div>)}
                  {plan.missing.map(f => <div key={f} className="plan-feature"><span className="miss">–</span> {f}</div>)}
                </div>
                <button className={plan.featured ? 'btn-primary plan-cta' : 'btn-ghost plan-cta'} onClick={plan.id === 'studio' ? () => window.open('mailto:contato@orbita.app') : onSignup}>
                  {plan.id === 'studio' ? 'Falar com a equipe' : 'Criar conta'}
                </button>
              </div>
            ))}
          </div>
          <p style={{ textAlign: 'center', marginTop: 24, fontSize: 11, color: theme.fgDim }}>3 dias grátis ou 3 sessões · Cancela quando quiser · Sem multa</p>
        </div>
      </section>

      {/* ── FAQ ── */}
      <section id="faq" className="section-pad" style={{ borderTop: `1px solid ${theme.border}` }}>
        <div className="container-sm">
          <div style={{ textAlign: 'center' }}>
            <span className="section-label">Dúvidas</span>
            <h2 className="section-title">Perguntas frequentes</h2>
          </div>
          <div className="faq-list">
            {LP_FAQ.map((item, i) => (
              <div key={item.q} className={`faq-item${openFaq === i ? ' open' : ''}`}>
                <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? null : i)}>
                  {item.q}<span className="faq-icon">+</span>
                </button>
                {openFaq === i && <p className="faq-a">{item.a}</p>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA FINAL ── */}
      <section id="cta-final" className="section-pad">
        <div className="cta-glow" />
        <div className="container-sm" style={{ position: 'relative', zIndex: 1 }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 24 }}>
            <OrbitasMark size={56} color={theme.gold} style={{ animation: 'orbLpFloat 4s ease-in-out infinite' }} />
          </div>
          <h2 className="cta-title">
            Sua consulente merece<br />
            <em style={{ fontStyle: 'italic', color: theme.accent }}>viver o mapa o ano inteiro.</em>
          </h2>
          <p className="cta-sub">Comece grátis. Configure em 5 minutos. Publique antes da próxima consulta.</p>
          <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn-primary" onClick={onSignup}>
              Criar conta
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
            </button>
            <button className="btn-ghost" onClick={() => document.getElementById('planos')?.scrollIntoView({ behavior: 'smooth' })}>Ver planos</button>
          </div>
          <p style={{ marginTop: 16, fontSize: 11, color: theme.fgDim, textAlign: 'center' }}>3 dias grátis ou 3 sessões · Sem cartão · Cancela quando quiser</p>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer>
        <div className="container">
          <div className="footer-inner">
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <OrbitasMark size={20} color={theme.gold} />
              <span style={{ fontFamily: '"Instrument Serif", serif', fontSize: 17 }}>Órbitas</span>
            </div>
            <div className="footer-links">
              <button onClick={() => document.getElementById('como')?.scrollIntoView({ behavior: 'smooth' })}>Como funciona</button>
              <button onClick={() => document.getElementById('planos')?.scrollIntoView({ behavior: 'smooth' })}>Planos</button>
              <button onClick={() => document.getElementById('faq')?.scrollIntoView({ behavior: 'smooth' })}>FAQ</button>
              <button onClick={() => setShowTerms('privacidade')}>Privacidade</button>
              <button onClick={() => setShowTerms('termos')}>Termos</button>
            </div>
            <div className="footer-copy">© 2026 Órbitas. Feito para astrólogas.</div>
          </div>
        </div>
      </footer>

      {showTerms && <TermsModal initialTab={showTerms} onClose={() => setShowTerms(null)} />}
    </div>
  );
};

Object.assign(window, { LandingScreen });
