/* Apresentação do método + Prova social + Comparativo + Garantia (6, 7, 8, 9) */

function Method() {
  const pillars = [
    { ic: 'home', t: 'Treinos pra fazer EM CASA', d: 'Sem academia, sem deslocamento. Aparelho? Só sua vontade.' },
    { ic: 'dumbbell', t: 'Programa pra GANHAR MASSA', d: 'Glúteos, pernas, costas, braços. Sequência semanal pronta.' },
    { ic: 'flame', t: 'Plano pra QUEIMAR GORDURA', d: 'Cardio inteligente — encaixa em 30 minutos.' },
    { ic: 'layout-grid', t: 'Tudo organizado em UMA PLATAFORMA', d: 'Você abre, escolhe seu treino, executa. Acabou.' },
  ];
  return (
    <section style={{ padding: '72px 22px', background: '#fff' }}>
      <span className="eyebrow" style={{ color: 'var(--jp-pink)' }}>O que você ganha hoje</span>
      <h2 className="display" style={{
        fontSize: 'clamp(30px, 7.5vw, 44px)',
        marginTop: 12,
        marginBottom: 30,
        letterSpacing: '-0.025em',
        lineHeight: 1.05,
      }}>
        Método Corpo Definido — <span style={{ color: 'var(--jp-pink)' }}>Acesso Vitalício.</span>
      </h2>
      <div style={{ display: 'grid', gap: 14 }}>
        {pillars.map((p, i) => (
          <div key={p.t} style={{
            border: '1px solid var(--border)',
            borderRadius: 18,
            padding: '20px 18px',
            background: i === 1 ? 'var(--jp-pink-50)' : '#fff',
            display: 'flex',
            gap: 16,
            alignItems: 'flex-start',
          }}>
            <div style={{
              width: 48, height: 48, borderRadius: 14,
              background: 'var(--jp-pink)',
              color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <i data-lucide={p.ic} style={{ width: 24, height: 24, strokeWidth: 2 }}></i>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <h3 style={{ fontSize: 16, marginBottom: 6, lineHeight: 1.2, fontFamily: 'var(--font-display)', fontWeight: 800, letterSpacing: '-0.01em' }}>{p.t}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--fg-muted)' }}>{p.d}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function SocialProof() {
  const items = [
    { name: 'Marina', age: 34, q: 'Eu já tinha começado e parado 4 vezes esse ano. Com o Jaque, tô na semana 8.' },
    { name: 'Camila', age: 41, q: 'Voltei a usar a calça que tava guardada há 3 anos. Em 6 semanas.' },
    { name: 'Fernanda', age: 39, q: 'Treino 3x por semana, 25 minutos. Mais nada. E to vendo resultado.' },
  ];
  return (
    <section style={{ padding: '72px 22px', background: 'var(--jp-gray-50)' }}>
      <span className="eyebrow" style={{ color: 'var(--jp-pink)' }}>Não é só você</span>
      <h2 className="display" style={{
        fontSize: 'clamp(28px, 7vw, 40px)',
        marginTop: 12,
        marginBottom: 28,
        letterSpacing: '-0.025em',
        lineHeight: 1.08,
      }}>
        +12 mil mulheres já decidiram parar de se deixar por último.
      </h2>

      <div style={{ display: 'grid', gap: 14, marginBottom: 24 }}>
        {items.map(i => (
          <figure key={i.name} style={{
            margin: 0,
            background: '#fff',
            borderRadius: 18,
            padding: 20,
            border: '1px solid var(--border)',
            boxShadow: 'var(--shadow-sm)',
          }}>
            <div style={{ display: 'flex', gap: 4, color: 'var(--jp-pink)', fontSize: 14, marginBottom: 10 }}>
              {'★★★★★'}
            </div>
            <blockquote style={{ margin: 0, fontSize: 15.5, lineHeight: 1.5, color: 'var(--fg-strong)', fontWeight: 500 }}>
              "{i.q}"
            </blockquote>
            <figcaption style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 16 }}>
              <div style={{
                width: 42, height: 42, borderRadius: '50%',
                background: 'linear-gradient(135deg, var(--jp-pink-100), var(--jp-pink))',
                color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 800, fontFamily: 'var(--font-display)', fontSize: 16,
                flexShrink: 0,
              }}>{i.name[0]}</div>
              <div>
                <div style={{ fontWeight: 700, fontSize: 14, color: 'var(--fg-strong)' }}>{i.name}, {i.age}</div>
                <div style={{ fontSize: 12, color: 'var(--fg-subtle)' }}>aluna verificada</div>
              </div>
            </figcaption>
          </figure>
        ))}
      </div>

      <div style={{
        textAlign: 'center',
        padding: '14px 16px',
        background: '#fff',
        borderRadius: 14,
        border: '1px solid var(--border)',
      }}>
        <div style={{ fontSize: 18, color: 'var(--jp-pink)', marginBottom: 4 }}>★★★★★</div>
        <div style={{ fontSize: 13, color: 'var(--fg-muted)' }}>
          <strong style={{ color: 'var(--fg-strong)' }}>+2.341 avaliações</strong> · 4.9 de média
        </div>
      </div>
    </section>
  );
}

function Comparison() {
  const rows = [
    { plan: 'Trimestral', sub: '', price: 'R$ 98', detail: '3 meses, depois renova', highlight: false },
    { plan: 'Anual', sub: '', price: 'R$ 197', detail: '12 meses, depois renova', highlight: false },
    { plan: 'VITALÍCIO', sub: 'oferta Dia das Mães', price: 'R$ 297', detail: 'Pra sempre. Nunca renova. Nunca perde acesso.', highlight: true },
  ];
  return (
    <section style={{ padding: '72px 22px', background: '#fff' }}>
      <span className="eyebrow" style={{ color: 'var(--jp-pink)' }}>Pra quem já é aluna</span>
      <h2 className="display" style={{
        fontSize: 'clamp(28px, 7vw, 40px)',
        marginTop: 12,
        marginBottom: 26,
        letterSpacing: '-0.025em',
        lineHeight: 1.08,
      }}>
        Você já é minha aluna? Faz uma conta comigo.
      </h2>

      <div style={{ display: 'grid', gap: 12, marginBottom: 24 }}>
        {rows.map(r => (
          <div key={r.plan} style={{
            border: r.highlight ? '2px solid var(--jp-pink)' : '1px solid var(--border)',
            borderRadius: 16,
            padding: r.highlight ? '22px 18px 18px' : '18px 18px',
            background: r.highlight ? 'linear-gradient(180deg, var(--jp-pink-50), #fff)' : '#fff',
            position: 'relative',
            boxShadow: r.highlight ? 'var(--shadow-pink)' : 'none',
            marginTop: r.highlight ? 14 : 0,
          }}>
            {r.highlight && (
              <div style={{
                position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)',
                background: 'var(--jp-pink)', color: '#fff',
                padding: '5px 14px', borderRadius: 999,
                fontSize: 10, fontWeight: 800, letterSpacing: '0.14em', textTransform: 'uppercase',
                whiteSpace: 'nowrap',
              }}>★ Esta oferta</div>
            )}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, marginBottom: 6 }}>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{
                  fontFamily: 'var(--font-display)',
                  fontWeight: 800,
                  fontSize: r.highlight ? 18 : 15,
                  color: r.highlight ? 'var(--jp-pink)' : 'var(--fg-strong)',
                  letterSpacing: '-0.01em',
                  lineHeight: 1.1,
                }}>{r.plan}</div>
                {r.sub && (
                  <div style={{ fontSize: 11, color: 'var(--fg-subtle)', fontWeight: 600, marginTop: 2, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
                    {r.sub}
                  </div>
                )}
              </div>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontWeight: 800,
                fontSize: r.highlight ? 26 : 20,
                letterSpacing: '-0.02em',
                color: r.highlight ? 'var(--fg-strong)' : 'var(--fg-muted)',
                flexShrink: 0,
              }}>{r.price}</div>
            </div>
            <div style={{
              fontSize: 13.5,
              color: r.highlight ? 'var(--fg-strong)' : 'var(--fg-muted)',
              fontWeight: r.highlight ? 600 : 400,
              lineHeight: 1.4,
            }}>{r.detail}</div>
          </div>
        ))}
      </div>

      <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--fg-muted)', marginBottom: 24, padding: '16px', background: 'var(--jp-gray-50)', borderRadius: 14 }}>
        Por <strong style={{ color: 'var(--fg-strong)' }}>R$ 100 a mais</strong> que o anual, você nunca mais paga uma renovação. Nunca mais perde acesso. <strong style={{ color: 'var(--jp-pink)' }}>Treine pra sempre.</strong>
      </p>

      <a href="#oferta" className="btn btn-cta" style={{
        width: '100%',
        padding: '20px 18px',
        fontSize: 16,
        whiteSpace: 'normal',
        textAlign: 'center',
        lineHeight: 1.25,
        boxSizing: 'border-box',
      }}>
        Quero transformar meu acesso em vitalício →
      </a>
    </section>
  );
}

function Guarantee() {
  return (
    <section style={{
      padding: '64px 22px',
      background: 'var(--jp-green-100)',
      textAlign: 'center',
    }}>
      <div style={{
        width: 96, height: 96, margin: '0 auto 22px',
        borderRadius: '50%',
        background: '#fff',
        border: '3px solid var(--jp-green)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: 'var(--shadow-md)',
      }}>
        <i data-lucide="shield-check" style={{ width: 48, height: 48, color: 'var(--jp-green)', strokeWidth: 2 }}></i>
      </div>
      <span className="eyebrow" style={{ color: 'var(--jp-green-700)' }}>Risco zero</span>
      <h2 className="display" style={{
        fontSize: 'clamp(28px, 7vw, 40px)',
        marginTop: 12,
        marginBottom: 22,
        letterSpacing: '-0.025em',
        lineHeight: 1.08,
        color: 'var(--jp-black)',
      }}>
        Garantia incondicional de <span style={{ color: 'var(--jp-green-700)' }}>7 dias.</span>
      </h2>
      <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg-muted)', textAlign: 'left', marginBottom: 22 }}>
        Você entra. Olha tudo. Faz 1 treino, 2, 3. Se em qualquer momento dos próximos 7 dias você sentir <em style={{ color: 'var(--fg-strong)', fontStyle: 'italic' }}>"isso aqui não é pra mim"</em> — eu devolvo cada centavo.
        <br/><br/>
        Sem perguntas, sem <em>"mas..."</em>, sem ligação de retenção. É só me chamar no WhatsApp e em até <strong style={{ color: 'var(--fg-strong)' }}>24h o dinheiro volta pro seu cartão.</strong>
      </p>
      <p style={{
        fontFamily: 'var(--font-display)',
        fontWeight: 800,
        fontSize: 22,
        lineHeight: 1.25,
        color: 'var(--jp-pink)',
        letterSpacing: '-0.015em',
        textAlign: 'left',
      }}>
        O risco é todo meu, lindona. Você só precisa começar.
      </p>
    </section>
  );
}

Object.assign(window, { Method, SocialProof, Comparison, Guarantee });