// bottles.jsx — Five bottle SVGs for the family section. Pure SVG, monochrome stroke.
// Each bottle has a distinct silhouette, sized to fit ~200x360.

const Bottle = ({ name, accent }) => {
  const c = "var(--text-mid)";
  const a = accent || "var(--accent)";
  const props = { stroke: c, fill: "none", strokeWidth: 1, strokeLinejoin: "round", strokeLinecap: "round" };

  // FB-01 Akış: organic, curved shoulder, bulbous body
  if (name === "akis") return (
    <svg viewBox="0 0 200 360" preserveAspectRatio="xMidYMax meet">
      <g {...props}>
        {/* cap */}
        <rect x="86" y="14" width="28" height="36" rx="2" fill={a} fillOpacity="0.18" stroke={c}/>
        <line x1="86" y1="22" x2="114" y2="22" />
        {/* neck */}
        <path d="M92 50 L92 78 Q92 86 100 88 Q108 86 108 78 L108 50" />
        {/* shoulder + body */}
        <path d="M92 88 Q60 100 50 150 Q42 200 50 260 Q58 320 100 340 Q142 320 150 260 Q158 200 150 150 Q140 100 108 88 Z" />
        {/* highlight */}
        <path d="M70 140 Q66 200 74 280" stroke={c} strokeOpacity="0.35" />
      </g>
    </svg>
  );

  // FB-02 Burgu: twisted/spiraled body
  if (name === "burgu") return (
    <svg viewBox="0 0 200 360" preserveAspectRatio="xMidYMax meet">
      <g {...props}>
        <rect x="84" y="10" width="32" height="30" rx="1" stroke={c}/>
        <path d="M88 40 L88 72 L92 80 L108 80 L112 72 L112 40" />
        {/* shoulder hex */}
        <path d="M92 80 L60 100 L48 140 L48 280 L72 330 L128 330 L152 280 L152 140 L140 100 L108 80 Z" />
        {/* twist lines */}
        <path d="M60 130 Q100 150 140 130" stroke={c} strokeOpacity="0.4" />
        <path d="M58 170 Q100 195 142 170" stroke={c} strokeOpacity="0.4" />
        <path d="M56 210 Q100 235 144 210" stroke={c} strokeOpacity="0.4" />
        <path d="M58 250 Q100 275 142 250" stroke={c} strokeOpacity="0.4" />
        <path d="M62 290 Q100 312 138 290" stroke={c} strokeOpacity="0.4" />
      </g>
    </svg>
  );

  // FB-03 Altın: tall rectangular with offset neck (like the hero)
  if (name === "altin") return (
    <svg viewBox="0 0 200 360" preserveAspectRatio="xMidYMax meet">
      <g {...props}>
        <rect x="78" y="6" width="36" height="44" rx="1" fill={a} fillOpacity="0.22" stroke={c}/>
        <line x1="78" y1="18" x2="114" y2="18" />
        {/* offset neck */}
        <path d="M86 50 L86 78 L82 86 L42 96 L42 326 L158 326 L158 96 L118 86 L114 78 L114 50" />
        <line x1="42" y1="120" x2="158" y2="120" strokeOpacity="0.35"/>
        <line x1="42" y1="296" x2="158" y2="296" strokeOpacity="0.35"/>
      </g>
    </svg>
  );

  // FB-04 Sinüs: undulating sine-wave silhouette
  if (name === "sinus") return (
    <svg viewBox="0 0 200 360" preserveAspectRatio="xMidYMax meet">
      <g {...props}>
        <ellipse cx="100" cy="22" rx="14" ry="10" stroke={c}/>
        <path d="M88 32 L88 70 L92 78 L108 78 L112 70 L112 32" />
        <path d="M92 78 Q40 110 58 160 Q90 200 50 240 Q20 290 80 320 Q100 332 120 320 Q180 290 150 240 Q110 200 142 160 Q160 110 108 78 Z" />
        <circle cx="100" cy="200" r="3" fill={c} />
      </g>
    </svg>
  );

  // FB-05 Sarmal: tall slender, helical
  if (name === "sarmal") return (
    <svg viewBox="0 0 200 360" preserveAspectRatio="xMidYMax meet">
      <g {...props}>
        <rect x="90" y="8" width="20" height="34" rx="1" fill={a} fillOpacity="0.20" stroke={c}/>
        <path d="M92 42 L92 76 L96 84 L104 84 L108 76 L108 42" />
        {/* very slender body */}
        <path d="M96 84 L66 110 L66 320 Q66 336 100 336 Q134 336 134 320 L134 110 L104 84 Z" />
        {/* helical band lines */}
        <path d="M66 130 Q100 150 134 130" stroke={c} strokeOpacity="0.35" />
        <path d="M66 200 Q100 220 134 200" stroke={c} strokeOpacity="0.35" />
        <path d="M66 270 Q100 290 134 270" stroke={c} strokeOpacity="0.35" />
      </g>
    </svg>
  );
};

const BOTTLES = [
  { code: "FB-01", key: "akis",   glb: "assets/fb-01.glb", name: { tr: "Akış",   en: "Flow"     }, fam: { tr: "Organik",        en: "Organic"     }, vol: "200 ml", h: "168 mm", w: "42 g" },
  { code: "FB-02", key: "burgu",  glb: "assets/fb-02.glb", name: { tr: "Burgu",  en: "Helix"    }, fam: { tr: "Matematiksel",   en: "Mathematical"}, vol: "150 ml", h: "152 mm", w: "38 g" },
  { code: "FB-03", key: "altin",  glb: "assets/fb-03.glb", name: { tr: "Altın",  en: "Gold"     }, fam: { tr: "Mimari",         en: "Architectural"},vol: "100 ml", h: "138 mm", w: "44 g" },
  { code: "FB-04", key: "sinus",  glb: null,               name: { tr: "Sinüs",  en: "Sine"     }, fam: { tr: "Organik",        en: "Organic"     }, vol: "250 ml", h: "186 mm", w: "48 g" },
  { code: "FB-05", key: "sarmal", glb: null,               name: { tr: "Sarmal", en: "Coil"     }, fam: { tr: "Matematiksel",   en: "Mathematical"},vol: "75 ml",  h: "162 mm", w: "32 g" },
];

window.Bottle = Bottle;
window.BOTTLES = BOTTLES;