// Sections.jsx — HowItWorks (sticky stack), Stats (count-up), Testimonials (swipe), Pricing, CTA, Footer

// ── How It Works — Sticky Scroll Stack ───────────────────────
const HowItWorks = () => {
  const sectionRef = React.useRef(null);
  const progress = useScrollProgress(sectionRef);
  const isMobile = useIsMobile();
  const [titleRef, titleVis] = useReveal(0);

  const steps = [
    { n: '01', title: 'Nos briefie.', body: 'Preencha um briefing de 5 minutos. Sua oferta, seu público, seu objetivo. Só isso.' },
    { n: '02', title: 'Nós criamos.', body: 'Nossa equipe especializada cria sua página usando anos de experiência em programação e inteligência artificial avançada, com diversos softwares premium.' },
    { n: '03', title: 'Você lança.', body: 'Tenha sua página profissional em menos de 24h. Pronta para converter vendas.' },
  ];

  // Each card occupies 1/3 of total scroll
  // Card enters from translateY(100%) → 0 during its window, then stays
  const getCardStyle = (i) => {
    const start = i / 3;
    const end = (i + 1) / 3;
    const local = Math.max(0, Math.min(1, (progress - start) / (end - start)));
    // ease: smoothstep
    const eased = local * local * (3 - 2 * local);
    const entered = progress >= start;
    return {
      position: 'absolute', left: 0, right: 0, bottom: 0,
      opacity: entered ? 1 : 0,
      transform: `translateY(${(1 - eased) * 100}%)`,
      transition: progress === 0 ? 'none' : `transform 80ms linear, opacity 300ms ease`,
      zIndex: i + 1,
    };
  };

  // Mobile: simple vertical reveal cards
  if (isMobile) {
    return (
      <section id="como-funciona" style={{ background: '#F5F5F5', padding: '80px 20px' }}>
        <div style={{ marginBottom: '48px' }}>
          <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '11px', fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#A3A3A3', marginBottom: '12px' }}>Como funciona</div>
          <h2 style={{ fontFamily: "'Space Grotesk',sans-serif", fontSize: '34px', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.1, color: '#0A0A0A' }}>Três etapas.<br />Um dia.</h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
          {steps.map((s, i) => {
            const [ref, vis] = useReveal(i * 80);
            return (
              <div key={s.n} ref={ref} style={{
                background: '#fff', borderRadius: '12px', border: '1px solid #E5E5E5',
                padding: '28px 24px',
                ...revealStyle(vis, 0),
              }}>
                <div style={{ fontFamily: "'DM Mono',monospace", fontSize: '11px', color: '#A3A3A3', letterSpacing: '0.1em', marginBottom: '14px' }}>{s.n}</div>
                <div style={{ fontFamily: "'Space Grotesk',sans-serif", fontSize: '22px', fontWeight: 700, letterSpacing: '-0.02em', color: '#0A0A0A', marginBottom: '10px' }}>{s.title}</div>
                <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '14px', color: '#6B6B6B', lineHeight: 1.6 }}>{s.body}</div>
              </div>
            );
          })}
        </div>
      </section>
    );
  }

  // Desktop: sticky scroll stack
  const SECTION_H = '380vh';
  const stickyH = '100vh';

  return (
    <section id="como-funciona" ref={sectionRef} style={{ height: SECTION_H, background: '#F5F5F5', position: 'relative' }}>
      <div style={{ position: 'sticky', top: 0, height: stickyH, overflow: 'hidden', display: 'flex', alignItems: 'center' }}>
        <div style={{ maxWidth: '1100px', margin: '0 auto', padding: '0 48px', width: '100%', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '80px', alignItems: 'center' }}>

          {/* Left: static title */}
          <div ref={titleRef}>
            <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '11px', fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#A3A3A3', marginBottom: '20px', ...revealStyle(titleVis, 0) }}>
              Como funciona
            </div>
            <h2 style={{ fontFamily: "'Space Grotesk',sans-serif", fontSize: 'clamp(36px,3.5vw,52px)', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05, color: '#0A0A0A', marginBottom: '32px', ...revealStyle(titleVis, 80) }}>
              Três etapas.<br />Um dia.
            </h2>
            <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '15px', color: '#6B6B6B', lineHeight: 1.7, maxWidth: '340px', ...revealStyle(titleVis, 160) }}>
              Do briefing ao ar em menos de 24 horas. Sem reuniões interminables. Sem revisões sem fim.
            </p>

            {/* Step dots */}
            <div style={{ display: 'flex', gap: '8px', marginTop: '40px', ...revealStyle(titleVis, 200) }}>
              {steps.map((s, i) => {
                const start = i / 3;
                const active = progress >= start && (i === 2 || progress < (i + 1) / 3);
                const done = progress >= (i + 1) / 3;
                return (
                  <div key={i} style={{
                    width: active ? '28px' : '8px', height: '8px', borderRadius: '4px',
                    background: (active || done) ? '#0A0A0A' : '#D4D4D4',
                    transition: `all 400ms ${EASE}`,
                  }}></div>
                );
              })}
            </div>
          </div>

          {/* Right: stacking cards */}
          <div style={{ position: 'relative', height: '340px' }}>
            {steps.map((s, i) => (
              <div key={s.n} style={getCardStyle(i)}>
                <div style={{
                  background: i === 2 ? '#0A0A0A' : '#fff',
                  borderRadius: '14px',
                  border: i === 2 ? '1px solid #1A1A1A' : '1px solid #E5E5E5',
                  padding: '36px',
                  boxShadow: i === 2 ? '0 24px 64px rgba(0,0,0,0.2)' : '0 4px 24px rgba(0,0,0,0.08)',
                }}>
                  <div style={{ fontFamily: "'DM Mono',monospace", fontSize: '11px', color: i === 2 ? '#525252' : '#A3A3A3', letterSpacing: '0.1em', marginBottom: '20px' }}>{s.n}</div>
                  <div style={{ fontFamily: "'Space Grotesk',sans-serif", fontSize: '28px', fontWeight: 700, letterSpacing: '-0.02em', color: i === 2 ? '#fff' : '#0A0A0A', marginBottom: '14px' }}>{s.title}</div>
                  <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '15px', color: i === 2 ? '#737373' : '#6B6B6B', lineHeight: 1.6 }}>{s.body}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ── Stats — Count-up on enter ─────────────────────────────────
const StatItem = ({ n, label, delay }) => {
  const [ref, vis] = useReveal(delay);
  const value = useCountUp(n, vis);
  return (
    <div ref={ref} style={{ textAlign: 'center', ...revealStyle(vis, 0) }}>
      <div style={{ fontFamily: "'Space Grotesk',sans-serif", fontSize: 'clamp(36px,5vw,56px)', fontWeight: 700, letterSpacing: '-0.04em', color: '#FFFFFF', lineHeight: 1 }}>{value}</div>
      <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '13px', color: '#6B6B6B', marginTop: '10px', lineHeight: 1.4 }}>{label}</div>
    </div>
  );
};

const Stats = () => {
  const isMobile = useIsMobile();
  const stats = [
    { n: '24h', label: 'Tempo de entrega' },
    { n: '200+', label: 'Páginas entregues' },
    { n: '3.8×', label: 'Aumento médio de conversão' },
    { n: '98%', label: 'Satisfação dos clientes' },
  ];

  return (
    <section style={{ background: '#0A0A0A', padding: isMobile ? '64px 24px' : '80px 48px' }}>
      <div style={{
        maxWidth: '1100px', margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : 'repeat(4,1fr)',
        gap: isMobile ? '40px 24px' : '32px',
      }}>
        {stats.map((s, i) => <StatItem key={s.n} n={s.n} label={s.label} delay={i * 80} />)}
      </div>
    </section>
  );
};

// ── Testimonials — Swipe carousel ────────────────────────────
const Testimonials = () => {
  const [active, setActive] = React.useState(0);
  const [dragging, setDragging] = React.useState(false);
  const [startX, setStartX] = React.useState(0);
  const isMobile = useIsMobile();
  const [ref, vis] = useReveal(0);

  const items = [
    { q: '"Nossa página foi ao ar em 18 horas. A taxa de conversão dobrou em uma semana."', name: 'Marco R.', role: 'Fundador, Solvr' },
    { q: '"O Antigravity é diferente de tudo que já vi. A velocidade e a qualidade são surreais."', name: 'Lea T.', role: 'Head de Growth, Flowfield' },
    { q: '"Era cético quanto às 24 horas. Agora é a única forma que lançamos campanhas."', name: 'Daniel K.', role: 'CEO, Northframe' },
  ];

  const next = () => setActive(a => (a + 1) % items.length);
  const prev = () => setActive(a => (a - 1 + items.length) % items.length);

  const onTouchStart = (e) => { setStartX(e.touches[0].clientX); setDragging(true); };
  const onTouchEnd = (e) => {
    if (!dragging) return;
    const dx = e.changedTouches[0].clientX - startX;
    if (dx < -40) next();
    if (dx > 40) prev();
    setDragging(false);
  };

  return (
    <section id="resultados" ref={ref} style={{ background: '#fff', padding: isMobile ? '80px 0' : '112px 48px', overflow: 'hidden' }}>
      <div style={{ maxWidth: '1100px', margin: '0 auto', padding: isMobile ? '0' : '0' }}>
        <div style={{ padding: isMobile ? '0 24px' : '0', marginBottom: '40px' }}>
          <h2 style={{ fontFamily: "'Space Grotesk',sans-serif", fontSize: isMobile ? '32px' : '40px', fontWeight: 700, letterSpacing: '-0.03em', color: '#0A0A0A', lineHeight: 1.1, ...revealStyle(vis, 0) }}>
            Os resultados falam.
          </h2>
        </div>

        {isMobile ? (
          // Mobile: single card swipe
          <div onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} style={{ userSelect: 'none' }}>
            <div style={{ padding: '0 24px', marginBottom: '24px', minHeight: '200px' }}>
              <div style={{
                background: '#F5F5F5', borderRadius: '12px', padding: '28px 24px',
                border: '1px solid #E5E5E5',
                transition: `opacity 300ms ${EASE}, transform 300ms ${EASE}`,
              }}>
                <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '16px', color: '#0A0A0A', lineHeight: 1.6, marginBottom: '20px', fontStyle: 'italic' }}>{items[active].q}</div>
                <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '13px', fontWeight: 600, color: '#0A0A0A' }}>{items[active].name}</div>
                <div style={{ fontSize: '12px', color: '#A3A3A3', marginTop: '2px' }}>{items[active].role}</div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px' }}>
              <div style={{ display: 'flex', gap: '8px' }}>
                {items.map((_, i) => (
                  <div key={i} onClick={() => setActive(i)} style={{ width: i === active ? '20px' : '6px', height: '6px', borderRadius: '3px', background: i === active ? '#0A0A0A' : '#D4D4D4', transition: `all 300ms ${EASE}`, cursor: 'pointer' }}></div>
                ))}
              </div>
              <div style={{ display: 'flex', gap: '8px' }}>
                {[prev, next].map((fn, i) => (
                  <button key={i} onClick={fn} style={{ width: '40px', height: '40px', borderRadius: '50%', border: '1px solid #E5E5E5', background: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '16px', color: '#0A0A0A', transition: `background 200ms` }}
                    onMouseEnter={e => e.currentTarget.style.background = '#F5F5F5'}
                    onMouseLeave={e => e.currentTarget.style.background = '#fff'}>
                    {i === 0 ? '←' : '→'}
                  </button>
                ))}
              </div>
            </div>
          </div>
        ) : (
          // Desktop: 3 columns
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '20px' }}>
            {items.map((t, i) => {
              const [cRef, cVis] = useReveal(i * 80);
              return (
                <div key={i} ref={cRef} style={{ background: '#F5F5F5', borderRadius: '12px', padding: '32px', border: '1px solid #E5E5E5', ...revealStyle(cVis, 0) }}>
                  <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '15px', color: '#0A0A0A', lineHeight: 1.65, marginBottom: '24px', fontStyle: 'italic' }}>{t.q}</div>
                  <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '13px', fontWeight: 600, color: '#0A0A0A' }}>{t.name}</div>
                  <div style={{ fontSize: '12px', color: '#A3A3A3', marginTop: '3px' }}>{t.role}</div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </section>
  );
};

// ── Pricing ───────────────────────────────────────────────────
const Pricing = ({ onCTA }) => {
  const [ref, visible] = useReveal(0);
  const isMobile = useIsMobile();

  const plans = [
    {
      name: 'Start', price: 'R$197', period: '',
      desc: 'Depois do primeiro mês mensalidade de R$37 para hospedagem.',
      features: ['Pagina de vendas', 'Hospedagem (1 mês)', 'Suporte'],
      cta: 'Começar', dark: false,
    },
    {
      name: 'Plus', price: 'R$297', period: '',
      desc: 'Depois do primeiro mês mensalidade de R$37 para hospedagem.',
      features: ['Pagina de vendas', 'Hospedagem mensal', 'Domínio Personalizado (1 ano)', '1 alteração (mês)', 'Suporte Exclusivo'],
      cta: 'Escolher Plus', dark: true, badge: 'Mais popular',
    },
    {
      name: 'Pro', price: 'R$597', period: '',
      desc: 'Hospedagem e domínio inclusos por 1 ano.',
      features: ['Pagina de vendas', 'Hospedagem (1 ano)', 'Domínio (1 ano)', '2 alterações (mês)', 'Suporte Exclusivo'],
      cta: 'Escolher Pro', dark: false,
    },
  ];

  return (
    <section id="precos" style={{ background: '#fff', padding: isMobile ? '80px 20px' : '112px 48px', borderTop: '1px solid #E5E5E5' }} ref={ref}>
      <div style={{ maxWidth: '1100px', margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '11px', fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#A3A3A3', marginBottom: '14px', ...revealStyle(visible, 0) }}>Preços</div>
        <h2 style={{ fontFamily: "'Space Grotesk',sans-serif", fontSize: isMobile ? '34px' : '44px', fontWeight: 700, letterSpacing: '-0.03em', color: '#0A0A0A', marginBottom: '16px', lineHeight: 1.1, ...revealStyle(visible, 80) }}>
          Simples. Transparente.
        </h2>
        <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '16px', color: '#6B6B6B', marginBottom: '56px', ...revealStyle(visible, 120) }}>
          Sem taxas ocultas. Sem contratos longos.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap: isMobile ? '16px' : '20px', textAlign: 'left' }}>
          {plans.map((plan, i) => {
            const [cRef, cVis] = useReveal(i * 80);
            return (
              <div key={plan.name} ref={cRef} style={{
                background: plan.dark ? '#0A0A0A' : '#fff',
                border: plan.dark ? '1px solid #262626' : '1px solid #E5E5E5',
                borderRadius: '14px', padding: isMobile ? '28px 24px' : '36px',
                boxShadow: plan.dark ? '0 24px 64px rgba(0,0,0,0.2)' : '0 1px 3px rgba(0,0,0,0.05)',
                position: 'relative',
                transition: `transform 300ms ${EASE}, box-shadow 300ms ${EASE}`,
                ...revealStyle(cVis, 0),
              }}
                onMouseEnter={e => { if (!isMobile) { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = plan.dark ? '0 32px 80px rgba(0,0,0,0.3)' : '0 12px 32px rgba(0,0,0,0.10)'; } }}
                onMouseLeave={e => { if (!isMobile) { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = plan.dark ? '0 24px 64px rgba(0,0,0,0.2)' : '0 1px 3px rgba(0,0,0,0.05)'; } }}>
                {plan.badge && (
                  <div style={{ position: 'absolute', top: '20px', right: '20px', background: '#fff', color: '#0A0A0A', fontSize: '10px', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', padding: '4px 10px', borderRadius: '999px' }}>{plan.badge}</div>
                )}
                <div style={{ fontFamily: "'DM Mono',monospace", fontSize: '11px', color: plan.dark ? '#525252' : '#A3A3A3', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: '16px' }}>{plan.name}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px', marginBottom: '8px' }}>
                  <span style={{ fontFamily: "'Space Grotesk',sans-serif", fontSize: '36px', fontWeight: 700, letterSpacing: '-0.03em', color: plan.dark ? '#fff' : '#0A0A0A', lineHeight: 1 }}>{plan.price}</span>
                  {plan.period && <span style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '14px', color: plan.dark ? '#525252' : '#A3A3A3' }}>{plan.period}</span>}
                </div>
                <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '14px', color: '#6B6B6B', lineHeight: 1.5, marginBottom: '24px', minHeight: isMobile ? 'auto' : '44px' }}>{plan.desc}</p>
                <button onClick={onCTA} style={{
                  fontFamily: "'DM Sans',sans-serif", fontSize: '15px', fontWeight: 500,
                  background: plan.dark ? '#fff' : '#0A0A0A',
                  color: plan.dark ? '#0A0A0A' : '#fff',
                  padding: '13px 0', borderRadius: '9px', border: 'none', cursor: 'pointer',
                  width: '100%', marginBottom: '24px', transition: `all 250ms ${EASE}`,
                }}
                  onMouseEnter={e => { e.target.style.opacity = '0.85'; e.target.style.transform = 'translateY(-1px)'; }}
                  onMouseLeave={e => { e.target.style.opacity = '1'; e.target.style.transform = 'translateY(0)'; }}>
                  {plan.cta} →
                </button>
                <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '9px' }}>
                  {plan.features.map(f => (
                    <li key={f} style={{ display: 'flex', alignItems: 'center', gap: '10px', fontFamily: "'DM Sans',sans-serif", fontSize: '13px', color: plan.dark ? '#A3A3A3' : '#6B6B6B' }}>
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
                        <path d="M2 7l3.5 3.5L12 3" stroke={plan.dark ? '#525252' : '#A3A3A3'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                      {f}
                    </li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ── CTA Banner ────────────────────────────────────────────────
const CtaBanner = ({ onCTA }) => {
  const [ref, visible] = useReveal(0);
  const isMobile = useIsMobile();

  return (
    <section style={{ background: '#0A0A0A', padding: isMobile ? '80px 24px' : '112px 48px', textAlign: 'center' }} ref={ref}>
      <h2 style={{ fontFamily: "'Space Grotesk',sans-serif", fontSize: isMobile ? '48px' : 'clamp(48px,6vw,80px)', fontWeight: 700, letterSpacing: '-0.04em', color: '#fff', lineHeight: 0.98, marginBottom: '20px', ...revealStyle(visible, 0) }}>
        Sua página.<br />Amanhã.
      </h2>
      <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: isMobile ? '15px' : '17px', color: '#6B6B6B', marginBottom: '36px', ...revealStyle(visible, 80) }}>
        Comece agora. Lance em 24 horas.
      </p>
      <div style={revealStyle(visible, 160)}>
        <button onClick={onCTA} style={{
          fontFamily: "'DM Sans',sans-serif", fontSize: '16px', fontWeight: 500,
          background: '#fff', color: '#0A0A0A',
          padding: isMobile ? '15px 40px' : '16px 48px',
          borderRadius: '10px', border: 'none', cursor: 'pointer',
          transition: `all 300ms ${EASE}`,
          width: isMobile ? '100%' : 'auto',
        }}
          onMouseEnter={e => { e.target.style.transform = 'translateY(-2px)'; e.target.style.boxShadow = '0 12px 32px rgba(255,255,255,0.12)'; }}
          onMouseLeave={e => { e.target.style.transform = 'translateY(0)'; e.target.style.boxShadow = 'none'; }}>
          Começar agora →
        </button>
      </div>
    </section>
  );
};

// ── Footer ────────────────────────────────────────────────────
const FooterSection = () => {
  const isMobile = useIsMobile();
  return (
    <footer style={{
      background: '#0A0A0A', padding: isMobile ? '24px 20px' : '28px 48px',
      borderTop: '1px solid #1A1A1A',
      display: 'flex', alignItems: isMobile ? 'flex-start' : 'center',
      justifyContent: 'space-between',
      flexDirection: isMobile ? 'column' : 'row',
      gap: isMobile ? '20px' : '0',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        <img src="./assets/logo-sg.png" style={{ width: '22px', height: '22px', objectFit: 'contain', filter: 'invert(1)' }} alt="SG" />
        <span style={{ fontFamily: "'Space Grotesk',sans-serif", fontSize: '14px', fontWeight: 700, color: '#fff', letterSpacing: '-0.02em' }}>Start The Game</span>
      </div>
      {!isMobile && <div style={{ fontFamily: "'DM Mono',monospace", fontSize: '11px', color: '#525252' }}>© 2026 Start The Game</div>}
      <div style={{ display: 'flex', gap: '20px' }}>
        {['Privacidade', 'Termos', 'Contato'].map(l => (
          <a key={l} href="#" style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '13px', color: '#525252', textDecoration: 'none', transition: 'color 150ms' }}
            onMouseEnter={e => e.target.style.color = '#A3A3A3'}
            onMouseLeave={e => e.target.style.color = '#525252'}>{l}</a>
        ))}
      </div>
    </footer>
  );
};

// ── FAQ ───────────────────────────────────────────────────────
const FAQItem = ({ q, a, delay }) => {
  const [open, setOpen] = React.useState(false);
  const [ref, vis] = useReveal(delay);

  return (
    <div ref={ref} style={{ borderBottom: '1px solid #D4D4D4', ...revealStyle(vis, 0) }}>
      <button 
        onClick={() => setOpen(!open)}
        style={{ 
          width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          background: 'none', border: 'none', padding: '24px 0', cursor: 'pointer',
          fontFamily: "'Space Grotesk',sans-serif", fontSize: '18px', fontWeight: 600, color: '#0A0A0A',
          textAlign: 'left'
        }}
      >
        <span style={{ paddingRight: '24px' }}>{q}</span>
        <span style={{ fontSize: '24px', fontWeight: 300, transform: open ? 'rotate(45deg)' : 'none', transition: 'transform 300ms ease', flexShrink: 0 }}>+</span>
      </button>
      <div style={{ 
        maxHeight: open ? '500px' : '0', overflow: 'hidden', 
        transition: 'max-height 400ms ease, opacity 400ms ease',
        opacity: open ? 1 : 0
      }}>
        <p style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '15px', color: '#6B6B6B', lineHeight: 1.6, paddingBottom: '24px' }}>
          {a}
        </p>
      </div>
    </div>
  );
};

const FAQ = () => {
  const [ref, visible] = useReveal(0);
  const isMobile = useIsMobile();
  
  const faqs = [
    { q: 'A página é feita por profissionais ou por ferramentas automáticas?', a: 'Cada projeto na Start The Game é desenvolvido por especialistas em conversão e design. Utilizamos tecnologia de ponta para garantir que sua página não seja apenas "bonita", mas uma ferramenta técnica de alta performance que agências comuns não conseguem entregar.' },
    { q: 'O design é personalizado para o meu negócio?', a: 'Sim. Não trabalhamos com templates genéricos. O design é construído do zero para refletir o profissionalismo da sua marca, focando no seu público-alvo específico. O resultado é uma página única, minimalista e extremamente sofisticada.' },
    { q: 'Como essa página vai me ajudar a vender mais?', a: 'Uma página clara elimina as distrações que fazem o cliente desistir da compra. Aliamos um design limpo com uma estrutura de copywriting focada em persuasão e velocidade de carregamento instantânea. Menos barreiras para o seu cliente significam mais lucro para você.' },
    { q: 'Qual é a garantia que eu tenho?', a: 'Oferecemos uma garantia total de 7 dias contra qualquer bug ou falha técnica. Além disso, nos planos Plus e Pro, você conta com manutenção ativa mensal para garantir que sua página esteja sempre operando em performance máxima, sem erros.' },
    { q: 'Em quanto tempo recebo minha página?', a: 'Nosso padrão é a entrega em 24 horas após o recebimento do seu briefing completo. Nossa operação foi desenhada para ser a mais ágil do mercado, permitindo que você coloque sua oferta no ar e comece a vender o quanto antes.' },
    { q: 'O que acontece após a entrega?', a: 'Nós cuidamos de toda a parte técnica. Sua página fica hospedada em nossos servidores de alta performance. Dependendo do seu plano, você terá suporte exclusivo e o direito a alterações mensais para manter sua oferta sempre atualizada e competitiva.' },
    { q: 'Posso editar a página depois de entregue?', a: 'Sim. Nos planos Plus e Pro você tem o benefício de realizar alterações mensais em sua página (1 alteração no plano Plus e 2 no plano Pro). Isso é ideal para atualizar vídeos, ajustar a copy ou trocar imagens para manter sua oferta sempre otimizada, tudo feito por nossa equipe sem que você precise tocar no código.' }
  ];

  return (
    <section id="faq" style={{ background: '#F5F5F5', padding: isMobile ? '80px 20px' : '112px 48px' }} ref={ref}>
      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: '48px' }}>
          <div style={{ fontFamily: "'DM Sans',sans-serif", fontSize: '11px', fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#A3A3A3', marginBottom: '14px', ...revealStyle(visible, 0) }}>Dúvidas?</div>
          <h2 style={{ fontFamily: "'Space Grotesk',sans-serif", fontSize: isMobile ? '34px' : '44px', fontWeight: 700, letterSpacing: '-0.03em', color: '#0A0A0A', marginBottom: '16px', lineHeight: 1.1, ...revealStyle(visible, 80) }}>
            Perguntas Frequentes
          </h2>
        </div>
        <div style={{ borderTop: '1px solid #D4D4D4' }}>
          {faqs.map((faq, i) => <FAQItem key={i} q={faq.q} a={faq.a} delay={i * 60 + 100} />)}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HowItWorks, Stats, Testimonials, Pricing, CtaBanner, FooterSection, FAQ });