// icons.jsx — compact line-icon set + brand stamp + image placeholder
// All icons inherit currentColor; pass size + strokeWidth.

function Icon({ name, size = 24, sw = 1.8, fill = false, style }) {
  const p = ICON_PATHS[name] || ICON_PATHS.dot;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
      style={style} aria-hidden="true">
      {p}
    </svg>
  );
}

const ICON_PATHS = {
  dot: <circle cx="12" cy="12" r="2" />,
  coffee: <><path d="M5 9h11v4a5 5 0 0 1-5 5H9a4 4 0 0 1-4-4V9Z"/><path d="M16 10h2.5a2.5 2.5 0 0 1 0 5H16"/><path d="M7 3v2M10 3v2M13 3v2"/></>,
  cupToGo: <><path d="M7 8h10l-1 11a2 2 0 0 1-2 1.8H10A2 2 0 0 1 8 19L7 8Z"/><path d="M6 8h12"/><path d="M9 4.5h6l.5 3.5H8.5L9 4.5Z"/></>,
  sandwich: <><path d="M3 9.5l9-4.5 9 4.5-9 3-9-3Z"/><path d="M3 9.5v3.2c0 .7.4 1.3 1 1.6l8 3.7 8-3.7c.6-.3 1-.9 1-1.6V9.5"/><path d="M7 11.5l5 2 5-2"/></>,
  cookie: <><circle cx="12" cy="12" r="8.5"/><circle cx="9.5" cy="10" r="1"/><circle cx="14" cy="9.5" r="1"/><circle cx="13.5" cy="14.5" r="1"/><circle cx="9" cy="14" r="1"/></>,
  cake: <><path d="M4 21h16v-7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7Z"/><path d="M4 15c2 1.4 4 1.4 6 0s4-1.4 6 0 2 1.4 4 0"/><path d="M12 7.5V5M12 5l1.2-1.6L12 2l-1.2 1.4L12 5Z"/></>,
  bottle: <><path d="M10 2h4M10 2v2.5c0 .6-.3 1-.7 1.4L8 7.2C8.4 7.7 9 8.4 9 9.5V20a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V9.5c0-1.1.6-1.8 1-2.3l-1.3-1.3c-.4-.4-.7-.8-.7-1.4V2"/><path d="M9 12h6"/></>,
  mountain: <><path d="M3 19h18L14.5 7l-3 5-2-2.5L3 19Z"/><circle cx="17.5" cy="6.5" r="1.5"/></>,
  train: <><rect x="6" y="3.5" width="12" height="13" rx="2.5"/><path d="M6 11h12"/><path d="M9.5 14.2h.01M14.5 14.2h.01"/><path d="M8 16.5 6 21M16 16.5 18 21M9 21h6"/></>,
  snow: <><path d="M12 2v20M4 7l16 10M20 7 4 17"/><path d="M12 6l2-2M12 6l-2-2M12 18l2 2M12 18l-2 2"/></>,
  trail: <><path d="M7 21c0-4 3-5 3-9s-2-4-2-7"/><circle cx="8" cy="3.5" r="1.4"/><path d="M14 21c4-1 6-4 6-9"/><path d="M17 5l1.5-1.5M20 9c-1.4.2-2.4-.3-3-1.5"/></>,
  fish: <><path d="M3 12c3-4 8-5 12-3 2 1 4 2 6 3-2 1-4 2-6 3-4 2-9 1-12-3Z"/><path d="M15 9.5l3-2.5M15 14.5l3 2.5M9 12h.01"/></>,
  pin: <><path d="M12 21c4-4.5 7-7.5 7-11a7 7 0 0 0-14 0c0 3.5 3 6.5 7 11Z"/><circle cx="12" cy="10" r="2.5"/></>,
  clock: <><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></>,
  bag: <><path d="M6 8h12l-1 11a2 2 0 0 1-2 1.8H9A2 2 0 0 1 7 19L6 8Z"/><path d="M9 9V7a3 3 0 0 1 6 0v2"/></>,
  plus: <><path d="M12 5v14M5 12h14"/></>,
  minus: <><path d="M5 12h14"/></>,
  chevR: <path d="M9 6l6 6-6 6"/>,
  chevL: <path d="M15 6l-6 6 6 6"/>,
  chevD: <path d="M6 9l6 6 6-6"/>,
  globe: <><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.4 2.3 3.5 5.3 3.5 8.5S14.4 18.2 12 20.5C9.6 18.2 8.5 15.2 8.5 12S9.6 5.8 12 3.5Z"/></>,
  star: <path d="M12 3.5l2.5 5.3 5.5.7-4 3.9 1 5.6L12 16.4 7.5 19l1-5.6-4-3.9 5.5-.7L12 3.5Z"/>,
  leaf: <><path d="M4 20c0-8 6-14 16-14 0 10-6 14-14 14"/><path d="M4 20c4-6 7-8 11-9"/></>,
  check: <path d="M5 12.5l4.5 4.5L19 6.5"/>,
  arrowR: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
  heart: <path d="M12 20s-7-4.3-9-8.5C1.8 8.6 3.3 5.5 6.3 5.5c1.8 0 3 1 3.7 2.2.7-1.2 1.9-2.2 3.7-2.2 3 0 4.5 3.1 3.3 6C19 15.7 12 20 12 20Z"/>,
  whatsapp: <><path d="M3.5 20.5l1.3-4.2A8 8 0 1 1 8 19l-4.5 1.5Z"/><path d="M9 9.5c0 3 2.5 5.5 5.5 5.5.7 0 1-.6 1-1.2 0-.3-.2-.5-.4-.6l-1.4-.6c-.3-.1-.5 0-.7.2l-.3.4c-1-.4-1.8-1.2-2.2-2.2l.4-.3c.2-.2.3-.4.2-.7l-.6-1.4c-.1-.2-.3-.4-.6-.4-.6 0-1.2.3-1.2 1Z"/></>,
  info: <><circle cx="12" cy="12" r="8.5"/><path d="M12 11v5M12 8h.01"/></>,
  bus: <><rect x="4" y="4" width="16" height="13" rx="2.5"/><path d="M4 11h16M8 17v2.5M16 17v2.5"/><circle cx="8" cy="14" r="1"/><circle cx="16" cy="14" r="1"/></>,
};

// Round travel-stamp brand mark with Z monogram + ring text
function Stamp({ size = 64, color = 'var(--c-brand)', ring = 'CAFETERÍA·LA·Z·ESQUEL·' }) {
  const id = React.useMemo(() => 'rg' + Math.random().toString(36).slice(2, 7), []);
  const chars = ring.split('');
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ color, display: 'block' }} aria-label="Cafetería La Z">
      <defs>
        <path id={id} d="M50,50 m-37,0 a37,37 0 1,1 74,0 a37,37 0 1,1 -74,0" />
      </defs>
      <circle cx="50" cy="50" r="47" fill="none" stroke="currentColor" strokeWidth="2.2" />
      <circle cx="50" cy="50" r="32" fill="none" stroke="currentColor" strokeWidth="1.4" strokeDasharray="1.5 3" opacity="0.55" />
      <text fill="currentColor" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 9.2, letterSpacing: 1.5 }}>
        <textPath href={'#' + id} startOffset="0">{chars.join('')}</textPath>
      </text>
      <text x="50" y="50" textAnchor="middle" dominantBaseline="central"
        fill="currentColor" style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 42 }}>Z</text>
    </svg>
  );
}

// Elegant on-brand image placeholder (gradient + icon + caption tag)
function Placeholder({ icon = 'coffee', label, tone = 'brand', ratio, height, rounded = 'var(--r)', style }) {
  const tones = {
    brand: ['#2E5E48', '#234A3A'],
    accent: ['#CB7A4F', '#B14C22'],
    forest: ['#3D6B52', '#1F4334'],
    lake: ['#3E6377', '#2A4654'],
    gold: ['#D2A75C', '#B07E36'],
    dusk: ['#6E5A7A', '#4A3C57'],
  };
  const [a, b] = tones[tone] || tones.brand;
  return (
    <div style={{
      position: 'relative', overflow: 'hidden', borderRadius: rounded,
      aspectRatio: ratio, height,
      background: `linear-gradient(150deg, ${a}, ${b})`,
      color: 'rgba(255,255,255,.92)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      ...style,
    }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: .5,
        backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'120\' height=\'120\'%3E%3Cfilter id=\'n\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.9\' numOctaves=\'2\'/%3E%3C/filter%3E%3Crect width=\'120\' height=\'120\' filter=\'url(%23n)\' opacity=\'0.06\'/%3E%3C/svg%3E")',
      }} />
      <div style={{ position: 'relative', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
        <Icon name={icon} size={30} sw={1.6} />
        {label && <span style={{ fontSize: 11, letterSpacing: '.04em', opacity: .85 }}>{label}</span>}
      </div>
      <span style={{
        position: 'absolute', top: 8, right: 8, fontSize: 9.5, letterSpacing: '.1em',
        textTransform: 'uppercase', background: 'rgba(0,0,0,.22)', padding: '3px 7px',
        borderRadius: 999, color: 'rgba(255,255,255,.85)',
      }}>Foto</span>
    </div>
  );
}

Object.assign(window, { Icon, Stamp, Placeholder });