// BottleMockup.jsx — dark-glass bottle with the mead label applied at scale.

const BottleMockup = ({ label, neckSealColor = 'wax' }) => (
  <div style={{
    width: 360, height: 700, position: 'relative',
    background: 'radial-gradient(ellipse at 50% 30%, rgba(176,136,64,0.06), transparent 60%), var(--ink)',
  }}>
    <svg viewBox="0 0 360 700" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} preserveAspectRatio="xMidYMid meet">
      <defs>
        <linearGradient id="bottle-glass" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0"    stopColor="#0A0907"/>
          <stop offset="0.18" stopColor="#1A1612"/>
          <stop offset="0.5"  stopColor="#2B1F14"/>
          <stop offset="0.82" stopColor="#1A1612"/>
          <stop offset="1"    stopColor="#0A0907"/>
        </linearGradient>
        <linearGradient id="cork-grad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#5E4A30"/>
          <stop offset="1" stopColor="#3A2818"/>
        </linearGradient>
      </defs>
      {/* Cork */}
      <rect x="150" y="40" width="60" height="30" fill="url(#cork-grad)" stroke="#3A2818" strokeWidth="0.5"/>
      {/* Foil capsule */}
      <path d="M138 70 L222 70 L222 158 C 222 165 215 168 195 168 L165 168 C 145 168 138 165 138 158 Z"
            fill="#5E2F1A" stroke="#3A1B0E" strokeWidth="0.5"/>
      <line x1="138" y1="100" x2="222" y2="100" stroke="#8B4A2B" strokeWidth="0.3" opacity="0.6"/>
      <line x1="138" y1="130" x2="222" y2="130" stroke="#8B4A2B" strokeWidth="0.3" opacity="0.6"/>
      {/* Bottle body */}
      <path d="M138 168
               L138 220
               C 138 250 122 280 122 320
               L122 660
               C 122 678 138 690 160 690
               L200 690
               C 222 690 238 678 238 660
               L238 320
               C 238 280 222 250 222 220
               L222 168 Z"
            fill="url(#bottle-glass)" stroke="#000" strokeWidth="0.6"/>
      {/* Glass highlight */}
      <path d="M132 240 L132 660" stroke="#B08840" strokeWidth="0.6" opacity="0.35"/>
      <path d="M228 240 L228 660" stroke="#B08840" strokeWidth="0.6" opacity="0.20"/>
      {/* Bottom shadow */}
      <ellipse cx="180" cy="692" rx="80" ry="6" fill="#000" opacity="0.6"/>
    </svg>

    {/* Wax seal on neck */}
    <div style={{
      position: 'absolute', left: '50%', top: 96,
      transform: 'translateX(-50%) rotate(-3deg)',
      width: 56, height: 56,
    }}>
      <WaxSeal size={56} color={neckSealColor} />
    </div>

    {/* Label, applied to body */}
    <div style={{
      position: 'absolute', left: '50%', top: 184,
      transform: 'translateX(-50%) scale(0.86)',
      transformOrigin: 'top center',
      boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.5), 0 0 24px rgba(0,0,0,0.4)',
    }}>
      {label}
    </div>
  </div>
);

window.BottleMockup = BottleMockup;