// Top navigation
function Nav({ tweaks }) {
  const y = useScrollY();
  const solid = y > 40;
  const [hover, setHover] = useState(null);
  const items = [
    { label: "Products", sub: ["Ledger", "Kernel"] },
    { label: "Industries" },
    { label: "Customers" },
    { label: "Resources" },
    { label: "Company" },
  ];
  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      padding: "14px 32px",
      transition: "backdrop-filter 300ms, background 300ms, border-color 300ms",
      backdropFilter: solid ? "blur(20px) saturate(140%)" : "blur(0px)",
      WebkitBackdropFilter: solid ? "blur(20px) saturate(140%)" : "blur(0px)",
      background: solid ? "rgba(11,11,13,0.72)" : "transparent",
      borderBottom: solid ? "1px solid var(--line)" : "1px solid transparent",
    }}>
      <div style={{
        maxWidth: 1400, margin: "0 auto",
        display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: 32,
      }}>
        <Logo />
        <ul style={{ display: "flex", gap: 4, justifyContent: "center", listStyle: "none" }}>
          {items.map((it) => (
            <li key={it.label}
              onMouseEnter={() => setHover(it.label)}
              onMouseLeave={() => setHover(null)}
              style={{ position: "relative" }}>
              <button style={{
                fontSize: 13, padding: "8px 14px", color: "var(--ink-dim)",
                borderRadius: 999, transition: "color 200ms, background 200ms",
                background: hover === it.label ? "rgba(255,255,255,0.04)" : "transparent",
                color: hover === it.label ? "var(--ink)" : "var(--ink-dim)",
              }}>{it.label}</button>
              {it.sub && hover === it.label && (
                <div style={{
                  position: "absolute", top: "calc(100% + 8px)", left: 0,
                  background: "rgba(18,18,21,0.95)", border: "1px solid var(--line-strong)",
                  borderRadius: 14, padding: 8, minWidth: 220,
                  backdropFilter: "blur(20px)",
                }}>
                  {it.sub.map((s, i) => (
                    <a key={s} href={`#${s.toLowerCase()}`} style={{
                      display: "flex", alignItems: "center", gap: 10,
                      padding: "10px 12px", borderRadius: 10,
                      fontSize: 13, color: "var(--ink)",
                    }}
                    onMouseEnter={(e) => e.currentTarget.style.background = "rgba(255,255,255,0.05)"}
                    onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
                    >
                      <span style={{
                        width: 8, height: 8, borderRadius: 2,
                        background: i === 0 ? "var(--amber)" : "var(--indigo)",
                      }} />
                      {s}
                      <span className="mono" style={{ marginLeft: "auto", fontSize: 10, color: "var(--ink-mute)" }}>
                        {i === 0 ? "Revenue" : "Intelligence"}
                      </span>
                    </a>
                  ))}
                </div>
              )}
            </li>
          ))}
        </ul>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <button style={{ fontSize: 13, color: "var(--ink-dim)", padding: "8px 14px" }}>Sign in</button>
          <CTA size="sm">Book a demo</CTA>
        </div>
      </div>
    </nav>
  );
}

function Logo() {
  return (
    <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
      <svg width="22" height="22" viewBox="0 0 22 22">
        <rect x="1" y="1" width="9" height="9" rx="1.5" fill="var(--amber)" />
        <rect x="12" y="1" width="9" height="9" rx="1.5" fill="none" stroke="var(--ink)" strokeWidth="1.2" />
        <rect x="1" y="12" width="9" height="9" rx="1.5" fill="none" stroke="var(--ink)" strokeWidth="1.2" />
        <rect x="12" y="12" width="9" height="9" rx="1.5" fill="var(--indigo)" />
      </svg>
      <span style={{ fontSize: 15, fontWeight: 500, letterSpacing: "-0.01em" }}>
        epak<span style={{ color: "var(--ink-dim)" }}>Digital</span>
      </span>
    </a>
  );
}

Object.assign(window, { Nav, Logo });