/* global React */

const FAQS = [
  {
    q: "Eu preciso instalar painel solar na minha casa?",
    a: "Não. Esse é o ponto principal. A iGreen produz a energia em fazendas solares próprias, e ela chega na sua casa pela mesma rede da CEMIG. Você não muda nada — nem fios, nem padrão, nem disjuntor."
  },
  {
    q: "Quem manda a conta? CEMIG ou iGreen?",
    a: "A CEMIG continua mandando sua conta exatamente como antes. Você só vai notar a diferença no valor: vem com o desconto da iGreen aplicado todo mês."
  },
  {
    q: "Quanto custa pra entrar?",
    a: "Zero. Não tem taxa de adesão, mensalidade extra ou caução. Você economiza de cara, no primeiro mês de cobrança."
  },
  {
    q: "E se eu quiser sair?",
    a: "Pode sair quando quiser, sem multa. É um modelo de assinatura regulado pela ANEEL — não tem fidelidade."
  },
  {
    q: "Funciona pra qualquer cidade de Minas?",
    a: "Atendemos todas as cidades onde a CEMIG distribui energia. Se você mora em região atendida pela Energisa ou outra distribuidora, fale com a gente que a gente verifica caso a caso."
  },
  {
    q: "Eu sou cliente CEMIG há anos. Posso entrar?",
    a: "Pode. Não precisa trocar de distribuidora, fechar a conta antiga ou fazer migração. É só fazer o cadastro na iGreen e o desconto começa a aparecer na próxima fatura."
  },
];

function FAQ() {
  return (
    <section className="section-faq" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div className="reveal">
            <span className="eyebrow">Dúvidas</span>
            <h2 className="section-title" style={{marginTop: 16}}>
              Perguntas que <em>todo mundo</em> faz.
            </h2>
            <p className="section-sub">
              Não achou o que procurava? Manda mensagem direto no WhatsApp
              que eu respondo pessoalmente.
            </p>
            <a className="btn btn-wa" href="https://wa.me/5531971425778" target="_blank" rel="noreferrer" style={{marginTop: 24}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.6.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.4-.5c.1-.2.2-.3.2-.5 0-.2 0-.4-.1-.5-.1-.1-.6-1.5-.9-2.1-.2-.5-.4-.4-.6-.5h-.5c-.2 0-.5.1-.7.3-.3.3-.9.9-.9 2.2 0 1.3.9 2.5 1 2.7.1.2 1.8 2.7 4.4 3.8 1.5.6 2.1.7 2.8.6.4 0 1.3-.5 1.5-1 .2-.5.2-1 .1-1.1-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>
              (31) 97142-5778
            </a>
          </div>
          <div className="faq-list">
            {FAQS.map((f, i) => (
              <details className="faq-item" key={i} open={i===0}>
                <summary>
                  <span>{f.q}</span>
                  <span className="ic">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 5v14M5 12h14"/></svg>
                  </span>
                </summary>
                <p className="ans">{f.a}</p>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;