/* PAS — Identificação / Agitação / Virada (blocks 3, 4, 5) */

function Identification() {
  return (
    <section style={{ padding: '64px 22px', background: '#fff' }}>
      <span className="eyebrow" style={{ color: 'var(--jp-pink)' }}>Eu sei como é</span>
      <h2 className="display" style={{
        fontSize: 'clamp(28px, 7vw, 40px)',
        marginTop: 12,
        marginBottom: 22,
        letterSpacing: '-0.025em',
        lineHeight: 1.08,
      }}>
        Você acorda com o despertador… e a primeira coisa que sente é <span style={{ color: 'var(--jp-pink)' }}>cansaço</span>.
      </h2>
      <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', marginBottom: 14 }}>
        Você levanta. Faz café. Serve o café. Resolve a roupa do filho. Resolve o e-mail do trabalho. Lembra que a despensa tá vazia. Resolve. Volta pro WhatsApp do grupo da família, três áudios pra ouvir. Almoça em pé. Trabalha. Volta. Janta. Adormece com o celular na mão.
      </p>
      <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', marginBottom: 26 }}>
        Aí chega sexta. E você pensa: <em style={{ color: 'var(--fg-strong)', fontStyle: 'italic' }}>"segunda eu começo a treinar"</em>. Segunda chega. E recomeça.
      </p>
      <div style={{
        borderLeft: '3px solid var(--jp-pink)',
        paddingLeft: 16,
      }}>
        <p style={{
          fontFamily: 'var(--font-display)',
          fontWeight: 800,
          fontSize: 22,
          lineHeight: 1.25,
          color: 'var(--jp-pink)',
          letterSpacing: '-0.015em',
        }}>
          Lindona, isso não é falta de força de vontade. É falta de método que cabe na sua vida real.
        </p>
      </div>
    </section>
  );
}

function Agitation() {
  const bullets = [
    '6 meses sem comprar uma roupa pra você?',
    '1 ano sem fazer uma foto que você gostou?',
    '2 anos repetindo "ano que vem eu cuido de mim"?',
  ];
  return (
    <section style={{ padding: '64px 22px', background: 'var(--jp-gray-50)' }}>
      <h2 className="display" style={{
        fontSize: 'clamp(28px, 7vw, 40px)',
        marginBottom: 26,
        letterSpacing: '-0.025em',
        lineHeight: 1.08,
      }}>
        Quanto tempo faz que você não se vê no espelho?
      </h2>

      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 26px', display: 'grid', gap: 14 }}>
        {bullets.map(b => (
          <li key={b} style={{
            display: 'flex',
            gap: 12,
            alignItems: 'flex-start',
            padding: '14px 16px',
            background: '#fff',
            borderRadius: 14,
            border: '1px solid var(--border)',
          }}>
            <span style={{
              width: 22, height: 22, borderRadius: '50%',
              background: 'var(--jp-pink)', color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 12, fontWeight: 800, flexShrink: 0, marginTop: 1,
            }}>?</span>
            <span style={{ fontSize: 15, lineHeight: 1.45, color: 'var(--fg-strong)', fontWeight: 500 }}>{b}</span>
          </li>
        ))}
      </ul>

      <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)' }}>
        Cada Dia das Mães chega e você ganha mais um perfume, mais uma flor, mais um chocolate. E você sorri. Recebe. Agradece. <strong style={{ color: 'var(--fg-strong)' }}>E continua se sentindo invisível dentro do próprio corpo.</strong>
      </p>
    </section>
  );
}

function Turn() {
  return (
    <section style={{
      padding: '72px 22px',
      background: 'linear-gradient(180deg, #fff 0%, var(--jp-pink-50) 100%)',
      textAlign: 'left',
    }}>
      <span className="eyebrow" style={{ color: 'var(--jp-pink)' }}>A virada</span>
      <h2 className="display" style={{
        fontSize: 'clamp(40px, 11vw, 64px)',
        marginTop: 14,
        marginBottom: 22,
        letterSpacing: '-0.035em',
        lineHeight: 0.98,
      }}>
        Esse ano, o presente é <span style={{ color: 'var(--jp-pink)' }}>seu.</span>
      </h2>
      <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg-muted)', marginBottom: 28 }}>
        Acesso vitalício ao método que <strong style={{ color: 'var(--fg-strong)' }}>+12 mil mulheres</strong> usaram pra voltar a treinar — sem academia, sem PT, sem coach na orelha.
        <br/><br/>
        Treinos curtos. Plano simples. Resultado real. <strong style={{ color: 'var(--jp-pink)' }}>Pagamento único. Treine pra sempre.</strong>
      </p>
      <a href="#oferta" className="btn btn-cta" style={{
        width: '100%',
        padding: '20px 18px',
        fontSize: 17,
        whiteSpace: 'normal',
        textAlign: 'center',
        lineHeight: 1.25,
        boxSizing: 'border-box',
      }}>
        Quero esse Dia das Mães comigo →
      </a>
    </section>
  );
}

Object.assign(window, { Identification, Agitation, Turn });