const FAQ = () => {
  const items = [
    { q: t('faq.q1'), a: t('faq.a1') },
    { q: t('faq.q2'), a: t('faq.a2') },
    { q: t('faq.q3'), a: t('faq.a3') },
    { q: t('faq.q4'), a: t('faq.a4') },
    { q: t('faq.q5'), a: t('faq.a5') },
    { q: t('faq.q6'), a: t('faq.a6') },
    { q: t('faq.q7'), a: t('faq.a7') },
    { q: t('faq.q8'), a: t('faq.a8') },
  ];

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

  return (
    <section id="faq" style={{ background:'var(--bg)' }}>
      <div className="container-tight">
        <div style={{ display:'grid', gridTemplateColumns:'320px 1fr', gap: 64 }}>
          <div>
            <div className="eyebrow"><span className="dot" /> {t('faq.eyebrow')}</div>
            <h2 style={{ marginTop: 18 }}>{t('faq.h2_part1')}<span className="serif" style={{ fontStyle:'italic' }}>{t('faq.h2_part2')}</span></h2>
            <p style={{ color:'var(--muted)', marginTop: 18, fontSize: 15 }}>
              {t('faq.contact_part1')}<a href="mailto:hello@mailtwin.ai" style={{ color:'var(--purple)', textDecoration:'underline' }}>hello@mailtwin.ai</a>{t('faq.contact_part2')}
            </p>
          </div>
          <div>
            {items.map((it, i) => (
              <div key={i} style={{ borderTop: i === 0 ? '1px solid var(--line)' : 'none', borderBottom:'1px solid var(--line)' }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  width:'100%', textAlign:'left', background:'none', border:'none',
                  padding:'22px 0', display:'flex', alignItems:'center', gap: 16,
                }}>
                  <span style={{ flex: 1, fontSize: 17, fontWeight: 600, color:'var(--ink)' }}>{it.q}</span>
                  <span style={{ color:'var(--purple)', flexShrink: 0 }}>
                    {open === i ? <Icons.Minus /> : <Icons.Plus />}
                  </span>
                </button>
                {open === i && (
                  <div style={{ paddingBottom: 24, color:'var(--muted)', fontSize: 15, lineHeight: 1.65, maxWidth: 640 }}>
                    {it.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;