// =================================================================
// LP Jaque · Dia das Mães · VERSÃO B
// Hero clean, sem foto · Foto da Jaque editorial em bloco posterior
// =================================================================

const lpStyles = {
  frame: {
    maxWidth: 430,
    margin: '0 auto',
    background: '#fff',
    minHeight: '100vh',
    boxShadow: '0 0 80px rgba(0,0,0,0.06)',
    overflow: 'hidden',
    position: 'relative',
  },
};

// ---------- Sticky top bar (logo + small price) ----------
function TopBar({ logoSrc }) {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.94)',
      backdropFilter: 'blur(14px)',
      WebkitBackdropFilter: 'blur(14px)',
      borderBottom: '1px solid var(--border)',
      padding: '12px 20px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <img src={logoSrc} alt="Jaque Personal" style={{ height: 30 }} />
      <div style={{
        fontFamily: 'var(--font-display)',
        fontSize: 11, fontWeight: 800,
        textTransform: 'uppercase', letterSpacing: '0.12em',
        color: 'var(--jp-pink)',
      }}>
        Dia das mães
      </div>
    </header>
  );
}

// =================================================================
// 1. HERO — clean typographic, NO photo
// =================================================================
function Hero() {
  return (
    <section style={{
      padding: '36px 24px 56px',
      background: '#fff',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* ambient pink gradient on edges */}
      <div aria-hidden style={{
        position: 'absolute', top: -120, right: -120,
        width: 320, height: 320, borderRadius: '50%',
        background: 'radial-gradient(closest-side, rgba(255,20,147,0.10), transparent 70%)',
        pointerEvents: 'none',
      }}></div>
      <div aria-hidden style={{
        position: 'absolute', bottom: -160, left: -160,
        width: 360, height: 360, borderRadius: '50%',
        background: 'radial-gradient(closest-side, rgba(255,20,147,0.07), transparent 70%)',
        pointerEvents: 'none',
      }}></div>

      <div style={{ position: 'relative' }}>
        {/* Tiny pink pill */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '7px 14px',
          background: 'var(--jp-pink-100)',
          color: 'var(--jp-pink-600)',
          borderRadius: 999,
          fontSize: 11, fontWeight: 800,
          letterSpacing: '0.12em', textTransform: 'uppercase',
        }}>
          <span aria-hidden>♥</span>
          Dia das mães · até 10 de maio
        </div>

        {/* HUGE headline */}
        <h1 style={{
          fontFamily: 'var(--font-display-hero)',
          fontSize: 'clamp(44px, 11.5vw, 60px)',
          fontWeight: 800,
          letterSpacing: '-0.03em',
          lineHeight: 0.98,
          margin: '24px 0 20px',
          color: 'var(--jp-black)',
        }}>
          Mãe também<br/>
          merece <span style={{
            fontStyle: 'italic',
            fontWeight: 600,
            color: 'var(--jp-pink)',
          }}>se escolher</span>.
        </h1>

        <p style={{
          fontSize: 17, lineHeight: 1.5,
          color: 'var(--fg-muted)',
          maxWidth: 380,
          marginBottom: 32,
        }}>
          Garanta acesso <strong style={{ color: 'var(--jp-black)' }}>vitalício</strong> ao Método Corpo Definido e treine em casa pra ganhar massa, definir o corpo e queimar gordura — mesmo com rotina corrida.
        </p>

        {/* Price box */}
        <div style={{
          background: 'var(--jp-gray-50)',
          border: '1px solid var(--border)',
          borderRadius: 20,
          padding: '20px 22px',
          marginBottom: 20,
        }}>
          <div style={{
            fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
            textTransform: 'uppercase', color: 'var(--fg-subtle)',
            marginBottom: 10,
          }}>
            Acesso vitalício · pagamento único
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
            <div style={{
              fontSize: 18, color: 'var(--fg-subtle)',
              textDecoration: 'line-through',
              textDecorationColor: 'var(--jp-pink)',
              textDecorationThickness: 2,
            }}>R$ 997</div>
            <div style={{
              fontFamily: 'var(--font-display-hero)',
              fontSize: 56, fontWeight: 800,
              letterSpacing: '-0.03em', lineHeight: 1,
              color: 'var(--jp-black)',
            }}>R$ 297</div>
          </div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            marginTop: 10,
            padding: '4px 10px',
            background: 'var(--jp-pink)',
            color: '#fff',
            borderRadius: 999,
            fontSize: 11, fontWeight: 800, letterSpacing: '0.08em',
            textTransform: 'uppercase',
          }}>
            Você economiza R$ 700 (70% off)
          </div>
        </div>

        <a href="#oferta" className="btn btn-cta" style={{
          width: '100%', padding: '20px 20px', fontSize: 16,
          letterSpacing: '-0.01em',
        }}>
          Quero meu acesso vitalício por R$ 297
        </a>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          marginTop: 14,
          fontSize: 13, color: 'var(--fg-muted)',
        }}>
          <i data-lucide="shield-check" style={{ width: 16, height: 16, color: 'var(--jp-green)', flexShrink: 0 }}></i>
          <span>Garantia de 7 dias. <strong style={{ color: 'var(--jp-black)' }}>O risco é todo meu.</strong></span>
        </div>
      </div>
    </section>
  );
}

// =================================================================
// 2. JAQUE INTRODUCTION — editorial photo block
// =================================================================
function JaqueIntro() {
  return (
    <section style={{
      padding: '64px 24px',
      background: 'var(--jp-gray-50)',
    }}>
      {/* Editorial photo — single, isolated, no text overlay */}
      <div style={{
        position: 'relative',
        aspectRatio: '4 / 5',
        background: '#e8d5c4',
        borderRadius: 4, // editorial, sharper corners
        overflow: 'hidden',
        marginBottom: 32,
      }}>
        {/* Authentic photo placeholder — neutral background, isolated subject */}
        <div style={{
          position: 'absolute', inset: 0,
          background: `
            linear-gradient(135deg, #efe1d3 0%, #e3d0bd 50%, #d6bfa8 100%)
          `,
        }}></div>
        {/* Soft silhouette suggestion — placeholder only */}
        <div style={{
          position: 'absolute',
          inset: '8% 18% 0 18%',
          background: `
            radial-gradient(ellipse at 50% 22%, rgba(80,55,40,0.35), transparent 28%),
            radial-gradient(ellipse at 50% 70%, rgba(80,55,40,0.30), transparent 50%)
          `,
        }}></div>
        <div style={{
          position: 'absolute', bottom: 14, left: 14,
          padding: '6px 10px',
          background: 'rgba(255,255,255,0.85)',
          backdropFilter: 'blur(6px)',
          borderRadius: 999,
          fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
          textTransform: 'uppercase', color: 'var(--fg-subtle)',
        }}>
          Foto autoral · placeholder
        </div>
      </div>

      <div>
        <div style={{
          fontSize: 11, fontWeight: 800, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: 'var(--jp-pink)',
          marginBottom: 14,
        }}>
          Quem te ensina
        </div>
        <h2 style={{
          fontFamily: 'var(--font-display-hero)',
          fontSize: 32, fontWeight: 800,
          letterSpacing: '-0.02em', lineHeight: 1.05,
          marginBottom: 16,
          color: 'var(--jp-black)',
        }}>
          Eu sou a Jaque.
        </h2>
        <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg-muted)', marginBottom: 12 }}>
          Personal trainer há mais de 8 anos, especialista em treinos em casa para mulheres reais — não atletas, não influencers de fitness extremo.
        </p>
        <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg-muted)' }}>
          Já ajudei mais de 12 mil mulheres a ganhar massa, definir o corpo e queimar gordura sem precisar pisar em academia. <strong style={{ color: 'var(--jp-black)' }}>Você também merece esse resultado, lindona.</strong>
        </p>

        <div style={{
          display: 'flex', gap: 24, marginTop: 28,
          paddingTop: 24, borderTop: '1px solid var(--border)',
        }}>
          <div>
            <div style={{
              fontFamily: 'var(--font-display-hero)',
              fontSize: 28, fontWeight: 800, color: 'var(--jp-pink)',
              letterSpacing: '-0.02em',
            }}>+12k</div>
            <div style={{ fontSize: 12, color: 'var(--fg-subtle)' }}>mulheres atendidas</div>
          </div>
          <div>
            <div style={{
              fontFamily: 'var(--font-display-hero)',
              fontSize: 28, fontWeight: 800, color: 'var(--jp-pink)',
              letterSpacing: '-0.02em',
            }}>8 anos</div>
            <div style={{ fontSize: 12, color: 'var(--fg-subtle)' }}>de experiência</div>
          </div>
          <div>
            <div style={{
              fontFamily: 'var(--font-display-hero)',
              fontSize: 28, fontWeight: 800, color: 'var(--jp-pink)',
              letterSpacing: '-0.02em',
            }}>4.9★</div>
            <div style={{ fontSize: 12, color: 'var(--fg-subtle)' }}>avaliação média</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =================================================================
// 3. IDENTIFICATION — white on black
// =================================================================
function Identification() {
  return (
    <section style={{
      padding: '72px 28px',
      background: 'var(--jp-black)',
      color: '#fff',
      position: 'relative',
    }}>
      <div style={{
        fontSize: 11, fontWeight: 800, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: 'var(--jp-pink)',
        marginBottom: 20,
      }}>
        Será que é com você?
      </div>
      <h2 style={{
        fontFamily: 'var(--font-display-hero)',
        fontSize: 'clamp(32px, 8vw, 42px)',
        fontWeight: 800,
        letterSpacing: '-0.02em',
        lineHeight: 1.05,
        color: '#fff',
      }}>
        Você cuida de todo mundo…
        <br/>
        <span style={{ color: 'var(--jp-pink)', fontStyle: 'italic', fontWeight: 600 }}>
          mas vive deixando você por último?
        </span>
      </h2>
      <p style={{
        marginTop: 20, fontSize: 16, lineHeight: 1.65,
        color: '#d4d4d4', maxWidth: 380,
      }}>
        Filho, marido, casa, trabalho, conta de luz, lista do mercado. No fim do dia, sobra cansaço — e a culpa de não ter feito nada por você.
      </p>
    </section>
  );
}

// =================================================================
// 4. THE TURN — large statement
// =================================================================
function TheTurn() {
  return (
    <section style={{
      padding: '80px 28px',
      background: '#fff',
      textAlign: 'left',
    }}>
      <div style={{
        fontSize: 11, fontWeight: 800, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: 'var(--jp-pink)',
        marginBottom: 18,
      }}>
        A virada
      </div>
      <h2 style={{
        fontFamily: 'var(--font-display-hero)',
        fontSize: 'clamp(32px, 8.5vw, 44px)',
        fontWeight: 800,
        letterSpacing: '-0.025em',
        lineHeight: 1.02,
        color: 'var(--jp-black)',
      }}>
        Você não precisa esperar <span style={{ color: 'var(--jp-pink)' }}>sobrar tempo</span> pra cuidar de você.
      </h2>
      <p style={{
        marginTop: 22, fontSize: 17, lineHeight: 1.6,
        color: 'var(--fg-muted)',
      }}>
        30 minutos. 3x por semana. Na sua sala, com a criança dormindo, antes de todo mundo acordar — ou depois que todo mundo já dormiu.
      </p>
      <p style={{
        marginTop: 14, fontSize: 17, lineHeight: 1.6,
        color: 'var(--fg-muted)',
      }}>
        <strong style={{ color: 'var(--jp-black)' }}>O método encaixa na sua vida</strong> — não o contrário.
      </p>
    </section>
  );
}

// =================================================================
// 5. METHOD PRESENTATION
// =================================================================
function MethodPresentation() {
  const features = [
    { ic: 'dumbbell', t: 'Treinos guiados em vídeo', d: 'Eu te conduzo do aquecimento ao alongamento. É só apertar play.' },
    { ic: 'clock',    t: '30 min, 3x na semana', d: 'Programa pensado pra rotina cheia. Cabe no horário da soneca.' },
    { ic: 'home',     t: 'Equipamento mínimo', d: 'Caneleira leve e colchonete. Nada além disso pra começar.' },
    { ic: 'sparkles', t: '3 níveis progressivos', d: 'Iniciante, intermediário, avançado. Você evolui no seu tempo.' },
  ];
  return (
    <section style={{ padding: '72px 24px', background: 'var(--jp-gray-50)' }}>
      <div style={{
        fontSize: 11, fontWeight: 800, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: 'var(--jp-pink)',
        marginBottom: 14,
      }}>
        O método
      </div>
      <h2 style={{
        fontFamily: 'var(--font-display-hero)',
        fontSize: 32, fontWeight: 800,
        letterSpacing: '-0.02em', lineHeight: 1.05,
        marginBottom: 28, color: 'var(--jp-black)',
      }}>
        Conheça o Método Corpo Definido.
      </h2>

      {/* Platform mockup placeholder */}
      <div style={{
        background: '#fff',
        borderRadius: 20,
        border: '1px solid var(--border)',
        boxShadow: 'var(--shadow-md)',
        overflow: 'hidden',
        marginBottom: 32,
      }}>
        {/* fake browser bar */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '10px 14px',
          borderBottom: '1px solid var(--border)',
          background: '#fff',
        }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#ff5f56' }}></div>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#ffbd2e' }}></div>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#27c93f' }}></div>
          <div style={{ flex: 1, marginLeft: 8, height: 18, borderRadius: 6, background: 'var(--jp-gray-100)' }}></div>
        </div>
        {/* mock content */}
        <div style={{ padding: 16, background: 'var(--jp-gray-50)' }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--jp-pink)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>Semana 4 · Treino A</div>
          <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--jp-black)', marginBottom: 12 }}>Glúteos & posteriores</div>
          <div style={{
            aspectRatio: '16/9',
            background: 'linear-gradient(135deg, #2a2a2a, #050505)',
            borderRadius: 12,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            position: 'relative',
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: '50%',
              background: 'rgba(255,255,255,0.95)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <i data-lucide="play" style={{ width: 24, height: 24, color: 'var(--jp-black)', marginLeft: 3 }}></i>
            </div>
            <div style={{
              position: 'absolute', bottom: 10, left: 12, right: 12,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              fontSize: 11, color: '#fff',
            }}>
              <span>0:34</span>
              <span>32:00</span>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6, marginTop: 12 }}>
            {[1,2,3].map(i => (
              <div key={i} style={{
                aspectRatio: '1/1', borderRadius: 8,
                background: i === 1 ? 'var(--jp-pink-100)' : 'var(--jp-gray-100)',
                border: i === 1 ? '2px solid var(--jp-pink)' : '1px solid var(--border)',
              }}></div>
            ))}
          </div>
        </div>
      </div>

      {/* 2x2 features */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {features.map(f => (
          <div key={f.t} style={{
            background: '#fff',
            borderRadius: 16,
            border: '1px solid var(--border)',
            padding: '18px 16px',
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 12,
              background: 'var(--jp-pink-50)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 12,
            }}>
              <i data-lucide={f.ic} style={{ width: 20, height: 20, color: 'var(--jp-pink)' }}></i>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14, color: 'var(--jp-black)', marginBottom: 4 }}>{f.t}</div>
            <div style={{ fontSize: 12, color: 'var(--fg-muted)', lineHeight: 1.45 }}>{f.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// =================================================================
// 6. WHO IT'S FOR — green-check list
// =================================================================
function WhoItsFor() {
  const items = [
    'Você é mãe e tem rotina corrida.',
    'Não tem (ou não quer) academia.',
    'Já tentou treinar em casa e desistiu por falta de método.',
    'Quer ganhar massa nos glúteos e nas pernas.',
    'Quer queimar a gordura da barriga sem fazer 200 sit-ups.',
    'Tem 30 minutos pra dedicar a você, 3x por semana.',
    'Quer um plano que respeite seu corpo de mulher real.',
    'Não quer dieta maluca nem treino que machuca o joelho.',
    'Procura alguém que te acompanhe de verdade — não um app frio.',
    'Está cansada de começar segunda e parar na quarta.',
  ];
  return (
    <section style={{ padding: '72px 24px', background: '#fff' }}>
      <div style={{
        fontSize: 11, fontWeight: 800, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: 'var(--jp-pink)',
        marginBottom: 14,
      }}>
        Pra quem é
      </div>
      <h2 style={{
        fontFamily: 'var(--font-display-hero)',
        fontSize: 32, fontWeight: 800,
        letterSpacing: '-0.02em', lineHeight: 1.05,
        marginBottom: 28, color: 'var(--jp-black)',
      }}>
        Você se reconhece em pelo menos 3 dessas?
      </h2>

      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 14 }}>
        {items.map((t, i) => (
          <li key={i} style={{
            display: 'flex', gap: 14, alignItems: 'flex-start',
            paddingBottom: 14,
            borderBottom: i < items.length - 1 ? '1px solid var(--border)' : 'none',
          }}>
            <div style={{
              width: 24, height: 24, borderRadius: '50%',
              background: 'var(--jp-green)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0, marginTop: 2,
            }}>
              <i data-lucide="check" style={{ width: 14, height: 14, color: '#fff', strokeWidth: 3 }}></i>
            </div>
            <div style={{ fontSize: 15, color: 'var(--jp-black)', lineHeight: 1.5, fontWeight: 500 }}>{t}</div>
          </li>
        ))}
      </ul>

      <div style={{
        marginTop: 28,
        padding: '16px 18px',
        background: 'var(--jp-pink-50)',
        borderRadius: 14,
        fontSize: 14, color: 'var(--jp-black)', lineHeight: 1.5,
      }}>
        <strong>Marcou 3 ou mais?</strong> Esse método foi pensado pra você, lindona.
      </div>
    </section>
  );
}

// =================================================================
// 7. EXISTING STUDENT — comparison table
// =================================================================
function ExistingStudent() {
  return (
    <section style={{ padding: '72px 24px', background: 'var(--jp-gray-50)' }}>
      <div style={{
        fontSize: 11, fontWeight: 800, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: 'var(--jp-pink)',
        marginBottom: 14,
      }}>
        Já é minha aluna?
      </div>
      <h2 style={{
        fontFamily: 'var(--font-display-hero)',
        fontSize: 30, fontWeight: 800,
        letterSpacing: '-0.02em', lineHeight: 1.05,
        marginBottom: 14, color: 'var(--jp-black)',
      }}>
        Compare e veja por que vale migrar.
      </h2>
      <p style={{ fontSize: 15, color: 'var(--fg-muted)', marginBottom: 28, lineHeight: 1.55 }}>
        Você já paga mensal ou anual? Olha o que o vitalício te dá:
      </p>

      <div style={{
        background: '#fff',
        borderRadius: 18,
        border: '1px solid var(--border)',
        overflow: 'hidden',
      }}>
        {[
          { label: 'Mensal', price: 'R$ 98', sub: 'por mês', highlight: false, tag: null },
          { label: 'Anual',  price: 'R$ 197', sub: 'por ano · paga de novo em 12 meses', highlight: false, tag: null },
          { label: 'Vitalício', price: 'R$ 297', sub: 'pagamento único · pra sempre', highlight: true, tag: 'Dia das mães' },
        ].map((row, i) => (
          <div key={row.label} style={{
            display: 'flex', alignItems: 'center', gap: 16,
            padding: '20px 18px',
            borderBottom: i < 2 ? '1px solid var(--border)' : 'none',
            background: row.highlight ? 'linear-gradient(0deg, var(--jp-pink-50), #fff)' : '#fff',
            position: 'relative',
          }}>
            {row.highlight && (
              <div style={{
                position: 'absolute', top: 0, left: 0, bottom: 0, width: 4,
                background: 'var(--jp-pink)',
              }}></div>
            )}
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <span style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: 15, fontWeight: 800,
                  color: row.highlight ? 'var(--jp-pink)' : 'var(--jp-black)',
                }}>{row.label}</span>
                {row.tag && (
                  <span style={{
                    fontSize: 9, fontWeight: 800, letterSpacing: '0.12em',
                    textTransform: 'uppercase',
                    background: 'var(--jp-pink)', color: '#fff',
                    padding: '2px 8px', borderRadius: 999,
                  }}>{row.tag}</span>
                )}
              </div>
              <div style={{ fontSize: 12, color: 'var(--fg-subtle)' }}>{row.sub}</div>
            </div>
            <div style={{
              fontFamily: 'var(--font-display-hero)',
              fontSize: 26, fontWeight: 800,
              letterSpacing: '-0.02em',
              color: row.highlight ? 'var(--jp-pink)' : 'var(--jp-black)',
            }}>{row.price}</div>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 18,
        fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.55,
      }}>
        Em <strong style={{ color: 'var(--jp-black)' }}>1 ano e meio de mensalidade</strong> você já pagou o vitalício duas vezes.
      </div>
    </section>
  );
}

// =================================================================
// 8. NEW STUDENT — reduce skepticism
// =================================================================
function NewStudent() {
  const items = [
    { ic: 'shield-check', t: '7 dias pra testar tudo', d: 'Acessa o método inteiro. Se não for pra você, devolvo 100% — sem perguntas.' },
    { ic: 'message-circle', t: 'Eu te respondo no grupo', d: 'Comunidade no WhatsApp. Sua dúvida não vira ticket — vira conversa.' },
    { ic: 'infinity', t: 'Acesso pra sempre', d: 'Pagou uma vez, é seu. Sem renovação, sem mensalidade, sem upgrade obrigatório.' },
  ];
  return (
    <section style={{ padding: '72px 24px', background: '#fff' }}>
      <div style={{
        fontSize: 11, fontWeight: 800, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: 'var(--jp-pink)',
        marginBottom: 14,
      }}>
        Nunca foi minha aluna?
      </div>
      <h2 style={{
        fontFamily: 'var(--font-display-hero)',
        fontSize: 30, fontWeight: 800,
        letterSpacing: '-0.02em', lineHeight: 1.05,
        marginBottom: 14, color: 'var(--jp-black)',
      }}>
        Eu sei que você tá com pé atrás.
      </h2>
      <p style={{ fontSize: 16, color: 'var(--fg-muted)', marginBottom: 28, lineHeight: 1.6 }}>
        Já comprou curso que não funcionou. Já pagou academia e não foi. Faz sentido. Por isso eu tiro o risco do seu lado:
      </p>

      <div style={{ display: 'grid', gap: 14 }}>
        {items.map(it => (
          <div key={it.t} style={{
            display: 'flex', gap: 16,
            padding: '18px',
            background: 'var(--jp-gray-50)',
            border: '1px solid var(--border)',
            borderRadius: 16,
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: '#fff',
              border: '1px solid var(--border)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <i data-lucide={it.ic} style={{ width: 22, height: 22, color: 'var(--jp-pink)' }}></i>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15, color: 'var(--jp-black)', marginBottom: 4 }}>{it.t}</div>
              <div style={{ fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.55 }}>{it.d}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// =================================================================
// 9. SOCIAL PROOF — 3 testimonial cards, editorial circular avatars
// =================================================================
function SocialProof() {
  const tones = [
    { bg: '#f4d4c4', shadow: '#9b6b4f' },
    { bg: '#e8d5e8', shadow: '#8b5a8b' },
    { bg: '#d4e0e8', shadow: '#5a7691' },
  ];
  const items = [
    { name: 'Marina', age: 34, status: 'mãe de 2', months: 8,
      quote: 'Em 3 meses meu glúteo cresceu mais que em 2 anos de academia. Treino na sala, com a Bia dormindo.' },
    { name: 'Camila', age: 41, status: 'professora', months: 14,
      quote: 'Perdi 9 kg sem cortar carboidrato. A barriga finalmente cedeu. Voltei a usar o vestido do casamento.' },
    { name: 'Renata', age: 29, status: 'autônoma', months: 5,
      quote: 'Eu odiava academia, achava que treinar não era pra mim. Aqui eu encaixo no almoço. Mudou minha cabeça.' },
  ];
  return (
    <section style={{ padding: '72px 24px', background: 'var(--jp-gray-50)' }}>
      <div style={{
        fontSize: 11, fontWeight: 800, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: 'var(--jp-pink)',
        marginBottom: 14,
      }}>
        Quem já tá dentro
      </div>
      <h2 style={{
        fontFamily: 'var(--font-display-hero)',
        fontSize: 30, fontWeight: 800,
        letterSpacing: '-0.02em', lineHeight: 1.05,
        marginBottom: 28, color: 'var(--jp-black)',
      }}>
        Mulheres que se escolheram.
      </h2>

      <div style={{ display: 'grid', gap: 16 }}>
        {items.map((t, i) => (
          <div key={t.name} style={{
            background: '#fff',
            borderRadius: 18,
            border: '1px solid var(--border)',
            padding: '22px 20px',
            position: 'relative',
          }}>
            {/* big quote mark */}
            <div aria-hidden style={{
              position: 'absolute', top: 14, right: 18,
              fontFamily: 'Georgia, serif',
              fontSize: 56, lineHeight: 1,
              color: 'var(--jp-pink)',
              opacity: 0.2,
            }}>"</div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              {/* circular avatar — editorial style with soft gradient */}
              <div style={{
                width: 52, height: 52, borderRadius: '50%',
                background: `radial-gradient(circle at 35% 30%, ${tones[i].bg}, ${tones[i].shadow})`,
                position: 'relative',
                flexShrink: 0,
                border: '2px solid #fff',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
              }}></div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14, color: 'var(--jp-black)' }}>
                  {t.name} <span style={{ fontWeight: 500, color: 'var(--fg-muted)' }}>· {t.age}, {t.status}</span>
                </div>
                <div style={{ fontSize: 11, color: 'var(--jp-pink)', marginTop: 2, fontWeight: 700 }}>
                  ★★★★★ <span style={{ color: 'var(--fg-subtle)', fontWeight: 500 }}>· aluna há {t.months} meses</span>
                </div>
              </div>
            </div>
            <p style={{
              fontSize: 15, lineHeight: 1.55, color: 'var(--jp-black)',
              fontWeight: 500,
            }}>
              {t.quote}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}

// =================================================================
// 10. GUARANTEE — centered green seal
// =================================================================
function Guarantee() {
  return (
    <section style={{ padding: '72px 28px', background: '#fff', textAlign: 'center' }}>
      <div style={{
        width: 120, height: 120, borderRadius: '50%',
        background: 'var(--jp-green-100)',
        border: '3px solid var(--jp-green)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        margin: '0 auto 24px',
        position: 'relative',
        boxShadow: '0 12px 40px rgba(34,197,94,0.20)',
      }}>
        <div style={{
          fontFamily: 'var(--font-display-hero)',
          fontWeight: 800, fontSize: 36, color: 'var(--jp-green-700)',
          letterSpacing: '-0.03em', lineHeight: 1,
          textAlign: 'center',
        }}>
          7<br/>
          <span style={{ fontSize: 11, letterSpacing: '0.12em' }}>DIAS</span>
        </div>
        {/* notches around the seal */}
        {[...Array(12)].map((_, i) => (
          <div key={i} aria-hidden style={{
            position: 'absolute',
            width: 4, height: 8,
            background: 'var(--jp-green)',
            left: '50%', top: '50%',
            transformOrigin: '50% 64px',
            transform: `translate(-50%, -50%) rotate(${i * 30}deg) translateY(-64px)`,
            borderRadius: 2,
          }}></div>
        ))}
      </div>

      <h2 style={{
        fontFamily: 'var(--font-display-hero)',
        fontSize: 28, fontWeight: 800,
        letterSpacing: '-0.02em', lineHeight: 1.1,
        marginBottom: 14, color: 'var(--jp-black)',
      }}>
        Garantia incondicional<br/>de 7 dias.
      </h2>
      <p style={{
        fontSize: 16, color: 'var(--fg-muted)', lineHeight: 1.6,
        maxWidth: 360, margin: '0 auto',
      }}>
        Acessa tudo, testa o método. Se em 7 dias você não amar, eu devolvo <strong style={{ color: 'var(--jp-black)' }}>100% do seu dinheiro</strong> — sem perguntas, sem burocracia.
      </p>
      <div style={{
        marginTop: 18,
        display: 'inline-flex', alignItems: 'center', gap: 8,
        fontFamily: 'var(--font-display)', fontWeight: 800,
        fontSize: 14, color: 'var(--jp-green-700)',
        background: 'var(--jp-green-100)',
        padding: '10px 16px', borderRadius: 999,
      }}>
        <i data-lucide="shield-check" style={{ width: 16, height: 16 }}></i>
        O risco é todo meu, lindona.
      </div>
    </section>
  );
}

// =================================================================
// 11. FAQ — +/× toggle
// =================================================================
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    ['"Não tenho tempo nem 30 minutos."',
      'Os treinos têm versões de 20 e 30 minutos. Faz no horário da soneca, antes do banho, depois que todo mundo dormiu. 3x por semana — 90 minutos da sua semana inteira.'],
    ['"Nunca treinei na vida, vou conseguir?"',
      'O método tem nível iniciante. Começa do absoluto zero, com adaptações pra dor de coluna, joelho, gestação recente. Você evolui no seu tempo.'],
    ['"E se eu não amar? Perco o dinheiro?"',
      'Não. Você tem 7 dias pra testar tudo. Se não for pra você, manda um email e eu devolvo 100%. Sem perguntas.'],
    ['"Por quanto tempo eu tenho acesso?"',
      'Pra sempre. É pagamento único. Acesso vitalício significa que você assiste, treina e revisita o método em 6 meses, 2 anos, 5 anos — sem pagar de novo.'],
    ['"Preciso de quais equipamentos?"',
      'Caneleira leve (de R$ 30 em qualquer loja) e um colchonete. Halteres são opcionais a partir do nível 2. Pode usar garrafa pet com areia no começo.'],
  ];
  return (
    <section style={{ padding: '72px 24px', background: 'var(--jp-gray-50)' }}>
      <div style={{
        fontSize: 11, fontWeight: 800, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: 'var(--jp-pink)',
        marginBottom: 14,
      }}>
        Perguntas frequentes
      </div>
      <h2 style={{
        fontFamily: 'var(--font-display-hero)',
        fontSize: 30, fontWeight: 800,
        letterSpacing: '-0.02em', lineHeight: 1.05,
        marginBottom: 28, color: 'var(--jp-black)',
      }}>
        O que toda aluna pergunta.
      </h2>

      <div style={{ display: 'grid', gap: 10 }}>
        {items.map(([q, a], i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{
              background: '#fff',
              border: '1px solid var(--border)',
              borderRadius: 14,
              overflow: 'hidden',
            }}>
              <button
                onClick={() => setOpen(isOpen ? -1 : i)}
                style={{
                  width: '100%', textAlign: 'left',
                  padding: '18px 18px',
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14,
                  fontFamily: 'var(--font-display)', fontWeight: 800,
                  fontSize: 14, color: 'var(--jp-black)',
                }}
              >
                <span style={{ flex: 1 }}>{q}</span>
                <span style={{
                  width: 28, height: 28, borderRadius: '50%',
                  background: isOpen ? 'var(--jp-pink)' : 'var(--jp-pink-50)',
                  color: isOpen ? '#fff' : 'var(--jp-pink)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 16, fontWeight: 800,
                  flexShrink: 0,
                  transition: 'all 200ms',
                  transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                }}>+</span>
              </button>
              {isOpen && (
                <div style={{
                  padding: '0 18px 20px',
                  fontSize: 14, color: 'var(--fg-muted)',
                  lineHeight: 1.6,
                  borderTop: '1px solid var(--border)',
                  paddingTop: 16,
                }}>
                  {a}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}

// =================================================================
// 12. CONSOLIDATED OFFER — final pricing card
// =================================================================
function ConsolidatedOffer() {
  return (
    <section id="oferta" style={{ padding: '72px 24px', background: '#fff' }}>
      <div style={{ textAlign: 'center', marginBottom: 24 }}>
        <div style={{
          fontSize: 11, fontWeight: 800, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: 'var(--jp-pink)',
          marginBottom: 12,
        }}>
          Oferta dia das mães
        </div>
        <h2 style={{
          fontFamily: 'var(--font-display-hero)',
          fontSize: 32, fontWeight: 800,
          letterSpacing: '-0.025em', lineHeight: 1.02,
          color: 'var(--jp-black)',
        }}>
          Hoje você se escolhe, lindona.
        </h2>
      </div>

      <div style={{
        background: '#fff',
        borderRadius: 24,
        border: '2px solid var(--jp-pink)',
        padding: 26,
        boxShadow: 'var(--shadow-lg)',
        position: 'relative',
        marginTop: 18,
      }}>
        <div style={{
          position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
          background: 'var(--jp-pink)', color: '#fff',
          padding: '6px 16px', borderRadius: 999,
          fontSize: 10, fontWeight: 800, letterSpacing: '0.12em',
          textTransform: 'uppercase', whiteSpace: 'nowrap',
          boxShadow: '0 4px 14px rgba(255,20,147,0.35)',
        }}>★ Mais vendido</div>

        <div style={{
          fontFamily: 'var(--font-display)',
          fontWeight: 800, fontSize: 18, color: 'var(--jp-black)',
          marginBottom: 4,
        }}>Método Corpo Definido</div>
        <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginBottom: 16 }}>
          Acesso vitalício · pagamento único
        </div>

        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 8 }}>
          <span style={{
            fontSize: 16, color: 'var(--fg-subtle)',
            textDecoration: 'line-through',
            textDecorationColor: 'var(--jp-pink)',
          }}>R$ 997</span>
          <span style={{
            fontFamily: 'var(--font-display-hero)',
            fontSize: 52, fontWeight: 800, color: 'var(--jp-pink)',
            letterSpacing: '-0.03em', lineHeight: 1,
          }}>R$ 297</span>
        </div>
        <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginBottom: 22 }}>
          ou 12x de R$ 29,70 no cartão
        </div>

        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10, marginBottom: 22 }}>
          {[
            'Acesso vitalício a todos os treinos',
            'Plano alimentar realista (sem dieta maluca)',
            'Comunidade no WhatsApp comigo',
            'Atualizações futuras incluídas, pra sempre',
            '3 níveis: iniciante, intermediário, avançado',
            'Garantia de 7 dias sem perguntas',
          ].map(t => (
            <li key={t} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--jp-black)' }}>
              <i data-lucide="check-circle-2" style={{ width: 18, height: 18, color: 'var(--jp-green)', flexShrink: 0, marginTop: 1 }}></i>
              <span>{t}</span>
            </li>
          ))}
        </ul>

        <button className="btn btn-cta" style={{
          width: '100%', padding: '20px', fontSize: 16,
          letterSpacing: '-0.005em',
        }}>
          Quero meu acesso vitalício →
        </button>

        <div style={{
          textAlign: 'center', marginTop: 14,
          fontSize: 12, color: 'var(--fg-subtle)',
        }}>
          Pagamento 100% seguro · Cartão, Pix ou boleto
        </div>
      </div>
    </section>
  );
}

// =================================================================
// 13. URGENCY — countdown
// =================================================================
function Urgency() {
  const [t, setT] = React.useState({ d: 0, h: 0, m: 0, s: 0 });

  React.useEffect(() => {
    const target = new Date('2026-05-10T23:59:59-03:00').getTime();
    const tick = () => {
      const diff = Math.max(0, target - Date.now());
      const d = Math.floor(diff / 86400000);
      const h = Math.floor((diff % 86400000) / 3600000);
      const m = Math.floor((diff % 3600000) / 60000);
      const s = Math.floor((diff % 60000) / 1000);
      setT({ d, h, m, s });
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  const Cell = ({ n, l }) => (
    <div style={{
      flex: 1,
      background: 'var(--jp-black)',
      color: '#fff',
      borderRadius: 14,
      padding: '16px 8px',
      textAlign: 'center',
    }}>
      <div style={{
        fontFamily: 'var(--font-display-hero)',
        fontSize: 32, fontWeight: 800,
        letterSpacing: '-0.02em', lineHeight: 1,
      }}>{String(n).padStart(2, '0')}</div>
      <div style={{
        fontSize: 10, fontWeight: 700,
        letterSpacing: '0.12em', textTransform: 'uppercase',
        color: 'var(--jp-pink)',
        marginTop: 6,
      }}>{l}</div>
    </div>
  );

  return (
    <section style={{
      padding: '64px 24px',
      background: `linear-gradient(180deg, var(--jp-pink-50), #fff)`,
    }}>
      <div style={{ textAlign: 'center', marginBottom: 8 }}>
        <div style={{
          fontSize: 11, fontWeight: 800, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: 'var(--jp-pink)',
          marginBottom: 14,
        }}>
          A oferta termina em
        </div>
        <h2 style={{
          fontFamily: 'var(--font-display-hero)',
          fontSize: 26, fontWeight: 800,
          letterSpacing: '-0.02em', lineHeight: 1.1,
          color: 'var(--jp-black)',
          marginBottom: 24,
        }}>
          Depois disso, volta pra R$ 997.
        </h2>
      </div>

      <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
        <Cell n={t.d} l="dias" />
        <Cell n={t.h} l="horas" />
        <Cell n={t.m} l="min" />
        <Cell n={t.s} l="seg" />
      </div>

      <a href="#oferta" className="btn btn-cta" style={{
        width: '100%', padding: '20px', fontSize: 16,
      }}>
        Garantir minha vaga por R$ 297
      </a>
    </section>
  );
}

// =================================================================
// FOOTER
// =================================================================
function Footer({ logoSrc }) {
  return (
    <footer style={{
      background: 'var(--jp-black)', color: '#fff',
      padding: '48px 28px 36px', textAlign: 'center',
    }}>
      <img src={logoSrc} alt="Jaque Personal" style={{ height: 38, marginBottom: 18 }} />
      <p style={{ fontSize: 13, color: '#a3a3a3', maxWidth: 380, margin: '0 auto', lineHeight: 1.7 }}>
        © Jaque Personal · Método Corpo Definido<br/>
        Resultados variam de pessoa a pessoa. Consulte um profissional de saúde antes de iniciar qualquer programa de treino.
      </p>
      <div style={{
        marginTop: 24,
        fontSize: 11, color: '#737373',
        textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 700,
      }}>
        Pagamento seguro · LGPD · Suporte: contato@jaquepersonal.com.br
      </div>
    </footer>
  );
}

// =================================================================
// STICKY CTA — appears after scrolling past hero
// =================================================================
function StickyCTA() {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 600);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div style={{
      position: 'fixed', bottom: 0, left: 0, right: 0,
      zIndex: 60,
      pointerEvents: show ? 'auto' : 'none',
      opacity: show ? 1 : 0,
      transform: show ? 'translateY(0)' : 'translateY(100%)',
      transition: 'opacity 220ms ease-out, transform 220ms ease-out',
    }}>
      <div style={{
        maxWidth: 430, margin: '0 auto',
        background: 'rgba(255,255,255,0.96)',
        backdropFilter: 'blur(14px)',
        WebkitBackdropFilter: 'blur(14px)',
        borderTop: '1px solid var(--border)',
        padding: '12px 16px',
        display: 'flex', alignItems: 'center', gap: 12,
        boxShadow: '0 -8px 30px rgba(0,0,0,0.08)',
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ fontSize: 12, color: 'var(--fg-subtle)', textDecoration: 'line-through' }}>R$ 997</span>
            <span style={{
              fontFamily: 'var(--font-display)', fontWeight: 800,
              fontSize: 18, color: 'var(--jp-pink)',
            }}>R$ 297</span>
          </div>
          <div style={{ fontSize: 10, color: 'var(--fg-subtle)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700 }}>
            Vitalício · Garantia 7 dias
          </div>
        </div>
        <a href="#oferta" className="btn btn-cta" style={{ padding: '14px 18px', fontSize: 14 }}>
          Quero entrar
        </a>
      </div>
    </div>
  );
}

Object.assign(window, {
  TopBar, Hero, JaqueIntro, Identification, TheTurn,
  MethodPresentation, WhoItsFor, ExistingStudent, NewStudent,
  SocialProof, Guarantee, FAQ, ConsolidatedOffer, Urgency, Footer, StickyCTA,
  lpStyles,
});
