/* ============================================================
   Agency BRN — Growth Systems + FAQ sections
   ============================================================ */

/* ---------- Growth Systems ---------- */
function GrowthSystems() {
  const { t } = React.useContext(window.LanguageContext);
  const icons = [
    <Icon.ShieldCheck />,
    <Icon.Crm />,
    <Icon.Bolt />,
    <Icon.Gmaps />,
    <Icon.Sparkle />,
    <Icon.BarChart />,
  ];
  return (
    <section className="section section--light" id="growth" style={{ background: "linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%)" }}>
      <div className="container">
        <div className="section__header reveal" style={{ maxWidth: 820 }}>
          <span className="eyebrow"><span className="dot" /> {t.growth.eyebrow}</span>
          <h2>
            {t.growth.h2A}
            <span className="text-grad">{t.growth.h2Grad}</span>
            {t.growth.h2B}
          </h2>
          <p className="lede">{t.growth.lede}</p>
        </div>

        <div className="growth-grid">
          {t.growth.items.map((item, i) => (
            <article key={i} className="growth-card reveal" data-delay={(i % 3) + 1}>
              <div className="growth-card__top">
                <span className="growth-card__icon">{icons[i]}</span>
                <span className="growth-card__num">0{i + 1}</span>
              </div>
              <h3 className="growth-card__title">{item.title}</h3>
              <p className="growth-card__body">{item.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQSection() {
  const { t } = React.useContext(window.LanguageContext);
  const [open, setOpen] = React.useState(0);

  const faqSchema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": t.faq.items.map(item => ({
      "@type": "Question",
      "name": item.q,
      "acceptedAnswer": { "@type": "Answer", "text": item.a }
    })),
  };

  return (
    <section className="section section--light" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div className="reveal">
            <span className="eyebrow"><span className="dot" /> {t.faq.eyebrow}</span>
            <h2 style={{ marginTop: 18 }}>{t.faq.h2}</h2>
            <p className="lede" style={{ marginTop: 22, maxWidth: 360 }}>{t.faq.lede}</p>
            <a href="#contact" className="btn btn--ghost" style={{ marginTop: 28 }}>
              {t.cta}
              <Icon.ArrowRight className="arrow" width="14" height="14" />
            </a>
          </div>

          <div className="faq-list reveal" data-delay="1">
            {t.faq.items.map((item, i) => (
              <details
                key={i}
                className="faq-item"
                open={open === i}
                onToggle={(e) => {
                  if (e.target.open) setOpen(i);
                }}
              >
                <summary>
                  <span>{item.q}</span>
                  <span className="faq-item__chevron"><Icon.ArrowRight width="14" height="14" /></span>
                </summary>
                <div className="faq-item__ans">{item.a}</div>
              </details>
            ))}
          </div>
        </div>

        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
        />
      </div>
    </section>
  );
}

window.GrowthSystems = GrowthSystems;
window.FAQSection = FAQSection;

/* ---------- Sticky mobile CTA ---------- */
function StickyMobileCta() {
  const { t } = React.useContext(window.LanguageContext);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      // Show after scrolling past hero, hide near footer/contact
      const y = window.scrollY;
      const doc = document.documentElement;
      const docH = doc.scrollHeight - window.innerHeight;
      const contact = document.getElementById("contact");
      const contactTop = contact ? contact.getBoundingClientRect().top + window.scrollY : Infinity;
      setVisible(y > 600 && y < contactTop - 200 && y < docH - 400);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className={"sticky-cta" + (visible ? " is-visible" : "")}>
      <a href="#contact" className="btn btn--primary">
        {t.cta}
        <window.Icon.ArrowRight className="arrow" />
      </a>
    </div>
  );
}

window.StickyMobileCta = StickyMobileCta;

/* ---------- Animated counter hook (count-up on view) ---------- */
window.useCountUp = function(target, duration = 1400, decimals = 0) {
  const [value, setValue] = React.useState(0);
  const ref = React.useRef(null);
  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  React.useEffect(() => {
    if (reduced) { setValue(target); return; }
    const el = ref.current;
    if (!el) return;
    let started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setValue(target * eased);
            if (p < 1) requestAnimationFrame(tick);
            else setValue(target);
          };
          requestAnimationFrame(tick);
          io.disconnect();
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [target, duration, reduced]);

  const formatted = decimals > 0 ? value.toFixed(decimals) : Math.round(value).toLocaleString();
  return [formatted, ref];
};