/* global React, window */
const { useState, useEffect, useRef } = React;

// =====================================================================
// Booking URL — shared by every "schedule a session" CTA on the site.
// Update here once and every CTA picks it up.
// =====================================================================
window.IK_CALENDAR_URL = "https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ1KrSO6M56tFAPIoRvhtvW9bFt7edMZkeXfvT109y_ggzqfhXq6pGxR0gRzCdk0YkGWb6hLLpia";

// =====================================================================
// i18n hook — shared state via custom event so EVERY component using
// useV4 re-renders in sync when the language toggle is clicked anywhere.
// =====================================================================
window.__IK_LANG_EVENT = "ik4-lang-change";
window.__IK_LANG = window.__IK_LANG ||
  (typeof localStorage !== "undefined" && localStorage.getItem("ik4_lang")) ||
  "es";

window.useV4 = function useV4() {
  const [lang, setLangState] = useState(window.__IK_LANG);

  useEffect(() => {
    const handler = (e) => {
      const next = (e && e.detail && e.detail.lang) || window.__IK_LANG;
      setLangState(next);
    };
    window.addEventListener(window.__IK_LANG_EVENT, handler);
    // If global value changed before this listener attached, catch up.
    if (window.__IK_LANG !== lang) setLangState(window.__IK_LANG);
    return () => window.removeEventListener(window.__IK_LANG_EVENT, handler);
  }, []);

  useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  const setLang = (next) => {
    if (next === window.__IK_LANG) return;
    window.__IK_LANG = next;
    try { localStorage.setItem("ik4_lang", next); } catch (_) {}
    window.dispatchEvent(new CustomEvent(window.__IK_LANG_EVENT, { detail: { lang: next } }));
  };

  const t = window.I18N_V4[lang];
  return { lang, setLang, t };
};

// =====================================================================
// Reveal observer — toggles `is-in` on [data-reveal] / [data-stagger]
// =====================================================================
window.useReveal = function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll("[data-reveal], [data-stagger], .kt-line");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15, rootMargin: "0px 0px -8% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
};

// =====================================================================
// Animated counter — counts when in view
// =====================================================================
window.CountUp = function CountUp({ to, prefix = "", suffix = "", duration = 1400 }) {
  const ref = useRef(null);
  const [val, setVal] = useState(0);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    let raf, started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started) {
          started = true;
          const t0 = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - t0) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(Math.round(to * eased));
            if (p < 1) raf = requestAnimationFrame(tick);
          };
          raf = requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => { io.disconnect(); cancelAnimationFrame(raf); };
  }, [to, duration]);
  return <span ref={ref} className="count-num">{prefix}{val}{suffix}</span>;
};

// =====================================================================
// Nav (sticky, with services dropdown, lang toggle)
// =====================================================================
window.V4Nav = function V4Nav({ active = "home" }) {
  const { lang, setLang, t } = window.useV4();
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Lock body scroll + close on Escape while the drawer is open.
  useEffect(() => {
    if (!menuOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
  }, [menuOpen]);

  // Auto-close the drawer if the viewport grows past mobile.
  useEffect(() => {
    const mq = window.matchMedia("(min-width: 881px)");
    const onChange = (e) => { if (e.matches) setMenuOpen(false); };
    mq.addEventListener ? mq.addEventListener("change", onChange) : mq.addListener(onChange);
    return () => {
      mq.removeEventListener ? mq.removeEventListener("change", onChange) : mq.removeListener(onChange);
    };
  }, []);

  const close = () => setMenuOpen(false);

  return (
    <nav className={"nav " + (scrolled ? "is-scrolled " : "") + (menuOpen ? "is-menu-open" : "")}>
      <div className="wrap nav__row">
        <a href="index.html" className="nav__brand" onClick={close}>
          <img src="assets/logo-inteli-k.svg" alt="Inteli-K" />
        </a>

        <div className="nav__links">
          <a href="index.html" className={"nav__link " + (active === "home" ? "is-active" : "")}>{t.nav.home}</a>

          <div className="nav__group">
            <a href="servicios.html" className={"nav__link nav__link--has-menu " + (active === "services" ? "is-active" : "")}>{t.nav.services}</a>
            <div className="nav__menu">
              <a href="servicios.html#s1" className="nav__menu-item">
                <div className="nav__menu-item-t">{t.nav.services_d1}</div>
                <div className="nav__menu-item-s">{t.nav.services_d1s}</div>
              </a>
              <a href="servicios.html#s2" className="nav__menu-item">
                <div className="nav__menu-item-t">{t.nav.services_d2}</div>
                <div className="nav__menu-item-s">{t.nav.services_d2s}</div>
              </a>
              <a href="servicios.html#s4" className="nav__menu-item">
                <div className="nav__menu-item-t">{t.nav.services_d3}</div>
                <div className="nav__menu-item-s">{t.nav.services_d3s}</div>
              </a>
            </div>
          </div>

          <a href="plataformas.html" className={"nav__link nav__link--platforms " + (active === "platforms" ? "is-active" : "")}>
            <span className="nav__link-dot" aria-hidden="true" />
            {t.nav.platforms}
          </a>
          <a href="nosotros.html" className={"nav__link " + (active === "about" ? "is-active" : "")}>{t.nav.about}</a>
          <a href="soluciones.html" className={"nav__link " + (active === "solutions" ? "is-active" : "")}>{t.nav.resources}</a>
          <a href="apps.html" className={"nav__link " + (active === "apps" ? "is-active" : "")}>{t.nav.apps}</a>
        </div>

        <div className="nav__right">
          <div className="lang-toggle" role="group" aria-label="language">
            <button className={lang === "es" ? "is-active" : ""} onClick={() => setLang("es")}>ES</button>
            <button className={lang === "en" ? "is-active" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <a href={window.IK_CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-primary nav__cta">
            <span className="nav__cta-label">{t.nav.cta}</span>
            <span className="arr">→</span>
          </a>
          <button
            type="button"
            className="nav__burger"
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
            aria-controls="nav-drawer"
            onClick={() => setMenuOpen(!menuOpen)}
          >
            <span className="nav__burger-lines" aria-hidden="true">
              <span /><span /><span />
            </span>
          </button>
        </div>
      </div>

      {/* Mobile drawer — fullscreen below the bar, slides down on open. */}
      <div
        id="nav-drawer"
        className="nav__drawer"
        aria-hidden={!menuOpen}
      >
        <div className="nav__drawer-inner" role="dialog" aria-label="Menu">
          <a href="index.html" className={"nav__drawer-link " + (active === "home" ? "is-active" : "")} onClick={close}>
            {t.nav.home}
          </a>
          <div className="nav__drawer-group">
            <a href="servicios.html" className={"nav__drawer-link " + (active === "services" ? "is-active" : "")} onClick={close}>
              {t.nav.services}
            </a>
            <div className="nav__drawer-sub">
              <a href="servicios.html#s1" className="nav__drawer-sublink" onClick={close}>{t.nav.services_d1}</a>
              <a href="servicios.html#s2" className="nav__drawer-sublink" onClick={close}>{t.nav.services_d2}</a>
              <a href="servicios.html#s4" className="nav__drawer-sublink" onClick={close}>{t.nav.services_d3}</a>
            </div>
          </div>
          <a href="plataformas.html" className={"nav__drawer-link nav__drawer-link--platforms " + (active === "platforms" ? "is-active" : "")} onClick={close}>
            <span className="nav__link-dot" aria-hidden="true" />
            {t.nav.platforms}
          </a>
          <a href="nosotros.html" className={"nav__drawer-link " + (active === "about" ? "is-active" : "")} onClick={close}>
            {t.nav.about}
          </a>
          <a href="soluciones.html" className={"nav__drawer-link " + (active === "solutions" ? "is-active" : "")} onClick={close}>{t.nav.resources}</a>
          <a href="apps.html" className={"nav__drawer-link " + (active === "apps" ? "is-active" : "")} onClick={close}>{t.nav.apps}</a>
          <div className="nav__drawer-foot">
            <a href={window.IK_CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-primary nav__drawer-cta" onClick={close}>
              {t.nav.cta} <span className="arr">→</span>
            </a>
          </div>
        </div>
      </div>
    </nav>
  );
};

// =====================================================================
// Footer
// =====================================================================
window.V4Footer = function V4Footer() {
  const { t, lang } = window.useV4();
  const contactSubject = encodeURIComponent(lang === "en" ? "Contact from website" : "Contacto desde sitio web");
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div className="footer__brand">
            <img src="assets/logo-inteli-k-white.svg" alt="Inteli-K" />
            <p className="footer__tag">{t.footer.tagline}</p>
          </div>
          <div className="footer__col">
            <h4>{t.footer.col1}</h4>
            <ul>
              <li><a href="servicios.html#s1">{t.nav.services_d1}</a></li>
              <li><a href="servicios.html#s2">{t.nav.services_d2}</a></li>
              <li><a href="servicios.html#s4">{t.nav.services_d3}</a></li>
              <li><a href="plataformas.html">{t.nav.platforms}</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>{t.footer.col2}</h4>
            <ul>
              <li><a href="plataformas.html#platforms-grid">monday.com</a></li>
              <li><a href="plataformas.html#platforms-grid">Freshworks</a></li>
              <li><a href="plataformas.html#platforms-grid">Aircall</a></li>
              <li><a href="plataformas.html#platforms-grid">Make</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>{t.footer.col3}</h4>
            <ul>
              <li><a href="nosotros.html">{t.nav.about}</a></li>
              <li><a href="soluciones.html">{t.nav.resources}</a></li>
              <li><a href="apps.html">{t.nav.apps}</a></li>
              <li><a href={`mailto:soporte@inteli-k.com?subject=${contactSubject}`}>{t.footer.contact}</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>{t.footer.contact}</h4>
            <ul>
              <li style={{ color: "rgba(255,255,255,.6)", fontSize: 13.5 }}>{t.footer.addr_mx}</li>
              <li style={{ color: "rgba(255,255,255,.6)", fontSize: 13.5 }}>{t.footer.addr_us}</li>
            </ul>
          </div>
        </div>
        <div className="footer__bot">
          <div>© {new Date().getFullYear()} Inteli-K. {t.footer.rights}</div>
          <div className="footer__bot-links">
            <a href="privacy.html">{t.footer.privacy}</a>
            <a href="terms.html">{t.footer.terms}</a>
          </div>
        </div>
      </div>
    </footer>
  );
};