// Shared visual primitives for Hotel Marindela pre-order flow.
// Exported to window so other Babel scripts can use them.

// ── Food artwork ───────────────────────────────────────────────
// Intentional abstract treatment: soft radial gradient circle keyed
// to each dish's signature color. Editorial, not "missing image".
function DishArtwork({ swatch = '#C7553C', size = 72, ringed = false, accent, image }) {
  const a = swatch;
  const ring = ringed ? `0 0 0 1.5px ${accent || a}` : null;
  if (image) {
    return (
      <div style={{
        width: size, height: size, borderRadius: '50%',
        position: 'relative', flexShrink: 0, overflow: 'hidden',
        background: `${a}22`,
        boxShadow: [ring, '0 6px 14px rgba(0,0,0,0.08)'].filter(Boolean).join(', '),
      }}>
        <img src={image} alt="" loading="lazy" draggable={false}
          style={{
            width: '100%', height: '100%', objectFit: 'cover', display: 'block',
            userSelect: 'none', WebkitUserDrag: 'none',
          }}
        />
      </div>
    );
  }
  const dark = a;
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      position: 'relative', flexShrink: 0,
      background: `radial-gradient(circle at 30% 28%, #fff7ec 0%, ${a}66 28%, ${a} 70%, ${dark} 100%)`,
      boxShadow: `inset 0 -6px 18px ${a}55, inset 0 8px 14px rgba(255,255,255,0.35), 0 6px 14px rgba(0,0,0,0.06)`,
      border: ringed ? `1.5px solid ${accent || a}` : 'none',
    }}>
      <svg width="100%" height="100%" viewBox="0 0 100 100" style={{
        position: 'absolute', inset: 0, opacity: 0.18, mixBlendMode: 'multiply',
        pointerEvents: 'none',
      }}>
        <defs>
          <radialGradient id={`g${swatch}`} cx="35%" cy="30%" r="65%">
            <stop offset="0%" stopColor="#fff" stopOpacity="0.4" />
            <stop offset="100%" stopColor="#000" stopOpacity="0.2" />
          </radialGradient>
        </defs>
        <circle cx="50" cy="50" r="50" fill={`url(#g${swatch})`} />
        {[...Array(8)].map((_, i) => (
          <circle key={i}
            cx={20 + Math.random() * 60}
            cy={20 + Math.random() * 60}
            r={0.6 + Math.random() * 1.2}
            fill="#000" opacity="0.25"
          />
        ))}
      </svg>
    </div>
  );
}

// ── Icons (line, 1.5 stroke) ───────────────────────────────────
const Icon = ({ d, size = 20, stroke = 'currentColor', fill = 'none', sw = 1.5, children }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={stroke}
    strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
    {d ? <path d={d} /> : children}
  </svg>
);

const IconBack = (p) => <Icon {...p} d="M15 18l-6-6 6-6" />;
const IconClose = (p) => <Icon {...p} d="M18 6L6 18M6 6l12 12" />;
const IconPlus = (p) => <Icon {...p} d="M12 5v14M5 12h14" />;
const IconMinus = (p) => <Icon {...p} d="M5 12h14" />;
const IconCheck = (p) => <Icon {...p} d="M5 12l5 5L20 7" />;
const IconClock = (p) => <Icon {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></Icon>;
const IconWalk = (p) => <Icon {...p}><circle cx="13" cy="4" r="2" /><path d="M7 22l3-7-2-4 4-3 4 5 3 1M10 15l-2-3" /></Icon>;
const IconPin = (p) => <Icon {...p}><path d="M12 22s7-7.5 7-13a7 7 0 10-14 0c0 5.5 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></Icon>;
const IconCal = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 9h18M8 3v4M16 3v4" /></Icon>;
const IconEdit = (p) => <Icon {...p} d="M4 20h4l10-10-4-4L4 16v4zM13.5 6.5l4 4" />;
const IconChev = (p) => <Icon {...p} d="M9 6l6 6-6 6" />;
const IconLeaf = (p) => <Icon {...p}><path d="M4 20c0-8 6-14 16-14 0 10-6 16-14 16-1 0-2 0-2-2z"/><path d="M4 20l8-8"/></Icon>;
const IconSpark = (p) => <Icon {...p}><path d="M12 3l1.5 5.5L19 10l-5.5 1.5L12 17l-1.5-5.5L5 10l5.5-1.5z" /></Icon>;

// ── Button ─────────────────────────────────────────────────────
function Button({ children, onClick, kind = 'primary', size = 'md', style, palette, full, disabled, ...rest }) {
  const p = palette;
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    gap: 8, border: '1px solid transparent', cursor: disabled ? 'default' : 'pointer',
    fontFamily: 'inherit', fontWeight: 500, letterSpacing: '0.01em',
    transition: 'transform .15s ease, background .2s ease, opacity .2s ease',
    width: full ? '100%' : undefined,
    opacity: disabled ? 0.45 : 1,
    WebkitTapHighlightColor: 'transparent',
  };
  const sizes = {
    sm: { padding: '8px 14px', fontSize: 13, borderRadius: 8 },
    md: { padding: '14px 22px', fontSize: 15, borderRadius: 8 },
    lg: { padding: '18px 28px', fontSize: 16, borderRadius: 8 },
  };
  const kinds = {
    primary: { background: p.accent, color: '#FBF8F1', border: `1px solid ${p.accent}` },
    accent:  { background: p.accent, color: '#FBF8F1', border: `1px solid ${p.accent}` },
    ghost:   { background: 'transparent', color: p.ink, border: `1px solid ${p.line}` },
    soft:    { background: p.surface, color: p.ink, border: `1px solid ${p.line}` },
    link:    { background: 'transparent', color: p.ink, border: 'none', padding: '6px 0' },
  };
  return (
    <button onClick={disabled ? undefined : onClick} disabled={disabled}
      style={{ ...base, ...sizes[size], ...kinds[kind], ...style }}
      onMouseDown={(e) => !disabled && (e.currentTarget.style.transform = 'scale(0.97)')}
      onMouseUp={(e) => (e.currentTarget.style.transform = 'scale(1)')}
      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
      {...rest}>
      {children}
    </button>
  );
}

// ── Hero ───────────────────────────────────────────────────────
function HeroSlot({ id, height = 360, palette: p, label = 'Restaurant Hero · Ocean Terrace at dusk' }) {
  const src = window.HERO_IMAGE;
  return (
    <div style={{
      position: 'relative', width: '100%', height, overflow: 'hidden',
      background: '#2A2620',
    }}>
      <img src={src} alt={label} draggable={false}
        style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', display: 'block',
          userSelect: 'none', WebkitUserDrag: 'none',
        }}
      />
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.18, mixBlendMode: 'overlay', pointerEvents: 'none' }}>
        <filter id="noise">
          <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="3" />
          <feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0" />
        </filter>
        <rect width="100%" height="100%" filter="url(#noise)" />
      </svg>
    </div>
  );
}

// ── Scrim / overlay used over hero ─────────────────────────────
function HeroScrim({ from = 'rgba(0,0,0,0.65)', to = 'rgba(0,0,0,0)' }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `linear-gradient(180deg, ${to} 0%, ${to} 40%, ${from} 100%)`,
      pointerEvents: 'none',
    }} />
  );
}

// ── Stepper (qty +/–) ──────────────────────────────────────────
function Stepper({ qty, onInc, onDec, palette: p }) {
  if (!qty) {
    return (
      <button onClick={onInc} aria-label="Add"
        style={{
          width: 36, height: 36, borderRadius: 999, border: `1px solid ${p.line}`,
          background: p.surface, color: p.ink, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'transform .15s ease',
        }}
        onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.92)'}
        onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
        onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
      >
        <IconPlus size={16} />
      </button>
    );
  }
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      background: p.ink, color: p.bg, borderRadius: 999, padding: 2,
    }}>
      <button onClick={onDec} aria-label="Remove one"
        style={{ width: 32, height: 32, borderRadius: 999, border: 0, background: 'transparent',
          color: 'inherit', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <IconMinus size={14} />
      </button>
      <span style={{ minWidth: 16, textAlign: 'center', fontSize: 14, fontVariantNumeric: 'tabular-nums', fontWeight: 500 }}>{qty}</span>
      <button onClick={onInc} aria-label="Add one"
        style={{ width: 32, height: 32, borderRadius: 999, border: 0, background: 'transparent',
          color: 'inherit', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <IconPlus size={14} />
      </button>
    </div>
  );
}

// ── Section header (display serif) ─────────────────────────────
function Eyebrow({ children, palette: p }) {
  return (
    <div style={{
      fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
      color: p.inkSoft, fontWeight: 500,
    }}>{children}</div>
  );
}

// ── currency ───────────────────────────────────────────────────
const money = (n) => `€${n.toFixed(0)}`;

Object.assign(window, {
  DishArtwork, Icon, IconBack, IconClose, IconPlus, IconMinus, IconCheck, IconClock,
  IconWalk, IconPin, IconCal, IconEdit, IconChev, IconLeaf, IconSpark,
  Button, HeroSlot, HeroScrim, Stepper, Eyebrow, money,
});