// Hero + nav for gohegan.net landing.
// Layout: compact text block at top, full-width upstream map below.

const NAV_ITEMS = [
  { label: 'Upstreams', href: '#upstreams' },
  { label: 'Network',   href: '#network'   },
  { label: 'Status',    href: '#status',  external: true },
  { label: 'RIPE',      href: '#ripe',    external: true },
];

const MarketingNav = () => (
  <header
    style={{
      position: "sticky",
      top: 0,
      zIndex: 50,
      background: "rgba(255,255,255,0.78)",
      backdropFilter: "blur(8px)",
      WebkitBackdropFilter: "blur(8px)",
      borderBottom: "1px solid var(--border)",
    }}
    className="hg-nav"
  >
    <div
      style={{
        maxWidth: 1200,
        margin: "0 auto",
        padding: "0 32px",
        height: 56,
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
      }}
    >
      {(() => {
        return (
          <>
            <a
              href="#top"
              style={{ display: "inline-flex", textDecoration: "none" }}
            >
              <GoheganLogo size={20} suffix />
            </a>
            <nav style={{ display: "flex", gap: 28, alignItems: "center" }}>
              {NAV_ITEMS.map((n) => (
                <a
                  key={n.label}
                  href={n.href}
                  style={{
                    color: "var(--fg-1)",
                    fontSize: 13,
                    textDecoration: "none",
                    display: "inline-flex",
                    alignItems: "center",
                    gap: 6,
                  }}
                >
                  {n.label}
                  {n.external && (
                    <span style={{ color: "var(--fg-3)" }}>
                      <Icon
                        name="arrow-up-right"
                        size={12}
                        strokeWidth={1.75}
                      />
                    </span>
                  )}
                </a>
              ))}
              <a href={`mailto:${["noc", "gohegan.net"].join("@")}`}>
                {["noc", "gohegan.net"].join("@")}
              </a>
            </nav>
          </>
        );
      })()}
    </div>
  </header>
);

const Hero = ({ animate = true, density = 'cosy' }) => {
  const pad = density === 'compact' ? '56px 32px 40px' : '88px 32px 56px';

  return (
    <section
      id="top"
      className="hg-grid-bg"
      style={{
        borderBottom: "1px solid var(--border)",
        padding: pad,
        position: "relative",
        overflow: "hidden",
      }}
    >
      {/* Soft radial fade so the grid melts out at the edges */}
      <div
        aria-hidden
        style={{
          position: "absolute",
          inset: 0,
          pointerEvents: "none",
          background:
            "radial-gradient(ellipse at center, transparent 30%, var(--bg-0) 92%)",
        }}
      />
      <div style={{ maxWidth: 1200, margin: "0 auto", position: "relative" }}>
        <div style={{ maxWidth: 760 }}>
          <div
            className="eyebrow"
            style={{
              marginBottom: 28,
              display: "inline-flex",
              alignItems: "center",
              gap: 10,
              padding: "6px 11px",
              border: "1px solid var(--border)",
              borderRadius: "var(--r-full)",
              background: "var(--bg-0)",
            }}
          >
            <Dot tone="ok" size={6} />
            AS198657 · announced · 4 upstreams
          </div>

          <h1
            className="display-1"
            style={{
              fontSize: "clamp(2.6rem, 5.6vw, 5.2rem)",
              marginBottom: 28,
              maxWidth: 820,
            }}
          >
            We carry packets.{" "}
            <span className="serif-italic" style={{ color: "var(--fg-2)" }}>
              Sometimes
            </span>{" "}
            with feeling.
          </h1>

          <p
            className="lead"
            style={{ maxWidth: 620, marginBottom: 18, color: "var(--fg-1)" }}
          >
            <span
              style={{
                fontFamily: "var(--font-mono)",
                fontSize: "0.92em",
                letterSpacing: "-0.02em",
              }}
            >
              gohegan.net
            </span>{" "}
            is a small autonomous system — a learning exercise that picked up
            real-world applications along the way.
          </p>
          <p className="body" style={{ maxWidth: 620, color: "var(--fg-2)" }}>
            If you've landed here from RIPE, a routing table, an abuse contact,
            or a traceroute that surprised you —{" "}
            <span className="serif-italic">welcome</span>. The facts are{" "}
            <a href="#network">a short scroll away</a>.
          </p>
        </div>
      </div>
    </section>
  );
};

// Full-width upstream peering map section. The signature moment.
const UpstreamsSection = ({ animate = true }) => (
  <section
    id="upstreams"
    style={{
      padding: "64px 32px 80px",
      borderBottom: "1px solid var(--border)",
      background: "var(--bg-0)",
    }}
  >
    <div style={{ maxWidth: 1200, margin: "0 auto" }}>
      <div
        style={{
          display: "flex",
          alignItems: "flex-end",
          justifyContent: "space-between",
          gap: 24,
          marginBottom: 32,
          flexWrap: "wrap",
        }}
      >
        <div style={{ maxWidth: 620 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>
            fig. 1 · upstream topology
          </div>
          <h2
            className="h1"
            style={{ fontSize: "clamp(1.8rem, 3vw, 2.4rem)", marginBottom: 12 }}
          >
            Four paths to the rest of the internet.
          </h2>
          <p className="body" style={{ color: "var(--fg-2)", maxWidth: 560 }}>
            Every prefix we announce leaves through one of four direct transits
            — <span style={{ fontFamily: "var(--font-mono)" }}>ROUTE64</span>,{" "}
            <span style={{ fontFamily: "var(--font-mono)" }}>Inferno</span>,{" "}
            <span style={{ fontFamily: "var(--font-mono)" }}>Hop179</span>, or{" "}
            <span style={{ fontFamily: "var(--font-mono)" }}>Lagrange</span> —
            and ends up, sooner or later, at one of fifteen tier-1 networks.{" "}
            <span className="serif-italic">
              Best-effort routing, sincerely meant.
            </span>
          </p>
        </div>
        <div
          style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 8,
            padding: "6px 11px",
            border: "1px solid var(--border)",
            borderRadius: "var(--r-full)",
            background: "var(--bg-0)",
            fontFamily: "var(--font-mono)",
            fontSize: 12,
            color: "var(--fg-2)",
            letterSpacing: "0.02em",
            whiteSpace: "nowrap",
          }}
        >
          <Dot tone={animate ? "info" : "off"} size={6} />
          {animate ? "live · packets at observed rate" : "feed paused"}
        </div>
      </div>

      <div
        style={{
          position: "relative",
          padding: "32px 24px 24px",
          background: "var(--bg-1)",
          border: "1px solid var(--border)",
          borderRadius: "var(--r-6)",
        }}
      >
        <NetworkGraph animate={animate} />
        <div
          style={{
            marginTop: 16,
            display: "flex",
            gap: 24,
            flexWrap: "wrap",
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            color: "var(--fg-3)",
            letterSpacing: "0.02em",
          }}
        >
          <Legend
            color="var(--accent)"
            label="AS198657 — gohegan.net (origin)"
          />
          <Legend color="var(--bg-0)" border label="transit / upstream" />
          <Legend
            color="var(--accent-tint)"
            border="var(--accent)"
            label="tier 1"
          />
          <span style={{ marginLeft: "auto", color: "var(--fg-3)" }}>
            28 sessions · 26 ASes · last route update 4h ago
          </span>
        </div>
      </div>
    </div>
  </section>
);

const Legend = ({ color, border, label }) => (
  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
    <span style={{
      display: 'inline-block', width: 14, height: 8,
      background: color,
      border: border ? `1px solid ${typeof border === 'string' ? border : 'var(--fg-0)'}` : '0',
      borderRadius: 2,
    }}/>
    {label}
  </span>
);

Object.assign(window, { MarketingNav, Hero, UpstreamsSection });
