/* Duo, Pain, PhoneShowcase, Receive (vertical numbered), Stats, Manifesto */

function Duo() {
  return (
    <section className="section duo-section" id="duo">
      <div className="wrap">
        <div className="duo-grid">
          <div className="duo-photo duo-photo-mockup">
            <div className="duo-photo-glow" aria-hidden="true" />
            <InteractiveMockup src="assets/phones.png" />
            <div className="duo-photo-stamps">
              <div className="duo-stamp">
                <div className="duo-stamp-num">+5K</div>
                <div className="duo-stamp-label">alunos</div>
              </div>
              <div className="duo-stamp">
                <div className="duo-stamp-num">10<span style={{color: 'var(--lime)', fontFamily: 'Instrument Serif, serif', fontStyle: 'italic'}}>+</span></div>
                <div className="duo-stamp-label">anos</div>
              </div>
            </div>
          </div>

          <div className="duo-copy">
            <span className="eyebrow">conheça os criadores</span>
            <h2 className="duo-title">
              André &amp; <em>Layane.</em>
            </h2>
            <p className="duo-tagline">
              A dupla por trás da metodologia que já transformou <strong>+5.000 vidas.</strong>
            </p>

            <div className="duo-bios">
              <div className="duo-bio">
                <div className="duo-bio-name">André Teles</div>
                <div className="duo-bio-role">CEO · ALTeles Nutrição Avançada</div>
                <p>Nutricionista especialista em nutrição esportiva e emagrecimento. Apaixonado por resultados permanentes — sem terrorismo alimentar.</p>
              </div>
              <div className="duo-bio">
                <div className="duo-bio-name">Layane Carine</div>
                <div className="duo-bio-role">Nutricionista · ALTeles</div>
                <p>Especialista em saúde intestinal e emagrecimento feminino. Co-criadora da metodologia PACE — alimentação inteligente e possível.</p>
              </div>
            </div>

            <div className="duo-cta-row">
              <a href="#inscricao" className="btn btn-primary">Quero ser acompanhado por eles →</a>
              <a href="#autores" className="duo-link">Conheça a história completa ↓</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Pain() {
  return (
    <section className="section" id="pain">
      <div className="wrap">
        <div className="section-head">
          <h2>Você se identifica com algumas dessas situações?</h2>
          <p>Se você sente que está sempre recomeçando e que o resultado nunca dura, você está no lugar certo.</p>
        </div>

        <div className="pain-grid">
          <div className="pain-card pain-card--bad">
            <div className="num">01 · feriados</div>
            <h4>Em feriados, festas e épocas como a Copa, parece impossível manter o controle.</h4>
            <p>Você tenta aproveitar, mas sente que sempre exagera — e depois paga o preço na balança.</p>
          </div>

          <div className="pain-card pain-card--bad feature">
            <div className="num">02 · o ciclo</div>
            <h4>O efeito sanfona já virou parte da sua rotina.</h4>
            <p>Você emagrece, recupera tudo e sente que está sempre começando do zero. O ciclo parece não ter fim.</p>
            <div style={{marginTop: 14, display: 'flex', gap: 8, flexWrap: 'wrap'}}>
              <span className="chip">perder · recuperar</span>
              <span className="chip green">repetir</span>
            </div>
          </div>

          <div className="pain-card pain-card--bad">
            <div className="num">03 · confusão</div>
            <h4>Você não sabe mais o que realmente pode comer.</h4>
            <p>Cada pessoa fala uma coisa diferente — e isso só aumenta a insegurança na hora de se alimentar.</p>
          </div>

          <div className="pain-card pain-card--bad">
            <div className="num">04 · terrorismo alimentar</div>
            <h4>Cansado de dietas que parecem castigo?</h4>
            <p>Dietas extremamente restritivas funcionam por um tempo — até você não aguentar mais e desistir de tudo.</p>
          </div>

          <div className="pain-card pain-card--bad">
            <div className="num">05 · culpa</div>
            <h4>Um jantar vira motivo para desistir de tudo.</h4>
            <p>Uma festa, um fim de semana diferente — e a sensação de que tudo foi pra trás de novo.</p>
          </div>
        </div>

        <div style={{
          marginTop: 32,
          padding: '32px 28px',
          borderRadius: 'var(--r-md)',
          background: 'color-mix(in oklab, var(--lime) 10%, var(--surface))',
          border: '1px solid color-mix(in oklab, var(--lime) 25%, var(--line))',
          textAlign: 'center',
        }}>
          <p style={{
            fontFamily: '"Barlow Condensed", sans-serif',
            fontSize: 'clamp(20px, 2.5vw, 28px)',
            fontWeight: 600,
            lineHeight: 1.4,
            color: 'var(--ink-2)',
            margin: 0,
          }}>
            Você quer emagrecer sem viver preso em dietas, sem radicalismo, sem sofrimento e sem precisar abrir mão da vida social para ter resultados de verdade.
          </p>
        </div>
      </div>
    </section>
  );
}

function PhoneShowcase() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="phone-showcase">
          <div className="ps-decor" aria-hidden="true">
            <div className="ps-quote-mark">"</div>
            <div className="ps-stats">
              <div className="ps-stat">
                <div className="ps-stat-num">5.000+</div>
                <div className="ps-stat-label">alunos</div>
              </div>
              <div className="ps-stat-divider"></div>
              <div className="ps-stat">
                <div className="ps-stat-num">4.9<span className="ps-stat-sm">/5</span></div>
                <div className="ps-stat-label">avaliação</div>
              </div>
              <div className="ps-stat-divider"></div>
              <div className="ps-stat">
                <div className="ps-stat-num">94<span className="ps-stat-sm">%</span></div>
                <div className="ps-stat-label">recomendam</div>
              </div>
            </div>
          </div>

          <div className="phone-showcase-text">
            <span className="eyebrow">prova viva</span>
            <h3>Em rotinas reais — com festas, jantares e fins de semana — mais de <em>5.000 pessoas</em> emagreceram com a metodologia.</h3>
            <p style={{marginBottom: 24}}>Sem dieta maluca, sem efeito sanfona e sem abrir mão dos eventos que importam. A diferença está no <strong style={{color: 'var(--ink)'}}>acompanhamento ao vivo</strong> + a estratégia de contenção de danos.</p>
            <a href="#inscricao" className="btn btn-ghost">Quero esse caminho →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Receive() {
  const items = [
    {
      n: '01',
      t: 'Sugestão alimentar para os 7 dias',
      d: 'Cardápio prático e validado, sem restrições absurdas ou terrorismo alimentar. Você come bem e perde peso.',
    },
    {
      n: '02',
      t: 'Grupo de WhatsApp com André Teles e Layane Carine',
      d: 'Suporte direto com os dois durante todo o desafio. Você não estará sozinho em nenhum momento — toda dúvida é respondida com atenção.',
      feature: true,
    },
    {
      n: '03',
      t: 'Desafios diários para acelerar seus resultados',
      d: 'Metas práticas para implementar todos os dias e manter constância ao longo da semana.',
    },
    {
      n: '04',
      t: 'Estratégias de contenção de danos',
      d: 'Para festas, eventos e dias de exagero — aprenda a equilibrar de forma inteligente e continuar com resultado, sem culpa e sem desistir.',
    },
  ];

  return (
    <section className="section glow-top" id="metodologia">
      <div className="wrap">
        <div className="section-head center">
          <span className="eyebrow">o que você recebe</span>
          <h2>O que você <em>vai receber</em><br />na metodologia.</h2>
        </div>

        <div className="num-vertical">
          {items.map((it, i) => (
            <React.Fragment key={i}>
              <div className="num-row">
                <div className="num-circle">{it.n}</div>
                <div className={'num-card2' + (it.feature ? ' feature' : '')}>
                  <h4>{it.t}</h4>
                  <p>{it.d}</p>
                </div>
              </div>
              {i < items.length - 1 && <div className="num-row-connector"></div>}
            </React.Fragment>
          ))}
        </div>

        <div style={{textAlign: 'center', marginTop: 48}}>
          <a href="#inscricao" className="btn btn-primary btn-lg">Quero entrar no grupo →</a>
        </div>
      </div>
    </section>
  );
}

function Manifesto() {
  return (
    <section className="section glow-top">
      <div className="wrap">
        <div className="manifesto">
          <h2 style={{fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 800, fontSize: 'clamp(26px, 3.5vw, 48px)', letterSpacing: '-0.02em', lineHeight: 1.1, textTransform: 'uppercase', color: 'var(--ink)', textAlign: 'center', margin: '0 0 4px'}}>
            E se o problema nunca tivesse sido comer...
          </h2>
          <h2 style={{fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 800, fontSize: 'clamp(26px, 3.5vw, 48px)', letterSpacing: '-0.02em', lineHeight: 1.1, textTransform: 'uppercase', color: '#FFD200', textAlign: 'center', margin: '0 0 28px'}}>
            Mas não saber como equilibrar?
          </h2>

          <p style={{textAlign: 'center', fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, margin: '0 0 40px'}}>
            E se você pudesse emagrecer sem viver preso em restrições, aprendendo a lidar com os excessos de forma inteligente?
          </p>

          <div style={{textAlign: 'center', margin: '0 0 32px'}}>
            <div style={{fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 800, fontSize: 'clamp(34px, 5vw, 62px)', letterSpacing: '-0.03em', lineHeight: 1.05, textTransform: 'uppercase', color: '#FFD200'}}>
              Viva com margem.
            </div>
            <div style={{fontFamily: '"Barlow Condensed", sans-serif', fontWeight: 800, fontSize: 'clamp(34px, 5vw, 62px)', letterSpacing: '-0.03em', lineHeight: 1.05, textTransform: 'uppercase', color: '#FFD200'}}>
              Curta sem radicalismo.
            </div>
          </div>

          <p style={{textAlign: 'center', fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, margin: '0 0 16px'}}>
            Isso é uma estratégia. A mesma metodologia que <strong style={{color: 'var(--ink)'}}>André Teles</strong> e <strong style={{color: 'var(--ink)'}}>Layane Carine</strong> aplicam no consultório para ajudar pessoas a emagrecererem sem terrorismo alimentar e sem viver no efeito sanfona.
          </p>
          <p style={{textAlign: 'center', fontSize: 14, color: 'var(--muted)', lineHeight: 1.6, margin: '0 0 32px'}}>
            Agora em 7 dias, 100% online — de 01 de junho a 08 de junho.
          </p>

          <div style={{textAlign: 'center'}}>
            <a href="#inscricao" className="btn btn-primary btn-lg">Quero garantir minha vaga →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stats() {
  return (
    <section className="section tight">
      <div className="wrap">
        <div className="stats-row">
          <div className="stat">
            <div className="stat-num">+5<em>K</em></div>
            <div className="stat-label">vidas transformadas</div>
          </div>
          <div className="stat accent">
            <div className="stat-num">7</div>
            <div className="stat-label">dias de desafio</div>
          </div>
          <div className="stat">
            <div className="stat-num">4<em>kg*</em></div>
            <div className="stat-label">perda possível em 7 dias</div>
          </div>
          <div className="stat">
            <div className="stat-num">100<em>%</em></div>
            <div className="stat-label">online · qualquer lugar</div>
          </div>
        </div>
        <p className="muted" style={{fontSize: 11, marginTop: 12, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em'}}>* os resultados variam de acordo com a aplicação da metodologia.</p>
      </div>
    </section>
  );
}

/* Keep names that App imports */
function WhatIs() {
  return (
    <section className="section" id="oque">
      <div className="wrap">
        <div className="whatis-grid">
          <div className="whatis-copy">
            <span className="eyebrow">o que é</span>
            <h2 style={{marginTop: 16}}>O que é o <em>Copa no Shape?</em></h2>
            <p style={{marginTop: 16, fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.7}}>
              O Copa no Shape é um <strong style={{color:'var(--ink)'}}>grupo de emagrecimento de 7 dias</strong> com acompanhamento, estratégia, sugestão alimentar guiada e desafios práticos para ajudar você a perder até 4 kg mesmo em semanas difíceis.
            </p>
            <p style={{marginTop: 16, fontSize: 16, color: 'var(--ink-2)', marginBottom: 8, fontWeight: 600}}>Você vai aprender a:</p>
            <ul className="whatis-list">
              <li>Emagrecer sem radicalismo nem sofrimento</li>
              <li>Controlar os excessos sem culpa</li>
              <li>Evitar o efeito sanfona de vez</li>
              <li>Manter constância mesmo em feriados, eventos e rotina corrida</li>
            </ul>
            <p style={{marginTop: 16, fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.7}}>
              Não é uma dieta maluca. É uma metodologia validada que já ajudou <strong style={{color:'var(--lime)'}}>mais de 5.000 pessoas</strong> a emagrecerem de forma inteligente e sustentável.
            </p>

            <div className="whatis-stats">
              <div className="whatis-stat">
                <div className="n">+5K</div>
                <div className="l">vidas transformadas com a metodologia</div>
              </div>
              <div className="whatis-stat">
                <div className="n">7</div>
                <div className="l">dias de desafio intensivo e acompanhado</div>
              </div>
              <div className="whatis-stat">
                <div className="n">4 kg<em>*</em></div>
                <div className="l">de perda possível em uma semana</div>
              </div>
              <div className="whatis-stat">
                <div className="n">100<em>%</em></div>
                <div className="l">online, de qualquer lugar do Brasil</div>
              </div>
            </div>
            <p className="whatis-foot">*Os resultados variam de acordo com a aplicação da metodologia.</p>
          </div>

          <div className="whatis-visual">
            <div className="whatis-img-wrap">
              <InteractiveMockup src="assets/phones.png" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
function Delivers() { return null; }

Object.assign(window, { Duo, Pain, PhoneShowcase, Receive, Manifesto, Stats, WhatIs, Delivers });