// Shared components: Nav, Footer, Reveal, ImageBlock, HeroRing, PageHeader.

const { useEffect, useState, useRef, useMemo } = React;

// ─── REVEAL WRAPPER ───────────────────────────────────────────────────
function Reveal({ as = "div", className = "", children, style, ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current && window.gdRevealObserver) {
      window.gdRevealObserver.observe(ref.current);
    }
  }, []);
  const Comp = as;
  return (
    <Comp ref={ref} className={`reveal ${className}`} style={style} {...rest}>
      {children}
    </Comp>
  );
}

// ─── IMAGE BLOCK ───────────────────────────────────────────────────────
// Renders a real image inside the same card chrome the placeholders had.
function ImageBlock({ src, alt, ratio = 1, label, num, style = {}, overlay, onClick, fit = "cover" }) {
  return (
    <div className="img-card" onClick={onClick} style={{ aspectRatio: ratio, width: "100%", cursor: onClick ? "pointer" : "default", ...style }}>
      <img src={src} alt={alt || label || ""} style={{ objectFit: fit }} />
      {num && <span className="num">{num}</span>}
      {label && <span className="label">{label}</span>}
      {overlay && <div className="overlay">{overlay}</div>}
    </div>
  );
}

// ─── HERO RING (replaces 3D shape) ─────────────────────────────────────
function HeroRing() {
  const ref = useRef(null);
  useEffect(() => {
    const onMove = (e) => {
      if (!ref.current) return;
      const x = (e.clientX / window.innerWidth - 0.5) * 22;
      const y = (e.clientY / window.innerHeight - 0.5) * 22;
      ref.current.style.transform = `translate(${x}px, ${y}px)`;
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);
  return (
    <div className="ring-wrap" aria-hidden="true">
      <img ref={ref} src="assets/hero-ring.gif" alt="" />
    </div>
  );
}

// ─── NAV ──────────────────────────────────────────────────────────────
const ROUTES = [
  { key: "home", label: "Index", index: "00" },
  { key: "portfolio", label: "Work", index: "01" },
  { key: "about", label: "Studio", index: "02" },
  { key: "services", label: "Services", index: "03" },
  { key: "brief", label: "Brief", index: "04" },
  { key: "contact", label: "Contact", index: "05" },
  { key: "strategy", label: "Strategy", index: "06" },
];

function NavBar({ route, navigate }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      display: "flex", justifyContent: "space-between", alignItems: "center",
      padding: "16px 40px",
      background: "color-mix(in srgb, var(--black) 88%, transparent)",
      backdropFilter: "blur(14px) saturate(140%)",
      WebkitBackdropFilter: "blur(14px) saturate(140%)",
      borderBottom: "1px solid " + (scrolled ? "var(--line)" : "transparent"),
      transition: "border-color .3s ease",
      color: "var(--white)",
    }}>
      <button onClick={() => navigate("home")} className="display" style={{ fontSize: 20, letterSpacing: ".14em", color: "var(--white)" }}>
        GENCY<span style={{ color: "var(--red)" }}>.</span>
      </button>

      <div style={{ display: "flex", gap: 26, alignItems: "center" }}>
        {ROUTES.filter(r => r.key !== "home" && r.key !== "strategy").map(r => (
          <button key={r.key} onClick={() => navigate(r.key)} className="mono" style={{
            fontSize: 11, letterSpacing: ".2em",
            color: route === r.key ? "var(--red)" : "var(--white)",
            opacity: route === r.key ? 1 : 0.7,
            transition: "color .25s, opacity .25s",
          }}
          onMouseEnter={e => { if (route !== r.key) e.currentTarget.style.opacity = 1; }}
          onMouseLeave={e => { if (route !== r.key) e.currentTarget.style.opacity = 0.7; }}>
            {r.label}
          </button>
        ))}
      </div>

      <div className="mono" style={{ fontSize: 10, letterSpacing: ".16em", color: "var(--gray-2)", display: "flex", alignItems: "center", gap: 9 }}>
        <span className="dot"></span>
        <span>Available for work</span>
      </div>
    </nav>
  );
}

// ─── FOOTER ───────────────────────────────────────────────────────────
function Footer({ navigate }) {
  return (
    <footer style={{ background: "var(--ink-2)", color: "var(--white)", borderTop: "1px solid var(--line)" }}>
      <section className="wrap" style={{ padding: "110px 40px 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 64, alignItems: "start" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>06 — End</div>
            <h2 className="display" style={{ fontSize: "clamp(48px, 6.5vw, 100px)" }}>
              Have a mark<br/><span style={{ color: "var(--red)" }}>in mind?</span>
            </h2>
            <button onClick={() => navigate("contact")} className="btn" style={{ marginTop: 32 }}>
              Start a project →
            </button>
          </div>
          <FooterCol label="Pages" items={[
            { t: "Work", k: "portfolio" },
            { t: "Studio", k: "about" },
            { t: "Services", k: "services" },
            { t: "Contact", k: "contact" },
            { t: "Strategy brief", k: "strategy" },
          ]} navigate={navigate} />
          <FooterCol label="Elsewhere" items={[
            { t: "Behance ↗", href: "https://www.behance.net/gency" },
            { t: "Instagram ↗", href: "#" },
            { t: "LinkedIn ↗", href: "#" },
            { t: "Are.na ↗", href: "#" },
          ]} navigate={navigate} />
          <div>
            <a href="mailto:hello@gencydesigns.com"
               style={{ fontFamily: "var(--sans)", fontSize: 14, fontWeight: 500, letterSpacing: ".01em", color: "var(--white)", borderBottom: "1px solid var(--red)", paddingBottom: 2 }}>
              hello@gencydesigns.com
            </a>
            <div className="mono gray" style={{ marginTop: 14, fontSize: 10 }}>Replies within 12h · 7/7</div>
          </div>
        </div>
        <div style={{ marginTop: 80, paddingTop: 24, borderTop: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 14,
          fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--gray)" }}>
          <span>© GencyDesigns 2021–2026</span>
          <span>Studio · Independent · Remote</span>
          <span>v.2026.03</span>
        </div>
      </section>
    </footer>
  );
}

function FooterCol({ label, items, navigate }) {
  return (
    <div>
      <div className="mono gray" style={{ marginBottom: 18 }}>({label})</div>
      <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map((i, ix) => (
          <li key={ix} style={{ fontFamily: "var(--head)", fontSize: 15, textTransform: "uppercase", letterSpacing: ".02em" }}>
            {i.href
              ? <a href={i.href} target={i.href.startsWith("http") ? "_blank" : undefined} rel="noreferrer"
                  style={{ transition: "color .25s" }}
                  onMouseEnter={e => e.currentTarget.style.color = "var(--red)"}
                  onMouseLeave={e => e.currentTarget.style.color = "var(--white)"}>{i.t}</a>
              : <button onClick={() => navigate(i.k)}
                  style={{ textTransform: "uppercase", transition: "color .25s", fontFamily: "inherit", fontSize: "inherit", letterSpacing: "inherit", color: "var(--white)" }}
                  onMouseEnter={e => e.currentTarget.style.color = "var(--red)"}
                  onMouseLeave={e => e.currentTarget.style.color = "var(--white)"}>{i.t}</button>
            }
          </li>
        ))}
      </ul>
    </div>
  );
}

// ─── WORK CARD (gallery grid item) ─────────────────────────────────────
function WorkCard({ project, index, onClick }) {
  return (
    <Reveal>
      <button className="work-card" onClick={onClick}>
        <div className="work-thumb">
          <img src={project.cover.src} alt={project.title} loading="lazy" />
          <div className="ov"><span className="cta">View project →</span></div>
        </div>
        <div className="work-meta">
          <div>
            <h3>{project.title}</h3>
            <div className="sub">{project.category}</div>
          </div>
          <span className="yr">{project.year}</span>
        </div>
      </button>
    </Reveal>
  );
}

// ─── PAGE HEADER ──────────────────────────────────────────────────────
function PageHeader({ index, label, title, sub, ghost }) {
  return (
    <section style={{ position: "relative", overflow: "hidden", paddingTop: 180, paddingBottom: 100 }}>
      {ghost && <div className="ghost" style={{ fontSize: "26vw", top: "60%" }}>{ghost}</div>}
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <Reveal>
          <span className="eyebrow">{index} — {label}</span>
          <h1 className="display" style={{ fontSize: "clamp(48px, 8.5vw, 144px)" }}>{title}</h1>
          {sub && <p className="lead" style={{ marginTop: 30 }}>{sub}</p>}
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, {
  Reveal, ImageBlock, HeroRing, NavBar, Footer, FooterCol, PageHeader, WorkCard, ROUTES,
});