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

/* ============================================================================
   Nav — fixed top bar.
   - Brand mark (927 + DEVELOPMENT wordmark)
   - 5 anchors with active-state highlight
   - Discord CTA on the right
   - Scroll progress bar (1px chrome to red gradient) along the bottom edge
   - Background fades transparent → 0a0a0a/.9 by 80px of scroll
   ============================================================================ */

const LINKS = [
  { id: "vision",         label: "Vision" },
  { id: "infrastructure", label: "Work" },
  { id: "portfolio",      label: "Clients" },
  { id: "retainers",      label: "Retainers" },
];

function Nav({ active = "hero", progress = 0 }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled((window.scrollY || 0) > 80);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav
      style={{
        position: "fixed", top: 0, left: 0, right: 0,
        zIndex: 5000,
        padding: "18px clamp(24px, 4vw, 56px)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        background: scrolled ? "rgba(10,10,10,0.86)" : "transparent",
        borderBottom: scrolled ? "1px solid rgba(255,255,255,0.06)" : "1px solid transparent",
        transition: "background 0.4s var(--ease-out), border-color 0.4s var(--ease-out)",
        backdropFilter: scrolled ? "blur(6px)" : "none",
      }}
    >
      {/* Brand */}
      <a
        href="#hero"
        data-cursor="HOME"
        style={{
          display: "flex", alignItems: "center", gap: 12,
          textDecoration: "none", color: "var(--color-ink)",
        }}
      >
        <img src="assets/927-logo-white.png" alt="927" style={{ height: 32, width: "auto" }} />
        <span style={{
          fontFamily: "var(--font-body)", fontSize: 10,
          letterSpacing: "0.4em", textTransform: "uppercase",
          color: "var(--color-ink-muted)", whiteSpace: "nowrap",
        }}>
          DEVELOPMENT
        </span>
      </a>

      {/* Middle: status ticker */}
      <div
        className="nav-middle"
        style={{
          position: "absolute", left: "50%", transform: "translateX(-50%)",
          display: "flex", alignItems: "center", gap: 14,
          fontFamily: "var(--font-body)", fontSize: 10,
          letterSpacing: "0.35em", textTransform: "uppercase",
          color: "var(--color-ink-muted)",
        }}
      >
        <span style={{
          width: 6, height: 6, borderRadius: "50%",
          background: "var(--color-accent-warm)",
          boxShadow: "0 0 12px var(--color-accent-warm)",
          animation: "ticker 1.8s ease-in-out infinite",
        }}></span>
        <span>2 / 3 LEAD SLOTS OPEN</span>
      </div>

      {/* Links */}
      <div style={{ display: "flex", alignItems: "center", gap: 28 }}>
        <div className="nav-links" style={{
          display: "flex", alignItems: "center", gap: 22,
        }}>
          {LINKS.map((l) => (
            <a
              key={l.id}
              href={`#${l.id}`}
              data-cursor=""
              style={{
                fontFamily: "var(--font-body)", fontSize: 11,
                letterSpacing: "0.3em", textTransform: "uppercase",
                color: active === l.id ? "var(--color-accent-warm)" : "var(--color-ink-muted)",
                textDecoration: "none",
                transition: "color 0.25s ease",
                position: "relative",
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = "var(--color-accent-warm)"}
              onMouseLeave={(e) => e.currentTarget.style.color = active === l.id ? "var(--color-accent-warm)" : "var(--color-ink-muted)"}
            >
              {l.label}
            </a>
          ))}
        </div>

        <a
          href="https://discord.gg/hRZeHwWyHG"
          target="_blank"
          rel="noreferrer"
          data-cursor="JOIN"
          style={{
            fontFamily: "var(--font-body)", fontSize: 11,
            letterSpacing: "0.3em", textTransform: "uppercase",
            color: "var(--color-ink)", textDecoration: "none",
            padding: "10px 18px",
            border: "1px solid rgba(200,204,210,0.30)",
            borderRadius: 8,
            display: "inline-flex", alignItems: "center", gap: 10,
            background: "rgba(200,204,210,0.08)",
            transition: "background 0.25s ease, border-color 0.25s ease, color 0.25s ease",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = "var(--color-accent-warm)";
            e.currentTarget.style.borderColor = "var(--color-accent-warm)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = "rgba(200,204,210,0.08)";
            e.currentTarget.style.borderColor = "rgba(200,204,210,0.30)";
          }}
        >
          Open Discord <span style={{ opacity: 0.7 }}>↗</span>
        </a>
      </div>

      {/* Scroll progress bar */}
      <div style={{
        position: "absolute", left: 0, right: 0, bottom: 0,
        height: 1, background: "rgba(255,255,255,0.04)",
      }}>
        <div style={{
          height: "100%",
          width: `${Math.max(0, Math.min(1, progress)) * 100}%`,
          background: "linear-gradient(90deg, var(--color-accent), var(--color-accent-warm))",
          transition: "width 0.08s linear",
          boxShadow: "0 0 12px rgba(200,204,210,0.35)",
        }}></div>
      </div>

      {/* Mobile: collapse middle status + non-essential links */}
      <style>{`
        @media (max-width: 900px) {
          .nav-middle { display: none !important; }
          .nav-links a { display: none; }
          .nav-links a:last-child { display: inline-flex; }
        }
      `}</style>
    </nav>
  );
}

Object.assign(window, { Nav });