// BottleArt.jsx — single neutral bottle silhouette used as placeholder for every wine.
// "PNG sin fondo, estilo neutro, elegante y genérico, consistente en todo el catálogo."
// We render it inline as SVG so it scales crisply on tablet.

const BottleArt = ({ height = 260, opacity = 1, tone = 'green' }) => {
  // Tone is optional — keeps every wine visually consistent by default ('green' bottle).
  // It only varies based on wine type if asked.
  const glasses = {
    green:  ['#0a1612', '#1e3329', '#3a5d4e', '#26443a', '#0c1a14', '#0A0A0A'],
    brown:  ['#160a05', '#2b1812', '#523428', '#3a2218', '#1a0d07', '#0A0A0A'],
    rose:   ['#190810', '#34121f', '#5e1f31', '#3e1421', '#1a0610', '#0A0A0A'],
    clear:  ['#0e1416', '#1d2a2c', '#2f4448', '#1f2d2f', '#0d1416', '#0A0A0A'],
  };
  const g = glasses[tone] || glasses.green;
  return (
    <svg viewBox="0 0 120 360" height={height} style={{ display: 'block', opacity }} xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id={`glass-${tone}`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor={g[0]} />
          <stop offset="0.18" stopColor={g[1]} />
          <stop offset="0.48" stopColor={g[2]} />
          <stop offset="0.58" stopColor={g[3]} />
          <stop offset="0.92" stopColor={g[4]} />
          <stop offset="1" stopColor={g[5]} />
        </linearGradient>
        <linearGradient id="cap-grad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#3a3a36" />
          <stop offset="1" stopColor="#171715" />
        </linearGradient>
        <linearGradient id="label-grad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#FFFFFF" />
          <stop offset="1" stopColor="#EFEDED" />
        </linearGradient>
      </defs>
      <path d="M48 8 h24 v18 h-24 z" fill="url(#cap-grad)" />
      <path d="M50 26 h20 v14 h-20 z" fill="#171715" />
      <path d="M52 40 h16 v62 c10 14 18 28 18 56 v172 c0 12 -8 18 -20 18 h-12 c-12 0 -20 -6 -20 -18 v-172 c0 -28 8 -42 18 -56 z" fill={`url(#glass-${tone})`} />
      <path d="M44 110 c-2 30 -2 90 0 200" stroke="rgba(255,255,255,0.10)" strokeWidth="1.2" fill="none" />
      <path d="M78 110 c2 30 2 90 0 200" stroke="rgba(0,0,0,0.35)" strokeWidth="1.4" fill="none" />
      <rect x="32" y="200" width="56" height="92" fill="url(#label-grad)" />
      <rect x="32" y="200" width="56" height="92" fill="none" stroke="rgba(0,0,0,0.04)" />
      <rect x="40" y="216" width="40" height="2" fill="#1D1D1B" />
      <rect x="40" y="224" width="28" height="5" fill="#1D1D1B" />
      <rect x="40" y="236" width="40" height="1" fill="#B7B6B6" />
      <rect x="40" y="244" width="32" height="1" fill="#B7B6B6" />
      <rect x="40" y="250" width="38" height="1" fill="#B7B6B6" />
      <rect x="40" y="270" width="14" height="3" fill="#B50D21" />
      <rect x="52" y="40" width="16" height="6" fill="rgba(0,0,0,0.4)" />
    </svg>
  );
};

window.BottleArt = BottleArt;