// WeddingOS design system — colors, type, primitives
// Warm ivory / champagne, editorial serif + clean sans, premium and easy.

const W = {
  // Surfaces
  page: '#f5efe2',          // backdrop outside phone
  bg:   '#faf6ec',          // phone background (warm ivory)
  card: '#ffffff',
  cardSoft: '#fbf6ea',      // tinted card for hero moments
  cardDeep: '#1d1812',      // dark hero variant

  // Ink
  ink:   '#1d1812',
  ink2:  '#5a4d3c',
  muted: '#9d8d77',
  faint: '#c5b89f',

  // Lines
  line:  '#ece2cd',
  lineSoft: '#f1e9d8',

  // Accents
  clay:  '#a87a4f',         // primary warm
  clayDeep: '#8a5f3a',
  sage:  '#8a9a85',
  rose:  '#c79b91',
  amber: '#c98a3a',
  green: '#6f8a6a',
  red:   '#b25d4e',
};

const FONT_DISPLAY = "'Cormorant Garamond', 'Cormorant', Georgia, serif";
const FONT_UI = "'Geist', -apple-system, system-ui, sans-serif";
const FONT_MONO = "'Geist Mono', ui-monospace, monospace";

// ─── Primitives ──────────────────────────────────────────────

function Card({ children, style = {}, soft = false, onClick, ...rest }) {
  return (
    <div onClick={onClick} {...rest} style={{
      background: soft ? W.cardSoft : W.card,
      borderRadius: 22,
      border: `0.5px solid ${W.line}`,
      boxShadow: '0 1px 2px rgba(60,40,20,0.03), 0 8px 24px -12px rgba(60,40,20,0.08)',
      ...style,
    }}>{children}</div>
  );
}

function Pill({ children, tone = 'neutral', style = {} }) {
  const tones = {
    neutral: { bg: '#f1e9d8', fg: W.ink2 },
    sage:    { bg: '#e6ede3', fg: '#4d6149' },
    rose:    { bg: '#f3dfd9', fg: '#7d4a3f' },
    amber:   { bg: '#f6e6c8', fg: '#7a5320' },
    clay:    { bg: '#ece0d0', fg: W.clayDeep },
    red:     { bg: '#f1d9d2', fg: '#7d3a2d' },
    green:   { bg: '#dde6d8', fg: '#3e5439' },
    dark:    { bg: W.cardDeep, fg: '#f5efe2' },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: t.bg, color: t.fg,
      fontFamily: FONT_UI, fontSize: 11.5, fontWeight: 500,
      letterSpacing: 0.2, textTransform: 'uppercase',
      padding: '5px 10px', borderRadius: 999,
      ...style,
    }}>{children}</span>
  );
}

function SectionTitle({ eyebrow, title, action, onAction }) {
  // Render the action as a real <button> when we have an onAction handler,
  // so clicks are reliable and accessible. Plain strings still render fine.
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      padding: '0 22px', marginBottom: 12,
    }}>
      <div>
        {eyebrow && (
          <div style={{
            fontFamily: FONT_UI, fontSize: 10.5, fontWeight: 600,
            letterSpacing: 1.6, textTransform: 'uppercase',
            color: W.muted, marginBottom: 4,
          }}>{eyebrow}</div>
        )}
        <div style={{
          fontFamily: FONT_DISPLAY, fontSize: 22, fontWeight: 500,
          color: W.ink, letterSpacing: -0.2, lineHeight: 1,
        }}>{title}</div>
      </div>
      {action && (
        onAction ? (
          <button onClick={onAction} style={{
            fontFamily: FONT_UI, fontSize: 13, color: W.clay, fontWeight: 500,
            background: 'transparent', border: 'none', cursor: 'pointer', padding: 0,
            display: 'inline-flex', alignItems: 'center', gap: 4,
          }}>{action}</button>
        ) : (
          <div style={{
            fontFamily: FONT_UI, fontSize: 13, color: W.clay, fontWeight: 500,
          }}>{action}</div>
        )
      )}
      )}
    </div>
  );
}

// Tiny line-art icons sized to ~18px
function Icon({ name, size = 18, color = 'currentColor', strokeWidth = 1.5 }) {
  const p = { fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    home:     <><path d="M3 10l9-7 9 7v10a1 1 0 01-1 1h-5v-7h-6v7H4a1 1 0 01-1-1V10z" {...p}/></>,
    wallet:   <><rect x="2.5" y="6" width="19" height="13" rx="2.5" {...p}/><path d="M2.5 10h19M17 14h2" {...p}/></>,
    users:    <><circle cx="9" cy="8" r="3.5" {...p}/><path d="M2.5 19c0-3.5 3-6 6.5-6s6.5 2.5 6.5 6" {...p}/><circle cx="17" cy="7" r="2.5" {...p}/><path d="M16 13c3 0 5 2 5 5" {...p}/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2.5" {...p}/><path d="M3 10h18M8 3v4M16 3v4" {...p}/></>,
    bell:     <><path d="M6 9a6 6 0 1112 0c0 5 2 6 2 6H4s2-1 2-6z" {...p}/><path d="M10 19a2 2 0 004 0" {...p}/></>,
    search:   <><circle cx="11" cy="11" r="6" {...p}/><path d="M16 16l4 4" {...p}/></>,
    plus:     <><path d="M12 5v14M5 12h14" {...p}/></>,
    check:    <><path d="M4 12l5 5L20 6" {...p}/></>,
    chevron:  <><path d="M9 6l6 6-6 6" {...p}/></>,
    chevronL: <><path d="M15 6l-6 6 6 6" {...p}/></>,
    chevronD: <><path d="M6 9l6 6 6-6" {...p}/></>,
    arrow:    <><path d="M5 12h14M13 6l6 6-6 6" {...p}/></>,
    heart:    <><path d="M12 20s-7-4.5-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.5-7 10-7 10z" {...p}/></>,
    sparkle:  <><path d="M12 3v6M12 15v6M3 12h6M15 12h6" {...p}/></>,
    flag:     <><path d="M5 21V4M5 4l13 4-4 4 4 4-13 0" {...p}/></>,
    leaf:     <><path d="M21 4c-9 0-15 5-15 12 0 2 1 4 1 4s8-1 12-5 4-9 2-11z" {...p}/><path d="M6 20l9-9" {...p}/></>,
    camera:   <><path d="M3 8a2 2 0 012-2h2l1.5-2h7L17 6h2a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" {...p}/><circle cx="12" cy="13" r="3.5" {...p}/></>,
    rings:    <><circle cx="9" cy="14" r="5" {...p}/><circle cx="15" cy="11" r="5" {...p}/></>,
    cake:     <><path d="M4 21v-7a2 2 0 012-2h12a2 2 0 012 2v7M4 17h16M12 7v5M10 5a2 2 0 104 0" {...p}/></>,
    music:    <><path d="M9 18V6l10-2v12" {...p}/><circle cx="6.5" cy="18" r="2.5" {...p}/><circle cx="16.5" cy="16" r="2.5" {...p}/></>,
    dot:      <><circle cx="12" cy="12" r="3" fill={color} stroke="none"/></>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" style={{ flexShrink: 0 }}>{paths[name]}</svg>;
}

// Soft progress ring used in stat cards
function ProgressRing({ value, size = 64, stroke = 5, color = W.clay, track = '#ece2cd', children }) {
  const r = (size - stroke) / 2;
  const C = 2 * Math.PI * r;
  const off = C * (1 - Math.max(0, Math.min(1, value)));
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} stroke={track} strokeWidth={stroke} fill="none"/>
        <circle cx={size/2} cy={size/2} r={r} stroke={color} strokeWidth={stroke} fill="none"
          strokeDasharray={C} strokeDashoffset={off} strokeLinecap="round"
          style={{ transition: 'stroke-dashoffset 600ms ease' }}/>
      </svg>
      {children && (
        <div style={{
          position: 'absolute', inset: 0, display: 'flex',
          alignItems: 'center', justifyContent: 'center',
        }}>{children}</div>
      )}
    </div>
  );
}

// Linear progress bar
function Bar({ value, color = W.clay, track = '#ece2cd', height = 4 }) {
  return (
    <div style={{ width: '100%', height, background: track, borderRadius: 999, overflow: 'hidden' }}>
      <div style={{
        width: `${Math.max(0, Math.min(1, value)) * 100}%`, height: '100%',
        background: color, borderRadius: 999, transition: 'width 500ms ease',
      }}/>
    </div>
  );
}

// Currency / number formatters
const fmt$ = (n) => '$' + n.toLocaleString('en-US', { maximumFractionDigits: 0 });
const fmtK = (n) => n >= 1000 ? '$' + (n/1000).toFixed(n % 1000 === 0 ? 0 : 1) + 'k' : '$' + n;

Object.assign(window, {
  W, FONT_DISPLAY, FONT_UI, FONT_MONO,
  Card, Pill, SectionTitle, Icon, ProgressRing, Bar,
  fmt$, fmtK,
});