/* Home Color — 自製插畫 SVG 元件（外帶咖啡店風格） */
const { useId: hcUseId } = React;

/* 外帶杯（紙杯 + 杯套 + 蓋子） */
function TakeawayCup({ tone = "milk", size = "M", label = "" }) {
  const palettes = {
    milk:    { body: "#F5EFE6", sleeve: "#B8753A", lid: "#4A2C1A", liquid: "#C68A52" },
    espresso:{ body: "#F5EFE6", sleeve: "#4A2C1A", lid: "#2A1A10", liquid: "#3A1F0F" },
    iced:    { body: "#FBF7F0", sleeve: "#D89A5C", lid: "#4A2C1A", liquid: "#6B3F22" },
    cream:   { body: "#FBF7F0", sleeve: "#8A5430", lid: "#4A2C1A", liquid: "#D8B98A" },
  };
  const p = palettes[tone] || palettes.milk;
  return (
    <svg viewBox="0 0 200 240" xmlns="http://www.w3.org/2000/svg" aria-label={label}>
      {/* shadow */}
      <ellipse cx="100" cy="225" rx="62" ry="6" fill="#000" opacity="0.12" />
      {/* cup body (trapezoid) */}
      <path d="M52 60 L148 60 L138 220 L62 220 Z" fill={p.body} stroke="#2A1A10" strokeWidth="2" strokeLinejoin="round"/>
      {/* sleeve */}
      <path d="M58 110 L142 110 L136 170 L64 170 Z" fill={p.sleeve} />
      <text x="100" y="146" fontFamily="serif" fontSize="22" fontStyle="italic" fill="#F5EFE6" textAnchor="middle" fontWeight="500">Home</text>
      {/* lid */}
      <path d="M48 60 L152 60 L154 50 L46 50 Z" fill={p.lid} stroke="#2A1A10" strokeWidth="2" strokeLinejoin="round"/>
      <rect x="46" y="38" width="108" height="14" rx="3" fill={p.lid} stroke="#2A1A10" strokeWidth="2"/>
      {/* sip hole */}
      <ellipse cx="116" cy="44" rx="14" ry="4" fill="#1A0F08" />
      {/* steam */}
      <path d="M80 30 Q76 22 82 14 Q88 8 84 0" stroke={p.lid} strokeWidth="2" fill="none" opacity="0.5" strokeLinecap="round"/>
      <path d="M120 30 Q124 22 118 14 Q112 8 116 0" stroke={p.lid} strokeWidth="2" fill="none" opacity="0.5" strokeLinecap="round"/>
      {/* size badge */}
      <circle cx="100" cy="200" r="11" fill="#F5EFE6" stroke="#2A1A10" strokeWidth="1.5"/>
      <text x="100" y="204" fontFamily="monospace" fontSize="11" fill="#2A1A10" textAnchor="middle" fontWeight="700">{size}</text>
    </svg>
  );
}

/* 冰杯（透明杯 + 吸管 + 冰塊） */
function IcedCup({ tone = "#6B3F22", label = "" }) {
  return (
    <svg viewBox="0 0 200 240" aria-label={label}>
      <ellipse cx="100" cy="225" rx="62" ry="6" fill="#000" opacity="0.12" />
      {/* cup */}
      <path d="M50 50 L150 50 L138 220 L62 220 Z" fill="rgba(255,255,255,0.5)" stroke="#2A1A10" strokeWidth="2" strokeLinejoin="round"/>
      {/* liquid */}
      <path d="M55 80 L145 80 L137 215 L63 215 Z" fill={tone} opacity="0.85"/>
      {/* ice cubes */}
      <rect x="74" y="92" width="22" height="22" rx="3" fill="#fff" opacity="0.55" transform="rotate(-12 85 103)"/>
      <rect x="106" y="100" width="20" height="20" rx="3" fill="#fff" opacity="0.45" transform="rotate(15 116 110)"/>
      <rect x="84" y="124" width="18" height="18" rx="3" fill="#fff" opacity="0.4" transform="rotate(8 93 133)"/>
      {/* lid (dome) */}
      <path d="M48 50 Q100 18 152 50 Z" fill="rgba(255,255,255,0.55)" stroke="#2A1A10" strokeWidth="2" strokeLinejoin="round"/>
      {/* straw */}
      <rect x="106" y="10" width="8" height="100" rx="3" fill="#B8753A" stroke="#2A1A10" strokeWidth="1.5"/>
      <rect x="106" y="10" width="8" height="20" rx="3" fill="#4A2C1A" stroke="#2A1A10" strokeWidth="1.5"/>
    </svg>
  );
}

/* 咖啡袋（豆款用） */
function BeanBagSVG({ accent = "#B8753A", roof = "#4A2C1A", label = "Home Blend" }) {
  return (
    <svg viewBox="0 0 200 240" aria-label={label}>
      <ellipse cx="100" cy="225" rx="62" ry="6" fill="#000" opacity="0.12" />
      {/* tin tie top */}
      <rect x="48" y="34" width="104" height="14" fill={roof} />
      <rect x="48" y="34" width="104" height="14" fill="none" stroke="#2A1A10" strokeWidth="1.5"/>
      {/* bag body */}
      <path d="M44 48 L156 48 L150 220 L50 220 Z" fill={accent} stroke="#2A1A10" strokeWidth="2" strokeLinejoin="round"/>
      {/* gusset highlight */}
      <path d="M50 48 L54 220 L100 220 L100 48 Z" fill="rgba(255,255,255,0.06)"/>
      {/* center label panel */}
      <rect x="62" y="100" width="76" height="86" fill="#F5EFE6" stroke="#2A1A10" strokeWidth="1.5"/>
      <line x1="70" y1="116" x2="130" y2="116" stroke={roof} strokeWidth="1"/>
      {/* coffee bean glyph */}
      <ellipse cx="100" cy="138" rx="14" ry="18" fill={roof}/>
      <path d="M100 122 Q94 138 100 154" stroke={accent} strokeWidth="1.5" fill="none"/>
      <text x="100" y="172" fontFamily="serif" fontSize="9" textAnchor="middle" fill="#2A1A10" fontWeight="600">HOME COLOR</text>
      <text x="100" y="182" fontFamily="monospace" fontSize="6" textAnchor="middle" fill={roof}>SINGLE ORIGIN · 200G</text>
      {/* valve */}
      <circle cx="138" cy="62" r="5" fill="#2A1A10"/>
      <circle cx="138" cy="62" r="2" fill={accent}/>
    </svg>
  );
}

/* 店面外觀（屋頂 + 招牌 + 窗 + 外帶窗口） */
function StorefrontSVG() {
  return (
    <svg viewBox="0 0 600 600" preserveAspectRatio="xMidYMid slice" aria-label="Home Color storefront">
      <defs>
        <linearGradient id="sky-grad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#E8C9A0"/>
          <stop offset="100%" stopColor="#D89A5C"/>
        </linearGradient>
        <pattern id="brick" x="0" y="0" width="40" height="20" patternUnits="userSpaceOnUse">
          <rect width="40" height="20" fill="#8A5430"/>
          <rect x="0" y="0" width="40" height="20" fill="none" stroke="#5A3318" strokeWidth="0.6"/>
          <line x1="20" y1="0" x2="20" y2="10" stroke="#5A3318" strokeWidth="0.6"/>
          <line x1="0" y1="10" x2="40" y2="10" stroke="#5A3318" strokeWidth="0.6"/>
        </pattern>
      </defs>

      {/* sky */}
      <rect width="600" height="380" fill="url(#sky-grad)"/>
      {/* sun */}
      <circle cx="120" cy="110" r="38" fill="#FBF7F0" opacity="0.9"/>
      {/* ground */}
      <rect y="540" width="600" height="60" fill="#3A2418"/>
      <rect y="540" width="600" height="6" fill="#2A1A10"/>

      {/* building */}
      <rect x="80" y="220" width="440" height="320" fill="url(#brick)"/>

      {/* roof (matches logo two-tone) */}
      <path d="M60 220 L300 110 L540 220 L520 230 L300 130 L80 230 Z" fill="#4A2C1A"/>
      <path d="M300 110 L540 220 L520 230 L300 130 Z" fill="#B8753A"/>
      {/* chimney */}
      <rect x="430" y="148" width="22" height="44" fill="#B8753A" stroke="#2A1A10" strokeWidth="1.5"/>

      {/* awning */}
      <path d="M120 290 L480 290 L460 330 L140 330 Z" fill="#4A2C1A"/>
      <g stroke="#B8753A" strokeWidth="3">
        <line x1="155" y1="290" x2="148" y2="328"/>
        <line x1="195" y1="290" x2="190" y2="328"/>
        <line x1="235" y1="290" x2="232" y2="328"/>
        <line x1="275" y1="290" x2="274" y2="328"/>
        <line x1="315" y1="290" x2="316" y2="328"/>
        <line x1="355" y1="290" x2="358" y2="328"/>
        <line x1="395" y1="290" x2="400" y2="328"/>
        <line x1="435" y1="290" x2="442" y2="328"/>
      </g>
      {/* sign */}
      <rect x="220" y="240" width="160" height="48" fill="#FBF7F0" stroke="#2A1A10" strokeWidth="2"/>
      <text x="300" y="272" fontFamily="serif" fontSize="22" fontWeight="600" fill="#4A2C1A" textAnchor="middle">Home Color</text>
      <text x="300" y="284" fontFamily="monospace" fontSize="7" fill="#B8753A" textAnchor="middle" letterSpacing="2">POUR OVER · TAKEAWAY</text>

      {/* takeaway window */}
      <rect x="170" y="350" width="180" height="160" fill="#1A0F08"/>
      <rect x="178" y="358" width="164" height="144" fill="#2A1A10"/>
      <rect x="178" y="358" width="164" height="36" fill="#3A2418"/>
      <text x="260" y="382" fontFamily="monospace" fontSize="10" fill="#D89A5C" textAnchor="middle" letterSpacing="3">ORDER HERE</text>
      {/* counter */}
      <rect x="170" y="490" width="180" height="22" fill="#6B3F22" stroke="#2A1A10" strokeWidth="1.5"/>
      {/* cup on counter */}
      <g transform="translate(252,470)">
        <path d="M-12 -2 L12 -2 L10 20 L-10 20 Z" fill="#F5EFE6" stroke="#2A1A10" strokeWidth="1.2"/>
        <rect x="-13" y="-6" width="26" height="6" rx="1" fill="#4A2C1A" stroke="#2A1A10" strokeWidth="1.2"/>
        <path d="M-3 -14 Q-5 -18 -1 -22" stroke="#8C7766" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
      </g>

      {/* side window */}
      <rect x="400" y="360" width="90" height="120" fill="#FBF7F0" opacity="0.4" stroke="#2A1A10" strokeWidth="2"/>
      <line x1="445" y1="360" x2="445" y2="480" stroke="#2A1A10" strokeWidth="1.5"/>
      <line x1="400" y1="420" x2="490" y2="420" stroke="#2A1A10" strokeWidth="1.5"/>

      {/* plant */}
      <rect x="105" y="488" width="40" height="50" fill="#4A2C1A" stroke="#2A1A10" strokeWidth="1.5"/>
      <g fill="#3D5A2E">
        <ellipse cx="118" cy="478" rx="10" ry="18"/>
        <ellipse cx="132" cy="472" rx="10" ry="22"/>
        <ellipse cx="125" cy="468" rx="8" ry="20"/>
      </g>

      {/* paper bag */}
      <g transform="translate(360,460)">
        <rect x="0" y="0" width="44" height="50" fill="#D8B98A" stroke="#2A1A10" strokeWidth="1.5"/>
        <rect x="6" y="-6" width="32" height="8" fill="#D8B98A" stroke="#2A1A10" strokeWidth="1.2"/>
        <text x="22" y="28" fontFamily="serif" fontSize="9" fill="#4A2C1A" textAnchor="middle" fontStyle="italic">Home</text>
      </g>
    </svg>
  );
}

/* 工作中咖啡師（俯角手沖） */
function PourOverScene() {
  return (
    <svg viewBox="0 0 600 720" preserveAspectRatio="xMidYMid slice" aria-label="Pour over scene">
      <defs>
        <radialGradient id="warm-light" cx="0.3" cy="0.2" r="0.9">
          <stop offset="0%" stopColor="#F5DFB8"/>
          <stop offset="60%" stopColor="#B8753A"/>
          <stop offset="100%" stopColor="#3A2418"/>
        </radialGradient>
      </defs>
      {/* table / bg */}
      <rect width="600" height="720" fill="url(#warm-light)"/>
      {/* wood grain */}
      <g stroke="#2A1A10" strokeWidth="0.6" opacity="0.18" fill="none">
        <path d="M0 200 Q200 180 400 220 T600 200"/>
        <path d="M0 320 Q220 300 420 340 T600 330"/>
        <path d="M0 480 Q200 460 400 500 T600 480"/>
        <path d="M0 620 Q220 600 420 640 T600 620"/>
      </g>

      {/* dripper (V60) - top down */}
      <g transform="translate(300,360)">
        {/* outer cone (top down) */}
        <ellipse cx="0" cy="0" rx="160" ry="60" fill="#FBF7F0" stroke="#2A1A10" strokeWidth="2.5"/>
        <ellipse cx="0" cy="0" rx="138" ry="48" fill="#3A1F0F"/>
        {/* coffee bed */}
        <ellipse cx="0" cy="-4" rx="120" ry="38" fill="#5A3318"/>
        <ellipse cx="-30" cy="-12" rx="60" ry="20" fill="#8A5430" opacity="0.7"/>
        {/* ribs */}
        <g stroke="#2A1A10" strokeWidth="1" opacity="0.4">
          <line x1="-150" y1="0" x2="-130" y2="0"/>
          <line x1="150" y1="0" x2="130" y2="0"/>
          <line x1="0" y1="-58" x2="0" y2="-46"/>
          <line x1="0" y1="58" x2="0" y2="46"/>
          <line x1="-106" y1="-42" x2="-92" y2="-34"/>
          <line x1="106" y1="-42" x2="92" y2="-34"/>
          <line x1="-106" y1="42" x2="-92" y2="34"/>
          <line x1="106" y1="42" x2="92" y2="34"/>
        </g>
      </g>

      {/* gooseneck kettle pour stream */}
      <path d="M150 80 Q200 220 286 350" stroke="#F5EFE6" strokeWidth="3.5" fill="none" opacity="0.85" strokeLinecap="round"/>
      {/* kettle */}
      <g transform="translate(120,90)">
        <ellipse cx="0" cy="20" rx="60" ry="12" fill="#2A1A10" opacity="0.3"/>
        <path d="M-50 -10 Q-50 -50 -10 -55 L20 -55 Q60 -50 60 -10 L55 25 Q55 35 -45 35 Q-55 35 -55 20 Z" fill="#4A2C1A" stroke="#2A1A10" strokeWidth="2"/>
        <path d="M-50 -10 Q-50 -50 -10 -55 L20 -55 Q60 -50 60 -10 Z" fill="#5A3318"/>
        {/* spout */}
        <path d="M55 -8 Q90 -10 110 0 L108 6 Q88 -2 60 4 Z" fill="#4A2C1A" stroke="#2A1A10" strokeWidth="1.5"/>
        {/* handle */}
        <path d="M-50 -20 Q-90 -10 -85 30 Q-50 30 -45 25" fill="none" stroke="#2A1A10" strokeWidth="6" strokeLinecap="round"/>
        {/* lid knob */}
        <circle cx="5" cy="-58" r="6" fill="#2A1A10"/>
      </g>

      {/* hand */}
      <g transform="translate(60,40)">
        <path d="M0 0 Q-20 30 -10 80 L40 90 Q60 60 50 20 Z" fill="#E8C9A0" stroke="#2A1A10" strokeWidth="1.5"/>
        <path d="M-8 60 L-4 88" stroke="#2A1A10" strokeWidth="1" fill="none" opacity="0.5"/>
      </g>

      {/* small scale + bean dish */}
      <g transform="translate(440,540)">
        <rect x="-40" y="-30" width="80" height="50" rx="4" fill="#2A1A10" stroke="#1A0F08" strokeWidth="1.5"/>
        <rect x="-32" y="-22" width="64" height="22" fill="#D89A5C"/>
        <text x="0" y="-7" fontFamily="monospace" fontSize="10" fill="#2A1A10" textAnchor="middle" fontWeight="700">15.0g</text>
        <circle cx="-22" cy="10" r="3" fill="#1A0F08"/>
        <circle cx="22" cy="10" r="3" fill="#1A0F08"/>
      </g>

      {/* beans scattered */}
      <g fill="#4A2C1A">
        <ellipse cx="120" cy="600" rx="9" ry="6" transform="rotate(20 120 600)"/>
        <ellipse cx="148" cy="612" rx="9" ry="6" transform="rotate(-15 148 612)"/>
        <ellipse cx="100" cy="624" rx="9" ry="6" transform="rotate(40 100 624)"/>
        <ellipse cx="135" cy="635" rx="9" ry="6" transform="rotate(-30 135 635)"/>
      </g>
      <g stroke="#B8753A" strokeWidth="1" fill="none">
        <path d="M115 597 Q120 600 124 603"/>
        <path d="M143 609 Q148 612 152 615"/>
        <path d="M95 621 Q100 624 105 627"/>
        <path d="M130 632 Q135 635 140 638"/>
      </g>
    </svg>
  );
}

/* 杯型尺寸對照 */
function CupSizeChart({ label, h, color = "#B8753A" }) {
  return (
    <svg viewBox="0 0 120 200" aria-label={label}>
      <ellipse cx="60" cy="190" rx="38" ry="4" fill="#000" opacity="0.12"/>
      <path d={`M${60 - h * 0.18} ${200 - h} L${60 + h * 0.18} ${200 - h} L${60 + h * 0.14} 188 L${60 - h * 0.14} 188 Z`} fill="#F5EFE6" stroke="#2A1A10" strokeWidth="2"/>
      <rect x={60 - h * 0.16} y={200 - h * 0.55} width={h * 0.32} height={h * 0.25} fill={color}/>
      <path d={`M${60 - h * 0.19} ${200 - h} L${60 + h * 0.19} ${200 - h} L${60 + h * 0.2} ${198 - h} L${60 - h * 0.2} ${198 - h} Z`} fill="#4A2C1A" stroke="#2A1A10" strokeWidth="2"/>
    </svg>
  );
}

Object.assign(window, { TakeawayCup, IcedCup, BeanBagSVG, StorefrontSVG, PourOverScene, CupSizeChart });
