/* global React */
// Nav (top) + Hero (intro) + KeyNav (right-side keycaps)

const { useState: useStateT, useEffect: useEffectT, useRef: useRefT } = React;

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const go = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" });
  };
  const { Button } = window.AmreenShezanDesignSystem_5f91c9;
  return (
    <nav className="nav" data-scrolled={scrolled ? "1" : "0"}>
      <div className="nav-mark" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} style={{ cursor: "pointer" }}>
        Amreen<span className="dot">.</span>
      </div>
      <div className="nav-links">
        <a onClick={() => go("work")}>Cases</a>
        <a onClick={() => go("toolkit")}>Tools</a>
        <a onClick={() => go("companies")}>Brands</a>
        <a onClick={() => go("about")}>About</a>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <span className="hud hud-dim" style={{ fontSize: "0.72rem" }}>PORTFOLIO_v2026</span>
        <Button size="sm" onClick={() => go("contact")} iconRight={<i data-lucide="arrow-up-right" />}>Contact</Button>
      </div>
    </nav>
  );
}

/* TV-static that resolves into the GIF on load */
function StaticResolve() {
  const ref = useRefT(null);
  useEffectT(() => {
    const canvas = ref.current; if (!canvas) return;
    const motionOff = document.body.dataset.motion === "0";
    const ctx = canvas.getContext("2d");
    const W = 180, H = 172; canvas.width = W; canvas.height = H;
    if (motionOff) { canvas.style.opacity = 0; return; }
    let raf, start = 0;
    const DUR = 1500;
    function draw(now) {
      if (!start) start = now;
      const t = Math.min(1, (now - start) / DUR);
      const img = ctx.createImageData(W, H);
      const d = img.data;
      for (let i = 0; i < d.length; i += 4) {
        const v = (Math.random() * 255) | 0;
        d[i] = v; d[i + 1] = v; d[i + 2] = v; d[i + 3] = 255;
      }
      ctx.putImageData(img, 0, 0);
      canvas.style.opacity = (1 - t) * 0.92;
      if (t < 1) raf = requestAnimationFrame(draw);
      else { canvas.style.opacity = 0; }
    }
    raf = requestAnimationFrame(draw);
    return () => cancelAnimationFrame(raf);
  }, []);
  return <canvas className="gif-static" ref={ref} style={{ width: "100%", height: "100%" }} />;
}

function Hero() {
  const { Button } = window.AmreenShezanDesignSystem_5f91c9;
  const go = (id) => { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" }); };
  return (
    <header id="top" style={{ paddingTop: "clamp(116px, 15vh, 180px)", paddingBottom: "var(--section-y)" }}>
      <div className="wrap">
        <div className="intro-grid">
          {/* NAME + tag — top-left */}
          <div className="intro-name" data-reveal>
            <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 18 }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--neon-seagrass)", boxShadow: "var(--glow-seagrass)" }} />
              <span className="hud">Brand &amp; Creative Strategy</span>
            </div>
            <h1 className="display" style={{ fontSize: "clamp(3rem, 7.4vw, 6.6rem)", margin: 0 }}>
              Amreen<br /><span className="ink-grad">Shezan.</span>
            </h1>
          </div>

          {/* GIF — centered, uncropped, blended */}
          <div className="intro-gif" data-reveal style={{ "--reveal-delay": "120ms" }}>
            <div className="gif-stage">
              <div className="gif-glow" />
              <img src="assets/portrait.gif" alt="Amreen Shezan" />
              <StaticResolve />
            </div>
          </div>

          {/* BIO + buttons — bottom-right */}
          <div className="intro-bio" data-reveal style={{ "--reveal-delay": "200ms" }}>
            <p style={{ fontSize: "clamp(1.15rem, 1.8vw, 1.45rem)", fontWeight: "var(--fw-light)", color: "var(--t-bright)", lineHeight: 1.45, margin: 0 }}>
              I turn consumer insight into brand stories that <span className="ink-sea">move people</span> and <span className="ink-blue">metrics</span>.
            </p>
            <p style={{ marginTop: 16, fontSize: "var(--fs-body)", fontWeight: "var(--fw-light)", color: "var(--t-body)", lineHeight: 1.7 }}>
              Brand &amp; creative strategist shaping go-to-market plans, integrated campaigns, and the cultural insight behind them &mdash; for brands people actually love.
            </p>
            <div style={{ marginTop: 26, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Button size="lg" onClick={() => go("work")} iconRight={<i data-lucide="arrow-right" />}>View selected work</Button>
              <button className="ghost-btn" data-shatter onClick={() => go("contact")}>
                <i data-lucide="mail" /> Start a project
              </button>
            </div>
          </div>
        </div>

        <div data-reveal style={{ "--reveal-delay": "300ms", marginTop: "clamp(40px,6vh,72px)", display: "flex", gap: 38, flexWrap: "wrap", justifyContent: "center" }}>
          {[["15+", "BRANDS SHAPED"], ["23%", "AVG AWARENESS GROWTH"], ["16%", "PORTFOLIO SALES GROWTH"], ["360\u00b0", "INTEGRATED CAMPAIGNS"]].map(([v, l]) => (
            <div key={l} style={{ textAlign: "center" }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: "var(--fw-thin)", fontSize: "2.4rem", color: "var(--t-bright)", lineHeight: 1 }}>{v}</div>
              <div className="hud hud-dim" style={{ fontSize: "0.66rem", marginTop: 7 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </header>
  );
}

/* Right-side 3D keycap section nav */
const KEYNAV = [
  { id: "top", label: "Intro", kind: "solid", tone: "white" },
  { id: "work", label: "Cases", kind: "crystal", tone: "blue" },
  { id: "toolkit", label: "Tools", kind: "solid", tone: "white" },
  { id: "companies", label: "Brands", kind: "solid", tone: "green" },
  { id: "about", label: "About", kind: "crystal", tone: "teal" }
];

function KeyNav() {
  const [show, setShow] = useStateT(false);
  const [active, setActive] = useStateT("top");
  useEffectT(() => {
    let raf = 0;
    const compute = () => {
      raf = 0;
      const vh = window.innerHeight;
      const mark = window.scrollY + vh * 0.42;   // probe line ~42% down the viewport
      const intro = document.getElementById("top");
      const introBottom = intro ? intro.offsetTop + intro.offsetHeight : 600;
      // reveal once the hero is mostly scrolled past
      setShow(window.scrollY + vh * 0.45 > introBottom);
      // active = last section whose top has crossed the probe line
      let cur = "top";
      for (const s of KEYNAV) {
        const el = document.getElementById(s.id);
        if (el && el.offsetTop <= mark) cur = s.id;
      }
      setActive(cur);
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(compute); };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    compute();
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
  const press = (e, id) => {
    const btn = e.currentTarget;
    btn.classList.add("press");
    setTimeout(() => btn.classList.remove("press"), 260);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: id === "top" ? 0 : el.offsetTop - 60, behavior: "smooth" });
  };
  return (
    <nav className={"keynav" + (show ? " show" : "")} aria-label="Section navigation">
      {KEYNAV.map((s) => (
        <button key={s.id} className={"kcap kcap-" + s.kind + " tone-" + s.tone}
          data-active={active === s.id ? "1" : "0"}
          aria-current={active === s.id ? "true" : undefined}
          onClick={(e) => press(e, s.id)} aria-label={s.label}>
          <span className="kcap-base"></span>
          <span className="kcap-top">
            {s.kind === "crystal" ? (
              <span className="xstem">
                <span className="xarm xarm-t"></span>
                <span className="xarm xarm-b"></span>
                <span className="xarm xarm-l"></span>
                <span className="xarm xarm-r"></span>
                <span className="xhub"></span>
              </span>
            ) : null}
            <span className="kcap-gloss"></span>
            <span className="kl">{s.label}</span>
          </span>
        </button>
      ))}
    </nav>
  );
}

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