// Shared cross-page chrome + section primitives for the TensorHost
// auxiliary-service pages. Reuses the marketing primitives already loaded
// from site/shared.jsx (Button, Eyebrow, Section, StatusDot) and the theme
// tokens defined on each host page.

// Canonical page map — keep hrefs encoded so spaces survive on file:// too.
const AUX_PAGES = [
  { key: 'web',     label: 'Web',     href: 'Web%20Hosting.html' },
  { key: 'storage', label: 'Storage', href: 'Cloud%20Storage.html' },
  { key: 'email',   label: 'Email',   href: 'TensorMail.html' },
  { key: 'gpu',     label: 'GPU',     href: 'GPU%20Rentals.html' },
];
const HOME_HREF = 'TensorHost%20Home.html';
const CONTACT_HREF = 'TensorHost%20Home.html#contact';
const SIGNIN_HREF = 'Sign%20In.html';
const REGISTER_HREF = 'Register.html';

// Header links mirror the original home-page nav (anchors live on the home
// Unified top-nav links — identical on every page. Anchors point back to the
// home page; Privacy and FAQ are their own dedicated pages.
const NAV_LINKS = [
  { label: 'Home',    href: HOME_HREF,      active: 'home' },
  { label: 'Privacy', href: 'Privacy.html', active: 'privacy' },
  { label: 'FAQ',     href: 'FAQ.html',     active: 'faq' },
  { label: 'Contact', href: 'Contact.html', active: 'contact' },
];
// The four dedicated service pages, surfaced under the Services menu.
const SERVICE_LINKS = [
  { key: 'web',     label: 'Web hosting',    href: 'Web%20Hosting.html' },
  { key: 'storage', label: 'Cloud storage',  href: 'Cloud%20Storage.html' },
  { key: 'email',   label: 'Business email', href: 'TensorMail.html' },
  { key: 'gpu',     label: 'GPU rentals',    href: 'GPU%20Rentals.html' },
];

// ── Cross-page top navigation ──────────────────────────────────────────────
function AuxNav({ theme, current }) {
  const [scrolled, setScrolled] = React.useState(false);
  const logo = theme === 'dark' ? 'site/assets/logo-mark-white.svg' : 'site/assets/logo-mark.svg';
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav style={{
      position: 'sticky', top: 0, background: 'var(--nav-bg)',
      backdropFilter: 'saturate(140%) blur(8px)', WebkitBackdropFilter: 'saturate(140%) blur(8px)',
      borderBottom: `1px solid ${scrolled ? 'var(--rule)' : 'var(--rule-soft)'}`, zIndex: 50,
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      }}>
        <a href={HOME_HREF} onClick={(e) => window.thGoHomeWithBoot(e)} style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none', color: 'var(--fg)' }}>
          <img src={logo} style={{ height: 26, display: 'block' }} alt="" />
          <span style={{ fontSize: 15, letterSpacing: '0.08em', fontWeight: 700 }}>TENSORHOST</span>
        </a>

        <div style={{ display: 'flex', gap: 8, fontSize: 15, alignItems: 'center' }}>
          {NAV_LINKS.map((l) => {
            const isActive = l.active && l.active === current;
            return (
              <a key={l.label} href={l.href}
                style={{
                  color: isActive ? 'var(--fg)' : 'var(--fg-3)', textDecoration: 'none',
                  padding: '8px 12px', borderBottom: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
                  transition: 'color 140ms, border-color 140ms', whiteSpace: 'nowrap',
                }}
                onMouseOver={(e) => { e.currentTarget.style.color = 'var(--fg)'; if (!isActive) e.currentTarget.style.borderBottomColor = 'var(--rule)'; }}
                onMouseOut={(e) => { e.currentTarget.style.color = isActive ? 'var(--fg)' : 'var(--fg-3)'; if (!isActive) e.currentTarget.style.borderBottomColor = 'transparent'; }}>
                {l.label}
              </a>
            );
          })}
          <ServicesMenu current={current} />
        </div>

        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <Button kind="secondary" href={SIGNIN_HREF} style={{ fontSize: 13, padding: '9px 16px' }}>Sign in</Button>
          <Button kind="primary" href={REGISTER_HREF} style={{ fontSize: 13, padding: '9px 16px' }} accentArrow>Get started</Button>
        </div>
      </div>
    </nav>
  );
}

// ── Services dropdown ──────────────────────────────────────────────────────
// "Services" header item; on hover/focus reveals the four dedicated pages.
function ServicesMenu({ current }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  const closeT = React.useRef(null);
  const enter = () => { clearTimeout(closeT.current); setOpen(true); };
  const leave = () => { closeT.current = setTimeout(() => setOpen(false), 120); };
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => { window.removeEventListener('keydown', onKey); clearTimeout(closeT.current); };
  }, []);
  const onAux = current === 'services' || SERVICE_LINKS.some((s) => s.key === current);

  return (
    <div ref={ref} onMouseEnter={enter} onMouseLeave={leave} style={{ position: 'relative' }}>
      <a
        href="Services.html"
        aria-haspopup="true" aria-expanded={open}
        style={{
          fontFamily: 'inherit', fontSize: 15, textDecoration: 'none', cursor: 'pointer',
          color: open || onAux ? 'var(--fg)' : 'var(--fg-3)', padding: '8px 12px',
          borderBottom: `2px solid ${onAux ? 'var(--accent)' : 'transparent'}`,
          display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap',
          transition: 'color 140ms, border-color 140ms',
        }}
        onMouseOver={(e) => { e.currentTarget.style.color = 'var(--fg)'; if (!onAux && !open) e.currentTarget.style.borderBottomColor = 'var(--rule)'; }}
        onMouseOut={(e) => { e.currentTarget.style.color = (open || onAux) ? 'var(--fg)' : 'var(--fg-3)'; if (!onAux) e.currentTarget.style.borderBottomColor = 'transparent'; }}>
        Services
        <span style={{ fontSize: 9, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform 140ms', color: 'var(--fg-4)' }}>▼</span>
      </a>
      <div style={{
        position: 'absolute', top: 'calc(100% + 12px)', right: 0, minWidth: 232,
        background: 'var(--surface)', border: '1px solid var(--rule)', borderRadius: 4,
        boxShadow: '0 0 0 1px var(--rule-soft)', overflow: 'hidden', zIndex: 60,
        opacity: open ? 1 : 0, transform: open ? 'translateY(0)' : 'translateY(-4px)',
        pointerEvents: open ? 'auto' : 'none', transition: 'opacity 140ms cubic-bezier(0.2,0,0,1), transform 140ms cubic-bezier(0.2,0,0,1)',
      }}>
        <div style={{ padding: '10px 16px', borderBottom: '1px solid var(--rule-soft)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-4)' }}>
          <a href="Services.html" style={{ color: 'var(--fg-4)', textDecoration: 'none' }} onMouseOver={(e) => e.currentTarget.style.color = 'var(--fg-2)'} onMouseOut={(e) => e.currentTarget.style.color = 'var(--fg-4)'}>What we host →</a>
        </div>
        {SERVICE_LINKS.map((s) => {
          const active = s.key === current;
          return (
            <a key={s.key} href={s.href}
              style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
                padding: '12px 16px', textDecoration: 'none', fontSize: 13.5,
                color: active ? 'var(--fg)' : 'var(--fg-2)',
                background: active ? 'var(--bg-alt)' : 'transparent', transition: 'background 120ms, color 120ms',
              }}
              onMouseOver={(e) => { e.currentTarget.style.background = 'var(--bg-alt)'; e.currentTarget.style.color = 'var(--fg)'; }}
              onMouseOut={(e) => { e.currentTarget.style.background = active ? 'var(--bg-alt)' : 'transparent'; e.currentTarget.style.color = active ? 'var(--fg)' : 'var(--fg-2)'; }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
                <span style={{ color: active ? 'var(--accent)' : 'var(--fg-5)', fontSize: 11 }}>{active ? '●' : '○'}</span>
                {s.label}
              </span>
              <span style={{ color: 'var(--accent)', fontSize: 12 }}>→</span>
            </a>
          );
        })}
      </div>
    </div>
  );
}

// ── Page hero scaffold ─────────────────────────────────────────────────────
// Left: eyebrow + headline + tagline + lead + CTAs. Right: a visual slot.
// Below: a 4-up stat strip. Visual is any node (the signature interactive).
function PageHero({ eyebrow, title, tagline, lead, ctas, visual, stats }) {
  return (
    <header id="top" data-screen-label="Hero" style={{ borderBottom: '1px solid var(--rule)', position: 'relative', background: 'var(--bg)' }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.6,
        backgroundImage: 'linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px)',
        backgroundSize: '64px 64px', maskImage: 'linear-gradient(to bottom, #000, transparent 80%)',
        WebkitMaskImage: 'linear-gradient(to bottom, #000, transparent 80%)',
      }} />
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '52px 32px 0', position: 'relative' }}>
        <div className="aux-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.04fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <Eyebrow index="01">{eyebrow}</Eyebrow>
            <h1 style={{ fontSize: 'clamp(38px, 4.6vw, 60px)', fontWeight: 400, lineHeight: 1.04, letterSpacing: '-0.03em', margin: '18px 0 0', color: 'var(--fg)' }}>
              {title}
            </h1>
            {tagline && (
              <p style={{ fontSize: 'clamp(17px,1.7vw,21px)', fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--accent)', margin: '20px 0 0', textShadow: '0 0 14px var(--accent-soft)', maxWidth: '24ch', lineHeight: 1.3 }}>
                {tagline}
              </p>
            )}
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg-2)', maxWidth: '52ch', margin: '20px 0 30px' }}>
              {lead}
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>{ctas}</div>
          </div>
          <div className="aux-hero-visual">{visual}</div>
        </div>

        {stats && (
          <div className="aux-stat-strip" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--rule)', marginTop: 64 }}>
            {stats.map(([big, label, sub], i) => (
              <div key={label} style={{ padding: '26px 28px 30px', borderLeft: i ? '1px solid var(--rule-soft)' : 'none' }}>
                <div style={{ fontSize: 32, fontWeight: 400, letterSpacing: '-0.03em', fontVariantNumeric: 'tabular-nums', lineHeight: 1, color: 'var(--fg)' }}>{big}</div>
                <div style={{ fontSize: 14, color: 'var(--fg)', marginTop: 12 }}>{label}</div>
                <div style={{ fontSize: 12, color: 'var(--fg-4)', marginTop: 3 }}>{sub}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    </header>
  );
}

// ── Feature grid ───────────────────────────────────────────────────────────
// features: [{ title, body, tag? }]
function FeatureSection({ id = 'features', index, eyebrow, title, intro, features, cols = 3, bgAlt }) {
  return (
    <Section id={id} pad={92} style={bgAlt ? { background: 'var(--bg-alt)' } : undefined}>
      <Eyebrow index={index}>{eyebrow}</Eyebrow>
      <h2 style={auxH2}>{title}</h2>
      {intro && <p style={{ fontSize: 15, color: 'var(--fg-2)', maxWidth: '60ch', margin: '0 0 40px', lineHeight: 1.6 }}>{intro}</p>}
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 0, border: '1px solid var(--rule)', borderRadius: 4, overflow: 'hidden', background: 'var(--surface)' }}
        className={cols === 3 ? 'aux-grid-3' : 'aux-grid-2'}>
        {features.map((f, i) => <FeatureCell key={f.title} f={f} n={i + 1} cols={cols} />)}
      </div>
    </Section>
  );
}

function FeatureCell({ f, n, cols }) {
  const [hover, setHover] = React.useState(false);
  // Top border on every cell after the first row; left border except first col.
  const firstCol = (n - 1) % cols === 0;
  const firstRow = n <= cols;
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        padding: 30, position: 'relative',
        borderLeft: firstCol ? 'none' : '1px solid var(--rule-soft)',
        borderTop: firstRow ? 'none' : '1px solid var(--rule-soft)',
        background: hover ? 'var(--bg-alt)' : 'var(--surface)', transition: 'background 140ms',
      }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontSize: 12, color: 'var(--accent)', fontVariantNumeric: 'tabular-nums' }}>{String(n).padStart(2, '0')}</span>
        {f.tag && <span style={auxMiniTag}>{f.tag}</span>}
      </div>
      <h3 style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em', margin: '14px 0 10px', lineHeight: 1.25, color: 'var(--fg)' }}>{f.title}</h3>
      <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>{f.body}</p>
    </div>
  );
}

// ── Comparison table ───────────────────────────────────────────────────────
// cols: [{ label, highlight? }]   rows: [{ label, cells: [str|node] }]
// The highlighted column gets the accent treatment (TensorHost).
function CompareSection({ id = 'compare', index, eyebrow, title, intro, cornerLabel = '', cols, rows, note, bgAlt }) {
  return (
    <Section id={id} pad={92} style={bgAlt ? { background: 'var(--bg-alt)' } : undefined}>
      <Eyebrow index={index}>{eyebrow}</Eyebrow>
      <h2 style={auxH2}>{title}</h2>
      {intro && <p style={{ fontSize: 15, color: 'var(--fg-2)', maxWidth: '62ch', margin: '0 0 36px', lineHeight: 1.6 }}>{intro}</p>}
      <div style={{ border: '1px solid var(--rule)', borderRadius: 4, overflowX: 'auto', background: 'var(--surface)' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14, fontVariantNumeric: 'tabular-nums', minWidth: 560 }}>
          <thead>
            <tr>
              <th style={auxThp(true)}>{cornerLabel}</th>
              {cols.map((c) => (
                <th key={c.label} style={c.highlight
                  ? { ...auxThp(false), color: 'var(--fg)', background: 'color-mix(in srgb, var(--accent) 14%, var(--surface))', borderBottom: '2px solid var(--accent)' }
                  : auxThp(false)}>
                  {c.highlight
                    ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ color: 'var(--accent)', textShadow: '0 0 8px var(--accent-soft)' }}>●</span> {c.label}</span>
                    : c.label}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => (
              <tr key={r.label} style={{ borderTop: '1px solid var(--rule-soft)' }}>
                <td style={{ ...auxTdp, fontWeight: 700, color: 'var(--fg)', whiteSpace: 'nowrap' }}>{r.label}</td>
                {r.cells.map((v, i) => {
                  const hl = cols[i] && cols[i].highlight;
                  return (
                    <td key={i} style={hl
                      ? { ...auxTdp, textAlign: 'center', background: 'color-mix(in srgb, var(--accent) 8%, var(--surface))', borderLeft: '1px solid color-mix(in srgb, var(--accent) 30%, var(--rule))', color: 'var(--fg)', fontWeight: 700 }
                      : { ...auxTdp, textAlign: 'center', color: v === '—' || v === '×' ? 'var(--fg-5)' : 'var(--fg-3)' }}>
                      {v}
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {note && <div style={{ marginTop: 18, fontSize: 12.5, color: 'var(--fg-4)', lineHeight: 1.6 }}>{note}</div>}
    </Section>
  );
}

// ── "What we are NOT" — dark differentiator list ────────────────────────────
// items: [{ not, body }]
function NotSection({ index, title, intro, items }) {
  return (
    <Section id="not" dark pad={96}>
      <div className="aux-not-grid" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 56, alignItems: 'start' }}>
        <div>
          <Eyebrow index={index} dark>What we're not</Eyebrow>
          <h2 style={{ fontSize: 'clamp(28px,3.2vw,38px)', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.14, margin: '16px 0 18px', color: 'var(--inv-fg)' }}>{title}</h2>
          {intro && <p style={{ fontSize: 15, color: 'var(--inv-fg-2)', maxWidth: '40ch', margin: 0, lineHeight: 1.65 }}>{intro}</p>}
        </div>
        <div style={{ borderTop: '1px solid var(--inv-rule)' }}>
          {items.map((it) => (
            <div key={it.not} style={{ display: 'grid', gridTemplateColumns: '20px 1fr', gap: 16, padding: '20px 0', borderBottom: '1px solid var(--inv-rule-2)', alignItems: 'baseline' }}>
              <span style={{ color: 'var(--accent)', fontSize: 14 }}>×</span>
              <div>
                <div style={{ fontSize: 16, color: 'var(--inv-fg)', fontWeight: 700, marginBottom: 5 }}>{it.not}</div>
                <div style={{ fontSize: 14, color: 'var(--inv-fg-3)', lineHeight: 1.6 }}>{it.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

// ── Closing CTA band (dark) ─────────────────────────────────────────────────
const CONTACT_PAGE = 'Contact.html';
// Resolve a CTA label to its destination: "Talk to us" / "Contact" → contact
// page; "Email …" → mailto; everything else → the standard contact route.
function ctaHref(label) {
  const l = (label || '').toLowerCase();
  if (l.startsWith('email')) return 'mailto:info@tensorhost.com';
  if (l.includes('talk') || l.includes('contact')) return CONTACT_PAGE;
  return CONTACT_HREF;
}
function CtaBand({ index, title, lead, primaryLabel = 'Get started', secondaryLabel = 'Talk to us' }) {
  return (
    <Section id="cta" dark pad={96}>
      <div className="aux-cta" style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 48, alignItems: 'center' }}>
        <div>
          <Eyebrow index={index} dark>Get started</Eyebrow>
          <h2 style={{ fontSize: 'clamp(30px,3.6vw,46px)', fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1.08, margin: '18px 0 16px', color: 'var(--inv-fg)' }}>{title}</h2>
          <p style={{ fontSize: 15, color: 'var(--inv-fg-2)', maxWidth: '46ch', lineHeight: 1.65, margin: 0 }}>{lead}</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
          <a href={ctaHref(primaryLabel)} style={auxInvPrimary}>{primaryLabel} <span style={{ color: 'var(--accent)' }}>→</span></a>
          <a href={ctaHref(secondaryLabel)} style={auxInvSecondary}>{secondaryLabel}</a>
          <div style={{ marginTop: 8, fontSize: 12.5, color: 'var(--inv-fg-3)', display: 'inline-flex', gap: 8, alignItems: 'center' }}>
            <span style={{ color: 'var(--accent)', textShadow: '0 0 9px var(--accent-soft)' }}>●</span> Toronto · Canadian residency
          </div>
        </div>
      </div>
    </Section>
  );
}

// ── shared style atoms ───────────────────────────────────────────────────────
const auxH2 = { fontSize: 'clamp(28px,3.2vw,40px)', fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1.15, margin: '16px 0 12px', color: 'var(--fg)' };
const auxMiniTag = { fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-4)', border: '1px solid var(--rule-soft)', borderRadius: 2, padding: '3px 8px' };
const auxThp = (first) => ({
  padding: '14px 16px', textAlign: first ? 'left' : 'center', fontWeight: 400,
  fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-3)',
  borderBottom: '2px solid var(--fg)', whiteSpace: 'nowrap',
});
const auxTdp = { padding: '15px 16px' };
const auxInvPrimary = { fontFamily: 'inherit', fontSize: 15, padding: '14px 24px', borderRadius: 2, textDecoration: 'none', background: 'var(--inv-fg)', color: 'var(--inv-bg)', border: '1px solid var(--inv-fg)', display: 'inline-flex', gap: 8, alignItems: 'center' };
const auxInvSecondary = { fontFamily: 'inherit', fontSize: 15, padding: '14px 24px', borderRadius: 2, textDecoration: 'none', background: 'transparent', color: 'var(--inv-fg)', border: '1px solid var(--inv-rule)', display: 'inline-flex', gap: 8, alignItems: 'center' };

// ── Footer (cross-page) ──────────────────────────────────────────────────────
function AuxFooter() {
  const cols = [
    ['Services', [['Web hosting', 'Web%20Hosting.html'], ['Cloud storage', 'Cloud%20Storage.html'], ['Business email', 'TensorMail.html'], ['GPU rentals', 'GPU%20Rentals.html']]],
    ['Company', [['Home', HOME_HREF], ['Privacy', 'Privacy.html'], ['Pricing', HOME_HREF + '#pricing'], ['FAQ', 'FAQ.html'], ['Contact', CONTACT_HREF]]],
    ['Legal', [['Terms', 'Terms.html'], ['Privacy policy', 'Privacy%20Policy.html'], ['Data processing (DPA)', 'Data%20Processing.html']]],
  ];
  return (
    <footer style={{ background: 'var(--inv-bg)', color: 'var(--inv-fg)', borderTop: '1px solid var(--inv-rule)' }}>
      <div className="aux-footer-grid" style={{ maxWidth: 1280, margin: '0 auto', padding: '72px 32px 40px', display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 48 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <img src="site/assets/logo-mark-white.svg" style={{ height: 30 }} alt="" />
            <span style={{ fontSize: 15, letterSpacing: '0.08em', fontWeight: 700 }}>TENSORHOST</span>
          </div>
          <p style={{ marginTop: 18, fontSize: 13, color: 'var(--inv-fg-3)', maxWidth: '34ch', lineHeight: 1.7 }}>
            Private hosting: web, email, storage, and GPU compute on hardware we own and operate, in Canada.
          </p>
          <div style={{ marginTop: 18, fontSize: 12, color: 'var(--inv-fg-3)', display: 'inline-flex', gap: 8, alignItems: 'center' }}>
            <span style={{ color: 'var(--accent)', textShadow: '0 0 9px var(--accent-soft)' }}>●</span> Toronto · Tier 3 datacenter
          </div>
        </div>
        {cols.map(([title, items]) => (
          <div key={title}>
            <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--inv-fg-3)', marginBottom: 16 }}>{title}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
              {items.map(([label, href]) => (
                <a key={label} href={href} style={{ fontSize: 13.5, color: 'var(--inv-fg-2)', textDecoration: 'none' }}
                   onMouseOver={e => e.currentTarget.style.color = 'var(--inv-fg)'} onMouseOut={e => e.currentTarget.style.color = 'var(--inv-fg-2)'}>{label}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid var(--inv-rule-2)' }}>
        <div className="aux-footer-legal" style={{ maxWidth: 1280, margin: '0 auto', padding: '24px 32px', display: 'flex', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', fontSize: 11.5, color: 'var(--inv-fg-3)', lineHeight: 1.7 }}>
          <div>
            GPU Server Hosts Limited, trading as TensorHost · Registered in England and Wales no. 16543032<br />
            Registered office: 203 West Street, Fareham, Hampshire, PO16 0EN · VAT 496497322
          </div>
          <div style={{ whiteSpace: 'nowrap', display: 'inline-flex', gap: 8, alignItems: 'center', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
            <span style={{ color: 'var(--accent)', textShadow: '0 0 9px var(--accent-soft)' }}>●</span> All systems operational
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  AUX_PAGES, HOME_HREF, CONTACT_HREF, SIGNIN_HREF, REGISTER_HREF, NAV_LINKS, SERVICE_LINKS,
  AuxNav, SiteNav: AuxNav, ServicesMenu,
  PageHero, FeatureSection, CompareSection, NotSection, CtaBand, AuxFooter,
});