/* FAQ */

const FAQ = () => {
  const { t } = useLang();
  return (
    <>
      <PageHero eyebrow={t.faq.eyebrow} title={t.faq.title} sub={t.faq.sub} />
      <section className="section-tight">
        <div className="container">
          {t.faq.items.map((item, index) => (
            <details key={item.q} open={index === 0} style={{ borderTop: '1px solid var(--border)', padding: '20px 0' }}>
              <summary className="row-between">
                <strong style={{ fontSize: '1.05rem' }}>{item.q}</strong>
                <span className="mono-sm">{String(index + 1).padStart(2, '0')}</span>
              </summary>
              <p className="body-muted" style={{ maxWidth: 780 }}>{item.a}</p>
            </details>
          ))}
        </div>
      </section>
      <FinalCta />
    </>
  );
};

window.FAQ = FAQ;