// sections-a.jsx — Nav, Hero, Problem, Services
// Components are attached to window at the end to share across babel scripts.

// ---------------------------------------------------------------------------
// useReveal — IntersectionObserver-based scroll reveal
// ---------------------------------------------------------------------------
function useReveal() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    el.querySelectorAll(".reveal").forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

// ---------------------------------------------------------------------------
// Nav
// ---------------------------------------------------------------------------
function Nav({ t, lang, onLangToggle, waLink }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { href: "#home", label: t.nav.home },
    { href: "#services", label: t.nav.services },
    { href: "#portfolio", label: t.nav.portfolio },
    { href: "#pricing", label: t.nav.pricing },
    { href: "#faq", label: t.nav.faq },
    { href: "#contact", label: t.nav.contact },
  ];

  return (
    <header className={"nav " + (scrolled ? "scrolled" : "")}>
      <div className="container nav-inner">
        <a href="#home" className="nav-logo" aria-label={t.nav.brand}>
          <span className="nav-logo-mark">{lang === "ar" ? "ن" : "N"}</span>
          <span>{t.nav.brand}</span>
        </a>

        <nav className="nav-links">
          {links.map((l) => (
            <a key={l.href} href={l.href} className="nav-link">
              {l.label}
            </a>
          ))}
        </nav>

        <div className="nav-actions">
          <button className="lang-toggle" onClick={onLangToggle} aria-label="Toggle language">
            <span className="dot" />
            <window.I.globe style={{ marginInlineEnd: 6 }} />
            <span>{t.nav.langLabel}</span>
          </button>
          <a href={waLink} target="_blank" rel="noopener" className="btn btn-gold btn-sm" style={{ display: "none" }}>
            <window.I.whatsapp /> {t.nav.wa}
          </a>
          <a href={waLink} target="_blank" rel="noopener" className="btn btn-primary btn-sm hide-mobile">
            <window.I.whatsapp width={15} height={15} /> {t.nav.wa}
          </a>
          <button className="mobile-menu-btn" onClick={() => setOpen((v) => !v)} aria-label="Menu">
            {open ? <window.I.close /> : <window.I.menu />}
          </button>
        </div>
      </div>

      <div className={"mobile-menu " + (open ? "open" : "")}>
        {links.map((l) => (
          <a key={l.href} href={l.href} className="nav-link" onClick={() => setOpen(false)}>
            {l.label}
          </a>
        ))}
        <a href={waLink} target="_blank" rel="noopener" className="btn btn-gold" style={{ marginTop: 16, alignSelf: "flex-start" }}>
          <window.I.whatsapp /> {t.nav.wa}
        </a>
      </div>
    </header>
  );
}

// ---------------------------------------------------------------------------
// MockBrowserCard — used in the hero stack
// ---------------------------------------------------------------------------
function MockBrowserCard({ url, img, accentRow }) {
  return (
    <>
      <div className="browser-chrome">
        <div className="browser-dots">
          <span className="browser-dot" />
          <span className="browser-dot" />
          <span className="browser-dot" />
        </div>
        <div className="browser-url">{url}</div>
      </div>
      <img className="preview-img" src={img} alt="" loading="lazy" />
      <div className="preview-body">
        <div className="preview-row w-80" />
        <div className="preview-row w-60" />
        {accentRow && <div className="preview-row w-40" />}
      </div>
    </>
  );
}

// ---------------------------------------------------------------------------
// Hero
// ---------------------------------------------------------------------------
function Hero({ t, waLink }) {
  return (
    <section id="home" className="hero container">
      <div className="hero-grid">
        <div>
          <div className="hero-eyebrow-row reveal">
            <span className="eyebrow">
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "currentColor", opacity: .7 }} />
              {t.hero.eyebrow}
            </span>
          </div>

          <h1 className="h-display hero-headline reveal d1">
            {t.hero.headlinePre}{" "}
            <span className="gold" style={{ fontStyle: "italic", fontWeight: 500 }}>
              {t.hero.headlineHi}
            </span>
          </h1>

          <p className="lede hero-sub reveal d2">{t.hero.sub}</p>

          <div className="hero-ctas reveal d3">
            <a href={waLink} target="_blank" rel="noopener" className="btn btn-primary btn-lg">
              {t.hero.ctaPrimary}
              <window.I.arrow style={{ transform: t.dir === "rtl" ? "scaleX(-1)" : "none" }} />
            </a>
            <a href="#portfolio" className="btn btn-ghost btn-lg">
              {t.hero.ctaSecondary}
            </a>
          </div>

          <div className="hero-trust reveal d4">
            <span className="hero-trust-item">
              <window.I.bolt width={16} height={16} />
              {t.hero.trust1}
            </span>
            <span className="hero-trust-item">
              <window.I.phone width={16} height={16} />
              {t.hero.trust2}
            </span>
            <span className="hero-trust-item">
              <window.I.whatsapp width={14} height={14} />
              {t.hero.trust3}
            </span>
          </div>
        </div>

        <div className="hero-mock reveal d2">
          <div className="hero-mock-bg" />
          <div className="mock-card c-back">
            <MockBrowserCard
              url={t.hero.mockUrl3}
              img="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=800&q=60"
            />
          </div>
          <div className="mock-card c-mid">
            <MockBrowserCard
              url={t.hero.mockUrl1}
              img="https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=800&q=60"
            />
          </div>
          <div className="mock-card c-front">
            <MockBrowserCard
              url={t.hero.mockUrl2}
              img="https://images.unsplash.com/photo-1511920170033-f8396924c348?auto=format&fit=crop&w=800&q=60"
              accentRow
            />
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// Problem
// ---------------------------------------------------------------------------
function Problem({ t }) {
  const icons = [window.I.scatter, window.I.chat, window.I.badge, window.I.phone];
  return (
    <section className="section container">
      <div className="sec-head">
        <span className="eyebrow reveal">{t.problem.eyebrow}</span>
        <h2 className="h-section reveal d1">{t.problem.title}</h2>
        <p className="lede reveal d2">{t.problem.sub}</p>
      </div>

      <div className="problem-grid">
        {t.problem.items.map((it, i) => {
          const Icon = icons[i] || window.I.scatter;
          return (
            <div key={i} className={"problem-card reveal d" + Math.min(i + 1, 4)}>
              <div className="problem-icon"><Icon /></div>
              <h3 className="h-card">{it.t}</h3>
              <p style={{ margin: 0, color: "var(--ink-3)", fontSize: 14.5, lineHeight: 1.6 }}>{it.d}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// Services
// ---------------------------------------------------------------------------
function Services({ t }) {
  const icons = [
    window.I.grid, window.I.menuIcon, window.I.cart, window.I.card,
    window.I.rocket, window.I.link, window.I.refresh, window.I.search,
  ];
  return (
    <section id="services" className="section container">
      <div className="sec-head">
        <span className="eyebrow reveal">{t.services.eyebrow}</span>
        <h2 className="h-section reveal d1">{t.services.title}</h2>
        <p className="lede reveal d2">{t.services.sub}</p>
      </div>
      <div className="services-grid">
        {t.services.items.map((it, i) => {
          const Icon = icons[i] || window.I.grid;
          return (
            <div key={i} className={"service-card reveal d" + ((i % 4) + 1)}>
              <div className="service-icon"><Icon /></div>
              <h3 className="h-card" style={{ fontSize: 17 }}>{it.t}</h3>
              <p style={{ margin: 0, color: "var(--ink-3)", fontSize: 14, lineHeight: 1.55 }}>{it.d}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Problem, Services, useReveal, MockBrowserCard });