// FAQ + Botão WhatsApp flutuante
const { useState: useStateFAQ } = React;

const FAQ_ITEMS = [
  {
    q: 'Como funciona a primeira consulta?',
    a: 'Você relata o caso por WhatsApp ou e-mail com os documentos principais. O Dr. Roberto analisa pessoalmente e responde com um diagnóstico honesto sobre a viabilidade jurídica, os caminhos possíveis e os honorários correspondentes — tudo por escrito, antes do início do trabalho.',
  },
  {
    q: 'Quanto custam os honorários?',
    a: 'Seguimos integralmente a tabela de honorários da OAB/RO, que estabelece valores mínimos por tipo de causa. Após a análise do caso, apresentamos uma proposta clara por escrito — valor fixo, percentual sobre o êxito ou misto, conforme a natureza da demanda. Tudo acordado antes do início do trabalho.',
  },
  {
    q: 'Atendem clientes fora de Porto Velho?',
    a: 'Sim. Atuamos em todo o Brasil por meio de atendimento online (videoconferência, WhatsApp e e-mail) e, quando necessário, com correspondentes em outras comarcas. Boa parte da nossa carteira hoje é de clientes de outros estados.',
  },
  {
    q: 'Meu caso é confidencial?',
    a: 'Absolutamente. O sigilo profissional é dever ético do advogado e está protegido por lei. Nada do que você compartilhar é revelado a terceiros — nem mesmo o fato de você ser nosso cliente — sem sua autorização expressa.',
  },
  {
    q: 'Quanto tempo leva uma ação revisional bancária?',
    a: 'Depende do banco, do tribunal e da complexidade do contrato. Em média, ações revisionais resolvem-se em 12 a 24 meses em primeira instância. Mas em muitos casos conseguimos antecipações de tutela (decisões liminares) nas primeiras semanas — suspendendo cobranças abusivas enquanto o processo segue.',
  },
  {
    q: 'Vocês garantem que vou ganhar a causa?',
    a: 'Não. Nenhum advogado sério promete resultado — é vedado pela OAB e desonesto com o cliente. O que oferecemos é trabalho técnico de qualidade, estratégia construída sobre análise documental rigorosa e comunicação transparente em cada etapa do processo.',
  },
];

function FAQ({ palette, serifFamily }) {
  const [open, setOpen] = useStateFAQ(0);
  return (
    <section id="faq" className="px-6 md:px-12 py-24" style={{ background: palette.bg }}>
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <Reveal variant="left" className="lg:col-span-4 lg:sticky lg:top-8 self-start">
          <p className="font-mono text-[10px] uppercase tracking-[0.3em] mb-4" style={{ color: palette.gold }}>
            № 05 — Perguntas frequentes
          </p>
          <h2 className="font-serif" style={{
            fontFamily: serifFamily, color: palette.ink,
            fontSize: 'clamp(32px, 3.6vw, 48px)', fontWeight: 500, lineHeight: 1.05,
          }}>
            Antes que <span style={{ fontStyle: 'italic', color: palette.accent }}>você pergunte.</span>
          </h2>
          <div className="mt-6" style={{ width: 60, borderTop: `2px solid ${palette.gold}` }} />
          <p className="font-sans text-[14px] leading-[1.7] mt-6 max-w-sm" style={{ color: palette.muted }}>
            As dúvidas que mais ouvimos antes da primeira conversa.
            Se a sua não estiver aqui, mande no WhatsApp — respondo pessoalmente.
          </p>
        </Reveal>

        <div className="lg:col-span-8">
          <ul style={{ borderTop: `1px solid ${palette.rule}` }}>
            {FAQ_ITEMS.map((item, i) => {
              const isOpen = open === i;
              return (
                <li key={i} style={{ borderBottom: `1px solid ${palette.rule}` }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    className="w-full text-left py-6 flex items-start justify-between gap-6 group"
                    aria-expanded={isOpen}>
                    <div className="flex items-start gap-5">
                      <span className="font-mono text-[11px] uppercase tracking-[0.22em] mt-1.5"
                            style={{ color: palette.gold, minWidth: 24 }}>
                        {String(i + 1).padStart(2, '0')}
                      </span>
                      <h3 className="font-serif text-[20px] md:text-[24px] leading-tight"
                          style={{ fontFamily: serifFamily, color: palette.ink, fontWeight: 500 }}>
                        {item.q}
                      </h3>
                    </div>
                    <span
                      className="font-serif text-[28px] leading-none mt-1 transition-transform"
                      style={{
                        fontFamily: serifFamily,
                        color: palette.accent,
                        transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                        transition: 'transform 400ms cubic-bezier(0.22, 1, 0.36, 1)',
                      }}>
                      +
                    </span>
                  </button>
                  <div
                    style={{
                      maxHeight: isOpen ? '400px' : '0px',
                      opacity: isOpen ? 1 : 0,
                      overflow: 'hidden',
                      transition: 'max-height 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 400ms ease',
                    }}>
                    <p className="font-sans text-[15px] leading-[1.75] pb-7 pr-12 pl-12"
                       style={{ color: palette.muted }}>
                      {item.a}
                    </p>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;