// shared.jsx — Verigo Global: brand mark, icons, navigation, footer, UI primitives
// All exported to window for cross-file use.

/* ── PALETTE ─────────────────────────────────────────────── */
const V = {
  purple: '#4B4FD9', purpleLight: '#6E72E8', purpleDark: '#3438B0', purpleSubtle: '#EBEBFA',
  orange: '#E8622A', orangeLight: '#F08050', orangeDark: '#C44E1E', orangeSubtle: '#FDF0EA',
  black: '#0A0A0A', charcoal: '#1E1E2E', ink: '#111118',
  g900: '#111118', g800: '#222230', g700: '#3A3A4A', g600: '#5A5A6A', g500: '#7A7A8A',
  g400: '#9A9AAA', g300: '#C0C0CC', g200: '#DCDCE8', g100: '#EDEDF5', g50: '#F5F5F7', white: '#FFFFFF'
};
const MAXW = 1280;
const FONT = "'DM Sans', system-ui, sans-serif";

/* ── SUPABASE (form inquiries) ──────────────────────────────
   Loaded via CDN script tag (window.supabase) on every page.
   The anon key below is the public/browser key — it is safe to
   ship client-side; write access is restricted by the `inquiries`
   table's Row Level Security policy (insert-only, no read). ── */
const SUPABASE_URL = 'https://vgktunjxooukoinvxqcl.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZna3R1bmp4b291a29pbnZ4cWNsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODIwODg3NzYsImV4cCI6MjA5NzY2NDc3Nn0.vyUi8XCNqiGJGqp_UtawGXFEQD7V5VCBpyAeo5RO54g';

function getSupabaseClient() {
  if (!window.supabase || !window.supabase.createClient) return null;
  if (!window.__vgSupabase) {
    window.__vgSupabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
  }
  return window.__vgSupabase;
}

// Called after a successful insert. Fires the admin-notification Edge Function
// directly from the browser — no Database Webhook involved, so it isn't
// affected by that feature's setup on any given Supabase project. Never
// throws and never awaited by the caller: a slow or failed email send must
// never block or fail the form itself, since the inquiry is already saved.
function notifyAdmin(row) {
  try {
    fetch(SUPABASE_URL + '/functions/v1/send-inquiry-email', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + SUPABASE_ANON_KEY },
      body: JSON.stringify({ record: { ...row, created_at: new Date().toISOString() } }),
    }).catch((e) => console.warn('Admin email notification failed (inquiry was still saved):', e));
  } catch (e) {
    console.warn('Admin email notification failed (inquiry was still saved):', e);
  }
}

// Insert into the `inquiries` table, then fire the admin notification email.
// Never throws and never blocks the calling form's existing UX (unlock/download/
// etc still happens even if this fails or the SDK hasn't loaded yet — this is
// additive, not load-bearing).
async function submitInquiry(payload) {
  try {
    const client = getSupabaseClient();
    if (!client) { console.warn('Supabase not available; inquiry not saved remotely.'); return { error: 'no-client' }; }
    const row = {
      form_type: payload.form_type || 'unknown',
      name: payload.name || null,
      email: payload.email || null,
      company: payload.company || null,
      phone: payload.phone || null,
      framework: payload.framework || null,
      service_interest: payload.service_interest || null,
      message: payload.message || null,
      source_page: (typeof window !== 'undefined' && window.location) ? window.location.pathname : null,
      metadata: payload.metadata || null,
    };
    const { error } = await client.from('inquiries').insert([row]);
    if (error) { console.error('Supabase insert failed:', error.message); return { error }; }
    notifyAdmin(row);
    return { error: null };
  } catch (e) {
    console.error('submitInquiry error:', e);
    return { error: e };
  }
}

/* ── BRAND MARK (split-color V with orange accent) ───────── */
const BrandMark = ({ size = 40, light = false }) =>
<svg width={size} height={size} viewBox="0 0 100 100" fill="none" role="img" aria-label="Verigo">
    <defs>
      <clipPath id={'vm' + size + (light ? 'L' : '')}>
        <path d="M6 16 L30 16 L50 58 L70 16 L94 16 L57 90 L43 90 Z" />
      </clipPath>
    </defs>
    <g clipPath={`url(#vm${size}${light ? 'L' : ''})`}>
      <rect x="0" y="0" width="100" height="100" fill={light ? '#C9CBFF' : V.black} />
      <path d="M0 0 H100 V52 L50 70 L0 52 Z" fill={V.purple} />
    </g>
    <circle cx="84" cy="80" r="9" fill={V.orange} />
  </svg>;


/* ── ICONS — lucide-style, 24×24, 1.75 stroke ───────────── */
const I = (paths) => ({ size = 24, color = 'currentColor', sw = 1.75 } = {}) =>
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">{paths}</svg>;

const ICN = {
  shield: I(<><path d="M12 2.5 4.5 5.5v6c0 5 7.5 8.5 7.5 8.5s7.5-3.5 7.5-8.5v-6L12 2.5Z" fill="currentColor" fillOpacity="0.1" /><path d="m8.8 12 2.2 2.2 4.4-4.4" /></>),
  search: I(<><circle cx="11" cy="11" r="7" fill="currentColor" fillOpacity="0.1" /><path d="m20.5 20.5-4-4" /></>),
  clipboard: I(<><rect x="4.5" y="4" width="15" height="18" rx="3" fill="currentColor" fillOpacity="0.1" /><rect x="8.5" y="2.5" width="7" height="4" rx="2" /><path d="M8.5 12h7M8.5 16h4.5" /></>),
  file: I(<><path d="M6 2.5h7l5 5V20a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 5 20V4A1.5 1.5 0 0 1 6.5 2.5Z" fill="currentColor" fillOpacity="0.1" /><path d="M13 2.5V8h5" /><path d="m8.6 14.5 1.8 1.8 3.6-3.6" /></>),
  activity: I(<><rect x="2.5" y="4.5" width="19" height="15" rx="3" fill="currentColor" fillOpacity="0.1" /><path d="M6 13l2.5-3 2.5 4 2-6 2.5 5H18" /></>),
  users: I(<><circle cx="9" cy="8" r="3.5" fill="currentColor" fillOpacity="0.1" /><path d="M3 20v-1a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v1" fill="currentColor" fillOpacity="0.1" /><path d="M16 5.5a3.5 3.5 0 0 1 0 6.8M17.5 20v-1a5 5 0 0 0-2.5-4.3" /></>),
  globe: I(<><circle cx="12" cy="12" r="9" fill="currentColor" fillOpacity="0.1" /><path d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18" /></>),
  target: I(<><circle cx="12" cy="12" r="9" fill="currentColor" fillOpacity="0.08" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.4" fill="currentColor" /></>),
  layers: I(<><path d="M12 3 3 7.5l9 4.5 9-4.5L12 3Z" fill="currentColor" fillOpacity="0.1" /><path d="m3 12 9 4.5L21 12M3 16.5 12 21l9-4.5" /></>),
  award: I(<><circle cx="12" cy="9" r="6" fill="currentColor" fillOpacity="0.1" /><path d="m8.5 14-1.5 7 5-3 5 3-1.5-7" /></>),
  gauge: I(<><path d="M21 12a9 9 0 1 0-18 0" fill="currentColor" fillOpacity="0.08" /><path d="M12 12 16 8" /><circle cx="12" cy="12" r="1.4" fill="currentColor" /></>),
  refresh: I(<><path d="M21 8a9 9 0 0 0-15.5-3L3 7.5M3 4v3.5h3.5" /><path d="M3 16a9 9 0 0 0 15.5 3L21 16.5M21 20v-3.5h-3.5" /></>),
  lock: I(<><rect x="4.5" y="10" width="15" height="11" rx="2.5" fill="currentColor" fillOpacity="0.1" /><path d="M8 10V7a4 4 0 0 1 8 0v3" /><circle cx="12" cy="15.5" r="1.4" fill="currentColor" /></>),
  network: I(<><circle cx="12" cy="5" r="2.5" fill="currentColor" fillOpacity="0.12" /><circle cx="5" cy="19" r="2.5" fill="currentColor" fillOpacity="0.12" /><circle cx="19" cy="19" r="2.5" fill="currentColor" fillOpacity="0.12" /><path d="M12 7.5v4M12 11.5 6.5 17M12 11.5 17.5 17" /></>),
  building: I(<><rect x="5" y="3" width="14" height="18" rx="2" fill="currentColor" fillOpacity="0.1" /><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2M10 21v-3h4v3" /></>),
  briefcase: I(<><rect x="3" y="7" width="18" height="13" rx="2.5" fill="currentColor" fillOpacity="0.1" /><path d="M8.5 7V5.5a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2V7M3 12h18" /></>),
  check: I(<><circle cx="12" cy="12" r="9" fill="currentColor" fillOpacity="0.1" /><path d="m8.5 12 2.3 2.3 4.7-4.6" /></>),
  arrow: I(<><path d="M5 12h14M13 6l6 6-6 6" /></>),
  mapPin: I(<><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z" fill="currentColor" fillOpacity="0.1" /><circle cx="12" cy="10" r="2.5" /></>),
  trending: I(<><path d="M3 16.5 9 10l4 4 8-8.5" /><path d="M16 5.5h5v5" /></>),
  zap: I(<><path d="M13 2 4 13.5h7L10 22l9-11.5h-7L13 2Z" fill="currentColor" fillOpacity="0.12" /></>),
  handshake: I(<><path d="m11 17 2 2a1.5 1.5 0 0 0 2.5-1.5M12.5 11l3 3a1.5 1.5 0 0 0 2.5-1.5l-2.8-3.2a3 3 0 0 0-2.3-1H10l-3 2" /><path d="M3 8.5 6 6h4l2.5 2.5" /><path d="m18 9 3-2.5" /></>),
  book: I(<><path d="M5 4.5A2.5 2.5 0 0 1 7.5 2H19v17H7.5A2.5 2.5 0 0 0 5 21.5V4.5Z" fill="currentColor" fillOpacity="0.1" /><path d="M5 4.5A2.5 2.5 0 0 0 7.5 7H19" /></>),
  cpu: I(<><rect x="6" y="6" width="12" height="12" rx="2.5" fill="currentColor" fillOpacity="0.1" /><rect x="9.5" y="9.5" width="5" height="5" rx="1" /><path d="M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3" /></>),
  server: I(<><rect x="3" y="4" width="18" height="7" rx="2" fill="currentColor" fillOpacity="0.1" /><rect x="3" y="13" width="18" height="7" rx="2" fill="currentColor" fillOpacity="0.1" /><path d="M7 7.5h.01M7 16.5h.01" /></>),
  scale: I(<><path d="M12 3v18M7 21h10M12 5 5 8l-2.5 6a4 4 0 0 0 5 0L5 8M12 5l7 3 2.5 6a4 4 0 0 1-5 0L19 8" /></>),
  compass: I(<><circle cx="12" cy="12" r="9" fill="currentColor" fillOpacity="0.08" /><path d="m15.5 8.5-2 5-5 2 2-5 5-2Z" fill="currentColor" fillOpacity="0.2" /></>),
  flag: I(<><path d="M5 21V4M5 4h11l-1.5 4L16 12H5" fill="currentColor" fillOpacity="0.1" /></>),
  heart: I(<><path d="M12 20s-7-4.5-7-9.5A4 4 0 0 1 12 7a4 4 0 0 1 7 3.5C19 15.5 12 20 12 20Z" fill="currentColor" fillOpacity="0.1" /></>),
  bolt: I(<><path d="M4 13h6l-1 8 11-12h-6l1-8L4 13Z" fill="currentColor" fillOpacity="0.12" /></>),
  doc: I(<><path d="M6 2.5h7l5 5V20a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 5 20V4A1.5 1.5 0 0 1 6.5 2.5Z" fill="currentColor" fillOpacity="0.1" /><path d="M13 2.5V8h5M8.5 13h7M8.5 16.5h5" /></>),
  star: I(<><path d="M12 3.5 14.6 9l6 .8-4.4 4.2 1.1 6L12 17.2 6.7 20l1.1-6L3.4 9.8 9.4 9 12 3.5Z" fill="currentColor" fillOpacity="0.12" /></>)
};
const Icon = ({ name, size = 24, color = 'currentColor', sw = 1.75 }) => {
  const C = ICN[name] || ICN.shield;
  return <C size={size} color={color} sw={sw} />;
};

/* ── GEO WATERMARK ───────────────────────────────────────── */
const GeoWatermark = ({ color = V.purple, style }) =>
<svg viewBox="0 0 420 360" fill="none" stroke={color} strokeWidth="1.4"
preserveAspectRatio="xMidYMid slice" aria-hidden="true" className="vg-watermark"
style={{ position: 'absolute', pointerEvents: 'none', ...style }}>
    <circle cx="340" cy="70" r="64" /><circle cx="340" cy="70" r="44" /><circle cx="340" cy="70" r="24" />
    <polygon points="60,300 130,170 200,300" />
    <rect x="250" y="230" width="86" height="86" transform="rotate(18 293 273)" />
    <polygon points="70,70 104,70 121,100 104,130 70,130 53,100" />
    {[0, 1, 2, 3].map((r) => [0, 1, 2, 3].map((c) =>
  <circle key={`${r}-${c}`} cx={180 + c * 26} cy={40 + r * 26} r="2.2" fill={color} stroke="none" />
  ))}
    <path d="M20 330 L160 330 M20 348 L120 348" opacity="0.7" />
  </svg>;


/* ── HERO WATERMARKS — one distinct, darker variant per page ─ */
const hexPts = (cx, cy, r) => [30, 90, 150, 210, 270, 330].map((a) => {
  const rad = a * Math.PI / 180;
  return `${(cx + r * Math.cos(rad)).toFixed(1)},${(cy + r * Math.sin(rad)).toFixed(1)}`;
}).join(' ');

const WM_VARIANTS = {
  // Home — angular faceted grid + nested squares
  arch: (c) => <>
    {[0, 1, 2, 3, 4].map((i) => <line key={'v' + i} x1={i * 105} y1="0" x2={i * 105} y2="360" opacity="0.16" />)}
    {[0, 1, 2, 3].map((i) => <line key={'h' + i} x1="0" y1={i * 100} x2="420" y2={i * 100} opacity="0.16" />)}
    <g transform="translate(280 165)">{[154, 110, 66].map((s, i) => <rect key={i} x={-s / 2} y={-s / 2} width={s} height={s} transform="rotate(45)" opacity={0.85 - i * 0.18} />)}</g>
    <circle cx="280" cy="165" r="132" opacity="0.5" />
    <path d="M70 60 L180 130 L70 220 Z" opacity="0.55" />
    <circle cx="280" cy="165" r="5" fill={c} stroke="none" />
  </>,
  // Services — concentric rings + radiating spokes
  rings: (c) => <>
    {[130, 96, 62, 30].map((r, i) => <circle key={i} cx="300" cy="95" r={r} opacity={0.9 - i * 0.13} />)}
    {[0, 30, 60, 90, 120, 150, 180].map((a, i) => {const rad = a * Math.PI / 180;return <line key={'l' + i} x1="300" y1="95" x2={(300 + 162 * Math.cos(rad)).toFixed(1)} y2={(95 + 162 * Math.sin(rad)).toFixed(1)} opacity="0.25" />;})}
    <polygon points="50,310 120,185 190,310" opacity="0.6" />
    <circle cx="300" cy="95" r="4" fill={c} stroke="none" />
  </>,
  // Toolkits — stacked layers + dot field
  stack: (c) => <>
    {[0, 1, 2, 3].map((i) => <polygon key={i} points={`${110 - i * 6},${120 + i * 46} ${290 - i * 6},${74 + i * 46} ${360 - i * 6},${108 + i * 46} ${180 - i * 6},${154 + i * 46}`} opacity={0.8 - i * 0.15} />)}
    {[0, 1, 2, 3, 4].map((r) => [0, 1, 2, 3, 4].map((cc) => <circle key={r + '-' + cc} cx={42 + cc * 20} cy={40 + r * 20} r="2" fill={c} stroke="none" opacity="0.45" />))}
  </>,
  // Standards — hexagon tessellation
  hex: (c) => <>
    {[[305, 85], [365, 185], [305, 285], [200, 125], [200, 245], [140, 185]].map(([x, y], i) => <polygon key={i} points={hexPts(x, y, 54)} opacity={0.72 - i * 0.07} style={{ stroke: "rgb(181, 85, 0)", strokeWidth: "2.5px", opacity: "0.92" }} />)}
    <polygon points={hexPts(245, 185, 54)} opacity="0.9" />
    <circle cx="245" cy="185" r="5" fill={c} stroke="none" />
  </>,
  // Partners — network graph
  nodes: (c) => {
    const pts = [[305, 75], [372, 155], [330, 255], [215, 95], [165, 205], [260, 180], [115, 120]];
    const edges = [[5, 0], [5, 1], [5, 2], [5, 3], [5, 4], [3, 0], [6, 3], [4, 2]];
    return <>
      {edges.map(([a, b], i) => <line key={i} x1={pts[a][0]} y1={pts[a][1]} x2={pts[b][0]} y2={pts[b][1]} opacity="0.38" />)}
      {pts.map(([x, y], i) => <circle key={'r' + i} cx={x} cy={y} r={i === 5 ? 16 : 11} opacity="0.5" />)}
      {pts.map(([x, y], i) => <circle key={'n' + i} cx={x} cy={y} r={i === 5 ? 8 : 5} fill={c} stroke="none" opacity={i === 5 ? 0.9 : 0.55} />)}
    </>;
  },
  // About — orbit rings + crosshair
  orbit: (c) => <>
    <circle cx="295" cy="160" r="122" opacity="0.5" />
    <circle cx="295" cy="160" r="78" opacity="0.7" />
    <ellipse cx="295" cy="160" rx="122" ry="48" opacity="0.38" />
    <line x1="295" y1="22" x2="295" y2="298" opacity="0.28" />
    <line x1="155" y1="160" x2="435" y2="160" opacity="0.28" />
    <path d="M255 120 L335 120 L375 160 L335 200 L255 200 L215 160 Z" opacity="0.5" />
    <circle cx="295" cy="160" r="5" fill={c} stroke="none" />
  </>,
  // Contact — dot matrix + diagonal + square
  grid: (c) => <>
    {Array.from({ length: 6 }).map((_, r) => Array.from({ length: 8 }).map((_, cc) => <circle key={r + '-' + cc} cx={70 + cc * 42} cy={50 + r * 48} r="3" fill={c} stroke="none" opacity={0.5 - r * 0.04} />))}
    <line x1="40" y1="320" x2="210" y2="195" opacity="0.38" />
    <line x1="40" y1="350" x2="170" y2="255" opacity="0.38" />
    <rect x="250" y="58" width="112" height="112" transform="rotate(15 306 114)" opacity="0.5" />
  </>
};

const HeroWatermark = ({ variant = 'rings', color, opacity = 0.14, style }) => {
  const c = color || V.purpleDark;
  return (
    <svg viewBox="0 0 420 360" fill="none" stroke={c} strokeWidth="1.4"
    preserveAspectRatio="xMidYMid slice" aria-hidden="true" className="vg-watermark"
    style={{ position: 'absolute', pointerEvents: 'none', opacity, ...style, height: "480px" }}>
      {(WM_VARIANTS[variant] || WM_VARIANTS.rings)(c)}
    </svg>);
};

/* ── HEADER ──────────────────────────────────────────────── */
const NAV = [
{ id: 'services', label: 'Services' },
{ id: 'training', label: 'Training' },
{ id: 'toolkits', label: 'Toolkits' },
{ id: 'standards', label: 'Standards' },
{ id: 'partners', label: 'Partners' },
{ id: 'resources', label: 'Resources' },
{ id: 'about', label: 'About Us' }];

const Header = ({ page, onNav }) => {
  const active = (page || '').split(':')[0];
  const [open, setOpen] = React.useState(false);
  const go = (dest) => { setOpen(false); onNav(dest); };
  return (
    <header style={hd.root}>
      <div style={hd.inner} className="vg-container vg-header-inner">
        <div style={hd.logo} onClick={() => go('home')} role="button">
          <img src="data:image/png;base64,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" height="34" alt="Verigo Global" className="vg-logo-img" style={{ width: "143px", height: "54px" }} />
        </div>
        <nav style={hd.nav} className="vg-nav-links">
          {NAV.map((l) =>
          <a key={l.id} href="#" onClick={(e) => {e.preventDefault();go(l.id);}}
          style={{ ...hd.link, ...(active === l.id ? hd.linkActive : {}) }}>{l.label}</a>
          )}
        </nav>
        <div style={hd.actions} className="vg-nav-links">
          <button style={hd.btnGhost} onClick={() => go('about')}>Compliance by Design</button>
          <button style={{ ...hd.btnPrimary, background: "rgb(73, 10, 143)" }} onClick={() => go('contact')}>Start a Conversation</button>
        </div>
        <button aria-label={open ? 'Close menu' : 'Open menu'} onClick={() => setOpen((o) => !o)} className="vg-nav-toggle" style={hd.toggle}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            {open ? <path d="M6 6l12 12M18 6L6 18" /> : <path d="M4 7h16M4 12h16M4 17h16" />}
          </svg>
        </button>
      </div>
      {open &&
      <div className="vg-mobile-menu" style={hd.mobilePanel}>
          {NAV.map((l) =>
        <a key={l.id} href="#" onClick={(e) => {e.preventDefault();go(l.id);}}
        style={{ ...hd.mobileLink, ...(active === l.id ? hd.mobileLinkActive : {}) }}>{l.label}</a>
        )}
          <div style={hd.mobileActions}>
            <button style={{ ...hd.btnGhost, width: '100%', justifyContent: 'center' }} onClick={() => go('about')}>Compliance by Design</button>
            <button style={{ ...hd.btnPrimary, background: "rgb(73, 10, 143)", width: '100%', justifyContent: 'center' }} onClick={() => go('contact')}>Start a Conversation</button>
          </div>
        </div>
      }
    </header>);

};
const hd = {
  root: { position: 'sticky', top: 0, zIndex: 100, background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(12px)', borderBottom: `1px solid ${V.g200}`, height: 68 },
  inner: { maxWidth: MAXW, margin: '0 auto', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 32px' },
  logo: { display: 'flex', alignItems: 'center', cursor: 'pointer' },
  nav: { display: 'flex', gap: 2 },
  link: { fontSize: 14, fontWeight: 500, color: V.g600, padding: '8px 14px', borderRadius: 7, textDecoration: 'none', transition: 'all 150ms ease-out', fontFamily: FONT },
  linkActive: { color: V.purple, fontWeight: 600, background: V.purpleSubtle },
  actions: { display: 'flex', gap: 10, alignItems: 'center' },
  btnGhost: { fontFamily: FONT, fontSize: 13, fontWeight: 600, padding: '9px 16px', borderRadius: 8, cursor: 'pointer', background: 'transparent', color: V.black, border: `1.5px solid ${V.g200}`, transition: 'all 150ms' },
  btnPrimary: { fontFamily: FONT, fontSize: 13, fontWeight: 600, padding: '9px 18px', borderRadius: 8, cursor: 'pointer', background: V.purple, color: '#fff', border: 'none', transition: 'all 150ms' },
  toggle: { display: 'none', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, flexShrink: 0, background: 'transparent', color: V.black, border: `1.5px solid ${V.g200}`, borderRadius: 8, cursor: 'pointer', padding: 0 },
  mobilePanel: { position: 'absolute', top: '100%', left: 0, right: 0, background: '#fff', borderBottom: `1px solid ${V.g200}`, boxShadow: '0 16px 32px rgba(0,0,0,0.10)', display: 'flex', flexDirection: 'column', padding: '8px 20px 24px', zIndex: 99, maxHeight: 'calc(100vh - 68px)', overflowY: 'auto' },
  mobileLink: { display: 'block', padding: '13px 4px', fontSize: 15.5, fontWeight: 600, color: V.g700, textDecoration: 'none', borderBottom: `1px solid ${V.g100}`, fontFamily: FONT },
  mobileLinkActive: { color: V.purple },
  mobileActions: { display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16 }
};

/* ── FOOTER ──────────────────────────────────────────────── */
const Footer = ({ onNav }) => {
  const cols = [
  ['Services', [['Readiness Assessments', 'services'], ['Implementation Toolkits', 'toolkits'], ['Pre-Audit Preparation', 'services'], ['Formal Audits', 'services'], ['CCP Training', 'training']]],
  ['Standards', [['ISO 27001', 'standard:iso27001'], ['SOC 2', 'standard:soc2'], ['CMMC 2.0', 'standard:cmmc'], ['NIST', 'standard:nist']]],
  ['Resources', [['Webinars', 'resources'], ['Articles', 'resources'], ['Free Downloads', 'resources'], ['Knowledge Base', 'resources']]],
  ['Company', [['About Us', 'about'], ['Partners', 'partners'], ['Compliance by Design', 'about'], ['Start a Conversation', 'contact']]]];

  return (
    <React.Fragment>
      <ScrollTopBtn />
      <footer style={ft.root}>
      <div style={ft.inner} className="vg-container">
        <div style={ft.top} className="vg-footer-top">
          <div>
            <div style={{ marginBottom: 18 }}><BrandMark size={44} light /></div>
            <p style={ft.tagline}>Compliance by Design. We embed recognized security frameworks into how your organization operates — so compliance is a state, not an event.</p>
            <div style={ft.markets}>
              {['United States', 'United Kingdom', 'India', 'Singapore'].map((m) =>
              <span key={m} style={ft.market}>{m}</span>
              )}
            </div>
          </div>
          <div style={ft.cols} className="vg-footer-cols">
            {cols.map(([heading, items]) =>
            <div key={heading} style={ft.col}>
                <div style={ft.colHead}>{heading}</div>
                {items.map(([label, dest]) =>
              <a key={label} href="#" style={ft.colLink}
              onClick={(e) => {e.preventDefault();onNav(dest);}}>{label}</a>
              )}
              </div>
            )}
          </div>
        </div>
        <div style={ft.bottom}>
          <span style={ft.copy}>© 2026 Verigo Global. All rights reserved. Information Security Compliance Consulting.</span>
          <div style={ft.legal}>
            {['CISSP', 'CISM', 'ISO 27001 LA', 'CMMC CCA'].map((c) => <span key={c} style={ft.cred}>{c}</span>)}
          </div>
        </div>
      </div>
    </footer>
    </React.Fragment>);

};

const ScrollTopBtn = () => {
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const h = () => setVis(window.pageYOffset > 500);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);
  if (!vis) return null;
  return (
    <button onClick={() => window.scrollTo({ top:0, behavior:'smooth' })} title="Back to top"
      style={{ position:'fixed', bottom:32, right:32, width:46, height:46,
        background:V.purple, border:'none', borderRadius:6, cursor:'pointer',
        display:'flex', alignItems:'center', justifyContent:'center',
        zIndex:900, boxShadow:'0 4px 18px rgba(75,79,217,0.45)' }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5">
        <polyline points="18 15 12 9 6 15" />
      </svg>
    </button>
  );
};

const ft = {
  root: { background: V.charcoal, padding: '72px 0 0' },
  inner: { maxWidth: MAXW, margin: '0 auto', padding: '0 32px' },
  top: { display: 'grid', gridTemplateColumns: '360px 1fr', gap: 72, paddingBottom: 48, borderBottom: '1px solid rgba(255,255,255,0.08)' },
  tagline: { fontSize: 14, color: 'rgba(255,255,255,0.5)', lineHeight: 1.65, margin: '0 0 22px', maxWidth: 320 },
  markets: { display: 'flex', flexWrap: 'wrap', gap: 8 },
  market: { fontSize: 11, fontWeight: 600, padding: '5px 11px', borderRadius: 9999, background: 'rgba(75,79,217,0.2)', color: '#9aa0f5', letterSpacing: '0.02em' },
  cols: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 },
  col: { display: 'flex', flexDirection: 'column', gap: 11 },
  colHead: { fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', marginBottom: 4 },
  colLink: { fontSize: 13.5, color: 'rgba(255,255,255,0.62)', textDecoration: 'none', transition: 'color 150ms', fontFamily: FONT },
  bottom: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '22px 0', gap: 24, flexWrap: 'wrap' },
  copy: { fontSize: 12, color: 'rgba(255,255,255,0.3)' },
  legal: { display: 'flex', gap: 8 },
  cred: { fontSize: 10, fontWeight: 600, padding: '3px 8px', borderRadius: 4, background: 'rgba(255,255,255,0.06)', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.04em', fontFamily: "'JetBrains Mono', monospace" }
};

/* ── UI PRIMITIVES ───────────────────────────────────────── */
const Overline = ({ children, color = V.orange, style }) =>
<div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color, ...style }}>{children}</div>;


const SectionHeader = ({ overline, title, sub, align = 'left', maxSub = 560, dark = false }) =>
<div style={{ textAlign: align, marginBottom: 48, ...(align === 'center' ? { marginLeft: 'auto', marginRight: 'auto' } : {}) }}>
    {overline && <Overline style={{ marginBottom: 14 }}>{overline}</Overline>}
    <h2 className="vg-section-title" style={{ fontSize: 42, fontWeight: 800, letterSpacing: '-0.03em', color: dark ? '#fff' : V.black, margin: '0 0 16px', lineHeight: 1.1, fontFamily: FONT }}>{title}</h2>
    {sub && <p style={{ fontSize: 17, color: dark ? 'rgba(255,255,255,0.6)' : V.g500, maxWidth: maxSub, margin: align === 'center' ? '0 auto' : 0, lineHeight: 1.65 }}>{sub}</p>}
  </div>;


const Btn = ({ children, kind = 'primary', onClick, style }) => {
  const base = { fontFamily: FONT, fontSize: 15, fontWeight: 600, padding: '14px 28px', borderRadius: 9, cursor: 'pointer', border: 'none', transition: 'all 150ms ease-out', display: 'inline-flex', alignItems: 'center', gap: 8 };
  const kinds = {
    primary: { background: V.purple, color: '#fff' },
    dark: { background: V.black, color: '#fff' },
    accent: { background: V.orange, color: '#fff' },
    ghost: { background: 'transparent', color: V.black, border: `1.5px solid ${V.g200}`, padding: '12.5px 26px' },
    ghostLight: { background: 'transparent', color: '#fff', border: '1.5px solid rgba(255,255,255,0.25)', padding: '12.5px 26px' },
    ghostBrand: { background: 'transparent', color: V.purple, border: `1.5px solid ${V.purple}`, padding: '12.5px 26px' }
  };
  return <button style={{ ...base, ...kinds[kind], ...style, borderRadius: "0px" }} onClick={onClick}>{children}</button>;
};

const Tag = ({ children, color = V.g500, bg = V.g50, border = V.g200 }) =>
<span style={{ fontSize: 11, fontWeight: 600, padding: '5px 12px', borderRadius: 9999, background: bg, color, border: `1px solid ${border}`, whiteSpace: 'nowrap' }}>{children}</span>;


const Stat = ({ value, label, sub, color = V.black }) =>
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
    <span style={{ fontSize: 46, fontWeight: 800, color, letterSpacing: '-0.03em', lineHeight: 1, fontFamily: FONT }}>{value}</span>
    <span style={{ fontSize: 14, fontWeight: 600, color: color === '#fff' ? '#fff' : V.black }}>{label}</span>
    {sub && <span style={{ fontSize: 13, color: color === '#fff' ? 'rgba(255,255,255,0.5)' : V.g500 }}>{sub}</span>}
  </div>;


// Full-bleed CTA band reused across pages — muted grey-purple, square corners
const CTABand = ({ overline = 'Ready to begin?', title, body, primary = 'Start a Conversation', onNav, dest = 'contact' }) =>
<div style={{ position: 'relative' }}>
    <div style={{ position: 'absolute', top: 0, bottom: 0, left: 'calc((100% - 100vw) / 2)', width: '100vw', background: '#2E2940', zIndex: 0, overflow: 'hidden' }}>
      <GeoWatermark color={V.orange} style={{ top: -30, right: 60, width: 320, height: 300, opacity: 0.52 }} />
    </div>
    <div className="vg-cta-band" style={{ position: 'relative', zIndex: 1, padding: '52px 52px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
      <div style={{ maxWidth: 620 }}>
        <Overline style={{ marginBottom: 12 }}>{overline}</Overline>
        <h2 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.02em', color: '#fff', margin: '0 0 12px', lineHeight: 1.12, fontFamily: FONT }}>{title}</h2>
        <p style={{ fontSize: 15.5, color: 'rgba(255,255,255,0.55)', margin: 0, lineHeight: 1.6 }}>{body}</p>
      </div>
      <div className="vg-cta-actions" style={{ display: 'flex', gap: 12, flexShrink: 0 }}>
        <Btn kind="primary" onClick={() => onNav(dest)}>{primary}</Btn>
      </div>
    </div>
  </div>;


// Page hero band (subtle grey, distinct darker watermark per page)
const PageHero = ({ overline, title, sub, children, variant = 'rings', wmColor, wmOpacity = 0.14 }) =>
<div style={{ background: V.g50, padding: '84px 0 60px', borderBottom: `1px solid ${V.g200}`, position: 'relative', overflow: 'hidden' }}>
    <HeroWatermark variant={variant} color={wmColor} opacity={wmOpacity} style={{ top: -30, right: -20, width: 440, height: 400 }} />
    <div className="vg-container" style={{ maxWidth: MAXW, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <Overline style={{ marginBottom: 14 }}>{overline}</Overline>
      <h1 className="vg-hero-title" style={{ fontSize: 54, fontWeight: 800, letterSpacing: '-0.03em', color: V.black, margin: '0 0 18px', lineHeight: 1.04, fontFamily: FONT }}>{title}</h1>
      {sub && <p style={{ fontSize: 19, color: V.g500, maxWidth: 620, lineHeight: 1.6, margin: 0 }}>{sub}</p>}
      {children}
    </div>
  </div>;


const Section = ({ bg = '#fff', pad = '80px 0', children, style }) =>
<section style={{ background: bg, padding: pad, ...style }}>
    <div className="vg-container" style={{ maxWidth: MAXW, margin: '0 auto', padding: '0 32px' }}>{children}</div>
  </section>;


/* ── LEAD CAPTURE MODAL — reused for gated PDFs + evaluation ─ */
const LeadCaptureModal = ({ icon = 'lock', eyebrow, heading, intro, cta = 'Continue', note, onClose, onSubmit }) => {
  const [f, setF] = React.useState({ name: '', email: '', company: '', phone: '' });
  const input = { fontFamily: FONT, fontSize: 14, color: V.black, background: '#fff', border: `1.5px solid ${V.g200}`, borderRadius: 8, padding: '11px 14px', outline: 'none', width: '100%' };
  const label = { fontSize: 12.5, fontWeight: 600, color: V.black, display: 'block', marginBottom: 7 };
  const field = (key, lbl, props = {}) =>
  <div>
      <label style={label}>{lbl}</label>
      <input style={input} value={f[key]} onChange={(e) => setF((v) => ({ ...v, [key]: e.target.value }))} {...props} />
    </div>;
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(10,10,18,0.55)', backdropFilter: 'blur(3px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: '#fff', borderRadius: 16, maxWidth: 480, width: '100%', boxShadow: '0 24px 64px rgba(0,0,0,0.3)', overflow: 'hidden', maxHeight: '92vh', overflowY: 'auto' }}>
        <div className="vg-modal-pad" style={{ background: V.purple, padding: '26px 32px', position: 'relative' }}>
          <button onClick={onClose} aria-label="Close" style={{ position: 'absolute', top: 18, right: 18, background: 'rgba(255,255,255,0.15)', border: 'none', color: '#fff', width: 30, height: 30, borderRadius: '50%', cursor: 'pointer', fontSize: 18, lineHeight: 1 }}>×</button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 44, height: 44, background: 'rgba(255,255,255,0.16)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8 }}>
              <Icon name={icon} size={22} color="#fff" />
            </div>
            <div>
              {eyebrow && <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>{eyebrow}</div>}
              <div style={{ fontSize: 19, fontWeight: 800, color: '#fff', fontFamily: FONT, letterSpacing: '-0.01em' }}>{heading}</div>
            </div>
          </div>
        </div>
        <form onSubmit={(e) => {e.preventDefault();onSubmit(f);}} className="vg-modal-pad" style={{ padding: '26px 32px 30px', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {intro && <p style={{ fontSize: 13.5, color: V.g500, lineHeight: 1.55, margin: 0 }}>{intro}</p>}
          <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {field('name', 'Full name', { required: true, placeholder: 'Jane Smith' })}
            {field('email', 'Work email', { required: true, type: 'email', placeholder: 'jane@company.com' })}
          </div>
          <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {field('company', 'Company', { required: true, placeholder: 'Acme Technologies' })}
            {field('phone', 'Phone number', { required: true, type: 'tel', placeholder: '+1 555 000 1234' })}
          </div>
          <Btn kind="primary" style={{ width: '100%', justifyContent: 'center' }}>{cta} <Icon name="arrow" size={17} color="#fff" /></Btn>
          <p style={{ fontSize: 11.5, color: V.g400, textAlign: 'center', margin: 0, lineHeight: 1.5 }}>{note || "We'll only use your details to share this and follow up. No spam."}</p>
        </form>
      </div>
    </div>);

};


Object.assign(window, {
  V, MAXW, FONT, BrandMark, Icon, ICN, GeoWatermark,
  Header, Footer, ScrollTopBtn, Overline, SectionHeader, Btn, Tag, Stat, CTABand, PageHero, Section,
  HeroWatermark, LeadCaptureModal, submitInquiry
});