/* Shared design system for ThirdEyeScan landing-page gallery.
   Dark + amber theme, Bracket Eye logo, Inter + JetBrains Mono. */

const L = {
  bg:        '#0A0E14',
  bgAlt:     '#0C111A',
  surface:   '#11161F',
  surface2:  '#161C27',
  surface3:  '#1C2330',
  border:    'rgba(255,255,255,0.07)',
  borderHi:  'rgba(255,255,255,0.12)',
  borderAmber:'rgba(245,181,68,0.30)',

  text:      '#F2F5FA',
  textDim:   '#AEB7C6',
  textMute:  '#7A8497',
  textFaint: '#525C6E',

  accent:    '#F5B544',
  accentHi:  '#FFC95C',
  accentDeep:'#C88A1E',
  accentDim: 'rgba(245,181,68,0.12)',
  accentFaint:'rgba(245,181,68,0.06)',

  ok:        '#3FB950',
  okBg:      'rgba(63,185,80,0.12)',
  crit:      '#E5484D',
  high:      '#F5803E',
  med:       '#F5B544',
  low:       '#4493F8',

  font:      '"Inter", system-ui, sans-serif',
  mono:      '"JetBrains Mono", ui-monospace, monospace',
};

/* ── Bracket Eye logo ── */
const Logo = ({ size = 36, light = false }) => {
  const ink = light ? '#F5F1E8' : '#0A0E14';
  const accent = light ? '#C88A1E' : '#F5B544';
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" style={{ display: 'block', flexShrink: 0 }}>
      <rect x="2" y="2" width="96" height="96" rx="20" fill={ink} stroke="rgba(245,181,68,0.20)" />
      <path d="M18 38 L18 30 L26 30 M82 30 L74 30 L74 38 M18 62 L18 70 L26 70 M82 70 L74 70 L74 62" stroke={accent} strokeWidth="3" fill="none" strokeLinecap="round" />
      <path d="M32 50 Q 50 36, 68 50 Q 50 64, 32 50 Z" fill={accent} />
      <circle cx="50" cy="50" r="4" fill={ink} />
    </svg>
  );
};

const Wordmark = ({ markSize = 34, stack = false }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
    <Logo size={markSize} />
    <div style={{ lineHeight: 1.15 }}>
      <div style={{ fontSize: markSize * 0.38, fontWeight: 700, color: L.text, letterSpacing: '-0.01em' }}>ThirdEye</div>
      <div style={{ fontSize: markSize * 0.235, fontWeight: 700, color: L.accent, letterSpacing: '0.18em', fontFamily: L.mono, marginTop: 2 }}>SCANNER · v3.0</div>
    </div>
  </div>
);

/* ── Icon set (Lucide-style stroke icons) ── */
const Ic = ({ d, size = 20, sw = 1.7, fill = false }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">{d}</svg>
);
const I = {
  scan:     <Ic d={<><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>} />,
  shield:   <Ic d={<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/>} />,
  shieldCheck: <Ic d={<><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></>} />,
  target:   <Ic d={<><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></>} />,
  layers:   <Ic d={<><path d="m12 2 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/></>} />,
  activity: <Ic d={<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>} />,
  bolt:     <Ic d={<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8Z"/>} />,
  bug:      <Ic d={<><path d="m8 2 1.88 1.88M14.12 3.88 16 2M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"/><path d="M12 20v-9M6.53 9C4.6 8.8 3 7.1 3 5M6 13H2M3 21c0-2.1 1.7-3.9 3.8-4M20.97 5c0 2.1-1.6 3.8-3.5 4M22 13h-4M17.2 17c2.1.1 3.8 1.9 3.8 4"/></>} />,
  eye:      <Ic d={<><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></>} />,
  globe:    <Ic d={<><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18Z"/></>} />,
  lock:     <Ic d={<><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>} />,
  file:     <Ic d={<><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/></>} />,
  server:   <Ic d={<><rect x="2" y="3" width="20" height="8" rx="2"/><rect x="2" y="13" width="20" height="8" rx="2"/><path d="M6 7h.01M6 17h.01"/></>} />,
  terminal: <Ic d={<><path d="m4 17 6-6-6-6"/><path d="M12 19h8"/></>} />,
  check:    <Ic d={<path d="M20 6 9 17l-5-5"/>} />,
  arrow:    <Ic d={<path d="M5 12h14M13 6l6 6-6 6"/>} />,
  arrowUpRight: <Ic d={<path d="M7 17 17 7M7 7h10v10"/>} />,
  plus:     <Ic d={<path d="M12 5v14M5 12h14"/>} />,
  play:     <Ic d={<path d="m6 3 14 9-14 9V3Z"/>} fill />,
  zap:      <Ic d={<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8Z"/>} />,
  clock:    <Ic d={<><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>} />,
  chart:    <Ic d={<path d="M3 3v18h18M7 16l4-5 4 3 5-7"/>} />,
  gauge:    <Ic d={<><path d="m12 14 4-4"/><path d="M3.34 19a9 9 0 1 1 17.32 0"/></>} />,
  network:  <Ic d={<><rect x="9" y="2" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="16" y="16" width="6" height="6" rx="1"/><path d="M12 8v4M12 12H5v4M12 12h7v4"/></>} />,
  mail:     <Ic d={<><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></>} />,
  x:        <Ic d={<path d="M18 6 6 18M6 6l12 12"/>} />,
  twitter:  <Ic d={<path d="M18.244 2H21l-6.52 7.451L22 22h-6.063l-4.74-6.213L5.6 22H2.84l6.972-7.967L2 2h6.215l4.283 5.66Zm-2.122 18h1.652L8.005 4h-1.77Z"/>} fill sw={0} />,
  star:     <Ic d={<path d="m12 2 3 7 7 .5-5.5 4.5L18 21l-6-3.8L6 21l1.5-7L2 9.5 9 9Z"/>} fill />,
  chevron:  <Ic d={<path d="m6 9 6 6 6-6"/>} />,
};

/* ── Reusable bits ── */
const Eyebrow = ({ children, dot = true }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, marginBottom: 18 }}>
    {dot && <span style={{ width: 22, height: 2, background: L.accent, borderRadius: 1 }} />}
    <span style={{ fontSize: 11.5, fontFamily: L.mono, fontWeight: 700, letterSpacing: '0.18em', color: L.accent, textTransform: 'uppercase' }}>{children}</span>
  </div>
);

const Btn = ({ children, primary, icon, iconLeft, size = 'md', href }) => {
  const pad = size === 'lg' ? '13px 22px' : size === 'sm' ? '8px 14px' : '11px 18px';
  const fs = size === 'lg' ? 14.5 : size === 'sm' ? 12.5 : 13.5;
  const label = String(children || '');
  const resolvedHref = href || (
    label === 'Request a demo' ? '/requestdemo.html' :
    label === 'Scanner Overview' ? '/scanner-overview' :
    /map my attack surface|scan now/i.test(label) ? '/requestdemo.html' :
    /pricing/i.test(label) ? '/#pricing' :
    null
  );
  const Tag = resolvedHref ? 'a' : 'button';
  return (
    <Tag href={resolvedHref || undefined} style={{
      display: 'inline-flex', alignItems: 'center', gap: 9, padding: pad, borderRadius: 8,
      background: primary ? L.accent : 'transparent',
      border: primary ? 'none' : `1px solid ${L.borderHi}`,
      color: primary ? '#0A0E14' : L.text,
      fontSize: fs, fontWeight: primary ? 700 : 600, fontFamily: L.font, cursor: 'pointer',
      boxShadow: primary ? '0 0 24px rgba(245,181,68,0.28)' : 'none',
      whiteSpace: 'nowrap', textDecoration: 'none',
    }}>
      {iconLeft && <span style={{ display: 'flex' }}>{iconLeft}</span>}
      {children}
      {icon && <span style={{ display: 'flex' }}>{icon}</span>}
    </Tag>
  );
};

const Chip = ({ children, accent }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 7,
    padding: '6px 12px', borderRadius: 100,
    background: accent ? L.accentDim : L.surface2,
    border: `1px solid ${accent ? L.borderAmber : L.border}`,
    color: accent ? L.accent : L.textDim,
    fontSize: 12, fontFamily: L.mono, fontWeight: 600, letterSpacing: '0.02em',
  }}>{children}</span>
);

/* Section frame for the gallery — wraps each variant with a number label */
const Frame = ({ id, label, note, children, pad = true }) => (
  <div id={id} style={{ marginBottom: 26 }}>
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 10, padding: '0 4px' }}>
      <span style={{ fontSize: 13, fontFamily: L.mono, fontWeight: 700, color: L.accent, letterSpacing: '0.08em' }}>{id}</span>
      <span style={{ fontSize: 14, fontWeight: 700, color: L.text }}>{label}</span>
      {note && <span style={{ fontSize: 12.5, color: L.textMute }}>— {note}</span>}
    </div>
    <div style={{ borderRadius: 14, overflow: 'hidden', border: `1px solid ${L.border}`, background: L.bg, boxShadow: '0 8px 40px rgba(0,0,0,0.4)' }}>
      {children}
    </div>
  </div>
);

/* Mini nav bar shown atop hero variants */
const NavBar = () => (
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 36px', borderBottom: `1px solid ${L.border}` }}>
    <Wordmark markSize={32} />
    <div style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
      <a href="/#platform" style={{ fontSize: 13.5, color: L.textDim, fontWeight: 500, cursor: 'pointer', textDecoration: 'none' }}>Platform</a>
      <a href="/#detections" style={{ fontSize: 13.5, color: L.textDim, fontWeight: 500, cursor: 'pointer', textDecoration: 'none' }}>Detections</a>
      <a href="/#pricing" style={{ fontSize: 13.5, color: L.textDim, fontWeight: 500, cursor: 'pointer', textDecoration: 'none' }}>Pricing</a>
      <a href="/scanner-overview" style={{ fontSize: 13.5, color: L.textDim, fontWeight: 500, cursor: 'pointer', textDecoration: 'none' }}>Scanner Overview</a>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <a href="/login" style={{ fontSize: 13.5, color: L.textDim, fontWeight: 600, cursor: 'pointer', textDecoration: 'none' }}>Sign in</a>
      <Btn primary size="sm" icon={I.arrowUpRight}>Request a demo</Btn>
    </div>
  </div>
);

Object.assign(window, { L, Logo, Wordmark, I, Ic, Eyebrow, Btn, Chip, Frame, NavBar });