// Network facts + footer for gohegan.net landing.

const FACTS = [
  { k: "asn", v: "AS198657", note: "gohegan.net · gohegan-as" },
  { k: "ipv4", v: "81.2.121.136/29", note: "8 addresses, all spoken for" },
  { k: "ipv6 /40", v: "2a0b:4e07:2800::/40", note: "plenty of room" },
  { k: "ipv6 /48", v: "2a06:9801:287::/48", note: "announced from lon1" },
  {
    k: "transits",
    v: "ROUTE64 · Inferno · Hop179 · Lagrange",
    note: "4 paths upstream",
  },
  { k: "tier 1 reach", v: "15 networks", note: "see fig. 1", tone: "ok" },
  { k: "irr", v: "AS-GOHEGAN", note: "maintained at RIPE" },
  { k: "rpki", v: "signed", note: "ROAs current", tone: "ok" },
  { k: "mnt-by", v: "GOHEGAN-MNT", note: "RIPE" },
  { k: "abuse", v: "abuse@gohegan.net", note: "replied to by a human" },
];

const NETWORK_HEALTH = [
  { label: 'uptime, 90d',  value: '99.974%' },
  { label: 'route flap, 24h', value: '0' },
  { label: 'reachable v4',  value: '100%' },
  { label: 'reachable v6',  value: '100%' },
];

const NetworkPanel = () => (
  <section id="network" style={{
    padding: '88px 32px 96px',
    borderBottom: '1px solid var(--border)',
    background: 'var(--bg-1)',
  }}>
    <div style={{ maxWidth: 1100, margin: '0 auto' }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 280px) minmax(0, 1fr)',
        gap: 56,
        alignItems: 'start',
      }} className="hg-network-grid">
        <div style={{ position: 'sticky', top: 80 }} className="hg-network-aside">
          <div className="eyebrow" style={{ marginBottom: 16 }}>The network</div>
          <h2 className="h1" style={{ marginBottom: 16, fontSize: 'clamp(2rem, 3.6vw, 2.8rem)' }}>
            The facts.<br/>
            <span className="serif-italic" style={{ color: 'var(--fg-2)' }}>Mostly</span> dull,
            entirely true.
          </h2>
          <p className="body" style={{ color: 'var(--fg-2)', marginBottom: 24, maxWidth: 280 }}>
            Everything an operator, a registry, or a curious soul might want to
            know — written down once, so you don't have to ask.
          </p>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
            border: '1px solid var(--border)', borderRadius: 'var(--r-4)',
            background: 'var(--bg-0)',
            overflow: 'hidden',
          }}>
            {NETWORK_HEALTH.map((h, i) => (
              <div key={h.label} style={{
                padding: '14px 16px',
                borderRight: i % 2 === 0 ? '1px solid var(--border-subtle)' : '0',
                borderBottom: i < 2 ? '1px solid var(--border-subtle)' : '0',
              }}>
                <div className="mono-label" style={{ marginBottom: 6, fontSize: 10 }}>{h.label}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, color: 'var(--fg-0)', fontWeight: 500, letterSpacing: '-0.02em' }}>
                  {h.value}
                </div>
              </div>
            ))}
          </div>
          <p className="caption" style={{ marginTop: 14, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', letterSpacing: '-0.01em' }}>
            measured by{' '}
            <a href="#" style={{ color: 'var(--fg-2)' }}>RIPE Atlas</a>
            {' '}probes · 30 vantage points
          </p>
        </div>

        <div>
          <div style={{
            background: 'var(--bg-0)',
            border: '1px solid var(--border)',
            borderRadius: 'var(--r-5)',
            overflow: 'hidden',
            boxShadow: 'var(--shadow-1)',
          }}>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: 10,
              padding: '12px 20px',
              borderBottom: '1px solid var(--border)',
              background: 'var(--bg-2)',
            }}>
              <Icon name="database" size={14} strokeWidth={1.75} style={{ color: 'var(--fg-2)' }}/>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-2)', letterSpacing: '0.02em' }}>
                whois -h whois.ripe.net AS198657
              </span>
              <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>
                10 rows · {new Date().toISOString().slice(0,10)}
              </span>
            </div>
            {FACTS.map((f, i) => (
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: '120px minmax(0, 1fr) auto',
                gap: 24, padding: '14px 20px',
                borderBottom: i < FACTS.length - 1 ? '1px solid var(--border-subtle)' : '0',
                alignItems: 'baseline',
                fontFamily: 'var(--font-mono)',
              }}>
                <span style={{ color: 'var(--fg-3)', fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
                  {f.k}
                </span>
                <span style={{
                  color: 'var(--fg-0)',
                  fontSize: 14,
                  fontWeight: 500,
                  letterSpacing: '-0.01em',
                  wordBreak: 'break-all',
                }}>
                  {f.v}
                </span>
                <span style={{
                  color: f.tone === 'ok' ? 'var(--success)' : 'var(--fg-3)',
                  fontSize: 12,
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  whiteSpace: 'nowrap',
                }}>
                  {f.tone === 'ok' && <Dot tone="ok" size={5}/>}
                  {f.note}
                </span>
              </div>
            ))}
          </div>

          <p className="caption" style={{
            marginTop: 18,
            color: 'var(--fg-3)',
            fontFamily: 'var(--font-mono)',
            letterSpacing: '-0.01em',
            maxWidth: 540,
          }}>
            <span style={{ color: 'var(--fg-2)' }}>‡</span> Authoritative
            copies live in the{' '}
            <a href="#" style={{ color: 'var(--fg-2)' }}>RIPE database</a>.{' '}
            <span className="serif-italic" style={{ fontFamily: 'var(--font-display)' }}>
              If we disagree, RIPE is right.
            </span>
          </p>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer
    id="elsewhere"
    style={{ padding: "56px 32px 48px", background: "var(--bg-0)" }}
  >
    <div style={{ maxWidth: 1100, margin: "0 auto" }}>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.2fr) minmax(0, 1fr)",
          gap: 56,
          alignItems: "start",
          paddingBottom: 40,
          borderBottom: "1px solid var(--border-subtle)",
        }}
        className="hg-footer-grid"
      >
        <div>
          <GoheganLogo size={22} suffix />
          <p
            className="body"
            style={{ marginTop: 18, maxWidth: 420, color: "var(--fg-2)" }}
          >
            Operated by{" "}
            <span className="serif-italic" style={{ color: "var(--fg-1)" }}>
              kaigoh
            </span>{" "}
            for the apparent purpose of having one. Mail goes to{" "}
            <a href={`mailto:${["noc", "gohegan.net"].join("@")}`}>
              {["noc", "gohegan.net"].join("@")}
            </a>
            ; abuse to{" "}
            <a href={`mailto:${["abuse", "gohegan.net"].join("@")}`}>
              {["abuse", "gohegan.net"].join("@")}
            </a>
            ; replies arrive eventually.
          </p>
        </div>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
            gap: 32,
          }}
        >
          <div>
            <div className="mono-label" style={{ marginBottom: 12 }}>
              Operations
            </div>
            <ul
              style={{
                listStyle: "none",
                padding: 0,
                margin: 0,
                display: "grid",
                gap: 8,
              }}
            >
              <FooterLink
                href="#"
                label="Looking glass"
                host="lg.gohegan.net"
              />
              <FooterLink href="#" label="Status" host="status.gohegan.net" />
              <FooterLink
                href="#"
                label="Peering policy"
                host="peering.gohegan.net"
              />
              <FooterLink href="#" label="RPKI ROAs" host="rpki" />
            </ul>
          </div>
          <div>
            <div className="mono-label" style={{ marginBottom: 12 }}>
              Elsewhere
            </div>
            <ul
              style={{
                listStyle: "none",
                padding: 0,
                margin: 0,
                display: "grid",
                gap: 8,
              }}
            >
              <FooterLink href="#" label="RIPE" host="AS198657" />
              <FooterLink href="#" label="PeeringDB" host="19865" />
              <FooterLink href="#" label="GitHub" host="@kaigoh" />
            </ul>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 24 }}>
        <Tape
          items={[
            { k: "asn", v: "AS198657" },
            { k: "uptime", v: "99.974%" },
            { k: "mnt-by", v: "GOHEGAN-MNT" },
            { k: "rev", v: "2026.05.13" },
            { k: "rtt-lhr", v: "0.4ms" },
          ]}
        />
        <p
          className="caption"
          style={{
            marginTop: 24,
            color: "var(--fg-3)",
            maxWidth: 720,
            fontFamily: "var(--font-mono)",
            letterSpacing: "-0.01em",
            lineHeight: 1.55,
          }}
        >
          © {new Date().getFullYear()} gohegan.net — a personal AS, operated
          without warranty, expressed or implied. The opinions of any routes
          announced from here are the operator's own and not those of his
          employer, family, or neighbours.{" "}
          <span style={{ color: "var(--fg-2)" }}>§</span>{" "}
          <span
            className="serif-italic"
            style={{ fontFamily: "var(--font-display)", color: "var(--fg-2)" }}
          >
            This page is itself the test. If you can read it, BGP is doing its
            job.
          </span>
        </p>
      </div>
    </div>
  </footer>
);

const FooterLink = ({ href, label, host }) => (
  <li>
    <a href={href} style={{
      display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
      gap: 12, color: 'inherit', textDecoration: 'none',
      padding: '4px 0',
    }}>
      <span style={{ color: 'var(--fg-1)', fontSize: 14, flexShrink: 0 }}>{label}</span>
      <span style={{
        color: 'var(--fg-3)', fontFamily: 'var(--font-mono)',
        fontSize: 12, letterSpacing: '-0.02em',
        minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        textAlign: 'right',
      }}>{host}</span>
    </a>
  </li>
);

Object.assign(window, { NetworkPanel, Footer });