/* Bundled sections — single babel file for reliable load */

/* ===== shared.jsx ===== */
/* Shared helpers + small reusable pieces for the De La Riva sales page */
/* base dos assets: a página na subpasta /curso-guarda-de-la-riva define window.__ASSET_BASE='../assets' */
const ASSET = (typeof window !== 'undefined' && window.__ASSET_BASE) || 'assets';
/* Hotmart checkout — base limpa (sem params transitórios _gl/bid). sck personalizado por botão. */
const CHECKOUT_BASE = 'https://pay.hotmart.com/D97857529B?off=06kim8ar&hotfeature=32';
const checkoutUrl = (sck) => `${CHECKOUT_BASE}&sck=${encodeURIComponent(sck)}`;
const goCheckout = (sck) => window.open(checkoutUrl(sck), '_blank', 'noopener');

const Icon = (name, size = 20, opts = {}) =>
  <i data-lucide={name} style={{ width: size, height: size, ...opts }}></i>;

/* fire lucide + reveal observer after mount */
function useChrome(deps = []) {
  React.useEffect(() => {
    const t = setTimeout(() => window.lucide && window.lucide.createIcons(), 50);
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal:not(.in)').forEach((el) => io.observe(el));
    return () => { clearTimeout(t); io.disconnect(); };
  }, deps);
}

/* Section eyebrow with brand tick — light/gold/ink tones */
function Kicker({ children, tone = 'gold', center = false }) {
  const color = tone === 'light' ? 'var(--bone-50)' : tone === 'ink' ? 'var(--ink-900)' : 'var(--text-accent-ink)';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 14,
      fontFamily: 'var(--font-label)', fontWeight: 600, textTransform: 'uppercase',
      letterSpacing: '0.26em', fontSize: 13, lineHeight: 1, color,
      justifyContent: center ? 'center' : 'flex-start',
    }}>
      <span style={{ width: 34, height: 2, background: 'var(--gold-500)', flexShrink: 0 }} />
      {children}
    </span>
  );
}

/* Display headline helper. `outline` renders gold-stroke transparent text. */
function Display({ children, outline = false, color = 'var(--bone-50)', size = 'clamp(2.4rem,5.2vw,4.6rem)', style = {} }) {
  return (
    <span className="am-display" style={{
      display: 'block', fontSize: size,
      color: outline ? 'transparent' : color,
      WebkitTextStroke: outline ? '2px var(--gold-500)' : 'none',
      ...style,
    }}>{children}</span>
  );
}

/* Vertical tracked caption running up a margin (poster device) */
function VCaption({ children, color = 'var(--text-on-ink-muted)' }) {
  return (
    <span style={{
      writingMode: 'vertical-rl', transform: 'rotate(180deg)',
      fontFamily: 'var(--font-label)', fontWeight: 600, textTransform: 'uppercase',
      letterSpacing: '0.34em', fontSize: 12, color,
    }}>{children}</span>
  );
}

/* the embroidered creed line, reused */
const CREED = 'Contigo eu sei que posso suportar, Deus';

Object.assign(window, { ASSET, CHECKOUT_BASE, checkoutUrl, goCheckout, Icon, useChrome, Kicker, Display, VCaption, CREED });


/* ===== hero.jsx ===== */
/* ATENÇÃO — TopBar, Hero, sticky CTA */
const { Button: HB, Badge: HBd } = window.AlexMunisBJJDesignSystem_b3b200;

function TopBar({ onCta }) {
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => {
    const f = () => setSolid(window.scrollY > 40);
    window.addEventListener('scroll', f); return () => window.removeEventListener('scroll', f);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: solid ? 'rgba(10,10,10,0.92)' : 'transparent',
      backdropFilter: solid ? 'blur(8px)' : 'none',
      borderBottom: solid ? '1px solid var(--ink-600)' : '1px solid transparent',
      transition: 'background var(--dur-base) var(--ease-out), border-color var(--dur-base)',
    }}>
      <div style={{
        maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '0 var(--gutter)', height: 68,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src={`${ASSET}/logo/am-mark-white.png`} alt="Alex Munis" style={{ height: 30, width: 'auto' }} />
          <span className="topbar-wordmark" style={{
            fontFamily: 'var(--font-label)', fontWeight: 700, textTransform: 'uppercase',
            letterSpacing: '0.22em', fontSize: 12.5, color: 'var(--bone-50)',
          }}>Alex Munis</span>
        </div>
        <HB variant="primary" size="sm" onClick={() => goCheckout('topo_menu')} style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>Garantir minha vaga</HB>
      </div>
    </header>
  );
}

const HERO_HEADLINES = {
  curso:    ['Do zero ao', 'avançado', 'Guarda De La Riva'],
  intocavel:['A guarda que te', 'torna', 'Intocável no chão'],
  campeoes: ['Jogue a guarda', 'dos', 'Campeões mundiais'],
};

function Hero({ t, onCta, onModulos }) {
  const [a, b, c] = HERO_HEADLINES[t.headline] || HERO_HEADLINES.curso;
  const photo = t.heroStyle !== 'tipografico';
  return (
    <section className="am-grunge--edge" style={{ position: 'relative', overflow: 'hidden', borderBottom: '2px solid var(--gold-500)' }}>
      <span className="am-kanji-watermark" style={{ position: 'absolute', right: '-1%', top: '-4%', fontSize: 'clamp(220px,32vw,460px)' }}>柔術</span>
      <div style={{
        maxWidth: 'var(--container-wide)', margin: '0 auto',
        padding: 'clamp(2.5rem,6vw,5.5rem) var(--gutter) clamp(2.5rem,5vw,4.5rem)',
        display: 'grid', gridTemplateColumns: photo ? '1.05fr 0.95fr' : '1fr', gap: 'clamp(2rem,4vw,3.5rem)', alignItems: 'center', position: 'relative',
      }} className="hero-grid">
        <div style={{ maxWidth: photo ? 'none' : 880, margin: photo ? 0 : '0 auto', textAlign: photo ? 'left' : 'center' }}>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: photo ? 'flex-start' : 'center' }}>
            <HBd variant="gold">Faixa Preta</HBd>
            <HBd variant="outline" style={{ color: 'var(--bone-50)', borderColor: 'var(--gold-500)' }}>Campeão Brasileiro 2026 · Meio-Pesado</HBd>
          </div>
          <h1 style={{ margin: '26px 0 0' }}>
            <Display size="clamp(2.4rem,5.6vw,4.4rem)" color="var(--bone-50)">{a}</Display>
            <Display size="clamp(3.4rem,9vw,7.2rem)" outline>{b}</Display>
            <Display size="clamp(2.6rem,6vw,4.8rem)" color="var(--bone-50)">{c}</Display>
          </h1>
          <p style={{
            margin: photo ? '26px 0 0' : '26px auto 0', maxWidth: 540, fontSize: 'clamp(1rem,1.4vw,1.22rem)',
            lineHeight: 1.6, color: 'var(--text-on-ink)',
          }}>
            A guarda mais versátil do jiu-jitsu moderno, destrinchada <strong style={{ color: 'var(--bone-50)' }}>detalhe por detalhe</strong> — do
            primeiro contato às raspagens, entradas e finalizações de alto nível. 10 módulos, do iniciante ao avançado.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 34, flexWrap: 'wrap', justifyContent: photo ? 'flex-start' : 'center' }}>
            <HB variant="primary" size="lg" onClick={() => goCheckout('hero_principal')} iconRight={<span style={{ fontWeight: 700, fontSize: 18 }}>→</span>}>Quero dominar a De La Riva</HB>
            <HB variant="outline" size="lg" onClick={onModulos} style={{ color: 'var(--bone-50)', borderColor: 'var(--bone-50)' }}>Ver os 10 módulos</HB>
          </div>
          <div style={{ display: 'flex', gap: 'clamp(1.5rem,4vw,3rem)', marginTop: 44, flexWrap: 'wrap', justifyContent: photo ? 'flex-start' : 'center' }}>
            {[['10', 'Módulos'], ['7+', 'Raspagens'], ['∞', 'Acesso vitalício']].map(([v, l], i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column' }}>
                <span style={{ fontFamily: 'var(--font-label)', fontWeight: 700, fontSize: 'clamp(2rem,3vw,2.8rem)', lineHeight: 0.95, color: i === 0 ? 'var(--gold-500)' : 'var(--bone-50)' }}>{v}</span>
                <span style={{ fontFamily: 'var(--font-label)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.16em', fontSize: 11.5, color: 'var(--text-on-ink-muted)', marginTop: 6 }}>{l}</span>
              </div>
            ))}
          </div>
        </div>

        {photo && (
          <div style={{ position: 'relative', justifySelf: 'center', width: '100%' }}>
            <div className="hero-photo-frame" style={{
              position: 'relative', width: 'min(440px, 100%)', aspectRatio: '4 / 5', marginLeft: 'auto',
              background: 'var(--ink-850)', boxShadow: 'var(--offset-frame-gold)',
              border: '1px solid var(--ink-600)', overflow: 'hidden',
            }}>
              <img src={`${ASSET}/img/portrait-white-gi.png`} alt="Alex Munis, faixa preta"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '68% top' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0) 42%)' }} />
              <span style={{
                position: 'absolute', left: 16, bottom: 16, fontFamily: 'var(--font-script)',
                fontSize: 38, color: 'var(--gold-400)', lineHeight: 1,
              }}>Alex Munis</span>
            </div>
            <div className="am-barcode am-barcode--light hero-barcode" style={{ position: 'absolute', right: -4, top: -22, width: 120, height: 30, opacity: 0.85 }}></div>
          </div>
        )}
      </div>

      {/* scrolling marquee strip */}
      <div style={{ borderTop: '1px solid var(--ink-600)', background: 'rgba(0,0,0,0.35)', overflow: 'hidden', whiteSpace: 'nowrap' }}>
        <div style={{ display: 'inline-block', padding: '12px 0', animation: 'am-marquee 26s linear infinite' }}>
          {Array(2).fill(0).map((_, k) => (
            <span key={k}>
              {['Raspagens', 'De La Riva Invertida', 'De La Riva Profunda', 'One Leg & X-Guard', 'Arm Lock', 'Triângulo', 'Omoplata', 'Mentalidade de Faixa'].map((w, i) => (
                <span key={i} style={{ fontFamily: 'var(--font-label)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.2em', fontSize: 13, color: 'var(--text-on-ink-muted)', padding: '0 26px' }}>
                  {w} <span style={{ color: 'var(--gold-500)' }}>✦</span>
                </span>
              ))}
            </span>
          ))}
        </div>
      </div>
      <style>{`@keyframes am-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @media (max-width: 860px){ .hero-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

Object.assign(window, { TopBar, Hero });


/* ===== interesse.jsx ===== */
/* INTERESSE — dor, por que a De La Riva, pilares, atletas */
const { Eyebrow: IEb } = window.AlexMunisBJJDesignSystem_b3b200;

/* --- Problem agitation band (ink) --- */
function Problema() {
  const dores = [
    ['Você puxa pra guarda e te passam', 'Sem controle real, a passagem é só questão de tempo.'],
    ['Suas raspagens não funcionam sob pressão', 'No detalhe errado, o adversário recupera a base e some.'],
    ['Você conhece a De La Riva, mas não confia nela', 'Na hora do rola, a posição trava e você não sabe o porquê.'],
  ];
  return (
    <section className="am-grunge--clean" style={{ borderBottom: '1px solid var(--ink-600)' }}>
      <div className="reveal" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(3rem,6vw,5.5rem) var(--gutter)' }}>
        <Kicker tone="gold">Reconhece isso?</Kicker>
        <h2 style={{ margin: '20px 0 0', maxWidth: 820 }}>
          <Display size="clamp(1.9rem,3.6vw,3.1rem)" color="var(--bone-50)">Sua guarda trava</Display>
          <Display size="clamp(1.9rem,3.6vw,3.1rem)" color="var(--bone-50)" style={{ opacity: 0.4 }}>quando o jogo aperta.</Display>
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 1, marginTop: 44, background: 'var(--ink-600)', border: '1px solid var(--ink-600)' }}>
          {dores.map(([h, p], i) => (
            <div key={i} style={{ background: 'var(--ink-900)', padding: 'var(--space-6)' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 40, color: 'var(--ink-600)', lineHeight: 1 }}>0{i + 1}</span>
              <h3 style={{ margin: '14px 0 8px', fontFamily: 'var(--font-label)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em', fontSize: 17, color: 'var(--bone-50)', lineHeight: 1.2 }}>{h}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--text-on-ink-muted)' }}>{p}</p>
            </div>
          ))}
        </div>
        <p style={{ margin: '40px 0 0', maxWidth: 720, fontSize: 'clamp(1.05rem,1.5vw,1.3rem)', lineHeight: 1.6, color: 'var(--text-on-ink)' }}>
          Não falta esforço. Falta o <span style={{ color: 'var(--gold-400)', fontWeight: 600 }}>detalhe</span> — o ajuste de joelho,
          quadril e pegada que transforma uma guarda comum numa guarda imbatível. É exatamente isso que este curso entrega.
        </p>
      </div>
    </section>
  );
}

/* --- Why De La Riva (paper) --- */
function PorQue() {
  return (
    <section className="am-paper">
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(3.5rem,7vw,6rem) var(--gutter)' }}>
        <div className="reveal pq-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 0.85fr', gap: 'clamp(2rem,5vw,4.5rem)', alignItems: 'center' }}>
          <div>
            <Kicker tone="ink">Por que a De La Riva</Kicker>
            <h2 style={{ margin: '20px 0 0' }}>
              <Display size="clamp(2rem,4.2vw,3.4rem)" color="var(--ink-900)">Controle agora.</Display>
              <Display size="clamp(2rem,4.2vw,3.4rem)" color="var(--ink-900)">Ataque em seguida.</Display>
            </h2>
            <p style={{ margin: '24px 0 0', fontSize: 'clamp(1rem,1.3vw,1.18rem)', lineHeight: 1.65, color: 'var(--text-body)' }}>
              A Guarda De La Riva se destaca pela capacidade de <strong>controlar e transitar para ataques poderosos</strong>.
              Sua versatilidade abre diferentes caminhos para raspar, finalizar e neutralizar o oponente — uma ferramenta
              indispensável no seu arsenal, seja você iniciante ou avançado.
            </p>
            <p style={{ margin: '18px 0 0', fontSize: 15, lineHeight: 1.6, color: 'var(--text-muted)' }}>
              É a guarda escolhida por nomes que ditam o jiu-jitsu moderno:
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16 }}>
              {['Alex Munis', 'Jonatas Gracie', 'Mica Galvão', 'Erich Munis', 'Meyram', 'Gustavo "Braguinha"'].map((n) => (
                <span key={n} style={{
                  fontFamily: 'var(--font-label)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em',
                  fontSize: 12, color: 'var(--ink-900)', border: '1px solid var(--bone-400)', padding: '7px 12px', borderRadius: 'var(--radius-xs)',
                }}>{n}</span>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative', justifySelf: 'center', width: '100%' }}>
            <div className="porque-frame" style={{ position: 'relative', width: 'min(380px,100%)', aspectRatio: '3 / 4', marginLeft: 'auto', boxShadow: 'var(--offset-frame-ink)', border: '1px solid var(--bone-400)', overflow: 'hidden', background: 'var(--ink-850)' }}>
              <img src={`${ASSET}/img/portrait-stance.png`} alt="Alex Munis em posição de guarda" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} />
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 820px){ .pq-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

/* --- 5 pillars (ink) --- */
function Pilares({ onCta }) {
  const pilares = [
    ['activity', 'Mobilidade', 'Flexibilidade de joelho e quadril, levantamento e exercícios com parceiro — a base de uma guarda que funciona.'],
    ['sliders-horizontal', 'Ajustes finos', 'Joelho, quadril e pegadas no lugar certo. E o que fazer quando a pegada falha.'],
    ['repeat', 'Raspagens & finalizações', '7 raspagens para todos os ângulos + Arm Lock, Triângulo, Omoplata e Botinha direto da guarda.'],
    ['git-fork', 'Entradas para outras guardas', 'Conecte a De La Riva com a One Leg, X-Guard, Aranha, Laço e fechada com fluidez.'],
    ['flame', 'Técnicas avançadas', 'De La Riva invertida e profunda, berimbolo, transições para as costas e variações de alto nível.'],
    ['brain', 'Mentalidade de faixa', 'Da branca à preta: como atravessar cada estágio com disciplina, fé e constância.'],
  ];
  return (
    <section className="am-grunge" style={{ borderTop: '2px solid var(--gold-500)' }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'clamp(3.5rem,7vw,6rem) var(--gutter)' }}>
        <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 20 }}>
          <div>
            <Kicker tone="gold">O que você vai dominar</Kicker>
            <h2 style={{ margin: '18px 0 0' }}>
              <Display size="clamp(2rem,4.4vw,3.6rem)" color="var(--bone-50)">Seis frentes,</Display>
              <Display size="clamp(2rem,4.4vw,3.6rem)" outline>uma guarda completa</Display>
            </h2>
          </div>
        </div>
        <div className="pilares-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 48 }}>
          {pilares.map(([ic, h, p], i) => (
            <div key={i} className="reveal" style={{
              background: 'var(--ink-800)', border: '1px solid var(--ink-600)', borderRadius: 'var(--radius-lg)',
              padding: 'var(--space-6)', transitionDelay: `${(i % 3) * 70}ms`,
            }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 48, height: 48, border: '1.5px solid var(--gold-500)', color: 'var(--gold-400)', borderRadius: 'var(--radius-sm)' }}>{Icon(ic, 22)}</span>
              <h3 style={{ margin: '20px 0 10px', fontFamily: 'var(--font-label)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', fontSize: 19, color: 'var(--bone-50)' }}>{h}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--text-on-ink-muted)' }}>{p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Interesse({ onCta, onModulos }) {
  return (<div><Problema /><PorQue /><Pilares onCta={onCta} /></div>);
}

Object.assign(window, { Interesse });


/* ===== modulos.jsx ===== */
/* DESEJO (núcleo) — currículo interativo dos 10 módulos */
const { Badge: MBd, Button: MB } = window.AlexMunisBJJDesignSystem_b3b200;

const MODULOS = [
  { n: '01', tag: 'Grátis', title: 'Introdução', sub: 'Comece por aqui',
    items: ['Boas-vindas e visão geral da jornada', 'Por que a De La Riva é tão eficaz', 'Como aproveitar o curso ao máximo, do iniciante ao avançado'] },
  { n: '02', title: 'Exercícios de Mobilidade', sub: 'A base de tudo',
    items: ['Exercícios solo para joelho e quadril', 'Levantamento e transição de posição', 'Trabalho com parceiro: desequilíbrio pela gola e manga'] },
  { n: '03', title: 'Ajustando a De La Riva', sub: 'O detalhe que decide',
    items: ['Ajuste do joelho para controle e flexibilidade', 'Ajuste do quadril para pressão e oportunidade', 'Ajuste das pegadas — e o que fazer quando a pegada falha'] },
  { n: '04', title: 'Iniciando a De La Riva', sub: 'Como entrar na posição',
    items: ['Conectar a guarda em pé, com controle total', 'Conectar sem a pegada ideal', 'Entrar a partir da Aranha, Laço e Fechada'] },
  { n: '05', title: 'Raspagem De La Riva', sub: '7 raspagens para todos os ângulos',
    items: ['Chute no joelho com pegada na manga e na gola (frente)', 'Chute no quadril com manga e gola (trás)', 'Contra-golpe e ida para as costas — Erich Munis', 'Sentando na perna matando a manga — Fábio Gurgel'] },
  { n: '06', title: 'Entradas para a "One Leg" e "X"', sub: 'Conecte com outras guardas',
    items: ['Entradas em baixo com manga e gola (dos dois lados)', 'Entrada sem desequilibrar — Tainan Dalpra', 'Jogando o oponente para cima — Erich Munis'] },
  { n: '07', title: 'De La Riva Invertida', sub: 'Controle e variações ofensivas',
    items: ['Como conectar e quando usar', 'O que NÃO fazer para não perder o controle', 'Raspagens com aranha · variação de Márcio André', 'Entrada para o berimbolo'] },
  { n: '08', title: 'De La Riva Profunda', sub: 'Controle ainda mais intenso',
    items: ['Como entrar e ajustar a posição', 'A importância das pegadas na raspagem', 'Raspagens para frente e para trás', 'Variação quando o oponente ajoelha'] },
  { n: '09', title: 'Finalizações De La Riva', sub: 'Transforme a guarda em ameaça',
    items: ['Arm Lock — referência de Rafael Mendes', 'Triângulo — referência de Matheus Gabriel', 'Omoplata com pegada na gola e manga', 'Botinha — referência de Caio Terra', 'Raspagem tripé · batida na perna (Erich Munis)'] },
  { n: '10', tag: 'Bônus', title: 'Mentalidade de Faixa', sub: 'Da branca à preta',
    items: ['Aceitar e valorizar o processo', 'A paciência da faixa branca', 'Perseverança nas dificuldades', 'A evolução contínua: faixa preta é um novo começo'] },
];

function ModuloRow({ m, open, onToggle, i }) {
  const free = m.tag === 'Grátis';
  return (
    <div className="reveal" style={{
      borderBottom: '1px solid var(--bone-300)',
      background: open ? 'var(--bone-50)' : 'transparent',
      transition: 'background var(--dur-base) var(--ease-out)',
    }}>
      <button onClick={onToggle} style={{
        width: '100%', display: 'flex', alignItems: 'center', gap: 'clamp(14px,2.5vw,30px)',
        padding: 'clamp(18px,2.4vw,26px) clamp(8px,2vw,20px)', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left',
      }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(34px,5vw,56px)', lineHeight: 1, color: open ? 'var(--gold-500)' : 'var(--bone-400)', minWidth: 'clamp(48px,7vw,86px)', transition: 'color var(--dur-base)' }}>{m.n}</span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            <h3 style={{ fontFamily: 'var(--font-label)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.03em', fontSize: 'clamp(17px,2vw,24px)', color: 'var(--ink-900)', lineHeight: 1.1 }}>{m.title}</h3>
            {m.tag && <MBd variant={free ? 'ink' : 'gold'} size="sm">{m.tag}</MBd>}
          </div>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)' }}>{m.sub} · {m.items.length} aulas</span>
        </div>
        <span style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, border: '1.5px solid', borderColor: open ? 'var(--gold-500)' : 'var(--bone-400)', borderRadius: 'var(--radius-sm)', color: open ? 'var(--gold-600)' : 'var(--ink-900)', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-base) var(--ease-out), border-color var(--dur-base)' }}>
          {Icon('chevron-down', 20)}
        </span>
      </button>
      <div style={{ maxHeight: open ? 480 : 0, overflow: 'hidden', transition: 'max-height var(--dur-slow) var(--ease-out)' }}>
        <ul style={{ listStyle: 'none', margin: 0, padding: '0 clamp(8px,2vw,20px) 26px clamp(62px,9vw,116px)', display: 'grid', gap: 12 }}>
          {m.items.map((it, k) => (
            <li key={k} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 15.5, lineHeight: 1.5, color: 'var(--text-body)' }}>
              <span style={{ color: 'var(--gold-600)', flexShrink: 0, marginTop: 2 }}>{Icon('check', 17)}</span>
              {it}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function Modulos({ onCta }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="modulos" className="am-paper" style={{ borderTop: '2px solid var(--gold-500)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(3.5rem,7vw,6rem) var(--gutter)' }}>
        <div className="reveal" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 8 }}>
          <div>
            <Kicker tone="ink">A trilha completa</Kicker>
            <h2 style={{ margin: '18px 0 0' }}>
              <Display size="clamp(2rem,4.6vw,3.8rem)" color="var(--ink-900)">10 módulos,</Display>
              <Display size="clamp(2rem,4.6vw,3.8rem)" color="var(--ink-900)" style={{ WebkitTextStroke: '1.5px var(--ink-900)', color: 'transparent' }}>do zero ao avançado</Display>
            </h2>
          </div>
          <p style={{ maxWidth: 320, fontSize: 15, lineHeight: 1.6, color: 'var(--text-muted)' }}>
            Conteúdo progressivo: cada módulo constrói a base do próximo. Clique para ver o que tem dentro.
          </p>
        </div>
        <div style={{ marginTop: 40, borderTop: '1px solid var(--bone-300)' }}>
          {MODULOS.map((m, i) => (
            <ModuloRow key={i} m={m} i={i} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
        <div className="reveal" style={{ display: 'flex', justifyContent: 'center', marginTop: 48 }}>
          <MB variant="primary" size="lg" onClick={() => goCheckout('modulos_fim')} iconRight={<span style={{ fontWeight: 700, fontSize: 18 }}>→</span>}>Quero acesso a tudo isso</MB>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Modulos });


/* ===== desejo.jsx ===== */
/* DESEJO — autoridade do mentor, fé, para quem é, o que está incluso */
const { Button: DB, Badge: DBd } = window.AlexMunisBJJDesignSystem_b3b200;

/* --- Mentor / authority (belt-tying hero) --- */
function Mentor() {
  return (
    <section className="am-grunge" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="reveal mentor-grid" style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', alignItems: 'stretch', minHeight: 520 }}>
        <div className="mentor-photo" style={{ position: 'relative', minHeight: 360, overflow: 'hidden', borderRight: '2px solid var(--gold-500)' }}>
          <img src={`${ASSET}/img/hero-belt-wide.png`} alt="Alex Munis amarrando a faixa preta" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '62% center' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 55%)' }} />
          <span style={{ position: 'absolute', left: 18, top: 22 }}><VCaption>Faixa Preta · Campeão Brasileiro 2026</VCaption></span>
        </div>
        <div style={{ padding: 'clamp(2.5rem,5vw,5rem) var(--gutter)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <Kicker tone="gold">Quem te ensina</Kicker>
          <h2 style={{ margin: '20px 0 0' }}>
            <Display size="clamp(2.4rem,5vw,4.2rem)" color="var(--bone-50)">Alex Munis</Display>
          </h2>
          <p style={{ margin: '22px 0 0', maxWidth: 560, fontSize: 'clamp(1rem,1.35vw,1.18rem)', lineHeight: 1.65, color: 'var(--text-on-ink)' }}>
            Faixa preta e <strong style={{ color: 'var(--bone-50)' }}>Campeão Brasileiro 2026</strong> na categoria meio-pesado adulto.
            Um competidor que vive o tatame e ensina como pensa: por conceitos, não por decoreba. Aqui você aprende a
            <em> entender</em> a De La Riva — e a aplicá-la em qualquer situação de luta.
          </p>
          <div style={{ display: 'flex', gap: 'clamp(1.5rem,4vw,3rem)', marginTop: 40, flexWrap: 'wrap' }}>
            {[['Faixa Preta', 'Graduação'], ['Campeão BR', '2026 · Adulto'], ['Meio-pesado', 'Categoria']].map(([v, l], i) => (
              <div key={i}>
                <span style={{ display: 'block', fontFamily: 'var(--font-label)', fontWeight: 700, fontSize: 'clamp(1.4rem,2.2vw,1.9rem)', color: i === 1 ? 'var(--gold-500)' : 'var(--bone-50)', lineHeight: 1 }}>{v}</span>
                <span style={{ fontFamily: 'var(--font-label)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.16em', fontSize: 11, color: 'var(--text-on-ink-muted)' }}>{l}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 820px){ .mentor-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

/* --- Faith / creed band (intensity via tweak) --- */
function Creed({ faith }) {
  if (faith === 'minimo') return null;
  const central = faith === 'central';
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--ink-900)' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${ASSET}/img/portrait-prayer-wide.png)`, backgroundSize: 'cover', backgroundPosition: 'center 28%', opacity: central ? 0.42 : 0.18, filter: 'grayscale(0.2)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, var(--ink-900) 4%, rgba(10,10,10,0.55) 60%, var(--ink-900) 100%)' }} />
      <div className="reveal" style={{ position: 'relative', maxWidth: 860, margin: '0 auto', padding: `clamp(${central ? '4rem' : '3rem'},8vw,${central ? '7rem' : '5rem'}) var(--gutter)`, textAlign: 'center' }}>
        <Kicker tone="gold" center>✝ Mentalidade · Fé</Kicker>
        <p style={{ margin: '28px 0 0', fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: `clamp(1.6rem,${central ? '3.6vw' : '3vw'},${central ? '3.2rem' : '2.6rem'})`, lineHeight: 1.05, color: 'var(--bone-50)', letterSpacing: '-0.01em' }}>
          “{CREED}.”
        </p>
        <p style={{ margin: '22px 0 0', fontFamily: 'var(--font-script)', fontSize: 'clamp(28px,4vw,40px)', color: 'var(--gold-400)', lineHeight: 1 }}>Alex Munis</p>
        {central && <p style={{ margin: '18px auto 0', maxWidth: 540, fontSize: 15.5, lineHeight: 1.6, color: 'var(--text-on-ink-muted)' }}>O jiu-jitsu vai além das técnicas. Disciplina, humildade e fé sustentam cada faixa — da branca à preta.</p>}
      </div>
    </section>
  );
}

/* --- For whom (paper) --- */
function ParaQuem() {
  const sim = [
    ['Iniciantes', 'Querem uma primeira guarda forte e confiável para parar de ser passado.'],
    ['Faixas coloridas', 'Querem refinar a De La Riva e transformá-la na guarda principal.'],
    ['Competidores', 'Buscam raspagens, entradas e finalizações de alto nível para o pódio.'],
    ['Mente conceitual', 'Prefere entender os porquês a decorar movimentos soltos.'],
  ];
  return (
    <section className="am-paper">
      <div className="reveal" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(3.5rem,7vw,5.5rem) var(--gutter)' }}>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}><Kicker tone="ink">Para quem é</Kicker></div>
          <h2 style={{ margin: '18px 0 0' }}>
            <Display size="clamp(1.9rem,4vw,3.2rem)" color="var(--ink-900)">Do primeiro rola</Display>
            <Display size="clamp(1.9rem,4vw,3.2rem)" color="var(--ink-900)" style={{ color: 'transparent', WebkitTextStroke: '1.5px var(--ink-900)' }}>ao pódio</Display>
          </h2>
        </div>
        <div className="paraquem-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18, marginTop: 44 }}>
          {sim.map(([title, desc], i) => (
            <div key={i} className="pq-card">
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 14, marginBottom: 14 }}>
                <span style={{ flexShrink: 0, color: 'var(--ink-900)', background: 'var(--gold-500)', width: 34, height: 34, borderRadius: 'var(--radius-xs)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>{Icon('check', 19)}</span>
                <span className="pq-num">{String(i + 1).padStart(2, '0')}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-label)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em', fontSize: 17, color: 'var(--ink-900)', margin: '0 0 6px' }}>{title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--text-body)', margin: 0 }}>{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* --- What's included (ink) --- */
function Incluso() {
  const itens = [
    ['layers', '10 módulos completos', 'Da mobilidade às finalizações avançadas, em sequência progressiva.'],
    ['repeat', '7 raspagens detalhadas', 'Para todos os ângulos, com os ajustes que fazem cada uma funcionar.'],
    ['target', 'Finalizações de alto nível', 'Arm Lock, Triângulo, Omoplata e Botinha direto da guarda.'],
    ['git-fork', 'Conexões entre guardas', 'One Leg, X-Guard, invertida, profunda e entrada para o berimbolo.'],
    ['infinity', 'Acesso vitalício', 'Estude no seu ritmo, reveja quantas vezes quiser, para sempre.'],
    ['brain', 'Aula bônus de mentalidade', 'Da faixa branca à preta — o lado mental e espiritual do jogo.'],
  ];
  return (
    <section className="am-grunge--clean" style={{ borderTop: '2px solid var(--gold-500)' }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'clamp(3.5rem,7vw,5.5rem) var(--gutter)' }}>
        <div className="reveal" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}><Kicker tone="gold">O que está incluso</Kicker></div>
          <h2 style={{ margin: '18px 0 0' }}><Display size="clamp(1.9rem,4.2vw,3.4rem)" color="var(--bone-50)">Tudo que você precisa</Display></h2>
        </div>
        <div className="incluso-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, marginTop: 48, background: 'var(--ink-600)', border: '1px solid var(--ink-600)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
          {itens.map(([ic, h, p], i) => (
            <div key={i} className="reveal" style={{ background: 'var(--ink-900)', padding: 'var(--space-6)', display: 'flex', gap: 16, transitionDelay: `${(i % 3) * 60}ms` }}>
              <span style={{ flexShrink: 0, color: 'var(--gold-400)' }}>{Icon(ic, 26)}</span>
              <div>
                <h3 style={{ fontFamily: 'var(--font-label)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em', fontSize: 16, color: 'var(--bone-50)', marginBottom: 8 }}>{h}</h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--text-on-ink-muted)' }}>{p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Desejo({ t }) {
  return (<div><Mentor /><Creed faith={t.faith} /><ParaQuem /><Incluso /></div>);
}

Object.assign(window, { Desejo });


/* ===== acao.jsx ===== */
/* AÇÃO — oferta, garantia, FAQ, CTA final, rodapé */
const { Button: AB, Badge: ABd, SocialLink: ASL } = window.AlexMunisBJJDesignSystem_b3b200;

/* --- Offer / pricing --- */
function Oferta({ onCta }) {
  const inclui = ['10 módulos completos (40+ aulas)', '7 raspagens para todos os ângulos', 'Finalizações: Arm Lock, Triângulo, Omoplata, Botinha', 'Entradas para One Leg, X-Guard, invertida e profunda', 'Aula bônus de mentalidade — da branca à preta', 'Acesso vitalício e atualizações'];
  return (
    <section id="oferta" className="am-grunge--raw" style={{ borderTop: '2px solid var(--gold-500)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(6,6,6,0.82) 0%, rgba(6,6,6,0.66) 50%, rgba(6,6,6,0.5) 100%)', pointerEvents: 'none' }}></div>
      <span className="am-kanji-watermark" style={{ position: 'absolute', left: '-2%', bottom: '-10%', fontSize: 'clamp(200px,30vw,420px)' }}>柔術</span>
      <div className="reveal oferta-grid" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(3.5rem,7vw,6rem) var(--gutter)', display: 'grid', gridTemplateColumns: '1fr 0.9fr', gap: 'clamp(2rem,4vw,3.5rem)', alignItems: 'center', position: 'relative' }}>
        <div>
          <Kicker tone="gold">A oferta</Kicker>
          <h2 style={{ margin: '20px 0 0' }}>
            <Display size="clamp(2rem,4.4vw,3.6rem)" color="var(--bone-50)">Sua De La Riva</Display>
            <Display size="clamp(2rem,4.4vw,3.6rem)" outline>nunca mais a mesma</Display>
          </h2>
          <p style={{ margin: '22px 0 0', maxWidth: 480, fontSize: 'clamp(1rem,1.3vw,1.15rem)', lineHeight: 1.6, color: 'var(--text-on-ink)' }}>
            Acesso imediato a todo o conteúdo. Estude no seu ritmo, do fundamento ao jogo de competição — para sempre.
          </p>
          <ul style={{ listStyle: 'none', margin: '28px 0 0', padding: 0, display: 'grid', gap: 12 }}>
            {inclui.map((it, i) => (
              <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 15.5, lineHeight: 1.5, color: 'var(--bone-50)' }}>
                <span style={{ color: 'var(--gold-500)', flexShrink: 0, marginTop: 1 }}>{Icon('check', 18)}</span>{it}
              </li>
            ))}
          </ul>
        </div>

        {/* price card */}
        <div style={{ position: 'relative', background: 'var(--bone-100)', backgroundImage: 'var(--texture-paper)', backgroundSize: '280px', backgroundBlendMode: 'multiply', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--offset-frame-gold)', border: '1px solid var(--bone-400)', padding: 'clamp(1.75rem,3vw,2.5rem)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontFamily: 'var(--font-label)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.14em', fontSize: 13, color: 'var(--ink-900)' }}>Curso completo</span>
            <ABd variant="gold" size="sm">Oferta de lançamento</ABd>
          </div>
          <div style={{ height: 1, background: 'var(--bone-300)', margin: '20px 0' }}></div>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--text-muted)', textDecoration: 'line-through' }}>De R$ 297</span>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, marginTop: 6 }}>
            <span style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: 22, color: 'var(--ink-900)', paddingBottom: 10 }}>6x de</span>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(56px,9vw,82px)', lineHeight: 0.85, color: 'var(--ink-900)' }}>R$27</span>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 32, color: 'var(--ink-900)', paddingBottom: 8 }}>,58</span>
          </div>
          <p style={{ margin: '8px 0 0', fontSize: 14, color: 'var(--text-muted)' }}>ou <strong style={{ color: 'var(--ink-900)' }}>R$ 147</strong> à vista</p>
          <AB variant="primary" size="lg" full onClick={() => goCheckout('oferta_card')} style={{ marginTop: 24 }} iconRight={<span style={{ fontWeight: 700, fontSize: 18 }}>→</span>}>Quero garantir minha vaga</AB>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, marginTop: 16, color: 'var(--text-muted)', fontSize: 13 }}>
            {Icon('lock', 15)} Pagamento seguro · Acesso imediato
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 18, padding: '14px 16px', background: 'var(--bone-50)', border: '1px solid var(--bone-300)', borderRadius: 'var(--radius-sm)' }}>
            <span style={{ color: 'var(--gold-600)', flexShrink: 0 }}>{Icon('shield-check', 26)}</span>
            <span style={{ fontSize: 13.5, lineHeight: 1.45, color: 'var(--text-body)' }}><strong>7 dias de garantia.</strong> Não gostou? Devolvemos 100% do seu dinheiro.</span>
          </div>
          <p style={{ margin: '14px 0 0', fontSize: 11.5, color: 'var(--text-muted)', textAlign: 'center', fontStyle: 'italic' }}>* parcelamento com juros no cartão</p>
        </div>
      </div>
      <style>{`@media (max-width: 820px){ .oferta-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

/* --- FAQ --- */
const FAQS = [
  ['Preciso já saber jogar de guarda?', 'Não. O curso começa pela mobilidade e pelos fundamentos da posição, e avança em sequência progressiva. Serve do iniciante ao avançado.'],
  ['Funciona para o meu nível de faixa?', 'Sim. Faixas iniciais constroem uma base sólida; faixas mais graduadas refinam ajustes, entradas e finalizações de alto nível.'],
  ['Por quanto tempo tenho acesso?', 'Acesso vitalício. Você estuda no seu ritmo, revê quantas vezes quiser e recebe as atualizações do curso.'],
  ['Serve para gi e no-gi?', 'O curso é focado no jogo com kimono (gi), explorando pegadas de gola e manga. Muitos conceitos de controle e desequilíbrio se transferem para o no-gi.'],
  ['E se eu não gostar?', 'Você tem 7 dias de garantia incondicional. Se não fizer sentido para você, devolvemos 100% do valor.'],
];
function FaqRow({ q, a, open, onToggle }) {
  return (
    <div style={{ borderBottom: '1px solid var(--bone-300)' }}>
      <button onClick={onToggle} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '22px 4px', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
        <span style={{ fontFamily: 'var(--font-label)', fontWeight: 600, fontSize: 'clamp(16px,1.8vw,19px)', textTransform: 'uppercase', letterSpacing: '0.02em', color: 'var(--ink-900)' }}>{q}</span>
        <span style={{ flexShrink: 0, color: open ? 'var(--gold-600)' : 'var(--ink-900)', transform: open ? 'rotate(45deg)' : 'none', transition: 'transform var(--dur-base) var(--ease-out)' }}>{Icon('plus', 22)}</span>
      </button>
      <div style={{ maxHeight: open ? 200 : 0, overflow: 'hidden', transition: 'max-height var(--dur-base) var(--ease-out)' }}>
        <p style={{ padding: '0 4px 24px', fontSize: 15.5, lineHeight: 1.6, color: 'var(--text-body)', maxWidth: 720 }}>{a}</p>
      </div>
    </div>
  );
}
function Faq() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="am-paper">
      <div className="reveal" style={{ maxWidth: 880, margin: '0 auto', padding: 'clamp(3.5rem,7vw,5.5rem) var(--gutter)' }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}><Kicker tone="ink">Dúvidas frequentes</Kicker></div>
          <h2 style={{ margin: '18px 0 40px' }}><Display size="clamp(1.9rem,4vw,3.2rem)" color="var(--ink-900)">Antes de você entrar</Display></h2>
        </div>
        <div style={{ borderTop: '1px solid var(--bone-300)' }}>
          {FAQS.map(([q, a], i) => <FaqRow key={i} q={q} a={a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />)}
        </div>
      </div>
    </section>
  );
}

/* --- Final CTA --- */
function CtaFinal({ onCta }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--ink-900)', borderTop: '2px solid var(--gold-500)' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${ASSET}/img/hero-belt-wide-2.png)`, backgroundSize: 'cover', backgroundPosition: 'center 30%', opacity: 0.22 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 80% 90% at 50% 50%, rgba(10,10,10,0.7) 30%, var(--ink-900) 100%)' }} />
      <div className="reveal" style={{ position: 'relative', maxWidth: 820, margin: '0 auto', padding: 'clamp(4rem,8vw,7rem) var(--gutter)', textAlign: 'center' }}>
        <div style={{ display: 'flex', justifyContent: 'center' }}><Kicker tone="gold" center>Sua vez no tatame</Kicker></div>
        <h2 style={{ margin: '24px 0 0' }}>
          <Display size="clamp(2.2rem,5vw,4.4rem)" color="var(--bone-50)">Leve sua guarda</Display>
          <Display size="clamp(2.6rem,6.5vw,5.4rem)" outline>pro próximo nível</Display>
        </h2>
        <p style={{ margin: '24px auto 0', maxWidth: 520, fontSize: 'clamp(1rem,1.4vw,1.2rem)', lineHeight: 1.6, color: 'var(--text-on-ink)' }}>
          A De La Riva pode se tornar sua posição favorita. O caminho é mais importante que o destino — e ele começa agora.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 36 }}>
          <AB variant="primary" size="lg" onClick={() => goCheckout('cta_final')} iconRight={<span style={{ fontWeight: 700, fontSize: 18 }}>→</span>}>Começar agora</AB>
        </div>
        <p style={{ margin: '20px 0 0', fontFamily: 'var(--font-script)', fontSize: 'clamp(26px,4vw,38px)', color: 'var(--gold-400)' }}>Alex Munis</p>
      </div>
    </section>
  );
}

/* --- Footer --- */
function Rodape() {
  return (
    <footer className="am-grunge--clean" style={{ borderTop: '1px solid var(--ink-600)' }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: 'var(--space-8) var(--gutter) var(--space-6)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 40 }}>
          <div style={{ maxWidth: 360 }}>
            <img src={`${ASSET}/logo/am-mark-white.png`} alt="Alex Munis" style={{ height: 40, marginBottom: 16 }} />
            <p style={{ fontFamily: 'var(--font-script)', fontSize: 30, color: 'var(--gold-400)', margin: '0 0 10px' }}>Alex Munis</p>
            <p style={{ fontFamily: 'var(--font-label)', textTransform: 'uppercase', letterSpacing: '0.14em', fontSize: 11.5, color: 'var(--text-on-ink-muted)', margin: 0, lineHeight: 1.7 }}>✝ {CREED}</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Kicker tone="gold">Canais</Kicker>
            <ASL icon={Icon('youtube')} network="YouTube" handle="@BJJAnalise" href="https://www.youtube.com/@BJJAnalise" target="_blank" rel="noopener" />
            <ASL icon={Icon('instagram')} network="Instagram" handle="@alexmunisbjj" href="https://www.instagram.com/alexmunisbjj/" target="_blank" rel="noopener" />
            <ASL icon={Icon('facebook')} network="Facebook" handle="Alex Munis" href="https://www.facebook.com/alex.munis2/" target="_blank" rel="noopener" />
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 'var(--space-7)', paddingTop: 'var(--space-5)', borderTop: '1px solid var(--ink-600)', flexWrap: 'wrap', gap: 16 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--text-on-ink-muted)' }}>© 2026 Alex Munis · Do Zero ao Avançado: Guarda De La Riva · bjjaa.com</span>
          <div className="am-barcode am-barcode--light" style={{ width: 150, height: 34 }}></div>
        </div>
      </div>
    </footer>
  );
}

function Acao({ onCta }) {
  return (<div><Oferta onCta={onCta} /><Faq /><CtaFinal onCta={onCta} /><Rodape /></div>);
}

Object.assign(window, { Acao });


/* ===== app.jsx ===== */
/* App — composição, tweaks, barra CTA fixa */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio } = window;
const { Button: AppB } = window.AlexMunisBJJDesignSystem_b3b200;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "foto",
  "headline": "curso",
  "faith": "sutil"
}/*EDITMODE-END*/;

function scrollToId(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const y = el.getBoundingClientRect().top + window.scrollY - 56;
  window.scrollTo({ top: y, behavior: 'smooth' });
}

/* sticky bottom CTA — slides in after hero scrolls past */
function StickyCta({ onCta }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const f = () => setShow(window.scrollY > 720 && (document.body.scrollHeight - window.scrollY - window.innerHeight) > 700);
    window.addEventListener('scroll', f); f();
    return () => window.removeEventListener('scroll', f);
  }, []);
  return (
    <div style={{
      position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 95,
      transform: show ? 'translateY(0)' : 'translateY(110%)',
      transition: 'transform var(--dur-base) var(--ease-out)',
      background: 'rgba(10,10,10,0.94)', backdropFilter: 'blur(10px)', borderTop: '2px solid var(--gold-500)',
    }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '12px var(--gutter)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
        <div style={{ minWidth: 0 }}>
          <span style={{ display: 'block', fontFamily: 'var(--font-label)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', fontSize: 14, color: 'var(--bone-50)', lineHeight: 1.1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Guarda De La Riva — do zero ao avançado</span>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-on-ink-muted)' }}>6x de R$27,58 · acesso vitalício</span>
        </div>
        <AppB variant="primary" size="md" onClick={() => goCheckout('barra_fixa')} style={{ flexShrink: 0 }}>Garantir vaga</AppB>
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const onCta = () => scrollToId('oferta');
  const onModulos = () => scrollToId('modulos');
  useChrome([t.faith, t.heroStyle, t.headline]);

  return (
    <div>
      <TopBar onCta={onCta} />
      <Hero t={t} onCta={onCta} onModulos={onModulos} />
      <Interesse onCta={onCta} onModulos={onModulos} />
      <Modulos onCta={onCta} />
      <Desejo t={t} />
      <Acao onCta={onCta} />
      <StickyCta onCta={onCta} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakRadio label="Estilo do hero" value={t.heroStyle} options={['foto', 'tipografico']} onChange={(v) => setTweak('heroStyle', v)} />
        <TweakRadio label="Headline" value={t.headline} options={['curso', 'intocavel', 'campeoes']} onChange={(v) => setTweak('headline', v)} />
        <TweakSection label="Identidade de fé" />
        <TweakRadio label="Intensidade" value={t.faith} options={['central', 'sutil', 'minimo']} onChange={(v) => setTweak('faith', v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);