// nav.jsx - top navigation, page router context, footer.

// Full list — used by the router. Keep all pages here.
const PAGES = [
  { id: "home",        label: "Home" },
  { id: "platform",    label: "AI SOC Platform" },
  { id: "services",    label: "SOC Setup" },
  { id: "methodology", label: "How it works" },
  { id: "pricing",     label: "Pricing" },
  { id: "partners",    label: "Partners" },
  { id: "training",    label: "Training" },
  { id: "cases",       label: "Clients" },
  { id: "about",       label: "About" },
  { id: "blog",        label: "Notes" },
  { id: "contact",     label: "Contact" },
  { id: "early-access", label: "Early Access" },
];

// Primary nav — 5 items only. Everything else lives in footer.
const PRIMARY_NAV_IDS = ["platform", "pricing", "services", "cases", "about"];

const RouteCtx = React.createContext({ route: "home", go: () => {} });
const useRoute = () => React.useContext(RouteCtx);

function TopNav() {
  const { route, go } = useRoute();
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 6);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "rgba(14, 42, 54, 0.88)" : "transparent",
      backdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
      borderBottom: scrolled ? "1px solid var(--line-soft)" : "1px solid transparent",
      transition: "background 200ms, border-color 200ms",
    }}>
      <div className="container" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 72,
      }}>
        <button onClick={() => go("home")} aria-label="Secure Sleuths - Go to homepage" style={{ display: "flex", alignItems: "center" }}>
          <Logo size={28} />
        </button>

        <nav aria-label="Main navigation" style={{ display: "flex", alignItems: "center", gap: 4 }} className="nav-main">
          {PRIMARY_NAV_IDS.map(id => PAGES.find(p => p.id === id)).filter(Boolean).map(p => (
            <button
              key={p.id}
              onClick={() => go(p.id)}
              style={{
                fontSize: 13,
                padding: "8px 14px",
                color: route === p.id ? "var(--fg)" : "var(--fg-mute)",
                position: "relative",
                letterSpacing: "-0.005em",
                transition: "color 140ms",
              }}
              onMouseEnter={e => e.currentTarget.style.color = "var(--fg)"}
              onMouseLeave={e => e.currentTarget.style.color = route === p.id ? "var(--fg)" : "var(--fg-mute)"}
            >
              {p.label}
              {route === p.id && (
                <span style={{
                  position: "absolute", left: 14, right: 14, bottom: 2,
                  height: 1, background: "var(--accent)",
                }} />
              )}
            </button>
          ))}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 14, flexShrink: 0 }}>
          <button className="btn btn-primary" onClick={() => go("early-access")} style={{ whiteSpace: "nowrap", padding: "10px 18px" }}>
            Get started →
          </button>
        </div>
      </div>
    </header>
  );
}

function Footer() {
  const { go } = useRoute();
  return (
    <footer role="contentinfo" aria-label="Site footer" style={{
      borderTop: "1px solid var(--line)",
      marginTop: 120,
      paddingTop: 80,
      paddingBottom: 40,
    }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "2fr 1fr 1fr 1.2fr",
          gap: 60,
          paddingBottom: 80,
        }}>
          <div>
            <Logo size={48} />
            <p style={{
              marginTop: 20, color: "var(--fg-mute)",
              maxWidth: 340, fontSize: 15, lineHeight: 1.55,
            }}>
              Security for Indian startups. Setup. AI. Control.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 28, flexWrap: "wrap" }}>
              <Tag color="var(--line)">Wazuh Ambassador</Tag>
              <Tag color="var(--line)">Wazuh · TheHive · MISP</Tag>
            </div>
          </div>

          <FooterCol title="Platform" items={[
            ["AI SOC Platform", "platform"],
            ["Pricing", "pricing"],
            ["SOC Setup", "services"],
            ["Partners · MSSP", "partners"],
            ["How it works", "methodology"],
            ["Early Access", "early-access"],
          ]} go={go} />

          <FooterCol title="Company" items={[
            ["Case studies", "cases"],
            ["Field notes", "blog"],
            ["SOC Training", "training"],
            ["About", "about"],
          ]} go={go} />

          <div>
            <Label style={{ display: "block", marginBottom: 18 }}>CONTACT</Label>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              <li><a href="mailto:prathamesh@securesleuths.in" style={{ color: "var(--fg-mute)", fontSize: 14 }}>prathamesh@securesleuths.in</a></li>
              <li><a href="tel:+917559249171" style={{ color: "var(--fg-mute)", fontSize: 14 }}>+91-7559249171</a></li>
              <li><span style={{ color: "var(--fg-mute)", fontSize: 14 }}>Nashik, Maharashtra</span></li>
              <li><a href="https://linkedin.com/in/prathamesh-bakliwal" target="_blank" rel="noopener" style={{ color: "var(--fg-mute)", fontSize: 14 }}>LinkedIn</a></li>
              <li><a href="https://calendly.com/prathamesh-securesleuths/30min" target="_blank" rel="noopener" style={{ color: "var(--fg-mute)", fontSize: 14 }}>Book a call</a></li>
            </ul>
          </div>
        </div>

        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          borderTop: "1px solid var(--line-soft)", paddingTop: 28,
          fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)",
          letterSpacing: "0.06em",
        }}>
          <span>© 2026 SECURE SLEUTHS · ALL RIGHTS RESERVED</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 20 }}>
            <button onClick={() => go("privacy")} style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)", letterSpacing: "0.06em", cursor: "pointer" }}>PRIVACY</button>
            <button onClick={() => go("terms")} style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)", letterSpacing: "0.06em", cursor: "pointer" }}>TERMS</button>
            <a href="/.well-known/security.txt" style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-dim)", letterSpacing: "0.06em" }}>SECURITY.TXT</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, items, go }) {
  return (
    <div>
      <Label style={{ display: "block", marginBottom: 18 }}>{title}</Label>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map(([label, target], i) => (
          <li key={i}>
            {target ? (
              <button onClick={() => go(target)} style={{ color: "var(--fg-mute)", fontSize: 14 }}
                onMouseEnter={e => e.currentTarget.style.color = "var(--fg)"}
                onMouseLeave={e => e.currentTarget.style.color = "var(--fg-mute)"}>
                {label}
              </button>
            ) : (
              <span style={{ color: "var(--fg-mute)", fontSize: 14 }}>{label}</span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { PAGES, PRIMARY_NAV_IDS, RouteCtx, useRoute, TopNav, Footer });