// aerOS Guest v2 — UI primitives. All take theme `C` (from buildTheme) + animate flag.
const { useState: _c2S, useEffect: _c2E, useRef: _c2R } = React;

function G2Btn({ children, onClick, C, variant = 'primary', size = 'md', full, icon, iconRight, disabled, style }) {
  const [h, setH] = _c2S(false);
  const sz = { sm: { h: 38, px: 15, fs: 13.5 }, md: { h: 48, px: 18, fs: 15 }, lg: { h: 56, px: 22, fs: 16.5 } }[size];
  const variants = {
    primary: { background: `linear-gradient(180deg, ${C.accent}, ${C.accentDark})`, color: C.accentInk, boxShadow: `0 8px 22px -8px ${C.accent}` },
    soft: { background: C.accentSoft, color: C.onAccentSoft },
    ghost: { background: 'transparent', color: C.ink, border: `1.5px solid ${C.line2}` },
    dark: { background: C.ink, color: C.bg },
  };
  return (
    <button onClick={disabled ? undefined : onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9, height: sz.h, padding: `0 ${sz.px}px`, borderRadius: 14, fontSize: sz.fs, fontWeight: 700, fontFamily: G2THEME.BODY_FONT, letterSpacing: '0.01em', cursor: disabled ? 'default' : 'pointer', border: 'none', width: full ? '100%' : undefined, opacity: disabled ? 0.4 : 1, transition: 'transform 130ms cubic-bezier(.34,1.56,.64,1), filter 130ms', transform: h && !disabled ? 'translateY(-1.5px)' : 'none', filter: h && !disabled ? 'brightness(1.05)' : 'none', whiteSpace: 'nowrap', ...variants[variant], ...style }}>
      {icon && <span style={{ display: 'flex' }}>{typeof icon === 'function' ? icon({ size: sz.fs + 3 }) : icon}</span>}
      {children}
      {iconRight && <span style={{ display: 'flex' }}>{typeof iconRight === 'function' ? iconRight({ size: sz.fs + 3 }) : iconRight}</span>}
    </button>
  );
}

function G2Chip({ children, active, onClick, C, icon, count }) {
  return (
    <button onClick={onClick} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '9px 15px', borderRadius: 999, border: `1.5px solid ${active ? C.accent : C.line2}`, background: active ? C.accent : 'transparent', color: active ? C.accentInk : C.ink2, fontSize: 13.5, fontWeight: 600, fontFamily: G2THEME.BODY_FONT, cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0, transition: 'all 160ms cubic-bezier(.4,0,.2,1)' }}>
      {icon && <span style={{ display: 'flex' }}>{typeof icon === 'function' ? icon({ size: 15 }) : icon}</span>}
      {children}
      {count != null && <span className="tnum" style={{ fontSize: 11, fontWeight: 700, opacity: 0.65 }}>{count}</span>}
    </button>
  );
}

// Badge for chef/popular/new/spicy/signature
const BADGE_META = {
  chef: { key: 'chefPick', icon: 'star', color: '#E0A82E' },
  popular: { key: 'popularBadge', icon: 'flame', color: '#E0492F' },
  new: { key: 'newBadge', icon: 'sparkles', color: '#3E9D6B' },
  signature: { key: 'signature', icon: 'star', color: '#6C5CE0' },
  spicy: { key: 'spicyBadge', icon: 'flame', color: '#E0492F' },
};
function G2Badge({ kind, t, small }) {
  const m = BADGE_META[kind]; if (!m) return null;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: small ? 9.5 : 10.5, fontWeight: 800, color: '#fff', background: m.color, borderRadius: 7, padding: small ? '3px 6px' : '3px 8px', letterSpacing: '0.03em', textTransform: 'uppercase', boxShadow: '0 2px 8px rgba(0,0,0,0.18)' }}>
      {Icon[m.icon]({ size: small ? 10 : 11 })}{t[m.key]}
    </span>
  );
}

// Diet dots (veg/vegan/gf/spicy)
const DIET_META = { veg: { c: '#5FAE5F', icon: 'leaf', label: 'V' }, vegan: { c: '#3E9D6B', icon: 'leaf', label: 'VG' }, gf: { c: '#C99A3E', icon: null, label: 'GF' }, spicy: { c: '#E0492F', icon: 'flame', label: null } };
function G2Diet({ ids, C, size = 'md' }) {
  if (!ids || !ids.length) return null;
  const s = size === 'sm' ? 18 : 22;
  return (
    <div style={{ display: 'flex', gap: 5 }}>
      {ids.map(id => {
        const m = DIET_META[id]; if (!m) return null;
        return <span key={id} title={id} style={{ width: m.label ? 'auto' : s, minWidth: s, height: s, padding: m.label ? '0 5px' : 0, borderRadius: 6, background: `color-mix(in oklab, ${m.c} 16%, ${C.bg2})`, color: m.c, border: `1px solid color-mix(in oklab, ${m.c} 40%, transparent)`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: size === 'sm' ? 9 : 10, fontWeight: 800, letterSpacing: '0.02em' }}>{m.icon && !m.label ? Icon[m.icon]({ size: size === 'sm' ? 11 : 13 }) : m.label}</span>;
      })}
    </div>
  );
}

// Photo: gradient placeholder OR <image-slot> for upload mode
function G2Photo({ id, color, ratio = 1, radius = 14, C, t, photoMode, icon, src, style }) {
  const wrap = { position: 'relative', width: '100%', paddingTop: (1 / ratio * 100) + '%', borderRadius: radius, overflow: 'hidden', ...style };
  // Real image when present (backend menu_det_img / outlet / spa image).
  if (src) {
    return (
      <div style={wrap}>
        <img src={src} alt="" loading="lazy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      </div>
    );
  }
  if (photoMode === 'upload') {
    return (
      <div style={wrap}>
        <image-slot id={'g2-' + id} shape="rect" fit="cover" placeholder={t ? t.add : 'Foto ekle'} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block', background: `linear-gradient(135deg, ${color}, color-mix(in oklab, ${color} 55%, #000))` }}></image-slot>
      </div>
    );
  }
  return (
    <div style={wrap}>
      <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(135deg, ${color} 0%, color-mix(in oklab, ${color} 50%, #000) 130%)`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.16, backgroundImage: 'radial-gradient(circle at 28% 22%, #fff 0, transparent 36%), radial-gradient(circle at 78% 82%, #fff 0, transparent 30%)' }} />
        <span style={{ color: 'rgba(255,255,255,0.55)', display: 'flex' }}>{(icon || Icon.utensils)({ size: 26 })}</span>
      </div>
    </div>
  );
}

function G2Stepper({ value, onChange, C, min = 1, size = 'md' }) {
  const s = size === 'sm' ? 30 : 36;
  const btn = (label, fn, dis) => <button onClick={dis ? undefined : fn} style={{ width: s, height: s, borderRadius: 10, border: 'none', background: dis ? C.line : C.accentSoft, color: dis ? C.muted : C.onAccentSoft, cursor: dis ? 'default' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'all 120ms' }}>{label({ size: size === 'sm' ? 15 : 17 })}</button>;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 11 }}>
      {btn(Icon.minus, () => onChange(Math.max(min, value - 1)), value <= min)}
      <span className="tnum" style={{ minWidth: 20, textAlign: 'center', fontSize: size === 'sm' ? 15 : 17, fontWeight: 800, color: C.ink }}>{value}</span>
      {btn(Icon.plus, () => onChange(value + 1))}
    </div>
  );
}

// Bottom sheet
function G2Sheet({ open, onClose, C, children, full, animate = true }) {
  _c2E(() => { if (!open) return; const k = e => e.key === 'Escape' && onClose(); window.addEventListener('keydown', k); return () => window.removeEventListener('keydown', k); }, [open, onClose]);
  if (!open) return null;
  return (
    <div onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }} style={{ position: 'absolute', inset: 0, background: 'rgba(10,8,5,0.55)', backdropFilter: 'blur(3px)', display: 'flex', alignItems: 'flex-end', zIndex: 80, animation: animate ? 'g2fade .22s ease' : 'none' }}>
      <div style={{ width: '100%', maxHeight: full ? '94%' : '86%', background: C.bg2, borderRadius: '28px 28px 0 0', display: 'flex', flexDirection: 'column', overflow: 'hidden', boxShadow: '0 -12px 44px rgba(0,0,0,0.4)', animation: animate ? 'g2sheet .34s cubic-bezier(.22,1,.36,1)' : 'none', border: `1px solid ${C.line}`, borderBottom: 'none' }}>
        <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 11, flexShrink: 0 }}><div style={{ width: 42, height: 5, borderRadius: 999, background: C.line2 }} /></div>
        {children}
      </div>
    </div>
  );
}

function G2Toast({ msg, C }) {
  if (!msg) return null;
  return <div style={{ position: 'absolute', bottom: 102, left: '50%', transform: 'translateX(-50%)', background: C.ink, color: C.bg, padding: '12px 20px', borderRadius: 999, fontSize: 14, fontWeight: 700, fontFamily: G2THEME.BODY_FONT, zIndex: 200, whiteSpace: 'nowrap', boxShadow: '0 10px 30px rgba(0,0,0,0.35)', animation: 'g2pop .3s cubic-bezier(.34,1.56,.64,1)', display: 'flex', alignItems: 'center', gap: 8 }}>{Icon.checkCircle({ size: 17 })}{msg}</div>;
}

// segmented toggle (in-screen, e.g. language)
function G2Seg({ value, onChange, options, C }) {
  return (
    <div style={{ display: 'inline-flex', gap: 2, padding: 3, borderRadius: 11, background: C.dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)' }}>
      {options.map(([v, l]) => (
        <button key={v} onClick={() => onChange(v)} style={{ padding: '6px 11px', borderRadius: 8, border: 'none', background: value === v ? C.accent : 'transparent', color: value === v ? C.accentInk : C.ink2, fontSize: 12.5, fontWeight: 700, cursor: 'pointer', fontFamily: G2THEME.BODY_FONT, transition: 'all 140ms' }}>{l}</button>
      ))}
    </div>
  );
}

// Allergen icons — simple recognizable glyphs (stroke = currentColor)
const _ai = (children) => ({ size = 18 } = {}) => React.createElement('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' }, children);
const ALLERGEN_ICON = {
  gluten: _ai([React.createElement('path', { key: 0, d: 'M12 3v18' }), React.createElement('path', { key: 1, d: 'M12 7c-2-2-4-2-4-2s0 2 2 3 2 1 2 1 0-1 0-2zM12 7c2-2 4-2 4-2s0 2-2 3-2 1-2 1' }), React.createElement('path', { key: 2, d: 'M12 12c-2-2-4-2-4-2s0 2 2 3 2 1 2 1zM12 12c2-2 4-2 4-2s0 2-2 3-2 1-2 1' }), React.createElement('path', { key: 3, d: 'M12 17c-2-2-4-2-4-2s0 2 2 3 2 1 2 1zM12 17c2-2 4-2 4-2s0 2-2 3-2 1-2 1' })]),
  milk: _ai([React.createElement('path', { key: 0, d: 'M8 3h8M8 3v3l-1.5 3a3 3 0 0 0-.5 1.6V19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V10.6a3 3 0 0 0-.5-1.6L16 6V3', transform: 'translate(-2 0)' }), React.createElement('path', { key: 1, d: 'M6 13h8', transform: 'translate(0 0)' })]),
  egg: _ai([React.createElement('path', { key: 0, d: 'M12 3c3.5 0 6 5 6 9a6 6 0 0 1-12 0c0-4 2.5-9 6-9z' })]),
  nuts: _ai([React.createElement('path', { key: 0, d: 'M7 8a5 5 0 0 1 10 0c0 4-2 5-2 8a3 3 0 0 1-6 0c0-3-2-4-2-8z' }), React.createElement('path', { key: 1, d: 'M9 9c1 1 5 1 6 0M9 13c1 1 5 1 6 0' })]),
  fish: _ai([React.createElement('path', { key: 0, d: 'M3 12c3-4 8-5 12-5 0 0 4 2 6 5-2 3-6 5-6 5-4 0-9-1-12-5z' }), React.createElement('path', { key: 1, d: 'M3 12c-1-1-1-3-1-3M3 12c-1 1-1 3-1 3' }), React.createElement('circle', { key: 2, cx: 16, cy: 11, r: 0.6, fill: 'currentColor' })]),
  soy: _ai([React.createElement('path', { key: 0, d: 'M6 6c6 0 8 4 8 8M14 14a4 4 0 1 1-8 0 4 4 0 0 1 8 0z' }), React.createElement('circle', { key: 1, cx: 16, cy: 7, r: 2.4 })]),
  sesame: _ai([React.createElement('ellipse', { key: 0, cx: 8, cy: 9, rx: 2, ry: 3, transform: 'rotate(-25 8 9)' }), React.createElement('ellipse', { key: 1, cx: 15, cy: 11, rx: 2, ry: 3, transform: 'rotate(20 15 11)' }), React.createElement('ellipse', { key: 2, cx: 11, cy: 15, rx: 2, ry: 3, transform: 'rotate(-10 11 15)' })]),
  shellfish: _ai([React.createElement('path', { key: 0, d: 'M6 7c4 0 9 2 12 6 1 1 0 3-2 3-5 0-11-3-11-7 0-1 1-2 1-2z' }), React.createElement('path', { key: 1, d: 'M6 7c-1-1-2-3-1-4M9 8c0-2 1-3 1-3' }), React.createElement('circle', { key: 2, cx: 8, cy: 10, r: 0.6, fill: 'currentColor' })]),
};
function G2AllergenChip({ id, t, C, onInfo }) {
  const ic = ALLERGEN_ICON[((window.G2DATA.ALLERGEN_ICOKEY || {})[id]) || id] || Icon.info;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 11px 6px 8px', borderRadius: 10, background: C.dark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)', border: `1px solid ${C.line2}`, color: C.ink2, fontSize: 12.5, fontWeight: 600 }}>
      <span style={{ color: C.ink2, display: 'flex' }}>{ic({ size: 17 })}</span>
      {window.G2DATA.ALLERGENS[id]}
    </span>
  );
}

Object.assign(window, { G2Btn, G2Chip, G2Badge, G2Diet, G2Photo, G2Stepper, G2Sheet, G2Toast, G2Seg, BADGE_META, DIET_META, ALLERGEN_ICON, G2AllergenChip });