/* =========================================================================
   Morning Mob — shared primitives
   Icon (thin line glyphs), Photo (image-slot wrapper), Wordmark, money(),
   and the tweaks context. Exported to window for the other Babel scripts.
   ========================================================================= */

const { useState, useEffect, useRef, createContext, useContext } = React;

/* ---- Tweaks context: any component can read the live tweak values ---- */
const MMTweaksCtx = createContext({ displayScale: 1, editorialAccent: '#7a8c6e', shopColumns: 4 });
const useMM = () => useContext(MMTweaksCtx);

const ICON_PATHS = {
  search: <><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></>,
  user: <><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></>,
  bag: <><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" /><line x1="3" y1="6" x2="21" y2="6" /><path d="M16 10a4 4 0 0 1-8 0" /></>,
  x: <><path d="M18 6 6 18" /><path d="M6 6l12 12" /></>,
  plus: <><path d="M5 12h14" /><path d="M12 5v14" /></>,
  minus: <><path d="M5 12h14" /></>,
  arrowRight: <><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></>,
  arrowLeft: <><path d="M19 12H5" /><path d="m12 19-7-7 7-7" /></>,
  menu: <><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></>,
  chevronDown: <><path d="m6 9 6 6 6-6" /></>,
  chevronRight: <><path d="m9 6 6 6-6 6" /></>,
  check: <><path d="M20 6 9 17l-5-5" /></>,
  lock: <><rect x="3" y="11" width="18" height="11" rx="0" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></>,
  pin: <><path d="M12 21s-7-6.5-7-11a7 7 0 0 1 14 0c0 4.5-7 11-7 11z" /><circle cx="12" cy="10" r="2.5" /></>,
};

function Icon({ name, size = 18, stroke = 1.5, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth={stroke} strokeLinecap="square"
         strokeLinejoin="miter" style={style} aria-hidden="true">
      {ICON_PATHS[name]}
    </svg>
  );
}

/* Drop-in image slot. Wraps the <image-slot> web component in a fixed-aspect
   warm frame so empty slots read intentional, not broken. `src` wires a real
   photo in as the default (author-controlled — the web component renders it
   and a user drag still overrides it); the drop persists by `id`.
   shape="rect" keeps 0px corners. */
function Photo({ id, label = 'Drop a photo', ratio = '3 / 4', src, position, style }) {
  return (
    <div style={{
      position: 'relative', aspectRatio: ratio, width: '100%',
      background: 'var(--surface-card)', overflow: 'hidden', ...style,
    }}>
      <image-slot
        id={id}
        shape="rect"
        placeholder={label}
        {...(src ? { src } : {})}
        {...(position ? { position } : {})}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
      ></image-slot>
    </div>
  );
}

/* Centered serif wordmark used in nav + footer. */
function Wordmark({ size = 21, spacing = 5, color = 'var(--ink)', onClick, style }) {
  return (
    <button onClick={onClick} style={{
      fontFamily: 'var(--font-serif)', fontSize: size, letterSpacing: spacing, color,
      background: 'none', border: 'none', cursor: onClick ? 'pointer' : 'default',
      whiteSpace: 'nowrap', padding: 0, ...style,
    }}>MORNING&thinsp;MOB</button>
  );
}

const money = (n) => 'S$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

/* Small uppercase tracked label used throughout. */
function Eyebrow({ children, color = 'var(--muted)', style }) {
  return (
    <span style={{
      fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '2px',
      textTransform: 'uppercase', color, ...style,
    }}>{children}</span>
  );
}

Object.assign(window, { Icon, Photo, Wordmark, money, Eyebrow, MMTweaksCtx, useMM });