// Nova seção "FAQ" (home-v3) — substitui OrganizationSection (não removida do
// arquivo, só retirada da composição em app-v3.jsx). Acordeão simples (1
// pergunta aberta por vez), com as perguntas/respostas exatas passadas pelo
// Daniel. A resposta de "Como cancelo minha assinatura?" está marcada por
// ele mesmo como pendente de confirmação antes de publicar — mantida aqui
// como está, só sinalizada no comentário pra não esquecer.
// window.FaqSection.

const FAQ_ITEMS = [
  {
    q: 'Preciso conectar minha conta bancária?',
    a: 'Não. Você pode registrar seus gastos e recebimentos ou importar faturas, extratos e planilhas com ajuda da IA. O Econome não pede acesso ao seu banco. Você escolhe quais arquivos quer enviar.',
  },
  {
    q: 'Como funcionam os 30 dias grátis?',
    a: 'Você tem 30 dias para experimentar os recursos do Econome e ver como ele funciona na sua rotina. Sem cadastrar cartão de crédito. Depois, você decide se quer assinar para continuar.',
  },
  {
    q: 'O que acontece com meus dados se eu não assinar?',
    a: 'Seus registros continuam disponíveis para consulta. Após o teste, as funções de registro, importação e análises completas ficam disponíveis para assinantes. Você pode escolher um plano quando quiser continuar.',
  },
  {
    q: 'Posso usar no celular e no computador?',
    a: 'Sim. O Econome está disponível para iPhone, Android, Windows e pelo navegador. Entre com a mesma conta para acessar suas informações nos diferentes dispositivos e escolha onde prefere cuidar das finanças.',
  },
  {
    q: 'Minha família precisa pagar outra assinatura?',
    a: 'Não. Uma única assinatura permite que até 4 pessoas cuidem das finanças juntas, sem custo adicional. Você convida até 3 pessoas pelo link gerado no Econome. Cada uma usa o próprio dispositivo para registrar movimentações e acompanhar as contas compartilhadas.',
  },
  {
    q: 'Já uso planilha. Posso trazer meus registros?',
    a: 'Sim. Você pode importar planilhas nos formatos XLSX, XLS e CSV, além de faturas e extratos em PDF. A IA transforma os dados dos arquivos em registros no Econome. O sistema também avisa quando identifica um lançamento parecido com outro já registrado, para ajudar a evitar duplicidades.',
  },
  {
    q: 'Posso criar minhas próprias categorias e formas de pagamento?',
    a: 'Sim. Além das categorias disponíveis, você pode criar outras que façam sentido para sua rotina, como gastos com seu pet. Também pode cadastrar formas de pagamento para identificar como pagou cada despesa.',
  },
  {
    // Resposta ainda pendente de confirmação do Daniel antes de publicar.
    q: 'Como cancelo minha assinatura?',
    a: 'O cancelamento é feito pelo canal em que você assinou o Econome. Ele interrompe a renovação, e você continua com acesso aos recursos pagos até o fim do período contratado.',
  },
  {
    q: 'Quem está por trás do Econome?',
    a: (
      <>
        <p>O Econome nasceu de uma necessidade real: registrar gastos e recebimentos sem enfrentar formulários complicados ou precisar conectar uma conta bancária. Foi dessa experiência que surgiu a ideia de criar um sistema simples para acompanhar o dinheiro no dia a dia.</p>
        <p><a href="/quem-somos.html" className="faq-link">Conheça quem criou o Econome e a história do projeto.</a></p>
      </>
    ),
  },
  {
    q: 'Como o Econome cuida dos meus dados?',
    a: (
      <p>O Econome não pede acesso à sua conta bancária. Você decide o que registrar e quais arquivos enviar para importação. Para conhecer como seus dados são utilizados e tratados, consulte nossa <a href="https://www.econome.com.br/privacidade.html" className="faq-link">Política de Privacidade</a>.</p>
    ),
  },
];

function FaqItem({ item, open, onToggle }) {
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        <span>{item.q}</span>
        <span className="faq-chevron"><Icon.ChevronDown size={18} color="var(--ink-3)" /></span>
      </button>
      <div className="faq-a-wrap">
        <div className="faq-a-inner">
          <div className="faq-a">
            {typeof item.a === 'string' ? <p>{item.a}</p> : item.a}
          </div>
        </div>
      </div>
    </div>
  );
}

function FaqSection() {
  const [openIndex, setOpenIndex] = React.useState(0);

  return (
    <section id="faq" style={{ background: 'var(--bg-warm)' }}>
      <div className="container">
        <div className="section-header">
          <div className="eyebrow"><span className="dot" />Dúvidas frequentes</div>
          <h2>Antes de começar, <span style={{ color: 'var(--purple)' }}>tire suas dúvidas</span>.</h2>
        </div>

        <div className="faq-list">
          {FAQ_ITEMS.map((item, i) => (
            <FaqItem
              key={item.q}
              item={item}
              open={i === openIndex}
              onToggle={() => setOpenIndex(i === openIndex ? -1 : i)}
            />
          ))}
        </div>

        <style>{`
          .faq-list {
            max-width: 760px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
          }
          .faq-item {
            background: var(--bg-elevated);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
          }
          .faq-q {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            text-align: left;
            padding: 18px 22px;
            font-size: 16px;
            font-weight: 600;
            color: var(--ink);
            font-family: inherit;
          }
          .faq-chevron { flex-shrink: 0; display: flex; transition: transform 0.25s ease; }
          .faq-item.open .faq-chevron { transform: rotate(180deg); }

          /* grid-template-rows 0fr -> 1fr: anima a altura sem precisar medir
             o conteúdo em JS (truque com overflow:hidden na linha). */
          .faq-a-wrap {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.3s ease;
          }
          .faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
          .faq-a-inner { overflow: hidden; }
          .faq-a {
            padding: 0 22px 20px;
            font-size: 15px;
            color: var(--ink-3);
            line-height: 1.6;
          }
          .faq-a p { margin: 0 0 10px; }
          .faq-a p:last-child { margin-bottom: 0; }
          .faq-link { color: var(--purple); font-weight: 600; }
          .faq-link:hover { text-decoration: underline; }

          @media (max-width: 560px) {
            .faq-q { padding: 16px 18px; font-size: 15px; }
            .faq-a { padding: 0 18px 18px; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.FaqSection = FaqSection;