const FAQ = () => {
  const items = [
    {
      q: 'O que é a ArchPlan?',
      a: 'A ArchPlan é uma plataforma ERP e CRM desenvolvida para empresas de arquitetura, engenharia, e obras. Ela ajuda a organizar clientes, contratos, parcelas, entradas, saídas, despesas fixas, projetos e andamento das etapas em um único sistema.',
    },
    {
      q: 'Para quem a ArchPlan é indicada?',
      a: 'A ArchPlan é indicada para escritórios de arquitetura, empresas de engenharia, profissionais autônomos, construtoras pequenas e médias, empresas de projetos e equipes que precisam controlar financeiro e clientes.',
    },
    {
      q: 'Qual é o objetivo da ArchPlan?',
      a: 'O objetivo da ArchPlan é dar mais controle e organização para empresas que trabalham com projetos, contratos e acompanhamento de obras. A plataforma ajuda a saber quanto entrou, quanto saiu, quanto há a receber, quais parcelas estão pendentes, quais projetos estão em andamento, em qual etapa cada projeto está e quais clientes precisam de acompanhamento.',
    },
    {
      q: 'A ArchPlan é um sistema financeiro?',
      a: 'Sim, mas não apenas isso. A ArchPlan possui controle financeiro, mas também funciona como um ERP + CRM, reunindo financeiro, clientes, contratos, tarefas em uma única plataforma.',
    },
    {
      q: 'O que significa “A planta baixa do seu financeiro”?',
      a: 'Significa que a ArchPlan ajuda a visualizar e organizar o financeiro da empresa com clareza, como uma planta baixa organiza os espaços de uma construção. A ideia é transformar informações financeiras e operacionais em uma visão simples, estruturada e fácil de acompanhar.',
    },
    {
      q: 'Quais módulos a ArchPlan possui?',
      a: 'A plataforma pode contar com módulos como dashboard, clientes, CRM comercial, contratos, parcelas, entradas financeiras, saídas financeiras, despesas fixas, contas a receber, contas a pagar, tarefas, documentos, relatórios.',
    },
    {
      q: 'A ArchPlan controla parcelas de contratos?',
      a: 'Sim. A empresa pode cadastrar um contrato com valor total, quantidade de parcelas, valor de cada parcela, data de vencimento, cliente vinculado, projeto vinculado e status de pagamento. Assim, o sistema ajuda a acompanhar parcelas pagas, pendentes e vencidas.',
    },
  ];

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

  return (
    <section id="faq" className="relative py-32 md:py-48 border-t" style={{ borderColor: 'var(--rule)', background: 'var(--bg-deep)' }} data-screen-label="08 FAQ">
      <div className="max-w-[1400px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-x-6">
          <div className="col-span-12 md:col-span-5">
            <SectionHeader
              index="08"
              label="Dúvidas · Sheet 08"
              title={<>Perguntas <em className="italic font-serif" style={{ color: 'var(--sepia)' }}>frequentes</em>.</>}
            />
            <div className="mt-12 hidden md:block">
              <DimLabel className="block mb-4">Não achou sua dúvida?</DimLabel>
              <a href="#cta" className="hov-line text-base">Fale com nosso time →</a>
            </div>
          </div>

          <div className="col-span-12 md:col-span-7 mt-16 md:mt-0">
            <div className="border-t" style={{ borderColor: 'var(--rule-strong)' }}>
              {items.map((it, i) => (
                <FAQItem key={i} {...it} index={i} isOpen={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const FAQItem = ({ q, a, index, isOpen, onToggle }) => {
  const [ref, inView] = useReveal({ threshold: 0.2 });
  return (
    <div
      ref={ref}
      className="border-b transition-all"
      style={{
        borderColor: 'var(--rule-strong)',
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0)' : 'translateY(10px)',
        transitionDuration: '700ms',
        transitionDelay: `${index * 60}ms`,
      }}
    >
      <button onClick={onToggle} className="w-full flex items-start justify-between gap-6 py-7 text-left group">
        <div className="flex items-start gap-6 flex-1">
          <DimLabel className="mt-1.5 shrink-0">/ {String(index + 1).padStart(2, '0')}</DimLabel>
          <span className="font-serif text-2xl md:text-3xl tracking-tight leading-snug">{q}</span>
        </div>
        <span className="font-mono text-2xl shrink-0 mt-1 transition-transform duration-500" style={{ transform: isOpen ? 'rotate(45deg)' : 'rotate(0)' }}>+</span>
      </button>
      <div className="overflow-hidden transition-all duration-700 ease-out" style={{ maxHeight: isOpen ? '400px' : '0px' }}>
        <p className="pb-7 pl-16 pr-12 text-base leading-relaxed" style={{ color: 'var(--ash)' }}>{a}</p>
      </div>
    </div>
  );
};

window.FAQ = FAQ;