// Hi-fi developer-site primitives for MomentIQ.
// IBM Plex Sans + JetBrains Mono. Light cards on light bg; dark hero/CTA.
// Blue/green/orange accent via --accent.

const wf = {
  bg:        '#f6f7f8',
  card:      '#ffffff',
  cardAlt:   '#fafbfc',
  ink:       '#0b0d10',
  ink2:      '#3b424b',
  ink3:      '#6b7280',
  ink4:      '#9ca3af',
  line:      '#e6e8eb',
  line2:     '#eef0f2',
  dark:      '#0b0d10',
  darkAlt:   '#111418',
  darkLine:  '#1f2228',
  darkInk2:  '#cdd1d6',
  darkInk3:  '#8b929b',
  mono:      '"JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace',
  sans:      '"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif',
};

// Endpoint chip (mono, code-ish)
const Endpoint = ({ children, accent = false, dark = false, size = 12.5, style }) => (
  <span style={{
    fontFamily: wf.mono, fontSize: size, fontWeight: 500,
    padding: '3px 8px', borderRadius: 6,
    border: `1px solid ${accent ? 'var(--accent)' : (dark ? wf.darkLine : wf.line)}`,
    background: accent ? 'var(--accent-soft)' : (dark ? '#0f1216' : '#f3f4f6'),
    color: dark ? wf.darkInk2 : wf.ink,
    whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center',
    ...style,
  }}>{children}</span>
);

// Method tag (POST/GET)
const Method = ({ kind = 'POST', dark = false }) => {
  const colors = { POST: 'oklch(0.62 0.18 250)', GET: 'oklch(0.62 0.13 155)', DEL: 'oklch(0.62 0.16 25)' };
  return (
    <span style={{
      fontFamily: wf.mono, fontSize: 10.5, fontWeight: 600, letterSpacing: 0.4,
      padding: '2px 6px', borderRadius: 4,
      color: colors[kind], background: `color-mix(in oklch, ${colors[kind]} 14%, transparent)`,
      marginRight: 6,
    }}>{kind}</span>
  );
};

// Pill / segmented choice
const Pill = ({ children, active = false, dark = false, size = 12, onClick, style }) => (
  <span onClick={onClick} style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '5px 10px', borderRadius: 999,
    fontFamily: wf.sans, fontSize: size, fontWeight: 500,
    border: `1px solid ${active ? (dark ? wf.darkInk2 : wf.ink) : (dark ? wf.darkLine : wf.line)}`,
    background: active ? (dark ? wf.darkInk2 : wf.ink) : (dark ? 'transparent' : wf.card),
    color: active ? (dark ? wf.dark : wf.card) : (dark ? wf.darkInk2 : wf.ink2),
    cursor: 'default',
    ...style,
  }}>{children}</span>
);

// Button
const Btn = ({ children, primary = false, ghost = false, dark = false, size = 14, style, onClick }) => {
  let bg, fg, border;
  if (primary) { bg = 'var(--accent)'; fg = '#fff'; border = 'var(--accent)'; }
  else if (ghost) { bg = 'transparent'; fg = dark ? wf.darkInk2 : wf.ink; border = dark ? wf.darkLine : wf.line; }
  else { bg = dark ? wf.darkAlt : wf.card; fg = dark ? wf.darkInk2 : wf.ink; border = dark ? wf.darkLine : wf.line; }
  return (
    <span onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: size > 14 ? '10px 16px' : '8px 14px',
      borderRadius: 8,
      fontFamily: wf.sans, fontSize: size, fontWeight: 500,
      background: bg, color: fg, border: `1px solid ${border}`,
      whiteSpace: 'nowrap',
      cursor: onClick ? 'pointer' : (style && style.cursor) || 'default',
      ...style,
    }}>{children}</span>
  );
};

// Section heading
const SectionHead = ({ kicker, title, sub, align = 'left', dark = false, maxWidth = 720 }) => (
  <div style={{ textAlign: align, marginBottom: 28, maxWidth: align === 'center' ? '100%' : maxWidth }}>
    {kicker && (
      <div style={{
        fontFamily: wf.mono, fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 500,
        color: 'var(--accent)', marginBottom: 10,
      }}>{kicker}</div>
    )}
    <h2 style={{
      fontFamily: wf.sans, fontSize: 32, lineHeight: 1.15, fontWeight: 600,
      margin: 0, color: dark ? wf.card : wf.ink, letterSpacing: -0.4,
    }}>{title}</h2>
    {sub && (
      <p style={{
        fontFamily: wf.sans, fontSize: 15, lineHeight: 1.55, color: dark ? wf.darkInk3 : wf.ink3,
        margin: '10px 0 0', maxWidth,
      }}>{sub}</p>
    )}
  </div>
);

// Field (form input look)
const Field = ({ label, value, mono = false, hint, style }) => (
  <div style={{ ...style }}>
    {label && <div style={{ fontFamily: wf.sans, fontSize: 11.5, fontWeight: 500, color: wf.ink3, marginBottom: 6 }}>{label}</div>}
    <div style={{
      padding: '8px 12px', minHeight: 36, borderRadius: 8,
      border: `1px solid ${wf.line}`, background: wf.card,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontFamily: mono ? wf.mono : wf.sans, fontSize: mono ? 12.5 : 13.5,
      color: value ? wf.ink : wf.ink4,
    }}>
      <span>{value || 'placeholder…'}</span>
      {hint && <span style={{ fontFamily: wf.mono, fontSize: 11, color: wf.ink4 }}>{hint}</span>}
    </div>
  </div>
);

// Toggle
const Toggle = ({ on = true, dark = false }) => (
  <span style={{
    width: 32, height: 18, borderRadius: 999, position: 'relative',
    background: on ? 'var(--accent)' : (dark ? wf.darkLine : '#d1d5db'),
    transition: 'background .15s',
    flex: '0 0 auto',
  }}>
    <span style={{
      position: 'absolute', top: 2, left: on ? 16 : 2, width: 14, height: 14, borderRadius: 999,
      background: '#fff', boxShadow: '0 1px 2px rgba(0,0,0,.18)',
    }} />
  </span>
);

// Slider (visual)
const Slider = ({ value = 0.5, label, valueText }) => (
  <div>
    {label && <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: wf.sans, fontSize: 11.5, color: wf.ink3, marginBottom: 8 }}>
      <span>{label}</span><span style={{ fontFamily: wf.mono, color: wf.ink2 }}>{valueText}</span>
    </div>}
    <div style={{ position: 'relative', height: 4, background: wf.line, borderRadius: 999 }}>
      <div style={{ position: 'absolute', left: 0, width: `${value*100}%`, height: 4, background: 'var(--accent)', borderRadius: 999 }} />
      <div style={{ position: 'absolute', left: `${value*100}%`, top: '50%', transform: 'translate(-50%, -50%)', width: 14, height: 14, borderRadius: 999, background: '#fff', border: `1.5px solid var(--accent)`, boxShadow: '0 1px 2px rgba(0,0,0,.15)' }} />
    </div>
  </div>
);

// Image / frame placeholder (clean)
const ImgPlace = ({ w = 160, h = 100, label, dark = false, rounded = 6, style }) => (
  <div style={{
    width: w, height: h, borderRadius: rounded,
    border: `1px solid ${dark ? wf.darkLine : wf.line}`,
    background: dark
      ? 'linear-gradient(135deg, #14171c 0%, #1a1d22 100%)'
      : 'linear-gradient(135deg, #eef0f2 0%, #f6f7f8 100%)',
    color: dark ? wf.darkInk3 : wf.ink4,
    fontFamily: wf.mono, fontSize: 9.5,
    display: 'flex', alignItems: 'flex-end', padding: 6,
    position: 'relative', overflow: 'hidden',
    ...style,
  }}>
    {/* subtle "frame" cross */}
    <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: dark ? 0.18 : 0.5 }}>
      <line x1="0" y1="0" x2="100%" y2="100%" stroke={dark ? '#3a3f47' : '#d1d5db'} strokeWidth="1" />
      <line x1="100%" y1="0" x2="0" y2="100%" stroke={dark ? '#3a3f47' : '#d1d5db'} strokeWidth="1" />
    </svg>
    {label && <span style={{ position: 'relative' }}>{label}</span>}
  </div>
);

// Code block — dark, with subtle "syntax" hints via line prefixes
const CodeBlock = ({ lines = [], height, lang, filename, style }) => (
  <div style={{
    fontFamily: wf.mono, fontSize: 12, lineHeight: 1.7,
    background: '#0a0c0f', border: `1px solid ${wf.darkLine}`, borderRadius: 10,
    overflow: 'hidden', ...style,
  }}>
    {(filename || lang) && (
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '8px 12px', borderBottom: `1px solid ${wf.darkLine}`, background: '#0d1014',
      }}>
        <span style={{ fontFamily: wf.mono, fontSize: 11, color: wf.darkInk3 }}>{filename}</span>
        {lang && <span style={{ fontFamily: wf.mono, fontSize: 10.5, color: wf.darkInk3, textTransform: 'uppercase', letterSpacing: 1 }}>{lang}</span>}
      </div>
    )}
    <div style={{ padding: '12px 14px', height, overflow: 'hidden' }}>
      {lines.map((ln, i) => {
        let color = '#d8dde3';
        if (ln.startsWith('//') || ln.startsWith('#')) color = '#5b6573';
        else if (ln.startsWith('+ ')) color = 'var(--accent)';
        // crude: highlight strings
        const parts = [];
        let rest = ln;
        let key = 0;
        const stringRe = /"([^"]*)"/g;
        let last = 0; let m;
        while ((m = stringRe.exec(ln)) !== null) {
          if (m.index > last) parts.push(<span key={key++}>{ln.slice(last, m.index)}</span>);
          parts.push(<span key={key++} style={{ color: color === '#5b6573' ? color : '#9bd17b' }}>"{m[1]}"</span>);
          last = m.index + m[0].length;
        }
        if (last < ln.length) parts.push(<span key={key++}>{ln.slice(last)}</span>);
        return (
          <div key={i} style={{ whiteSpace: 'pre', color }}>
            {parts.length ? parts : ln || '\u00a0'}
          </div>
        );
      })}
    </div>
  </div>
);

// Subtle dotted divider / annotation note
const Note = ({ children, style }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    fontFamily: wf.mono, fontSize: 11, color: wf.ink3,
    ...style,
  }}>{children}</span>
);

// Logo mark
const Logo = ({ dark = false }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <div style={{
      width: 26, height: 26, borderRadius: 7,
      background: 'var(--accent)',
      display: 'grid', placeItems: 'center',
      position: 'relative', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,.12)',
    }}>
      {/* play-triangle inside square */}
      <svg width="12" height="12" viewBox="0 0 12 12">
        <path d="M3 2 L10 6 L3 10 Z" fill="#fff" />
      </svg>
    </div>
    <span style={{ fontFamily: wf.sans, fontSize: 16, fontWeight: 600, letterSpacing: -0.2, color: dark ? wf.card : wf.ink }}>
      MomentIQ
    </span>
  </div>
);

// Top nav
const NavBar = ({ dark = false, kind = 'simple' }) => {
  const fg = dark ? wf.darkInk2 : wf.ink2;
  const bg = dark ? 'transparent' : 'transparent';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 28px',
      borderBottom: `1px solid ${dark ? wf.darkLine : wf.line}`,
      background: bg,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
        <Logo dark={dark} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 22, fontFamily: wf.sans, fontSize: 13.5, color: fg }}>
          {['Playground','Video','Audio','Timeline','Pricing','Docs'].map(l => (
            <span key={l} style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              {l}
              {(l === 'Video' || l === 'Audio' || l === 'Timeline') && (
                <svg width="9" height="9" viewBox="0 0 9 9" style={{ opacity: .55 }}>
                  <path d="M2 3 L4.5 5.5 L7 3" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              )}
            </span>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {kind === 'cmdk' && (
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 10px',
            borderRadius: 7, border: `1px solid ${dark ? wf.darkLine : wf.line}`,
            background: dark ? wf.darkAlt : wf.card,
            fontFamily: wf.sans, fontSize: 12.5, color: dark ? wf.darkInk3 : wf.ink3,
            minWidth: 220,
          }}>
            <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="5" cy="5" r="3.2" fill="none" stroke="currentColor" strokeWidth="1.4" /><line x1="7.5" y1="7.5" x2="10" y2="10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>
            <span>Search docs, endpoints…</span>
            <span style={{ marginLeft: 'auto', fontFamily: wf.mono, fontSize: 10.5, padding: '1px 5px', borderRadius: 3, background: dark ? '#15191e' : '#eef0f2', color: dark ? wf.darkInk3 : wf.ink3 }}>⌘K</span>
          </span>
        )}
        <span style={{ fontFamily: wf.sans, fontSize: 13.5, color: fg }}>Sign in</span>
        <Btn primary size={13.5}>Get API key</Btn>
      </div>
    </div>
  );
};

Object.assign(window, {
  wf, Endpoint, Method, Pill, Btn, SectionHead, Field, Toggle, Slider,
  ImgPlace, CodeBlock, Note, Logo, NavBar,
});