// kit.jsx — Muna design tokens + core UI primitives (phone frame, buttons, chips).
// Heritage-calmed Clay system: cream canvas, deep teal, antique gold, muted terracotta.
(function () {
  const T = {
    // surfaces
    canvas: '#fbf6ec', soft: '#f5efe1', card: '#eee7d5', strong: '#e7dec9',
    hairline: '#e6ddca', hairlineSoft: '#efe8d8',
    // ink
    ink: '#20201d', body: '#46443e', muted: '#7a766c', mutedSoft: '#a59f92',
    onDark: '#f6f0e3', onDarkMuted: 'rgba(246,240,227,.62)',
    // brand (dancheong-inspired, lowered saturation)
    teal: '#21413a', tealEl: '#2c4f47', tealDeep: '#18302a',
    gold: '#c69a3e', goldSoft: '#e8d29a', goldDim: '#a9822f',
    clay: '#b15c44', claySoft: '#e3b6a4',
    sage: '#7f9e8b', lavender: '#9b8fbd',
    // semantic
    success: '#4f9e6a', error: '#c0533f', warn: '#cc9a3a',
    // type
    display: "'Gowun Dodum', 'Pretendard', system-ui, sans-serif",
    sans: "'Pretendard', -apple-system, system-ui, sans-serif",
    // radius
    r: { xs: 6, sm: 8, md: 12, lg: 16, xl: 22, pill: 999 },
  };
  window.T = T;

  // ── interest-tag palette (cycled) ───────────────────────────
  window.TAG_COLORS = [
    { bg: '#21413a', fg: '#f6f0e3', soft: '#dfe8e2' }, // teal
    { bg: '#c69a3e', fg: '#2a2410', soft: '#f1e4c2' }, // gold
    { bg: '#b15c44', fg: '#fbeee7', soft: '#f0ddd3' }, // clay
    { bg: '#7f9e8b', fg: '#1c2a23', soft: '#e0ebe4' }, // sage
    { bg: '#9b8fbd', fg: '#211d33', soft: '#e7e2f0' }, // lavender
    { bg: '#7d8aa6', fg: '#f2f4f9', soft: '#e1e6ef' }, // slate-blue
  ];

  // ── Phone frame with themeable status bar ───────────────────
  function StatusBar({ dark }) {
    const c = dark ? T.onDark : T.ink;
    return (
      <div style={{ height: 46, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 22px 0 26px', flexShrink: 0, position: 'relative', zIndex: 5 }}>
        <span style={{ fontSize: 15, fontWeight: 600, color: c, fontFamily: T.sans, letterSpacing: .2 }}>9:30</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {/* signal */}
          <svg width="18" height="12" viewBox="0 0 18 12" fill={c}><rect x="0" y="8" width="3" height="4" rx="1"/><rect x="5" y="5" width="3" height="7" rx="1"/><rect x="10" y="2.5" width="3" height="9.5" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1" opacity=".4"/></svg>
          {/* wifi */}
          <svg width="17" height="12" viewBox="0 0 17 12" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round"><path d="M1 4.2a11 11 0 0 1 15 0"/><path d="M3.6 6.9a7 7 0 0 1 9.8 0"/><path d="M6.2 9.5a3.2 3.2 0 0 1 4.6 0"/></svg>
          {/* battery */}
          <svg width="26" height="13" viewBox="0 0 26 13" fill="none"><rect x="1" y="1" width="21" height="11" rx="3" stroke={c} strokeWidth="1.3" opacity=".5"/><rect x="3" y="3" width="15" height="7" rx="1.5" fill={c}/><rect x="23.5" y="4.5" width="2" height="4" rx="1" fill={c} opacity=".5"/></svg>
        </div>
      </div>
    );
  }

  function PhoneFrame({ children, dark = false, bg }) {
    return (
      <div className="muna-phone" style={{
        width: 412, height: 892, borderRadius: 46, position: 'relative',
        background: bg || (dark ? T.tealDeep : T.canvas),
        border: '11px solid #15140f', boxSizing: 'border-box',
        boxShadow: '0 2px 2px rgba(255,255,255,.18) inset, 0 50px 90px -30px rgba(33,30,20,.55), 0 12px 30px -12px rgba(33,30,20,.4)',
        overflow: 'hidden', display: 'flex', flexDirection: 'column',
        fontFamily: T.sans, color: T.ink,
      }}>
        {/* camera punch hole */}
        <div style={{ position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)',
          width: 13, height: 13, borderRadius: 99, background: '#000', zIndex: 6,
          boxShadow: '0 0 0 3px rgba(0,0,0,.35)' }} />
        <StatusBar dark={dark} />
        <div className="muna-screen" style={{ flex: 1, minHeight: 0, position: 'relative',
          display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          {children}
        </div>
      </div>
    );
  }

  // ── Buttons ─────────────────────────────────────────────────
  function Btn({ children, onClick, kind = 'primary', size = 'lg', full, icon, style, disabled }) {
    const H = size === 'sm' ? 40 : size === 'md' ? 46 : 54;
    const pad = size === 'sm' ? '0 16px' : '0 22px';
    const fs = size === 'sm' ? 14 : 15.5;
    const map = {
      primary: { background: T.ink, color: T.onDark, border: '1px solid ' + T.ink },
      gold: { background: T.gold, color: '#241c06', border: '1px solid ' + T.gold },
      onColor: { background: T.canvas, color: T.ink, border: '1px solid ' + T.canvas },
      teal: { background: T.teal, color: T.onDark, border: '1px solid ' + T.teal },
      outline: { background: 'transparent', color: T.ink, border: '1px solid ' + T.hairline },
      ghost: { background: 'transparent', color: T.ink, border: '1px solid transparent' },
      soft: { background: T.card, color: T.ink, border: '1px solid ' + T.hairlineSoft },
    };
    return (
      <button onClick={onClick} disabled={disabled} style={{
        height: H, padding: pad, borderRadius: T.r.md, fontFamily: T.sans, fontSize: fs,
        fontWeight: 600, letterSpacing: -.2, cursor: disabled ? 'default' : 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, whiteSpace: 'nowrap',
        width: full ? '100%' : undefined, opacity: disabled ? .45 : 1,
        transition: 'transform .12s ease, filter .12s ease', ...map[kind], ...style,
      }}
        onMouseDown={e => e.currentTarget.style.transform = 'scale(.975)'}
        onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
        onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}>
        {icon && <Icon name={icon} size={size === 'sm' ? 17 : 19} />}
        {children}
      </button>
    );
  }

  function IconBtn({ name, onClick, size = 44, ic, color = T.ink, bg = T.canvas, border = T.hairline, style }) {
    return (
      <button onClick={onClick} style={{
        width: size, height: size, borderRadius: 99, background: bg,
        border: '1px solid ' + border, display: 'grid', placeItems: 'center',
        cursor: 'pointer', flexShrink: 0, transition: 'transform .12s', ...style }}
        onMouseDown={e => e.currentTarget.style.transform = 'scale(.92)'}
        onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
        onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}>
        <Icon name={name} size={ic || 21} color={color} />
      </button>
    );
  }

  // ── Chip / Tag ──────────────────────────────────────────────
  function Chip({ children, active, onClick, color, style, size = 'md' }) {
    const h = size === 'sm' ? 30 : 38;
    return (
      <button onClick={onClick} style={{
        height: h, padding: size === 'sm' ? '0 12px' : '0 16px', borderRadius: 99,
        border: '1px solid ' + (active ? (color || T.ink) : T.hairline),
        background: active ? (color || T.ink) : T.canvas,
        color: active ? T.onDark : T.body, fontFamily: T.sans, fontSize: size === 'sm' ? 13 : 14,
        fontWeight: active ? 600 : 500, letterSpacing: -.2, cursor: 'pointer', whiteSpace: 'nowrap',
        display: 'inline-flex', alignItems: 'center', gap: 6, transition: 'all .15s', ...style }}>
        {children}
      </button>
    );
  }

  // small caps label
  function Eyebrow({ children, color = T.gold, style }) {
    return <div style={{ fontFamily: T.sans, fontSize: 12, fontWeight: 700, letterSpacing: 1.6,
      textTransform: 'uppercase', color, ...style }}>{children}</div>;
  }

  // striped image placeholder
  function ImgSlot({ label, h = 160, r = T.r.lg, tone = 'cream', style }) {
    const dark = tone === 'dark';
    const base = dark ? T.tealEl : T.strong;
    const line = dark ? 'rgba(246,240,227,.10)' : 'rgba(33,30,20,.05)';
    return (
      <div style={{ height: h, borderRadius: r, overflow: 'hidden', position: 'relative',
        background: `repeating-linear-gradient(135deg, ${base} 0 11px, ${dark ? T.teal : T.card} 11px 22px)`,
        ...style }}>
        <div style={{ position: 'absolute', inset: 0, background:
          `repeating-linear-gradient(45deg, transparent 0 18px, ${line} 18px 19px)` }} />
        {label && <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
          <span style={{ fontFamily: "'Courier New', monospace", fontSize: 11, letterSpacing: .5,
            color: dark ? T.onDarkMuted : T.muted, background: dark ? 'rgba(21,40,36,.6)' : 'rgba(251,246,236,.72)',
            padding: '3px 9px', borderRadius: 5 }}>{label}</span>
        </div>}
      </div>
    );
  }

  Object.assign(window, { StatusBar, PhoneFrame, Btn, IconBtn, Chip, Eyebrow, ImgSlot });
})();