// ============================================================
// DEMIURGE — SHARED SITE CHROME
// SiteNav + SiteFooter with the canonical link map. Loaded by every
// standalone page so footer/nav destinations stay correct everywhere.
// Exposes globals: SITE_LINKS, SiteBrand, SiteNav, SiteFooter.
// ============================================================

const S = (typeof window !== 'undefined' && window.SITE) || {};

const SITE_LINKS = {
  company: [
    { label: 'Manifesto', href: '/manifesto' },
    { label: 'Research', href: '/research' },
    { label: 'Operators wanted', href: '/operators' },
    { label: 'Press', href: '/press' }
  ],
  legal: [
    { label: 'Legal', href: '/legal' },
    { label: 'Privacy', href: '/legal/privacy' },
    { label: 'DPA · GDPR', href: '/legal/dpa-gdpr' },
    { label: 'Security · SOC 2', href: '/legal/security' },
    { label: 'Terms', href: '/legal/terms' }
  ],
  product: [
    { label: 'Packages', href: '/packages' },
    { label: 'Full system', href: '/full' },
    { label: 'Book a strategy call', href: '/contact' }
  ]
};

const SiteBrand = ({ href = '/' }) => (
  <a href={href} className="lp-brand" aria-label="Demiurge Systems — home">
    <div className="lp-brand-mark">
      <svg viewBox="0 0 32 32" width="32" height="32" aria-hidden="true" focusable="false">
        <defs>
          <radialGradient id="sc-orb" cx="35%" cy="35%">
            <stop offset="0%" stopColor="#fff"/><stop offset="40%" stopColor="#c8a8ff"/><stop offset="100%" stopColor="#1e1455"/>
          </radialGradient>
          <linearGradient id="sc-ring" x1="0%" x2="100%">
            <stop offset="0%" stopColor="#4be8ff"/><stop offset="100%" stopColor="#8b6bff"/>
          </linearGradient>
        </defs>
        <circle cx="16" cy="16" r="11" fill="url(#sc-orb)"/>
        <ellipse cx="16" cy="16" rx="15" ry="4" fill="none" stroke="url(#sc-ring)" strokeWidth="1" transform="rotate(-22 16 16)"/>
      </svg>
    </div>
    <span className="lp-brand-name">Demiurge</span>
    <span className="lp-brand-sys">/ Systems</span>
  </a>
);

const SiteNav = ({ active }) => (
  <nav className="lp-nav">
    <div className="lp-nav-inner">
      <SiteBrand/>
      <div className="lp-nav-spacer"></div>
      <div className="lp-nav-links">
        <a href="/full" aria-current={active === 'full' ? 'page' : undefined}>Full system</a>
        <a href="/packages" aria-current={active === 'packages' ? 'page' : undefined}>Packages</a>
      </div>
      <a href="/contact" className="lp-btn primary lp-nav-cta" style={{padding: '10px 18px', fontSize: 12.5}}>
        Book a call
      </a>
    </div>
  </nav>
);

const SiteFooter = () => (
  <footer className="lp-foot site-foot">
    <div className="lp">
      <div className="site-foot-grid">
        <div className="site-foot-brand">
          <SiteBrand/>
          <p className="site-foot-tag">Autonomous operators that book meetings, answer calls, and run your growth — with a human holding the wheel.</p>
          <a href="/contact" className="lp-btn" style={{marginTop: 4}}>Book a strategy call</a>
        </div>
        <div className="site-foot-col">
          <div className="site-foot-h">Company</div>
          {SITE_LINKS.company.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
        </div>
        <div className="site-foot-col">
          <div className="site-foot-h">Legal</div>
          {SITE_LINKS.legal.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
        </div>
        <div className="site-foot-col">
          <div className="site-foot-h">Product</div>
          {SITE_LINKS.product.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
        </div>
      </div>
      <div className="site-foot-base">
        <div className="l">
          <span>© 2026 {S.legalName || 'Demiurge Systems Ltd'}</span>
          <span className="sep">·</span>
          <span>{S.registration || 'Registered in England · 17109558'}</span>
          <span className="sep">·</span>
          <a href={`mailto:${S.contactEmail || 'ops@demiurge.systems'}`}>{S.contactEmail || 'ops@demiurge.systems'}</a>
        </div>
        <div className="r">
          <a href="/legal/privacy">Privacy</a>
          <a href="/legal/terms">Terms</a>
          <a href="/legal">Legal</a>
        </div>
      </div>
    </div>
  </footer>
);

if (typeof window !== 'undefined') {
  window.SITE_LINKS = SITE_LINKS;
  window.SiteBrand = SiteBrand;
  window.SiteNav = SiteNav;
  window.SiteFooter = SiteFooter;
}