// ============= FAQ + FINAL CTA + FOOTER =============
function Faq() {
  const { t } = useApp();
  const items = t("faq.items") || [];
  const [open, setOpen] = useState(0);
  return (
    <section className="section">
      <div className="wrap">
        <SecHead eyebrow={t("faq.eyebrow")} t1={t("faq.title1")} center />
        <div className="faq">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <Reveal key={i} className={`qa ${isOpen ? "open" : ""}`} delay={i * 40}>
                <button className="qa__q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  {it.q}
                  <span className="ico"><IconChevD /></span>
                </button>
                <div className="qa__a">
                  <div className="qa__a-wrap">
                    <div className="qa__a-in">{it.a}</div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

const CTA_ICONS = { bolt: <IconBolt />, shield: <IconShield />, msg: <IconMsg />, chart: <IconChart /> };
function FinalCta() {
  const { t, ctaHref, ctaLabel } = useApp();
  const perks = t("finalcta.perks") || [];
  const notes = t("finalcta.notes") || [];
  return (
    <section className="section section--tight">
      <div className="wrap">
        <Reveal className="finalcta">
          <div className="finalcta__grid" aria-hidden="true"></div>
          <span className="finalcta__badge">{t("finalcta.badge")}</span>
          <h2 className="finalcta__t">{t("finalcta.t")}</h2>
          <p className="finalcta__s">{t("finalcta.s")}</p>
          <div className="finalcta__perks">
            {perks.map((p, i) => (
              <div key={i} className="cperk">
                <span className="cperk__ico">{CTA_ICONS[p.ico] || <IconBolt />}</span>
                <div className="cperk__t">{p.t}</div>
                <div className="cperk__d">{p.d}</div>
              </div>
            ))}
          </div>
          <div className="finalcta__cta">
            <a href={ctaHref} className="btn btn--primary btn--lg">{ctaLabel("finalcta.cta")}<IconArrUp style={{ transform: "rotate(45deg)" }} /></a>
            <a href="#interface" className="btn btn--ghost btn--lg"><IconPlay />{t("finalcta.secondary")}</a>
          </div>
          <div className="finalcta__notes">
            {notes.map((n, i) => <span key={i} className="finalcta__note"><IconCheck />{n}</span>)}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  const { t } = useApp();
  const cols = t("footer.cols") || [];
  const ICO = { tg: <IconTG />, yt: <IconYT /> };
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div className="footer__about">
            <a href="#top" className="brand">
              <span className="brand__mark"><IconLogo /></span>
              <span><span className="brand__name">Outforge</span><span className="brand__tag">Lead Engine</span></span>
            </a>
            <p className="footer__desc">{t("footer.desc")}</p>
          </div>
          <div className="footer__cols">
            {cols.map((col, i) => (
              <div key={i} className="footer__col">
                <div className="footer__col-t">{col.t}</div>
                {col.l.map(([label, href, ico], k) => (
                  <a key={k} href={href} className={`footer__lnk${ico ? " footer__lnk--ico" : ""}`}>
                    {ico ? <span className={`footer__lico footer__lico--${ico}`}>{ICO[ico]}</span> : null}{label}
                  </a>
                ))}
              </div>
            ))}
          </div>
        </div>
        <div className="footer__bottom">
          <span className="footer__copy">{t("footer.copy")}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Faq, FinalCta, Footer });