// Gold Bitcoin-branded Ape Water can — FULLY gold (no silver caps)
// Real Bitcoin logo front and center

function GoldCan({ width = 240, height = 420, tilt = 0 }) {
  return (
    <svg viewBox="0 0 240 420" width={width} height={height} style={{
      transform: `rotate(${tilt}deg)`,
      filter: 'drop-shadow(0 30px 40px rgba(207,152,67,0.45)) drop-shadow(0 10px 18px rgba(20,6,2,0.3))',
    }}>
      <defs>
        {/* aluminum gold gradient — primary barrel */}
        <linearGradient id="goldBarrel" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="#7A5210"/>
          <stop offset="10%" stopColor="#B27E30"/>
          <stop offset="28%" stopColor="#F2C96A"/>
          <stop offset="44%" stopColor="#FFE8A6"/>
          <stop offset="52%" stopColor="#FFF3CA"/>
          <stop offset="62%" stopColor="#FFE8A6"/>
          <stop offset="78%" stopColor="#E0AD4D"/>
          <stop offset="92%" stopColor="#A0701C"/>
          <stop offset="100%" stopColor="#5E3E0D"/>
        </linearGradient>
        {/* darker gold for top/bottom rings (not silver) */}
        <linearGradient id="goldRing" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="#4A3008"/>
          <stop offset="20%" stopColor="#8B5E14"/>
          <stop offset="50%" stopColor="#D4A048"/>
          <stop offset="80%" stopColor="#8B5E14"/>
          <stop offset="100%" stopColor="#4A3008"/>
        </linearGradient>
        {/* lid top — darker gold, not silver */}
        <linearGradient id="goldLid" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="#5E3E0D"/>
          <stop offset="50%" stopColor="#C99845"/>
          <stop offset="100%" stopColor="#5E3E0D"/>
        </linearGradient>
      </defs>

      {/* lid (gold) */}
      <ellipse cx="120" cy="30" rx="72" ry="12" fill="url(#goldLid)"/>
      {/* recessed inner lid — warm brown, not silver */}
      <ellipse cx="120" cy="28" rx="66" ry="9" fill="#3A2605"/>
      <ellipse cx="120" cy="27" rx="60" ry="7" fill="#5A3B08"/>
      {/* pull tab (gold) */}
      <ellipse cx="105" cy="28" rx="18" ry="4" fill="#E0B258" opacity="0.9"/>
      <circle cx="125" cy="28" r="3" fill="#3A2605"/>

      {/* neck ring (dark gold) */}
      <rect x="48" y="36" width="144" height="10" fill="url(#goldRing)"/>

      {/* main body — gold gradient */}
      <rect x="48" y="46" width="144" height="332" fill="url(#goldBarrel)"/>

      {/* subtle gold vertical highlights/shadows */}
      <rect x="108" y="50" width="14" height="322" fill="#FFF8D8" opacity="0.3"/>
      <rect x="52" y="50" width="6" height="322" fill="#3A2605" opacity="0.45"/>
      <rect x="182" y="50" width="6" height="322" fill="#3A2605" opacity="0.45"/>

      {/* bottom ring (dark gold) */}
      <rect x="48" y="370" width="144" height="8" fill="url(#goldRing)"/>
      {/* bottom base (gold, not silver) */}
      <ellipse cx="120" cy="382" rx="72" ry="10" fill="url(#goldLid)"/>
      <ellipse cx="120" cy="384" rx="64" ry="6" fill="#3A2605" opacity="0.4"/>

      {/* REAL BITCOIN LOGO — orange, sized to stay within orange disc */}
      <g transform="translate(76 116)">
        <circle cx="44" cy="44" r="50" fill="#FFF3CA" opacity="0.5"/>
        <circle cx="44" cy="44" r="44" fill="#F7931A"/>
        {/* Bitcoin B — rendered as text so it stays clean and in-bounds */}
        <text x="44" y="66" textAnchor="middle" fontFamily="Archivo Black, Impact, sans-serif"
              fontSize="62" fill="#fff" fontWeight="900">₿</text>
        {/* top + bottom vertical ticks (the signature Bitcoin logo detail) */}
        <rect x="41" y="8" width="2.6" height="9" rx="0.5" fill="#fff"/>
        <rect x="48" y="8" width="2.6" height="9" rx="0.5" fill="#fff"/>
        <rect x="41" y="71" width="2.6" height="9" rx="0.5" fill="#fff"/>
        <rect x="48" y="71" width="2.6" height="9" rx="0.5" fill="#fff"/>
      </g>

      {/* APE WATER wordmark */}
      <text x="120" y="238" textAnchor="middle" fontFamily="Anton, Impact, sans-serif" fontSize="26" fill="#140602" letterSpacing="4">APE WATER</text>
      <line x1="72" y1="248" x2="168" y2="248" stroke="#140602" strokeWidth="1.5"/>
      <text x="120" y="264" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="#140602" letterSpacing="2.5">SPRING-SOURCED · ALUMINUM</text>

      {/* tagline */}
      <text x="120" y="298" textAnchor="middle" fontFamily="Anton, Impact, sans-serif" fontSize="13" fill="#140602" letterSpacing="2">SATISFY YOUR</text>
      <text x="120" y="314" textAnchor="middle" fontFamily="Anton, Impact, sans-serif" fontSize="17" fill="#140602" letterSpacing="3">PRIMAL THIRST</text>

      {/* volume */}
      <text x="120" y="354" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#140602" letterSpacing="2">12 FL OZ · 355 mL</text>
    </svg>
  );
}

window.GoldCan = GoldCan;