const faqStyles = {
  section: { background: 'white' },
  header: { textAlign: 'center', marginBottom: 40, maxWidth: 680, margin: '0 auto 40px' },
  list: { maxWidth: 820, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 10 },
  item: {
    background: 'var(--bg)', borderRadius: 14,
    border: '1.5px solid var(--silver-100)',
    overflow: 'hidden',
    transition: 'background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .2s ease',
    position: 'relative',
  },
  itemOpen: {
    background: 'white',
    borderColor: 'var(--navy-500)',
    boxShadow: '0 8px 24px rgba(30,58,111,.1), 0 2px 6px rgba(30,58,111,.06)',
  },
  q: {
    width: '100%', padding: '18px 18px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14,
    fontSize: 16, fontWeight: 700, color: 'var(--navy-800)',
    fontFamily: 'Archivo', textAlign: 'left',
    background: 'none', border: 'none',
    transition: 'color .2s ease',
    lineHeight: 1.35,
  },
  plusWrap: {
    flexShrink: 0, width: 32, height: 32, borderRadius: 10,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    background: 'rgba(30,58,111,.08)',
    transition: 'background .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1)',
    position: 'relative',
  },
  plusBar: {
    position: 'absolute', background: 'var(--navy-700)',
    borderRadius: 2, transition: 'all .35s cubic-bezier(.5,.1,.3,1.2)',
  },
  ansWrap: {
    display: 'grid',
    transition: 'grid-template-rows .38s cubic-bezier(.4,0,.2,1), opacity .3s ease',
  },
  ansInner: { overflow: 'hidden', minHeight: 0 },
  a: {
    padding: '0 18px 18px 18px',
    color: 'var(--silver-700)',
    fontSize: 15, lineHeight: 1.6,
  },
  ctaBox: {
    marginTop: 40, textAlign: 'center',
    background: 'linear-gradient(135deg, #F4F6F9, #ECEFF4)',
    borderRadius: 18, padding: 'clamp(22px, 5vw, 32px)',
    border: '1px solid var(--silver-100)',
  },
};

const faqs = [
  { q: 'Vocês atendem em casa?',
    a: 'Sim! Atendemos em domicílio em toda a região de Maricá-RJ. Marcamos um horário que funcione pra você — pode ser de manhã, tarde ou começo da noite. Sem custo adicional pra deslocamento dentro da cidade.' },
  { q: 'Quanto custa um orçamento?',
    a: 'O orçamento é gratuito e sem compromisso. Vamos até você (ou atendemos pelo WhatsApp), avaliamos o equipamento, explicamos o diagnóstico e informamos a solução indicada antes de executar.' },
  { q: 'E se eu não souber explicar o problema?',
    a: 'Sem problema. A maioria dos clientes chega dizendo só "tá lento" ou "tá estranho". Isso basta: fazemos o diagnóstico para identificar causa, risco e melhor correção.' },
  { q: 'Vocês podem perder minhas fotos ou arquivos?',
    a: 'De jeito nenhum. Antes de qualquer serviço que envolva mexer no sistema (como formatação), fazemos backup completo dos seus arquivos. Você acompanha o processo e só autorizamos a continuar depois que confirmamos que está tudo salvo.' },
  { q: 'Quanto tempo demora pra consertar?',
    a: 'Depende do serviço. Limpeza e remoção de vírus normalmente resolvemos em 1-2 horas na sua casa. Upgrades e formatação podem levar meio dia. Problemas maiores que precisam ir pra oficina: combinamos um prazo antes, geralmente 1-3 dias.' },
  { q: 'O serviço tem garantia?',
    a: 'Sim, todo serviço sai com garantia. Se o problema voltar ou algo der errado dentro do prazo, voltamos sem custo. Peças novas têm garantia do fabricante (normalmente 1 ano).' },
  { q: 'Vocês atendem idosos ou pessoas com pouca experiência?',
    a: 'Sim. Boa parte dos nossos clientes não tem familiaridade com computador. Explicamos de forma clara, mostramos o que foi feito e deixamos orientações simples para evitar o mesmo problema.' },
  { q: 'Precisa levar o computador até vocês?',
    a: 'Não precisa! Na maioria dos casos resolvemos na sua casa mesmo. Só em casos mais complexos (como troca de placa-mãe) levamos pra oficina — e buscamos e devolvemos pra você.' },
];

function FAQItem({ f, i, isOpen, onToggle }) {
  return (
    <div
      className={`faq-item ${isOpen ? 'is-open' : ''}`}
      style={{ ...faqStyles.item, ...(isOpen ? faqStyles.itemOpen : {}) }}
    >
      <button
        style={faqStyles.q}
        className="faq-q"
        onClick={onToggle}
        aria-expanded={isOpen}
        aria-controls={`faq-a-${i}`}
      >
        <span style={{ flex: 1 }}>{f.q}</span>
        <span
          className="faq-plus-wrap"
          style={{
            ...faqStyles.plusWrap,
            background: isOpen ? 'var(--navy-700)' : 'rgba(30,58,111,.08)',
            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
          }}
          aria-hidden="true"
        >
          {/* horizontal bar (always visible) */}
          <span style={{
            ...faqStyles.plusBar,
            width: 14, height: 2.5,
            background: isOpen ? 'white' : 'var(--navy-700)',
          }}/>
          {/* vertical bar (collapses when open to become minus) */}
          <span style={{
            ...faqStyles.plusBar,
            width: 2.5, height: 14,
            background: isOpen ? 'white' : 'var(--navy-700)',
            transform: isOpen ? 'scaleY(0)' : 'scaleY(1)',
          }}/>
        </span>
      </button>
      <div
        id={`faq-a-${i}`}
        className="faq-ans-wrap"
        style={{
          ...faqStyles.ansWrap,
          gridTemplateRows: isOpen ? '1fr' : '0fr',
          opacity: isOpen ? 1 : 0,
        }}
      >
        <div style={faqStyles.ansInner}>
          <div style={faqStyles.a}>{f.a}</div>
        </div>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={faqStyles.section} id="faq">
      <div className="container">
        <div style={faqStyles.header}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>
            <span className="dot"></span>
            Dúvidas frequentes
          </div>
          <h2 className="t-h2" style={{ marginBottom: 14 }}>Tudo que você precisa saber</h2>
          <p className="t-lead">
            As perguntas que mais ouvimos de quem chega até nós pela primeira vez.
          </p>
        </div>
        <div style={faqStyles.list}>
          {faqs.map((f, i) => (
            <FAQItem
              key={i}
              f={f}
              i={i}
              isOpen={open === i}
              onToggle={() => setOpen(open === i ? -1 : i)}
            />
          ))}
        </div>

        <div style={faqStyles.ctaBox}>
          <div className="t-h3" style={{ color: 'var(--navy-800)', marginBottom: 8 }}>
            Ainda tem dúvida?
          </div>
          <div className="t-body" style={{ marginBottom: 18 }}>
            Chama no WhatsApp. A gente responde de verdade, sem robô.
          </div>
          <a href={waLink()} target="_blank" rel="noopener" className="faq-cta" style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            background: 'var(--whatsapp)', color: 'white',
            padding: '15px 22px', borderRadius: 12, fontWeight: 700, fontSize: 15.5,
            boxShadow: '0 10px 24px rgba(37,211,102,.4)',
            transition: 'transform .2s ease, box-shadow .2s ease',
            minHeight: 52, maxWidth: '100%',
          }}>
            <IconWhatsApp size={20} color="white"/>
            Tirar dúvida pelo WhatsApp
          </a>
        </div>
      </div>
      <style>{`
        .faq-item { will-change: transform; }
        .faq-item:hover:not(.is-open) {
          background: #FAFBFD;
          border-color: var(--silver-300);
          transform: translateY(-1px);
        }
        .faq-item:hover .faq-plus-wrap { background: rgba(30,58,111,.15) !important; }
        .faq-q:active { transform: scale(.995); }
        .faq-q:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; border-radius: 12px; }
        .faq-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(37,211,102,.5); }
        .faq-cta:active { transform: translateY(0); }
        .is-open .faq-q { color: var(--navy-700); }

        @media (prefers-reduced-motion: reduce) {
          .faq-item, .faq-plus-wrap, .faq-ans-wrap, .faq-q { transition: none !important; }
        }
        @media (max-width: 560px) {
          .faq-q { padding: 16px 14px !important; gap: 10px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { FAQ });