/* =========================================================
   Mother's Day LP — sections 1–7 + Header
   ========================================================= */

/* ---------- HEADER ---------- */
function Header({ logoSrc }) {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--border)',
      padding: '12px 20px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <img src={logoSrc} alt="Jaque Personal" style={{ height: 32 }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="badge badge-pink" style={{ fontSize: 10 }}>★ Dia das Mães</span>
      </div>
    </header>
  );
}

/* ---------- 1. HERO ---------- */
function Hero() {
  return (
    <section data-screen-label="01 Hero" style={{
      padding: '28px 22px 40px',
      background: 'linear-gradient(180deg, var(--jp-pink-50) 0%, #ffffff 65%)',
      borderBottom: '1px solid var(--jp-pink-100)',
    }}>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: '#fff', border: '1px solid var(--jp-pink-100)', boxShadow: 'var(--shadow-xs)', marginBottom: 18 }}>
        <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--jp-pink)', boxShadow: '0 0 0 4px rgba(255,20,147,0.18)' }}></span>
        <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--jp-pink-600)' }}>Campanha Dia das Mães · Até 10 de maio</span>
      </div>

      <h1 className="display" style={{
        fontSize: 'clamp(40px, 9.5vw, 68px)',
        lineHeight: 1.02,
        marginBottom: 18,
        letterSpacing: '-0.025em',
      }}>
        Mãe também merece <span style={{ color: 'var(--jp-pink)', fontStyle: 'italic', fontWeight: 800 }}>se escolher</span>.
      </h1>

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

      {/* Photo + price stack */}
      <div style={{ position: 'relative', marginBottom: 22 }}>
        <div style={{
          height: 380,
          borderRadius: 24,
          overflow: 'hidden',
          background: '#a020c0',
          boxShadow: 'var(--shadow-md)',
        }}>
          <img
            src="jaque-hero.jpg"
            alt="Jaque Personal — Dia das Mães Acesso Vitalício"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
        </div>
        {/* floating sticker */}
        <div style={{
          position: 'absolute', top: 14, right: 14,
          background: 'var(--jp-black)', color: '#fff',
          padding: '8px 14px', borderRadius: 999,
          fontSize: 11, fontWeight: 800, letterSpacing: '0.1em', textTransform: 'uppercase',
          boxShadow: 'var(--shadow-md)',
        }}>70% OFF</div>
      </div>

      {/* PRICE BOX */}
      <div style={{
        background: '#fff',
        border: '2px solid var(--jp-pink)',
        borderRadius: 20,
        padding: '20px 20px 22px',
        boxShadow: 'var(--shadow-md)',
        marginBottom: 14,
        position: 'relative',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <i data-lucide="infinity" style={{ width: 16, height: 16, color: 'var(--jp-pink)' }}></i>
          <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--jp-pink-600)' }}>Acesso vitalício</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 4, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 16, color: 'var(--fg-subtle)', textDecoration: 'line-through', fontWeight: 600 }}>De R$ 997</span>
          <span className="badge badge-green" style={{ fontSize: 10 }}>Você economiza R$ 700</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: 'var(--fg-muted)' }}>R$</span>
          <span className="display" style={{ fontSize: 'clamp(56px, 14vw, 84px)', color: 'var(--jp-black)', lineHeight: 0.95, letterSpacing: '-0.03em' }}>297</span>
          <span style={{ fontSize: 14, color: 'var(--fg-subtle)', fontWeight: 600 }}>à vista</span>
        </div>
        <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginBottom: 16, display: 'flex', alignItems: 'center', gap: 6 }}>
          <i data-lucide="check" style={{ width: 14, height: 14, color: 'var(--jp-green)' }}></i>
          Pagamento único · Sem mensalidade · Treine pra sempre
        </div>
        <a href="#oferta" className="btn btn-cta" style={{ width: '100%', padding: '18px 20px', fontSize: 16 }}>
          Quero meu acesso vitalício por R$297
        </a>
        <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 12, color: 'var(--jp-green-700)', fontWeight: 600 }}>
          <i data-lucide="shield-check" style={{ width: 14, height: 14 }}></i>
          Garantia de 7 dias. O risco é todo meu.
        </div>
      </div>

      {/* Mini social proof */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center', marginTop: 18, fontSize: 12, color: 'var(--fg-muted)' }}>
        <div style={{ display: 'flex' }}>
          {[0,1,2,3].map(i => (
            <div key={i} style={{
              width: 26, height: 26, borderRadius: '50%',
              background: ['#ffd6e7','#ffb3d4','#ff8fc1','#ff6bae'][i],
              border: '2px solid #fff',
              marginLeft: i ? -8 : 0,
            }}></div>
          ))}
        </div>
        <span><strong style={{ color: 'var(--jp-black)' }}>+12 mil mulheres</strong> já transformaram o corpo</span>
      </div>
    </section>
  );
}

/* ---------- 2. IDENTIFICATION ---------- */
function Identification() {
  return (
    <section data-screen-label="02 Identification" style={{ padding: '56px 22px', background: '#fff' }}>
      <span className="eyebrow">Pra você que sente isso</span>
      <h2 style={{ fontSize: 'clamp(28px, 6.5vw, 38px)', marginTop: 12, marginBottom: 20, lineHeight: 1.1 }}>
        Você cuida de todo mundo… mas vive deixando <em style={{ fontStyle: 'italic', color: 'var(--jp-pink)' }}>você</em> por último?
      </h2>
      <p style={{ fontSize: 16, marginBottom: 18, color: 'var(--fg-muted)', lineHeight: 1.65 }}>
        Você promete que vai voltar a treinar. Começa animada. Mas aí vem a rotina, o cansaço, o trabalho, a casa, os filhos, os compromissos…
      </p>
      <p style={{ fontSize: 16, marginBottom: 24, color: 'var(--fg-muted)', lineHeight: 1.65 }}>
        E quando percebe, mais uma vez você deixou seu corpo, sua saúde e sua autoestima pra depois.
      </p>
      <div style={{
        background: 'var(--jp-pink-50)',
        borderLeft: '3px solid var(--jp-pink)',
        padding: '18px 20px',
        borderRadius: '0 12px 12px 0',
      }}>
        <p style={{ fontSize: 17, color: 'var(--jp-black)', fontWeight: 500, lineHeight: 1.5, margin: 0 }}>
          <strong style={{ color: 'var(--jp-pink-600)', fontWeight: 800 }}>Lindona,</strong> o problema não é você. O problema é tentar seguir uma rotina que não cabe na sua vida real.
        </p>
      </div>
    </section>
  );
}

/* ---------- 3. THE TURN ---------- */
function TheTurn() {
  return (
    <section data-screen-label="03 The Turn" style={{ padding: '56px 22px', background: 'var(--jp-black)', color: '#fff' }}>
      <span className="eyebrow" style={{ color: 'var(--jp-pink)' }}>O que mudou</span>
      <h2 style={{ fontSize: 'clamp(28px, 6.5vw, 38px)', color: '#fff', marginTop: 12, marginBottom: 20, lineHeight: 1.1 }}>
        Você não precisa esperar sobrar tempo para cuidar de você.
      </h2>
      <p style={{ fontSize: 16, color: '#d4d4d4', marginBottom: 18, lineHeight: 1.65 }}>
        Sempre vai ter uma casa pra cuidar. Uma mensagem pra responder. Um problema pra resolver. Uma pessoa precisando de você.
      </p>
      <p style={{ fontSize: 18, color: '#fff', fontWeight: 600, marginBottom: 28, lineHeight: 1.5 }}>
        Mas você também precisa de você.
      </p>

      <div style={{
        background: 'linear-gradient(135deg, rgba(255,20,147,0.15), rgba(255,20,147,0.04))',
        border: '1px solid rgba(255,20,147,0.4)',
        padding: '22px',
        borderRadius: 16,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <i data-lucide="gift" style={{ width: 18, height: 18, color: 'var(--jp-pink)' }}></i>
          <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--jp-pink)' }}>O presente desse Dia das Mães</span>
        </div>
        <p style={{ fontSize: 17, color: '#fff', fontWeight: 500, lineHeight: 1.5, margin: 0 }}>
          E nesse Dia das Mães, o presente pode ser esse: parar de se abandonar, voltar a treinar e <em style={{ color: 'var(--jp-pink)', fontStyle: 'italic' }}>se sentir bem no próprio corpo de novo.</em>
        </p>
      </div>
    </section>
  );
}

/* ---------- 4. METHOD PRESENTATION ---------- */
function MethodPresentation() {
  const features = [
    { ic: 'dumbbell', t: 'Treinos em casa', d: 'Sem academia, sem deslocamento.' },
    { ic: 'flame', t: 'Queima gordura', d: 'Cardio inteligente que cabe em 30min.' },
    { ic: 'sparkles', t: 'Define o corpo', d: 'Glúteos, pernas e barriga em foco.' },
    { ic: 'list-checks', t: 'Plano organizado', d: 'Você não fica perdida na internet.' },
  ];
  return (
    <section data-screen-label="04 Method" style={{ padding: '64px 22px', background: '#fff' }}>
      <span className="eyebrow">Conheça</span>
      <h2 style={{ fontSize: 'clamp(28px, 6.5vw, 40px)', marginTop: 12, marginBottom: 18, lineHeight: 1.1 }}>
        Método <span style={{ color: 'var(--jp-pink)' }}>Corpo Definido</span>
      </h2>
      <p style={{ fontSize: 16, color: 'var(--fg-muted)', marginBottom: 28, lineHeight: 1.65 }}>
        Plataforma de treinos em casa para mulheres que querem ganhar massa, definir o corpo e queimar gordura sem depender de academia. Treinos organizados pra seguir no seu ritmo, sem ficar perdida procurando treino aleatório na internet.
      </p>

      <PhotoPlaceholder height={220} tag="Mockup da plataforma" subtag="dashboard · vídeos · planos" rounded={20} />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 22 }}>
        {features.map(f => (
          <div key={f.t} style={{
            padding: '18px 16px',
            background: 'var(--jp-gray-50)',
            borderRadius: 14,
            border: '1px solid var(--border)',
          }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--jp-pink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 10 }}>
              <i data-lucide={f.ic} style={{ width: 18, height: 18, color: 'var(--jp-pink)' }}></i>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15, marginBottom: 2, color: 'var(--jp-black)' }}>{f.t}</div>
            <div style={{ fontSize: 13, color: 'var(--fg-subtle)', lineHeight: 1.45 }}>{f.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------- 5. WHO IT'S FOR ---------- */
function WhoItsFor() {
  const items = [
    'Você quer treinar em casa',
    'Você quer ganhar massa muscular',
    'Você quer definir pernas, glúteos e barriga',
    'Você quer queimar gordura',
    'Você tem pouco tempo',
    'Você já começou e parou várias vezes',
    'Você não quer depender de academia',
    'Você quer um plano simples pra seguir',
    'Você precisa voltar a cuidar de você',
    'Você não quer mais recomeçar sozinha',
  ];
  return (
    <section data-screen-label="05 Who" style={{ padding: '64px 22px', background: 'var(--jp-gray-50)' }}>
      <span className="eyebrow">Esse método é seu</span>
      <h2 style={{ fontSize: 'clamp(28px, 6.5vw, 38px)', marginTop: 12, marginBottom: 24, lineHeight: 1.1 }}>
        Esse método é pra você se…
      </h2>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
        {items.map((t, i) => (
          <li key={i} style={{
            display: 'flex', alignItems: 'flex-start', gap: 12,
            padding: '14px 16px',
            background: '#fff',
            borderRadius: 12,
            border: '1px solid var(--border)',
            transition: 'border-color 220ms',
          }}>
            <div style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--jp-green)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
              <i data-lucide="check" style={{ width: 14, height: 14, color: '#fff', strokeWidth: 3 }}></i>
            </div>
            <span style={{ fontSize: 15, color: 'var(--jp-black)', fontWeight: 500, lineHeight: 1.45 }}>{t}</span>
          </li>
        ))}
      </ul>
      <div style={{
        marginTop: 28,
        padding: '20px 22px',
        background: '#fff',
        borderRadius: 16,
        border: '2px solid var(--jp-pink)',
        boxShadow: 'var(--shadow-sm)',
      }}>
        <p style={{ fontSize: 16, color: 'var(--jp-black)', fontWeight: 500, lineHeight: 1.55, margin: 0 }}>
          Se você leu isso e pensou: <em style={{ color: 'var(--jp-pink-600)', fontStyle: 'italic', fontWeight: 700 }}>"Jaque, parece que você está falando comigo"</em>, então essa oferta é pra você.
        </p>
      </div>
    </section>
  );
}

/* ---------- 6. EXISTING STUDENT ---------- */
function ExistingStudent() {
  const plans = [
    { name: 'Trimestral', price: 'R$ 98', dur: '3 meses', highlight: false },
    { name: 'Anual', price: 'R$ 197', dur: '12 meses', highlight: false },
    { name: 'Vitalício (Mães)', price: 'R$ 297', dur: 'Pra sempre', highlight: true },
  ];
  return (
    <section data-screen-label="06 Existing" style={{ padding: '64px 22px', background: '#fff' }}>
      <span className="eyebrow" style={{ color: 'var(--jp-pink)' }}>Já é minha aluna?</span>
      <h2 style={{ fontSize: 'clamp(26px, 6vw, 34px)', marginTop: 12, marginBottom: 16, lineHeight: 1.1 }}>
        Já é minha aluna? Então essa condição é <span style={{ color: 'var(--jp-pink)' }}>ainda melhor</span> pra você.
      </h2>
      <p style={{ fontSize: 15, color: 'var(--fg-muted)', marginBottom: 24 }}>
        Compare e veja por que vale a pena trocar seu plano pelo vitalício:
      </p>

      <div style={{ display: 'grid', gap: 10, marginBottom: 22 }}>
        {plans.map(p => (
          <div key={p.name} style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: p.highlight ? '20px 22px' : '16px 22px',
            background: p.highlight ? 'linear-gradient(135deg, var(--jp-pink-50), #fff)' : '#fff',
            borderRadius: 14,
            border: p.highlight ? '2px solid var(--jp-pink)' : '1px solid var(--border)',
            boxShadow: p.highlight ? 'var(--shadow-md)' : 'none',
            position: 'relative',
          }}>
            {p.highlight && (
              <div style={{
                position: 'absolute', top: -10, right: 16,
                background: 'var(--jp-pink)', color: '#fff',
                padding: '4px 10px', borderRadius: 999,
                fontSize: 9, fontWeight: 800, letterSpacing: '0.12em', textTransform: 'uppercase',
              }}>★ Mães</div>
            )}
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: p.highlight ? 800 : 700, fontSize: p.highlight ? 17 : 15, color: 'var(--jp-black)' }}>{p.name}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-subtle)', marginTop: 2 }}>{p.dur}</div>
            </div>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 800,
              fontSize: p.highlight ? 26 : 20,
              color: p.highlight ? 'var(--jp-pink)' : 'var(--jp-black)',
              letterSpacing: '-0.02em',
            }}>{p.price}</div>
          </div>
        ))}
      </div>

      <div style={{
        background: 'var(--jp-gray-50)',
        padding: '18px 20px',
        borderRadius: 14,
        marginBottom: 18,
      }}>
        <p style={{ fontSize: 15, color: 'var(--jp-black)', lineHeight: 1.55, margin: 0, fontWeight: 500 }}>
          Por apenas <strong style={{ color: 'var(--jp-pink-600)' }}>R$100 a mais que o anual</strong>, você treina comigo pra sempre. Sem renovar. Sem se preocupar com vencimento. Sem perder acesso.
        </p>
      </div>

      <a href="#oferta" className="btn btn-cta" style={{ width: '100%', padding: '17px', fontSize: 15 }}>
        Quero transformar meu acesso em vitalício
      </a>
    </section>
  );
}

/* ---------- 7. NEW STUDENT ---------- */
function NewStudent() {
  const nots = [
    'montar treino sozinha',
    'passar horas na academia',
    'saber por onde começar',
    'esperar segunda-feira',
  ];
  return (
    <section data-screen-label="07 New" style={{ padding: '64px 22px', background: 'var(--jp-gray-50)' }}>
      <span className="eyebrow">Nova por aqui?</span>
      <h2 style={{ fontSize: 'clamp(26px, 6vw, 34px)', marginTop: 12, marginBottom: 18, lineHeight: 1.1 }}>
        Ainda não é minha aluna? <em style={{ fontStyle: 'italic', color: 'var(--jp-pink)' }}>Vem que eu te explico.</em>
      </h2>
      <p style={{ fontSize: 16, color: 'var(--fg-muted)', marginBottom: 22, lineHeight: 1.65 }}>
        O Método Corpo Definido foi feito para mulheres que querem treinar em casa, mas não querem ficar perdidas.
      </p>

      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'grid', gap: 8 }}>
        {nots.map((t, i) => (
          <li key={i} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '12px 14px',
            background: '#fff',
            borderRadius: 10,
            border: '1px solid var(--border)',
            fontSize: 14, color: 'var(--jp-black)', fontWeight: 500,
          }}>
            <i data-lucide="x" style={{ width: 16, height: 16, color: 'var(--jp-pink)', flexShrink: 0, strokeWidth: 3 }}></i>
            <span>Não precisa <strong style={{ fontWeight: 700 }}>{t}</strong></span>
          </li>
        ))}
      </ul>

      <div style={{
        background: '#fff',
        padding: '20px 22px',
        borderRadius: 16,
        border: '1px solid var(--jp-pink-100)',
        borderLeft: '3px solid var(--jp-pink)',
      }}>
        <p style={{ fontSize: 16, color: 'var(--jp-black)', lineHeight: 1.6, margin: 0, fontWeight: 500 }}>
          Aqui você tem um <strong>caminho simples para seguir</strong>. Treinos organizados, foco em corpo feminino e uma rotina possível para quem quer resultado sem complicação.
        </p>
        <p style={{ fontSize: 16, color: 'var(--jp-pink-600)', lineHeight: 1.5, margin: '12px 0 0', fontStyle: 'italic', fontWeight: 600 }}>
          Você não treina sozinha, lindona.
        </p>
      </div>
    </section>
  );
}

/* ---------- shared photo placeholder ---------- */
function PhotoPlaceholder({ height = 240, tag = 'Foto', subtag = '', rounded = 24 }) {
  return (
    <div style={{
      height,
      borderRadius: rounded,
      background: 'linear-gradient(135deg, var(--jp-pink-100) 0%, #ffe1f1 50%, #ffd6e7 100%)',
      border: '1px dashed var(--jp-pink)',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      color: 'var(--jp-pink-600)',
      fontWeight: 700,
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* subtle grid texture */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 30% 20%, rgba(255,20,147,0.08) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(255,20,147,0.10) 0%, transparent 50%)',
      }}></div>
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
        <i data-lucide="image" style={{ width: 32, height: 32, color: 'var(--jp-pink)', opacity: 0.7 }}></i>
        <div style={{ fontSize: 13, letterSpacing: '0.05em', textTransform: 'uppercase' }}>{tag}</div>
        {subtag && <div style={{ fontSize: 11, color: 'var(--jp-pink)', fontWeight: 500, opacity: 0.8 }}>{subtag}</div>}
      </div>
    </div>
  );
}

Object.assign(window, {
  Header, Hero, Identification, TheTurn, MethodPresentation,
  WhoItsFor, ExistingStudent, NewStudent, PhotoPlaceholder,
});
