/* Aurora — Icons + visual primitives */

const Ic = ({ name, size = 20, stroke = 1.6, color = 'currentColor', fill = 'none' }) => {
  const s = { width: size, height: size, flexShrink: 0, verticalAlign: 'middle' };
  const p = { stroke: color, strokeWidth: stroke, fill, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'menu':   return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M4 7h16M4 12h16M4 17h16"/></svg>;
    case 'x':      return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M6 6L18 18M18 6L6 18"/></svg>;
    case 'search': return <svg style={s} viewBox="0 0 24 24"><circle {...p} cx="11" cy="11" r="7"/><path {...p} d="M20 20l-4-4"/></svg>;
    case 'cart':   return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M3 5h3l2.4 11.2a2 2 0 002 1.6h7.5a2 2 0 002-1.5L22 8H6"/><circle cx="10" cy="20" r="1.5" fill={color}/><circle cx="17" cy="20" r="1.5" fill={color}/></svg>;
    case 'heart':  return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M12 20s-7-4.5-7-10a4 4 0 017-2.5A4 4 0 0119 10c0 5.5-7 10-7 10z"/></svg>;
    case 'user':   return <svg style={s} viewBox="0 0 24 24"><circle {...p} cx="12" cy="8" r="4"/><path {...p} d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>;
    case 'plus':   return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M12 5v14M5 12h14"/></svg>;
    case 'minus':  return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M5 12h14"/></svg>;
    case 'arrow-r':return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'arrow-l':return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M19 12H5M11 6l-6 6 6 6"/></svg>;
    case 'play':   return <svg style={s} viewBox="0 0 24 24"><circle {...p} cx="12" cy="12" r="10"/><path d="M10 8l6 4-6 4z" fill={color}/></svg>;
    case 'ig':     return <svg style={s} viewBox="0 0 24 24"><rect {...p} x="3" y="3" width="18" height="18" rx="5"/><circle {...p} cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill={color}/></svg>;
    case 'wa':     return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M4 20l1.3-4.3a8 8 0 113.1 3.1L4 20z"/><path {...p} d="M9 10c0.5 2 2 3.5 4 4 .8-.2 1.3-.8 1.3-1.3l-1.5-.7c-.4.4-.8.8-1.3.3-1-.5-1.8-1.3-2.3-2.3-.5-.5-.1-.9.3-1.3l-.7-1.5C8.2 7.3 7.5 7.8 7.3 8.5"/></svg>;
    case 'check':  return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M5 13l4 4L19 7"/></svg>;
    case 'star':   return <svg style={s} viewBox="0 0 24 24"><path d="M12 3l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.8L6.6 19.6l1-6L3.3 9.4l6-.9z" fill={color} stroke={color} strokeWidth="0.5"/></svg>;
    case 'star-o': return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M12 3l2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.8L6.6 19.6l1-6L3.3 9.4l6-.9z"/></svg>;
    case 'truck':  return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M3 6h11v10H3zM14 9h4l3 3v4h-7z"/><circle {...p} cx="7" cy="18" r="2"/><circle {...p} cx="17" cy="18" r="2"/></svg>;
    case 'box':    return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M3 8l9-5 9 5v8l-9 5-9-5z"/><path {...p} d="M3 8l9 5 9-5M12 13v10"/></svg>;
    case 'pin':    return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M12 21s-7-6-7-11a7 7 0 0114 0c0 5-7 11-7 11z"/><circle {...p} cx="12" cy="10" r="2.5"/></svg>;
    case 'card':   return <svg style={s} viewBox="0 0 24 24"><rect {...p} x="3" y="6" width="18" height="12" rx="2"/><path {...p} d="M3 10h18M7 15h3"/></svg>;
    case 'calendar': return <svg style={s} viewBox="0 0 24 24"><rect {...p} x="3" y="5" width="18" height="16" rx="2"/><path {...p} d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case 'mail':   return <svg style={s} viewBox="0 0 24 24"><rect {...p} x="3" y="5" width="18" height="14" rx="2"/><path {...p} d="M3 7l9 7 9-7"/></svg>;
    case 'sparkle': return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6"/></svg>;
    case 'flame':  return <svg style={s} viewBox="0 0 24 24"><path {...p} d="M12 3c-2 4-5 6-5 10a5 5 0 1010 0c0-2-1-4-3-5-1 2-2 2-2-5z"/></svg>;
    default: return null;
  }
};

/* Aurora logo (flame + heart) */
const AuroraLogo = ({ size = 40, color = '#8C6F3E', withWord = false, wordSize }) => {
  const h = withWord ? size * 1.55 : size;
  const ws = wordSize || size * 0.42;
  return (
    <svg width={size} height={h} viewBox={withWord ? '0 0 200 240' : '0 0 200 200'} style={{display:'block'}}>
      <path d="M 100 20 C 78 56, 62 90, 64 130 C 66 168, 84 188, 100 188 C 116 188, 134 168, 136 130 C 138 90, 122 56, 100 20 Z"
            fill="none" stroke={color} strokeWidth="3" strokeLinejoin="round"/>
      <path d="M 100 150 C 100 144, 95 138, 89 138 C 82 138, 80 145, 83 151 C 86 157, 94 163, 100 170 C 106 163, 114 157, 117 151 C 120 145, 118 138, 111 138 C 105 138, 100 144, 100 150 Z"
            fill="none" stroke={color} strokeWidth="2.5" strokeLinejoin="round"/>
      {withWord && (
        <text x="100" y="224" textAnchor="middle"
              fontFamily="'Playfair Display', Georgia, serif"
              fontWeight="500" fontSize={ws} letterSpacing={ws*0.18} fill={color}>AURORA</text>
      )}
    </svg>
  );
};

/* Candle silhouette SVG */
const CandleSilhouette = ({ kind = 'pillar', opacity = 0.55 }) => {
  const common = { fill: 'rgba(255,255,255,'+opacity+')', stroke: 'rgba(42,36,32,0.15)', strokeWidth: 0.5 };
  const flame = (
    <>
      <path className="flame" d="M 50 18 C 47 22, 44 26, 45 32 C 46 36, 49 38, 50 38 C 51 38, 54 36, 55 32 C 56 26, 53 22, 50 18 Z"
            fill="rgba(255,200,130,0.9)" stroke="rgba(200,140,80,0.4)" strokeWidth="0.4"/>
      <circle cx="50" cy="32" r="2" fill="rgba(255,230,190,0.95)"/>
    </>
  );
  let shape;
  switch (kind) {
    case 'pillar': shape = <rect x="38" y="38" width="24" height="50" rx="2" {...common}/>; break;
    case 'sphere': shape = <circle cx="50" cy="62" r="24" {...common}/>; break;
    case 'rose': shape = (
      <g {...common}>
        <circle cx="50" cy="58" r="22"/>
        <path d="M 34 58 Q 50 36, 66 58" fill="rgba(255,255,255,0.25)" stroke="none"/>
        <path d="M 40 68 Q 50 50, 60 68" fill="rgba(255,255,255,0.2)" stroke="none"/>
      </g>
    ); break;
    case 'heart': shape = (
      <path d="M 50 90 C 50 82, 38 72, 30 62 C 22 50, 30 38, 40 42 C 45 44, 50 48, 50 52 C 50 48, 55 44, 60 42 C 70 38, 78 50, 70 62 C 62 72, 50 82, 50 90 Z" {...common}/>
    ); break;
    case 'bouquet': shape = (
      <g {...common}>
        <circle cx="40" cy="50" r="12"/><circle cx="60" cy="50" r="12"/>
        <circle cx="35" cy="65" r="10"/><circle cx="50" cy="60" r="13"/><circle cx="65" cy="65" r="10"/>
        <path d="M 30 80 L 50 95 L 70 80 Z" fill="rgba(255,255,255,0.35)"/>
      </g>
    ); break;
    case 'bear': shape = (
      <g {...common}>
        <circle cx="50" cy="72" r="20"/>
        <circle cx="36" cy="56" r="9"/><circle cx="64" cy="56" r="9"/>
        <circle cx="50" cy="60" r="14"/>
      </g>
    ); break;
    case 'box': shape = (
      <g {...common}>
        <rect x="30" y="48" width="40" height="36" rx="2"/>
        <rect x="30" y="44" width="40" height="6" rx="1"/>
        <rect x="46" y="44" width="8" height="40" fill="rgba(212,138,160,0.4)"/>
      </g>
    ); break;
    default: shape = <rect x="38" y="38" width="24" height="50" rx="2" {...common}/>;
  }
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style={{position:'absolute', inset:0}}>
      {shape}
      {(kind !== 'box' && kind !== 'bear' && kind !== 'heart') && flame}
      {kind === 'heart' && (
        <path className="flame" d="M 50 8 C 47 12, 44 16, 45 22 C 46 26, 49 28, 50 28 C 51 28, 54 26, 55 22 C 56 16, 53 12, 50 8 Z"
              fill="rgba(255,200,130,0.9)"/>
      )}
    </svg>
  );
};

/* Ribbon/bow decoration */
const Ribbon = ({ color = '#D48AA0', size = 80 }) => (
  <svg width={size} height={size * 0.5} viewBox="0 0 100 50" style={{position:'absolute'}}>
    <path d="M 50 25 C 40 10, 20 10, 20 25 C 20 40, 40 40, 50 25 C 60 10, 80 10, 80 25 C 80 40, 60 40, 50 25 Z"
          fill={color} opacity="0.85"/>
    <path d="M 48 25 L 42 48 L 50 44 L 58 48 L 52 25 Z" fill={color} opacity="0.95"/>
    <circle cx="50" cy="25" r="4" fill={color}/>
  </svg>
);

/* Product card media — gradient placeholder with candle silhouette */
const ProductMedia = ({ tone = 'rose', kind = 'pillar', label, aspect = 1, withRibbon, className }) => (
  <div className={`media ${className||''}`} style={{ '--ar': aspect }}>
    <div className="ph-candle" data-tone={tone}>
      <CandleSilhouette kind={kind}/>
      {label && <span className="label">{label}</span>}
      {withRibbon && <div style={{ position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)' }}>
        <Ribbon color="rgba(255,255,255,0.65)"/>
      </div>}
    </div>
  </div>
);

function kindFor(product) {
  const n = product.name.toLowerCase();
  if (n.includes('peon') || n.includes('rosa') || n.includes('gira') || n.includes('marga') || n.includes('bouquet') || n.includes('ramo')) return 'bouquet';
  if (n.includes('osito') || n.includes('bear') || n.includes('baby')) return 'bear';
  if (n.includes('corazón') || n.includes('corazon')) return 'heart';
  if (n.includes('caja')) return 'box';
  if (n.includes('torta') || n.includes('frasco')) return 'sphere';
  if (n.includes('rosa')) return 'rose';
  return 'pillar';
}

Object.assign(window, { Ic, AuroraLogo, CandleSilhouette, Ribbon, ProductMedia, kindFor });