// Product image placeholder SVGs by category
function ProductImage({ type, size = 160 }) {
  const configs = {
    nata:    { bg: '#3d2214', accent: '#e8c97a', label: 'Pastel de Nata' },
    bolo:    { bg: '#3a1828', accent: '#d4a0c0', label: 'Bolo' },
    rissol:  { bg: '#1e3214', accent: '#a0c870', label: 'Rissol' },
    coxinha: { bg: '#332214', accent: '#e8b870', label: 'Coxinha' },
    choco:   { bg: '#221414', accent: '#9b5523', label: 'Bolo Choco' },
    custom:  { bg: '#142236', accent: '#70a8d4', label: 'Personalizado' },
    chamuca: { bg: '#332e14', accent: '#d4c870', label: 'Chamuça' },
    tematico:{ bg: '#261232', accent: '#c070d4', label: 'Temático' },
    empada:  { bg: '#2e2414', accent: '#d4b870', label: 'Empada' },
    feijao:  { bg: '#261e14', accent: '#c8a060', label: 'P. Feijão' },
  };
  const c = configs[type] || { bg: '#2a1a0c', accent: '#d4993a', label: type };
  const shapeMap = {
    nata: 'circle', bolo: 'cake', rissol: 'half', coxinha: 'drop',
    choco: 'cake', custom: 'star', chamuca: 'triangle', tematico: 'cake',
    empada: 'circle', feijao: 'oval'
  };
  const shape = shapeMap[type] || 'circle';
  const s = size;

  return (
    <svg width={s} height={s} viewBox="0 0 160 160" style={{ display: 'block' }}>
      <rect width="160" height="160" fill={c.bg}/>
      {[0,1,2,3,4,5,6,7,8,9,10,11].map(i => (
        <line key={i} x1={i*15-10} y1="0" x2={i*15+160} y2="160" stroke={c.accent} strokeWidth="0.4" strokeOpacity="0.18"/>
      ))}
      {shape==='circle'   && <circle cx="80" cy="72" r="34" fill={c.accent} fillOpacity="0.22" stroke={c.accent} strokeWidth="1.5"/>}
      {shape==='cake'     && <><rect x="46" y="86" width="68" height="27" rx="4" fill={c.accent} fillOpacity="0.22" stroke={c.accent} strokeWidth="1.5"/><rect x="54" y="68" width="52" height="20" rx="3" fill={c.accent} fillOpacity="0.18" stroke={c.accent} strokeWidth="1"/><line x1="70" y1="68" x2="70" y2="58" stroke={c.accent} strokeWidth="1.5"/><line x1="90" y1="68" x2="90" y2="54" stroke={c.accent} strokeWidth="1.5"/></>}
      {shape==='half'     && <ellipse cx="80" cy="80" rx="36" ry="22" fill={c.accent} fillOpacity="0.22" stroke={c.accent} strokeWidth="1.5"/>}
      {shape==='drop'     && <ellipse cx="80" cy="80" rx="22" ry="34" fill={c.accent} fillOpacity="0.22" stroke={c.accent} strokeWidth="1.5"/>}
      {shape==='triangle' && <polygon points="80,44 110,108 50,108" fill={c.accent} fillOpacity="0.22" stroke={c.accent} strokeWidth="1.5"/>}
      {shape==='oval'     && <ellipse cx="80" cy="78" rx="34" ry="26" fill={c.accent} fillOpacity="0.22" stroke={c.accent} strokeWidth="1.5"/>}
      {shape==='star'     && <polygon points="80,44 88,70 115,70 93,86 101,113 80,97 59,113 67,86 45,70 72,70" fill={c.accent} fillOpacity="0.18" stroke={c.accent} strokeWidth="1.5"/>}
      <text x="80" y="132" textAnchor="middle" fontFamily="serif" fontSize="10" fill={c.accent} fillOpacity="0.65" letterSpacing="1">{c.label}</text>
    </svg>
  );
}

// Toast notification
function Toast({ message, type = 'success', onClose }) {
  React.useEffect(() => {
    const t = setTimeout(onClose, 3000);
    return () => clearTimeout(t);
  }, []);
  const bg = type === 'success' ? '#243d16' : type === 'error' ? '#3d1616' : '#3d2b0a';
  const border = type === 'success' ? 'rgba(80,180,40,0.4)' : type === 'error' ? 'rgba(200,60,60,0.4)' : 'rgba(212,153,58,0.4)';
  return (
    <div style={{
      position: 'fixed', bottom: 24, right: 16, zIndex: 9999,
      background: bg, border: `1px solid ${border}`,
      color: 'var(--cream)', padding: '12px 18px', borderRadius: 8,
      fontFamily: 'Lato, sans-serif', fontSize: 14,
      boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
      animation: 'slideUp 0.3s ease',
      display: 'flex', alignItems: 'center', gap: 10, maxWidth: 'calc(100vw - 32px)'
    }}>
      <span>{type === 'success' ? '✓' : type === 'error' ? '✕' : 'ℹ'}</span>
      <span>{message}</span>
    </div>
  );
}

// Cart badge
function Badge({ count }) {
  if (!count) return null;
  return (
    <span style={{
      position: 'absolute', top: -6, right: -8,
      background: 'var(--gold)', color: '#1a0e05',
      borderRadius: '50%', width: 18, height: 18,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 10, fontWeight: 700, fontFamily: 'Lato, sans-serif'
    }}>{count > 9 ? '9+' : count}</span>
  );
}

// Modal
function Modal({ children, onClose, title, wide = false }) {
  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'rgba(8,4,1,0.88)',
      zIndex: 5000, display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 16, backdropFilter: 'blur(6px)'
    }} onClick={e => e.target === e.currentTarget && onClose()}>
      <div style={{
        background: 'var(--bg2)', border: '1px solid var(--border)',
        borderRadius: 12, padding: 'clamp(20px,4vw,32px)', width: '100%',
        maxWidth: wide ? 780 : 480, maxHeight: '92vh', overflowY: 'auto',
        boxShadow: '0 24px 80px rgba(0,0,0,0.7)'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
          <h2 style={{ margin: 0, fontFamily: "'Playfair Display', serif", color: 'var(--cream)', fontSize: 21 }}>{title}</h2>
          <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--dim)', cursor: 'pointer', fontSize: 24, lineHeight: 1, padding: 4 }}>×</button>
        </div>
        {children}
      </div>
    </div>
  );
}

// Section title
function SectionTitle({ children, subtitle, center = true }) {
  return (
    <div style={{ textAlign: center ? 'center' : 'left', marginBottom: 40 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, justifyContent: center ? 'center' : 'flex-start', marginBottom: 10 }}>
        <div style={{ height: 1, background: 'linear-gradient(to right, transparent, rgba(212,153,58,0.55))', flex: center ? 1 : '0 0 32px' }}></div>
        <span style={{ color: 'var(--gold)', fontSize: 10, letterSpacing: 4, fontFamily: 'Lato, sans-serif' }}>✦</span>
        <div style={{ height: 1, background: 'linear-gradient(to left, transparent, rgba(212,153,58,0.55))', flex: center ? 1 : 0 }}></div>
      </div>
      <h2 style={{ margin: '0 0 9px', fontFamily: "'Playfair Display', serif", fontSize: 'clamp(26px,5vw,36px)', color: 'var(--cream)', fontWeight: 400 }}>{children}</h2>
      {subtitle && <p style={{ margin: 0, color: 'var(--muted)', fontFamily: 'Lato, sans-serif', fontSize: 15, letterSpacing: 0.3 }}>{subtitle}</p>}
    </div>
  );
}

// Input base style
const inputStyle = {
  width: '100%', background: 'rgba(255,255,255,0.05)', border: '1px solid var(--border)',
  borderRadius: 6, color: 'var(--cream)', fontFamily: 'Lato, sans-serif', fontSize: 14,
  padding: '10px 14px', outline: 'none', boxSizing: 'border-box', transition: 'border-color 0.2s'
};

// Primary button
function BtnPrimary({ children, onClick, disabled, full, small, type = 'button' }) {
  const [hov, setHov] = React.useState(false);
  return (
    <button type={type} onClick={onClick} disabled={disabled}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        background: hov && !disabled ? '#e0aa40' : 'var(--gold)',
        color: '#1a0e05', border: 'none', borderRadius: 5,
        padding: small ? '8px 16px' : '12px 26px',
        fontFamily: 'Lato, sans-serif', fontWeight: 700,
        fontSize: small ? 12 : 14, letterSpacing: 1, textTransform: 'uppercase',
        cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.5 : 1,
        width: full ? '100%' : 'auto',
        transition: 'all 0.2s', minHeight: 44
      }}>{children}</button>
  );
}

// Ghost button
function BtnGhost({ children, onClick, small }) {
  const [hov, setHov] = React.useState(false);
  return (
    <button onClick={onClick}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        background: hov ? 'rgba(212,153,58,0.12)' : 'transparent',
        color: hov ? 'var(--gold)' : 'var(--muted)',
        border: '1px solid var(--border)',
        borderRadius: 5, padding: small ? '7px 14px' : '11px 24px',
        fontFamily: 'Lato, sans-serif', fontWeight: 600,
        fontSize: small ? 12 : 13, letterSpacing: 1, textTransform: 'uppercase',
        cursor: 'pointer', transition: 'all 0.2s', minHeight: small ? 36 : 44
      }}>{children}</button>
  );
}

Object.assign(window, {
  ProductImage, Toast, Badge, Modal, Stars: () => null,
  SectionTitle, inputStyle, BtnPrimary, BtnGhost
});