/* global React, window */
const { useState: useState_NH, useEffect: useEffect_NH, useRef: useRef_NH } = React;

/* =========================================================
   Nav — sticky, condenses on scroll, IntersectionObserver
   tracks active section.
   ========================================================= */
function Nav({ activeSection }) {
  const { L, lang, setLang } = useLang();
  const [scrolled, setScrolled] = useState_NH(false);
  useEffect_NH(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav className={`nav-bar ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner">
        <a href="#top" className="nav-logo">
          <img src="assets/logo-teal-white.png" alt="Mahara Media" />
        </a>
        <div className="nav-links">
          {L.nav.links.map(l => (
            <a key={l.id}
               href={`#${l.id}`}
               className={`nav-link ${activeSection === l.id ? "active" : ""}`}>
              {l.label}
            </a>
          ))}
        </div>
        <div className="nav-right">
          <button className="lang-toggle"
                  onClick={() => setLang(lang === "en" ? "ar" : "en")}
                  aria-label="Switch language">
            <Icon name="globe" size={14} />
            <span>{L.switchTo}</span>
          </button>
          <Magnetic>
            <a href="#apply" className="btn btn-primary" style={{ padding: "11px 20px", fontSize: 14 }}>
              {L.nav.cta}
              <Icon name="arrow-right" size={14} />
            </a>
          </Magnetic>
        </div>
      </div>
    </nav>
  );
}

/* =========================================================
   VSL — Wistia iframe player wrapped in our brand styling
   ========================================================= */
const VSL_WISTIA_ID = "gfqz0oqme9";
function VSL({ label, time = "1:32" }) {
  React.useEffect(() => {
    // Player runtime + this specific media's embed bundle.
    const SRCS = [
      "https://fast.wistia.com/player.js",
      `https://fast.wistia.com/embed/${VSL_WISTIA_ID}.js`,
    ];
    SRCS.forEach((src, i) => {
      if (document.querySelector(`script[data-vsl="${src}"]`)) return;
      const s = document.createElement("script");
      s.src = src;
      s.async = true;
      if (i === 1) s.type = "module";
      s.setAttribute("data-vsl", src);
      document.body.appendChild(s);
    });
  }, []);
  return (
    <div className="vsl vsl-wistia" id="vsl">
      <span className="vsl-label">{label}</span>
      <div className="wistia-host" dangerouslySetInnerHTML={{
        __html: `
          <style>
            wistia-player[media-id='${VSL_WISTIA_ID}']:not(:defined) {
              background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/${VSL_WISTIA_ID}/swatch');
              display: block;
              filter: blur(5px);
              padding-top: 56.25%;
            }
          </style>
          <wistia-player media-id="${VSL_WISTIA_ID}" aspect="1.7777777777777777"></wistia-player>
        `
      }} />
    </div>
  );
}

/* =========================================================
   Hero
   ========================================================= */
function Hero() {
  const { L } = useLang();

  return (
    <header className="hero" id="top">
      <div className="container">
        <div className="hero-inner">
          <Reveal>
            <span className="pill">
              <span className="dot" />
              {L.hero.eyebrow}
            </span>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="h-display">
              {L.hero.headline[0]}<br/>
              <span className="grad">{L.hero.headline[1]}</span>
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p className="hero-sub">
              {L.hero.sub}
            </p>
          </Reveal>
          <Reveal delay={220} style={{ width: "100%", display: "flex", justifyContent: "center" }}>
            <VSL label={L.hero.vslLabel} time="1:32" />
          </Reveal>

          <Reveal delay={280}>
            <StatsStrip stats={L.hero.stats} />
          </Reveal>
          <Reveal delay={340}>
            <div className="hero-ctas">
              <Magnetic>
                <a href="#apply" className="btn btn-primary btn-lg">
                  {L.hero.ctaPrimary}
                  <Icon name="arrow-right" size={16} />
                </a>
              </Magnetic>
              <a href="#vsl" className="btn btn-ghost btn-lg">
                <Icon name="play" size={14} strokeWidth={1.8} />
                {L.hero.ctaSecondary}
              </a>
            </div>
          </Reveal>
          <Reveal delay={400}>
            <div className="hero-trust mono upper">{L.hero.trust}</div>
          </Reveal>
        </div>
      </div>
    </header>
  );
}

function StatsStrip({ stats }) {
  return (
    <div className="stats-strip">
      {stats.map((s, i) => (
        <div className="stat-cell" key={i}>
          <div className="stat-value mono">
            <CountUp value={s.value} suffix={s.suffix} />
          </div>
          <div className="stat-label">{s.label}</div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Nav, Hero, VSL, StatsStrip });