// FAQ — accordion
function Faq() {
  const items = [
    { q: 'Quanto tempo leva um projeto?', a: 'Depende do escopo: landing pages saem em 1-2 semanas, sites institucionais em 3-4, e-commerces em 4-6, apps e SaaS em 8-16 semanas. No briefing inicial cravamos o prazo.' },
    { q: 'Vocês trabalham por hora ou valor fechado?', a: 'Preferimos valor fechado por entregável — você sabe exatamente quanto vai pagar antes de começar. Para retainers de evolução contínua, trabalhamos com pacotes mensais.' },
    { q: 'O que precisa estar pronto pra começar?', a: 'Idealmente: objetivo de negócio claro, referências de marcas que você admira e algum material da sua empresa (logo, cores, fotos). Se não tiver tudo isso, ajudamos a construir.' },
    { q: 'Vocês entregam o código-fonte?', a: 'Sempre. Tudo que construímos fica no GitHub da sua empresa, documentado, pra que você (ou qualquer dev) possa continuar. Sem prisões digitais.' },
    { q: 'Atendem fora do Brasil?', a: 'Sim. Já entregamos para clientes em Portugal, EUA e Argentina. Trabalhamos remoto, em PT/EN, com horários flexíveis.' },
    { q: 'O que acontece depois do go-live?', a: 'Você decide: pode tocar com a sua equipe, pode contratar nosso pacote de suporte mensal, ou misturar. Não somos do tipo "abandonou virou problema".' },
  ];

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

  return (
    <section className="section" id="faq" style={{ background: 'var(--bg-warm)' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'flex-start' }} >
        <div className="faq-side" style={{ position: 'sticky', top: 120 }}>
          <span className="eyebrow">FAQ · perguntas comuns</span>
          <h2 className="h-section">Antes de você <span className="accent">perguntar.</span></h2>
          <p style={{ fontSize: 16, color: 'var(--muted)', marginTop: 18 }}>
            Não achou sua dúvida? <a href="#contato" style={{ borderBottom: '1px solid currentColor', fontWeight: 500 }}>Manda no WhatsApp</a> que a gente responde em até 24h.
          </p>
        </div>
        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderBottom: '1px solid var(--line)',
                paddingBottom: isOpen ? 24 : 0,
                transition: 'padding .25s',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', textAlign: 'left',
                  padding: '24px 0',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
                }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                    <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>{String(i + 1).padStart(2, '0')}</span>
                    <span className="display" style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em' }}>{it.q}</span>
                  </span>
                  <span style={{
                    width: 36, height: 36, flexShrink: 0,
                    border: '1px solid var(--line-2)', borderRadius: '50%',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: isOpen ? 'var(--ink)' : 'var(--paper)',
                    color: isOpen ? '#fff' : 'var(--ink)',
                    transition: 'all .2s',
                  }}>
                    <span style={{ fontSize: 18, fontWeight: 400, lineHeight: 1, transform: isOpen ? 'rotate(45deg)' : 'none', transition: 'transform .25s' }}>+</span>
                  </span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 200 : 0, overflow: 'hidden', transition: 'max-height .3s ease',
                  paddingLeft: 40,
                }}>
                  <p style={{ color: 'var(--ink-2)', fontSize: 16, margin: 0, lineHeight: 1.6, maxWidth: 600 }}>
                    {it.a}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px){
          #faq > .container{ grid-template-columns: 1fr !important; gap: 40px !important; }
          .faq-side{ position: static !important; }
        }
      `}</style>
    </section>
  );
}

window.Faq = Faq;