// sections-c.jsx — FAQ, Final CTA, Footer, WhatsApp float

// ---------------------------------------------------------------------------
// FAQ
// ---------------------------------------------------------------------------
function FAQ({ t }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section container">
      <div className="sec-head center">
        <span className="eyebrow reveal">{t.faq.eyebrow}</span>
        <h2 className="h-section reveal d1">{t.faq.title}</h2>
      </div>

      <div className="faq">
        {t.faq.items.map((it, i) => (
          <div key={i} className={"faq-item reveal " + (open === i ? "open" : "")}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span>{it.q}</span>
              <span className="faq-toggle">
                <window.I.plus />
              </span>
            </button>
            <div className="faq-a">
              <p style={{ margin: 0 }}>{it.a}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// Final CTA
// ---------------------------------------------------------------------------
function FinalCTA({ t, waLink }) {
  return (
    <section id="contact" className="section container">
      <div className="final-cta reveal">
        <h2>{t.finalCta.title}</h2>
        <p>{t.finalCta.sub}</p>
        <div className="hero-ctas">
          <a href={waLink} target="_blank" rel="noopener" className="btn btn-gold btn-lg">
            <window.I.whatsapp />
            {t.finalCta.waCta}
          </a>
          <a href="#portfolio" className="btn btn-ghost btn-lg">
            {t.finalCta.examplesCta}
          </a>
        </div>
        <div className="final-contacts">
          <span className="final-contact">
            <window.I.whatsapp width={14} height={14} />
            {t.finalCta.phone}
          </span>
          <span className="final-contact">
            <window.I.mail />
            {t.finalCta.email}
          </span>
          <span className="final-contact">
            <window.I.ig />
            {t.finalCta.instagram}
          </span>
          <span className="final-contact">
            <window.I.fb />
            {t.finalCta.facebook}
          </span>
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// Footer
// ---------------------------------------------------------------------------
function Footer({ t, lang, waLink }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <a href="#home" className="nav-logo" style={{ marginBottom: 4 }}>
              <span className="nav-logo-mark">{lang === "ar" ? "ن" : "N"}</span>
              <span>{t.nav.brand}</span>
            </a>
            <p>{t.footer.desc}</p>
            <div className="footer-social" style={{ marginTop: 8 }}>
              <a href={waLink} target="_blank" rel="noopener" aria-label="WhatsApp"><window.I.whatsapp width={14} height={14} /></a>
              <a href="#" aria-label="Instagram" onClick={(e) => e.preventDefault()}><window.I.ig /></a>
              <a href="#" aria-label="Facebook" onClick={(e) => e.preventDefault()}><window.I.fb /></a>
              <a href={"mailto:" + t.finalCta.email} aria-label="Email"><window.I.mail /></a>
            </div>
          </div>

          <div className="footer-col">
            <h5>{t.footer.colServices}</h5>
            <a href="#services">{t.footer.links.catalog}</a>
            <a href="#services">{t.footer.links.menu}</a>
            <a href="#services">{t.footer.links.landing}</a>
            <a href="#services">{t.footer.links.seo}</a>
          </div>

          <div className="footer-col">
            <h5>{t.footer.colCompany}</h5>
            <a href="#home">{t.footer.links.about}</a>
            <a href="#portfolio">{t.footer.links.portfolio}</a>
            <a href="#pricing">{t.footer.links.pricing}</a>
            <a href="#faq">{t.footer.links.faq}</a>
          </div>

          <div className="footer-col">
            <h5>{t.footer.colContact}</h5>
            <a href={waLink} target="_blank" rel="noopener">{t.finalCta.phone}</a>
            <a href={"mailto:" + t.finalCta.email}>{t.finalCta.email}</a>
            <a href="#" onClick={(e) => e.preventDefault()}>{t.finalCta.instagram}</a>
            <a href="#" onClick={(e) => e.preventDefault()}>{t.finalCta.facebook}</a>
          </div>
        </div>

        <div className="footer-bottom">
          <span>{t.footer.copy}</span>
          <span style={{ fontFamily: "var(--ff-en)", color: "var(--gold-deep)" }}>{t.footer.tagline}</span>
        </div>
      </div>
    </footer>
  );
}

// ---------------------------------------------------------------------------
// WhatsApp float
// ---------------------------------------------------------------------------
function WhatsAppFloat({ waLink, label }) {
  return (
    <a className="wa-float" href={waLink} target="_blank" rel="noopener" aria-label={label}>
      <window.I.whatsapp width={26} height={26} />
    </a>
  );
}

Object.assign(window, { FAQ, FinalCTA, Footer, WhatsAppFloat });