/* ─────────────────────────────────────────────────────────────────────────
   Shared primitives — Icon system, Logo lockup, common components
   ───────────────────────────────────────────────────────────────────────── */

/* ── Minimal stroke icon set (Lucide-inspired, 1.5px stroke) ─────────── */
function Icon({ name, size = 16, stroke = 1.5, style }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round',
    strokeLinejoin: 'round', style };
  const I = {
    arrow:    <svg {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
    arrowL:   <svg {...p}><path d="M19 12H5M11 5l-7 7 7 7"/></svg>,
    arrowUR:  <svg {...p}><path d="M7 17 17 7M8 7h9v9"/></svg>,
    plus:     <svg {...p}><path d="M12 5v14M5 12h14"/></svg>,
    minus:    <svg {...p}><path d="M5 12h14"/></svg>,
    x:        <svg {...p}><path d="M18 6 6 18M6 6l12 12"/></svg>,
    check:    <svg {...p}><path d="M20 6 9 17l-5-5"/></svg>,
    chevR:    <svg {...p}><path d="m9 18 6-6-6-6"/></svg>,
    chevL:    <svg {...p}><path d="m15 18-6-6 6-6"/></svg>,
    chevD:    <svg {...p}><path d="m6 9 6 6 6-6"/></svg>,
    chevU:    <svg {...p}><path d="m18 15-6-6-6 6"/></svg>,
    search:   <svg {...p}><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>,
    filter:   <svg {...p}><path d="M3 6h18M6 12h12M10 18h4"/></svg>,
    menu:     <svg {...p}><path d="M4 6h16M4 12h16M4 18h16"/></svg>,
    grid:     <svg {...p}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>,
    list:     <svg {...p}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>,
    cart:     <svg {...p}><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg>,
    user:     <svg {...p}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>,
    users:    <svg {...p}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
    bell:     <svg {...p}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M13.73 21a2 2 0 0 1-3.46 0"/></svg>,
    qr:       <svg {...p}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3M14 18h3M17 17v4M20 14v3M20 20v1"/></svg>,
    eye:      <svg {...p}><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7"/><circle cx="12" cy="12" r="3"/></svg>,
    edit:     <svg {...p}><path d="M12 20h9M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4Z"/></svg>,
    upload:   <svg {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>,
    download: <svg {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>,
    sparkle:  <svg {...p}><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>,
    flame:    <svg {...p}><path d="M8.5 14.5A2.5 2.5 0 0 0 11 17c1.4 0 2.5-1.1 2.5-2.5 0-1.5-1-2.4-1.5-3.5a3.5 3.5 0 0 1 5 4.2A6.97 6.97 0 0 1 12 21 7 7 0 0 1 5 14C5 9 12 3 12 3s3.4 3.5 4 6.5"/></svg>,
    clock:    <svg {...p}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>,
    pin:      <svg {...p}><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
    receipt:  <svg {...p}><path d="M4 22V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v18l-3-2-3 2-3-2-3 2-3-2Z"/><path d="M8 8h8M8 12h8M8 16h5"/></svg>,
    activity: <svg {...p}><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>,
    layers:   <svg {...p}><path d="m12 2 10 6-10 6L2 8l10-6Z"/><path d="m2 14 10 6 10-6M2 18l10 6 10-6"/></svg>,
    settings: <svg {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.66.28 1.18.79 1.51 1.42"/></svg>,
    palette:  <svg {...p}><circle cx="13.5" cy="6.5" r="0.5"/><circle cx="17.5" cy="10.5" r="0.5"/><circle cx="8.5" cy="7.5" r="0.5"/><circle cx="6.5" cy="12.5" r="0.5"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>,
    image:    <svg {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>,
    heart:    <svg {...p}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>,
    leaf:     <svg {...p}><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.2 2.96c1.4 6.04 1.06 13.06-7.2 17.04"/><path d="M2 21c0-3 1.85-5.36 5.08-6"/></svg>,
    droplet:  <svg {...p}><path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"/></svg>,
    star:     <svg {...p}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>,
    coffee:   <svg {...p}><path d="M17 8h1a4 4 0 1 1 0 8h-1M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/></svg>,
    table:    <svg {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></svg>,
    home:     <svg {...p}><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>,
    info:     <svg {...p}><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>,
    play:     <svg {...p}><polygon points="6 3 20 12 6 21 6 3"/></svg>,
    pause:    <svg {...p}><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>,
    refresh:  <svg {...p}><path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5"/></svg>,
    send:     <svg {...p}><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>,
    bottle:   <svg {...p}><path d="M14 5V2h-4v3a3 3 0 0 0-1 2.236V20a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V7.236A3 3 0 0 0 14 5z"/></svg>,
    glass:    <svg {...p}><path d="M8 21h8M12 21V11M5 3l1 8a6 6 0 0 0 12 0l1-8Z"/></svg>,
    fork:     <svg {...p}><path d="M5 2v6c0 1.1.9 2 2 2h2v12h2V10h2c1.1 0 2-.9 2-2V2M19 2h-3l-1 7c0 1 .5 2 2 2h2v11h2V2z"/></svg>,
    moon:     <svg {...p}><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>,
    sun:      <svg {...p}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>,
  };
  return I[name] || I.eye;
}
window.MFIcon = Icon;

/* ── Brand logo lockup ─────────────────────────────────────────────── */
function BrandLogo({ size = 'md', brand, onAccent, vertical }) {
  const sizes = {
    sm: { mark: 24, name: 13, tag: 9,  gap: 8  },
    md: { mark: 36, name: 16, tag: 10, gap: 12 },
    lg: { mark: 52, name: 22, tag: 11, gap: 14 },
    xl: { mark: 72, name: 32, tag: 12, gap: 18 },
  };
  const s = sizes[size] || sizes.md;
  /* Safe lookup — handles current array format and future keyed-object format */
  const brands = window.MF_BRANDS;
  const b = brand || (Array.isArray(brands) ? brands[0] : brands[window.__currentBrand || 'casa']);
  return (
    <div style={{
      display: 'flex',
      flexDirection: vertical ? 'column' : 'row',
      alignItems: 'center',
      gap: s.gap,
    }}>
      <div style={{
        width: s.mark, height: s.mark, borderRadius: '50%',
        background: onAccent ? 'transparent' : 'var(--accent)',
        border: onAccent ? '1px solid currentColor' : 'none',
        color: onAccent ? 'currentColor' : 'var(--accent-ink)',
        display: 'grid', placeItems: 'center',
        fontFamily: 'var(--serif)', fontStyle: 'italic',
        fontSize: s.mark * 0.42, lineHeight: 1, fontWeight: 400,
        flexShrink: 0,
      }}>
        {b?.initials || 'MF'}
      </div>
      <div style={{ textAlign: vertical ? 'center' : 'left', minWidth: 0 }}>
        <div className="serif" style={{ fontSize: s.name, fontStyle: 'italic', lineHeight: 1.1, letterSpacing: '-0.01em', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {b?.name || 'Restaurant'}
        </div>
        {b?.tagline && (
          <div style={{ fontSize: s.tag, color: 'currentColor', opacity: 0.6,
            letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 2, fontWeight: 500 }}>
            {typeof b.tagline === 'object' ? (b.tagline.es || b.tagline.en || '') : b.tagline}
          </div>
        )}
      </div>
    </div>
  );
}
window.MFBrandLogo = BrandLogo;

/* ── "Menú Factory" platform mark (for landing nav, etc) ─────────────── */
function PlatformMark({ size = 'md', dark }) {
  const fs = { sm: 14, md: 17, lg: 22 }[size];
  return (
    <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4 }}>
      <span className="serif" style={{ fontSize: fs, color: dark ? 'var(--paper)' : 'var(--ink)' }}>
        Menú
      </span>
      <span className="serif-italic" style={{ fontSize: fs, color: 'var(--accent)' }}>
        Factory
      </span>
    </div>
  );
}
window.MFPlatformMark = PlatformMark;

/* ── Small spec marker (vertical line + label, editorial detail) ─────── */
function Marker({ label, color = 'var(--mu)' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, color }}>
      <div style={{ width: 1, height: 12, background: 'currentColor' }} />
      <span style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600 }}>
        {label}
      </span>
    </div>
  );
}
window.MFMarker = Marker;

/* ── Status pill (ordering / kitchen / ready / paying / closed / attention) */
function StatusPill({ status, label }) {
  const styles = {
    ordering:  { bg: 'var(--paper-3)',    fg: 'var(--ink)',        dot: 'var(--ink)' },
    kitchen:   { bg: 'var(--accent-tint)', fg: 'var(--accent-deep)', dot: 'var(--accent)' },
    ready:     { bg: 'var(--sage)',        fg: 'var(--sage-deep)',  dot: 'var(--sage-deep)' },
    paying:    { bg: 'transparent',        fg: 'var(--warn)',       dot: 'var(--warn)',  border: 'var(--warn)' },
    closed:    { bg: 'transparent',        fg: 'var(--mu)',         dot: 'var(--mu-2)', border: 'var(--line-2)' },
    attention: { bg: 'var(--ink)',         fg: 'var(--paper)',      dot: 'var(--paper)' },
  };
  const s = styles[status] || styles.closed;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '3px 9px', borderRadius: 'var(--r-pill)',
      background: s.bg, color: s.fg,
      border: s.border ? `1px solid ${s.border}` : 'none',
      fontSize: 11, fontWeight: 500, letterSpacing: '0.02em',
    }}>
      <span style={{ width: 5, height: 5, borderRadius: '50%', background: s.dot,
        animation: (status === 'attention' || status === 'ready') ? 'pulse-soft 2s infinite' : 'none' }} />
      {label}
    </span>
  );
}
window.MFStatusPill = StatusPill;

/* ── Tag (dietary, allergen, etc) ────────────────────────────────── */
function Tag({ kind }) {
  const map = {
    v:     { label: 'Vegetariano', color: 'var(--sage-deep)' },
    gf:    { label: 'Sin gluten',  color: 'var(--ok)' },
    crudo: { label: 'Crudo',       color: 'var(--info)' },
    firma: { label: 'Firma',       color: 'var(--accent)' },
  };
  const t = map[kind];
  if (!t) return null;
  return (
    <span style={{ fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, color: t.color }}>
      · {t.label}
    </span>
  );
}
window.MFTag = Tag;

/* ── Price (always tabular, serif, accent option) ────────────────── */
function Price({ value, currency = '$', accent }) {
  return (
    <span className="serif tabular" style={{
      fontSize: 'inherit',
      color: accent ? 'var(--accent)' : 'inherit',
      fontFeatureSettings: '"tnum"',
    }}>
      {currency}{value}
    </span>
  );
}
window.MFPrice = Price;

/* ── Container (consistent max-width wrapper) ────────────────────── */
function Container({ children, narrow, style }) {
  return (
    <div style={{ maxWidth: narrow ? 880 : 1360, margin: '0 auto', padding: '0 40px', ...style }}>
      {children}
    </div>
  );
}
window.MFContainer = Container;

/* ── Live dot (for "online" / "active table" indicators) ─────────── */
function LiveDot({ color = 'var(--sage-deep)' }) {
  return (
    <span style={{ position: 'relative', width: 8, height: 8, display: 'inline-block', flexShrink: 0 }}>
      <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: color, animation: 'pulse-soft 2s infinite' }} />
      <span style={{ position: 'absolute', inset: 2, borderRadius: '50%', background: color }} />
    </span>
  );
}
window.MFLiveDot = LiveDot;

/* ── useMFTimer — emits a tick every N ms ────────────────────────── */
window.useMFTimer = function(intervalMs = 1000) {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setT(x => x + 1), intervalMs);
    return () => clearInterval(id);
  }, []);
  return t;
};