/* NOVO ONE — Manual diagrams (line-art SVG illustrations) */

// Common: simple slim-tower silhouette
function DiagramMachineOutline({ w = 60, h = 130, accent = false }) {
  return (
    <g>
      {/* Body */}
      <rect x={-w / 2} y={-h / 2} width={w} height={h} rx="3" className="ink" strokeWidth="1.1" />
      {/* Top button */}
      <circle cx="0" cy={-h / 2 - 5} r="7" className={accent ? "accent" : "ink"} strokeWidth="1.1" />
      {/* Knob */}
      <circle cx={w / 2 - 1} cy={-h / 2 + 18} r="4" className="ink" strokeWidth="1" />
      {/* Foldable base plate */}
      <rect x={-w / 2 - 14} y={h / 2} width={w + 28} height="4" className="ink" strokeWidth="1" />
    </g>);

}

// ============================================================
// CO2 Cylinder Installation diagram
// ============================================================
function DiagramCO2Install() {
  return (
    <img
      src="images/co2-install.png"
      alt="Install the CO₂ cylinder — rotate clockwise to lock"
      className="diagram-img" />);


}

// ============================================================
// CO2 Cylinder Extraction diagram
// ============================================================
function DiagramCO2Extract() {
  return (
    <img
      src="images/co2-extract.png"
      alt="Extract a spent CO₂ cylinder — rotate counter-clockwise to release"
      className="diagram-img" />);


}

// ============================================================
// Bottle filling diagram
// ============================================================
function DiagramBottleFill() {
  return (
    <img
      src="images/bottle-fill.png"
      alt="Fill the bottle to the marked line"
      className="diagram-img diagram-img-portrait" />);


}

// ============================================================
// Insert / secure bottle diagram (lock indicator)
// ============================================================
function DiagramBottleSecure() {
  return (
    <img
      src="images/bottle-secure.png"
      alt="Insert the bottle and twist to lock"
      className="diagram-img diagram-img-portrait" />);


}

// ============================================================
// Press carbonation button
// ============================================================
function DiagramPressButton() {
  return (
    <img
      src="images/press-button.png"
      alt="Press the top button to carbonate"
      className="diagram-img diagram-img-portrait" />);


}

// ============================================================
// Shake bottle
// ============================================================
function DiagramShake() {
  return (
    <img
      src="images/shake.png"
      alt="Shake the bottle 4–5 times"
      className="diagram-img diagram-img-portrait" style={{ height: "232px" }} />);


}

// ============================================================
// Release pressure
// ============================================================
function DiagramRelease() {
  return (
    <img
      src="images/release.png"
      alt="Release pressure — rotate the cap"
      className="diagram-img diagram-img-portrait" />);


}

// ============================================================
// Pour into glass
// ============================================================
function DiagramPour() {
  return (
    <svg viewBox="0 0 220 160" className="diagram" width="100%" style={{ maxWidth: 240 }}>
      {/* Bottle tilted */}
      <g transform="translate(70 70) rotate(-30)">
        <path
          d="M -14 -40 L -14 40 Q -14 48, -7 48 L 7 48 Q 14 48, 14 40 L 14 -40 Q 14 -44, 10 -44 L -10 -44 Q -14 -44, -14 -40 Z"
          className="ink" strokeWidth="1.1" />
        <rect x="-10" y="-54" width="20" height="10" rx="2" className="ink" strokeWidth="1" />
      </g>
      {/* Stream */}
      <path d="M 105 75 Q 130 90, 145 105" className="accent" strokeWidth="1.4" fill="none" strokeLinecap="round" />
      {/* Glass */}
      <g transform="translate(155 120)">
        <path d="M -22 -25 L -18 25 L 18 25 L 22 -25 Z" className="ink" strokeWidth="1.1" fill="none" />
        {/* Liquid */}
        <path d="M -20 -10 L -18 25 L 18 25 L 20 -10 Z" className="accent-fill" style={{ fill: "var(--nova-champagne)", opacity: 0.4 }} stroke="none" />
        {/* Ice cubes */}
        <rect x="-12" y="-5" width="6" height="6" className="ink" strokeWidth="0.8" fill="none" />
        <rect x="2" y="-2" width="6" height="6" className="ink" strokeWidth="0.8" fill="none" />
        {/* Bubbles */}
        <circle cx="-6" cy="10" r="1" className="ink" fill="currentColor" opacity="0.5" />
        <circle cx="6" cy="14" r="1.2" className="ink" fill="currentColor" opacity="0.4" />
        <circle cx="0" cy="18" r="0.9" className="ink" fill="currentColor" opacity="0.5" />
      </g>
    </svg>);

}

// ============================================================
// Detach bottle (after carbonation) — rotate CCW
// ============================================================
function DiagramDetach() {
  return (
    <img
      src="images/detach.png"
      alt="Detach the bottle — rotate counter-clockwise to release"
      className="diagram-img diagram-img-portrait" style={{ height: "249px" }} />);


}

Object.assign(window, {
  DiagramCO2Install,
  DiagramCO2Extract,
  DiagramBottleFill,
  DiagramBottleSecure,
  DiagramPressButton,
  DiagramShake,
  DiagramRelease,
  DiagramPour,
  DiagramDetach
});