/* Mentors, Testimonials, Pricing, FAQ, Final, Footer */

function MentorBlock({ name, role, bio, photo, reverse, accent }) {
  const grid = (
    <div style={{
      position: 'relative',
      background: 'radial-gradient(ellipse at 50% 85%, color-mix(in oklab, var(--lime) 24%, var(--surface)), var(--bg-deep) 65%)',
      borderRadius: 'var(--r-lg)',
      border: '1px solid color-mix(in oklab, var(--lime) 20%, var(--line))',
      overflow: 'hidden',
      aspectRatio: '3/4',
    }}>
      <img
        src={photo}
        alt={name}
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          objectFit: 'contain',
          objectPosition: 'center bottom',
          zIndex: 1,
        }}
      />
      <div style={{position:'absolute',top:16,right:16,zIndex:2,display:'flex',flexDirection:'column',gap:8}}>
        <div style={{background:'color-mix(in oklab, var(--surface) 85%, transparent)',backdropFilter:'blur(10px)',border:'1px solid var(--line)',borderRadius:12,padding:'10px 16px',textAlign:'center'}}>
          <div style={{fontFamily:'Bricolage Grotesque,sans-serif',fontWeight:800,fontSize:24,color:'var(--lime)',letterSpacing:'-0.03em',lineHeight:1}}>+5K</div>
          <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:9,color:'var(--muted)',letterSpacing:'0.1em',textTransform:'uppercase',marginTop:3}}>alunos</div>
        </div>
        <div style={{background:'color-mix(in oklab, var(--surface) 85%, transparent)',backdropFilter:'blur(10px)',border:'1px solid var(--line)',borderRadius:12,padding:'10px 16px',textAlign:'center'}}>
          <div style={{fontFamily:'Bricolage Grotesque,sans-serif',fontWeight:800,fontSize:24,color:'var(--ink)',letterSpacing:'-0.03em',lineHeight:1}}>10<span style={{color:'var(--lime)',fontFamily:'Instrument Serif,serif',fontStyle:'italic',fontWeight:400}}>+</span></div>
          <div style={{fontFamily:'JetBrains Mono,monospace',fontSize:9,color:'var(--muted)',letterSpacing:'0.1em',textTransform:'uppercase',marginTop:3}}>anos</div>
        </div>
      </div>
    </div>
  );

  const text = (
    <div style={{display:'flex',flexDirection:'column',justifyContent:'center'}}>
      <div className="mentor-role">Conheça {accent ? 'sua mentora' : 'seu mentor'}</div>
      <h2 className="mentor-name">{name.split(' ')[0]} <em>{name.split(' ').slice(1).join(' ')}</em></h2>
      <div className="mentor-role" style={{color: 'var(--muted)', marginBottom: 16}}>{role}</div>
      <p className="mentor-bio">{bio}</p>
    </div>
  );

  return (
    <div className={'mentor-grid ' + (reverse ? 'mentor-photo-left' : 'mentor-photo-right')} style={{marginBottom: 80}}>
      {reverse ? <>{grid}{text}</> : <>{text}{grid}</>}
    </div>
  );
}

function Mentors() {
  return (
    <section className="section glow-top" id="autores">
      <div className="wrap">
        <div className="section-head center">
          <span className="eyebrow" style={{color: '#FFD200'}}>criado por quem vive isso todos os dias</span>
          <h2 style={{textTransform: 'uppercase', fontWeight: 800, letterSpacing: '-0.02em'}}>Mais de uma década transformando vidas com nutrição inteligente e acolhedora</h2>
          <p>Mais de uma década transformando vidas com nutrição inteligente e acolhedora.</p>
        </div>

        <MentorBlock
          name="André Teles"
          role="CEO · ALTeles Nutrição Avançada"
          bio="Nutricionista especialista em nutrição esportiva e emagrecimento. Criador de metodologias que já transformaram mais de 5.000 vidas entre atendimentos presenciais e programas online. Apaixonado por resultados permanentes — sem terrorismo alimentar."
          photo="assets/andre.png"
        />

        <MentorBlock
          name="Layane Carine"
          role="Nutricionista · ALTeles Nutrição Avançada"
          bio="Especialista em saúde intestinal e emagrecimento feminino. Co-criadora da metodologia PACE, referência nacional em acompanhamento nutricional online. Defende uma alimentação inteligente, prática e possível de manter no dia a dia."
          photo="assets/layane.png"
          reverse
          accent
        />
      </div>
    </section>
  );
}

function Testimonials() {
  const slides = [
    { name: 'Mariana S.',  lost: '5 kg em 7 dias',      photo: 'assets/result-3.png' },
    { name: 'Fernanda R.', lost: '4 kg em 7 dias',      photo: 'assets/result-2.png' },
    { name: 'Carlos M.',   lost: '6 kg no 1º desafio',  photo: 'assets/result-1.png' },
  ];

  const n = slides.length;
  const [active, setActive] = React.useState(0);

  React.useEffect(() => {
    const t = setInterval(() => setActive(a => (a + 1) % n), 4000);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="section" id="resultados">
      <div className="wrap">
        <div className="section-head center">
          <span className="eyebrow">resultados reais</span>
          <h2>Pessoas comuns que decidiram <em>começar</em> e não pararam mais.</h2>
          <p>Esses são os resultados de quem aplicou a metodologia de André Teles e Layane Carine nos desafios anteriores.</p>
        </div>
      </div>

      <div className="testi-stage">
        {slides.map((s, i) => {
          const offset = (i - active + n) % n;
          const cls = offset === 0 ? 'tcard tcard--active'
                    : offset === 1 ? 'tcard tcard--next'
                    : 'tcard tcard--prev';
          return (
            <div key={i} className={cls} onClick={() => setActive(i)}>
              <img src={s.photo} alt={s.name} className="tcard-img" />
              <div className="tphoto-label">✓ Perdeu {s.lost}</div>
            </div>
          );
        })}
      </div>

      <div className="wrap" style={{marginTop: 40, textAlign: 'center'}}>
        <a href="#inscricao" className="btn btn-primary btn-lg">Quero ter esse resultado também →</a>
      </div>
    </section>
  );
}

function Pricing() {
  return (
    <section className="section glow-top" id="inscricao">
      <div className="wrap">
        <div className="section-head center">
          <span className="eyebrow">inscrição</span>
          <h2>Escolha sua <em>entrada.</em></h2>
          <p>Lote 1 disponível agora. Quando acabar, o valor sobe.</p>
        </div>

        <div className="pricing-card">
          <div>
            <div style={{display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 18}}>
              <span className="chip green"><span className="chip-dot"></span>Lote 1 · disponível agora</span>
              <span className="chip">01 → 08 jun</span>
            </div>
            <p className="price-old">de R$97,00</p>
            <div className="price-now"><span className="pre">R$</span>77<span style={{fontSize: '0.38em', verticalAlign: 'top', opacity: 0.7, marginLeft: 6}}>,00</span></div>
            <p style={{fontSize: 13, color: 'var(--muted)', margin: 0, letterSpacing: '0.04em'}}>acesso completo ao desafio</p>

            <div style={{marginTop: 28}}>
              <a href="https://pay.hub.la/QrkOWSyURFydGpZmCA7x" className="btn btn-primary btn-lg" target="_blank" rel="noopener noreferrer">
                Garantir minha vaga — R$77 →
              </a>
              <p style={{fontSize: 11, color: 'var(--muted)', marginTop: 14, letterSpacing: '0.06em'}}>PIX ou cartão · parcelamento disponível</p>
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{marginBottom: 8}}>está incluso</div>
            <ul className="price-includes">
              <li>Sugestão alimentar para os 7 dias</li>
              <li>Grupo de suporte no WhatsApp</li>
              <li>Desafios diários para acelerar resultados</li>
              <li>Método de contenção de danos</li>
              <li>Acesso por qualquer celular</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: 'É possível mesmo perder até 4 kg em 7 dias?', a: 'Sim. Com a combinação certa de alimentação estratégica e acompanhamento, muitos dos nossos alunos alcançam esse resultado. O resultado individual pode variar, mas o método é validado com milhares de pessoas.' },
    { q: 'E se eu exagerar nos dias de jogo?', a: 'Esse é exatamente o ponto do desafio. Você vai aprender a conter os danos — comer, curtir os jogos e saber o que fazer depois para não perder o resultado. A Copa é parte da estratégia, não o inimigo.' },
    { q: 'Vou ter acesso a André Teles e Layane Carine diretamente?', a: 'Sim. Durante os 7 dias você terá suporte direto com André Teles e Layane Carine no grupo de WhatsApp. Toda dúvida será respondida com atenção.' },
    { q: 'Qual a diferença entre o Lote 0 e o Lote 1?', a: 'O conteúdo é exatamente o mesmo. O Lote 0 tem preço menor por 24 horas — é uma recompensa para quem decide rápido.' },
    { q: 'Quando começa o desafio?', a: 'O desafio inicia em 1º de junho e vai até 8 de junho, exatamente na semana da Copa. Você terá tempo de perder peso e ainda aprender a gerenciar os dias de jogo.' },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section className="section" id="faq">
      <div className="wrap" style={{maxWidth: 880}}>
        <div className="section-head" style={{marginBottom: 16}}>
          <span className="eyebrow">dúvidas frequentes</span>
          <h2>Tudo o que você quer <em>saber.</em></h2>
        </div>

        <div className="faq">
          {items.map((it, i) => (
            <div key={i} className={'faq-item' + (open === i ? ' open' : '')}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-icon">＋</span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Final() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="final">
          <span className="chip green" style={{position: 'relative'}}><span className="chip-dot"></span>um passo para mudar de vida</span>
          <h2 style={{marginTop: 24}}>
            Copa no Shape <em>está chegando.</em>
          </h2>
          <p style={{marginBottom: 24}}>
            01 a 08 de junho · até 4 kg · sem terrorismo · com estratégia. Venha perder peso com a gente.
          </p>
          <div className="final-meta">
            <span className="chip">01 → 08 jun</span>
            <span className="chip">até 4 kg</span>
            <span className="chip">sem terrorismo</span>
            <span className="chip">com estratégia</span>
          </div>
          <div style={{marginTop: 24, position: 'relative'}}>
            <a href="#inscricao" className="btn btn-primary btn-lg">Garantir minha vaga — R$77 →</a>
            <p style={{fontSize: 11, color: 'var(--muted)', marginTop: 14, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em'}}>lote 1 disponível agora</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="brand" style={{marginBottom: 12}}>
              <span className="brand-mark mono">CS</span>
              Copa no Shape
            </div>
            <p style={{maxWidth: '40ch', color: 'var(--muted)'}}>
              AL Teles — Nutrição Avançada · Nutrição esportiva · Emagrecimento · Saúde intestinal.
            </p>
          </div>
          <div>
            <div className="eyebrow" style={{color: 'var(--ink-2)', marginBottom: 12}}>Navegação</div>
            <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
              <a href="#metodologia">Metodologia</a>
              <a href="#autores">Quem somos</a>
              <a href="#resultados">Resultados</a>
              <a href="#faq">Dúvidas</a>
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{color: 'var(--ink-2)', marginBottom: 12}}>Criadores</div>
            <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
              <span>André Teles</span>
              <span>Layane Carine</span>
            </div>
          </div>
        </div>
        <div style={{display: 'flex', justifyContent: 'space-between', paddingTop: 24, borderTop: '1px solid var(--line)', flexWrap: 'wrap', gap: 12, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase'}}>
          <span>© 2026 — copa no shape</span>
          <span>os resultados variam de acordo com a dedicação</span>
        </div>
      </div>
    </footer>
  );
}

function Authors() { return null; }

Object.assign(window, { Mentors, Testimonials, Pricing, FAQ, Final, Footer, Authors });