/* NOVO — Product SVG illustration (placeholder silhouette)
   Based on brief: slim vertical silhouette, 800ml bottle, foldable base,
   bottom-load gas-in design, rotary release knob + top press button.
   Dimensions reference: 239 × 129 × 445 mm
*/

function ProductSilhouette({
  width = 320,
  colorway = "onyx",   // onyx | ivory | silver
  showBottle = true,
  showLabels = false,
  bg = "transparent",
  shadow = true,
}) {
  // Render at fixed internal coords, scale via width
  const VB_W = 320;
  const VB_H = 560;
  const height = (width / VB_W) * VB_H;

  const theme = {
    onyx: {
      body: "#1C1C1E", bodyDark: "#0E0E10", highlight: "#3A3A3D",
      accent: "#2A2A2C", knob: "#D8C7AA", trim: "#3E3E40",
    },
    ivory: {
      body: "#F2EDE3", bodyDark: "#DED6C4", highlight: "#FAF7F0",
      accent: "#E6DFD0", knob: "#8A7B5E", trim: "#C7BFAE",
    },
    silver: {
      body: "#C7CACE", bodyDark: "#9CA0A5", highlight: "#E2E4E7",
      accent: "#B4B7BC", knob: "#1C1C1E", trim: "#8C9095",
    },
  }[colorway];

  return (
    <svg
      width={width}
      height={height}
      viewBox={`0 0 ${VB_W} ${VB_H}`}
      style={{ display: "block", background: bg }}
      aria-label={`NOVO One — ${colorway}`}
    >
      <defs>
        {/* Vertical body gradient — subtle lighting */}
        <linearGradient id={`body-${colorway}`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor={theme.bodyDark} />
          <stop offset="12%" stopColor={theme.body} />
          <stop offset="55%" stopColor={theme.highlight} stopOpacity="0.55" />
          <stop offset="70%" stopColor={theme.body} />
          <stop offset="100%" stopColor={theme.bodyDark} />
        </linearGradient>
        <linearGradient id={`body-dark-${colorway}`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor={theme.bodyDark} />
          <stop offset="50%" stopColor={theme.accent} />
          <stop offset="100%" stopColor={theme.bodyDark} />
        </linearGradient>
        {/* Bottle */}
        <linearGradient id="bottle-grad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#AAB2B8" stopOpacity="0.3" />
          <stop offset="50%" stopColor="#FFFFFF" stopOpacity="0.85" />
          <stop offset="100%" stopColor="#AAB2B8" stopOpacity="0.3" />
        </linearGradient>
        <filter id="soft-shadow" x="-20%" y="-10%" width="140%" height="120%">
          <feGaussianBlur stdDeviation="8" />
        </filter>
      </defs>

      {/* Ground shadow */}
      {shadow && (
        <ellipse cx={VB_W/2} cy={540} rx="120" ry="8" fill="#000" opacity="0.18" filter="url(#soft-shadow)" />
      )}

      {/* === FOLDABLE BASE === */}
      {/* The foldable plate — slightly wider than body */}
      <g>
        {/* Base plate (rectangular, folded open) */}
        <rect x="70" y="505" width="180" height="28" rx="2" fill={`url(#body-dark-${colorway})`} />
        <rect x="70" y="505" width="180" height="3" fill={theme.highlight} opacity="0.25" />
        {/* Hinge indicator lines */}
        <line x1="110" y1="505" x2="110" y2="533" stroke={theme.bodyDark} strokeWidth="0.6" opacity="0.4" />
        <line x1="210" y1="505" x2="210" y2="533" stroke={theme.bodyDark} strokeWidth="0.6" opacity="0.4" />
      </g>

      {/* === MAIN BODY === slim vertical silhouette */}
      {/* The outer silhouette approximates the product: slim tower, slight taper, bottle recess at front */}
      <g>
        {/* Back/main tower */}
        <path
          d={`
            M 115 60
            Q 115 42, 135 42
            L 185 42
            Q 205 42, 205 60
            L 205 505
            L 115 505
            Z
          `}
          fill={`url(#body-${colorway})`}
        />
        {/* Front lighter panel (reflection) */}
        <path
          d={`M 140 60 Q 140 48, 155 48 L 165 48 Q 180 48, 180 60 L 180 505 L 140 505 Z`}
          fill={theme.highlight}
          opacity="0.15"
        />
        {/* Seam line */}
        <line x1="115" y1="90" x2="205" y2="90" stroke={theme.bodyDark} strokeWidth="0.5" opacity="0.6" />
      </g>

      {/* === TOP — press button === */}
      <g>
        {/* Top cap */}
        <rect x="115" y="42" width="90" height="8" fill={theme.bodyDark} />
        {/* Circular press button */}
        <circle cx="160" cy="30" r="18" fill={`url(#body-dark-${colorway})`} />
        <circle cx="160" cy="30" r="18" fill="none" stroke={theme.trim} strokeWidth="0.75" />
        <circle cx="160" cy="30" r="10" fill="none" stroke={theme.trim} strokeWidth="0.5" opacity="0.6" />
        {/* Tiny indicator dot */}
        <circle cx="160" cy="30" r="1.8" fill={theme.knob} />
      </g>

      {/* === ROTARY KNOB (side) === */}
      <g>
        <circle cx="205" cy="130" r="12" fill={theme.knob} />
        <circle cx="205" cy="130" r="12" fill="none" stroke={theme.bodyDark} strokeWidth="0.5" />
        {/* Knob indicator groove */}
        <line x1="205" y1="122" x2="205" y2="128" stroke={theme.bodyDark} strokeWidth="1.2" />
      </g>

      {/* === BOTTLE RECESS / BOTTLE === */}
      {/* Bottom-load gas-in: bottle slots from bottom-front */}
      {showBottle && (
        <g>
          {/* Bottle shape — elongated, slim */}
          <path
            d={`
              M 138 260
              L 138 480
              Q 138 495, 153 495
              L 177 495
              Q 192 495, 192 480
              L 192 260
              Q 192 250, 185 250
              L 145 250
              Q 138 250, 138 260
              Z
            `}
            fill="url(#bottle-grad)"
            stroke={theme.trim}
            strokeWidth="0.5"
            opacity="0.85"
          />
          {/* Bottle cap threaded area */}
          <rect x="148" y="242" width="34" height="10" rx="2" fill={theme.bodyDark} opacity="0.6" />
          {/* Subtle water line */}
          <path
            d="M 140 310 Q 165 308, 190 310 L 190 320 Q 165 318, 140 320 Z"
            fill="#FFFFFF"
            opacity="0.5"
          />
          {/* NOVO mini mark on bottle */}
          <text x="165" y="400" fill={theme.trim} fontSize="7" fontFamily="Inter, sans-serif" letterSpacing="2" textAnchor="middle" opacity="0.7">NOVO</text>
        </g>
      )}

      {/* Small NOVO wordmark on body (bottom front) */}
      <text
        x="160"
        y="478"
        fill={colorway === "onyx" ? "#E8E2D4" : (colorway === "silver" ? "#2A2A2C" : "#3A3226")}
        fontSize="5.5"
        fontFamily="Inter, sans-serif"
        letterSpacing="2.5"
        textAnchor="middle"
        opacity="0.8"
      >
        NOVO
      </text>

      {/* Optional callout labels */}
      {showLabels && (
        <g fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#111" opacity="0.75">
          <g>
            <line x1="160" y1="14" x2="160" y2="4" stroke="#111" strokeWidth="0.4" />
            <text x="160" y="2" textAnchor="middle">TOP PRESS</text>
          </g>
          <g>
            <line x1="220" y1="130" x2="240" y2="130" stroke="#111" strokeWidth="0.4" />
            <text x="242" y="132">ROTARY RELEASE</text>
          </g>
          <g>
            <line x1="100" y1="370" x2="80" y2="370" stroke="#111" strokeWidth="0.4" />
            <text x="78" y="372" textAnchor="end">800 ML BOTTLE</text>
          </g>
          <g>
            <line x1="70" y1="519" x2="50" y2="519" stroke="#111" strokeWidth="0.4" />
            <text x="48" y="521" textAnchor="end">FOLDABLE BASE</text>
          </g>
        </g>
      )}
    </svg>
  );
}

// ============================================================
// ProductRender — real product photograph
// Drop-in replacement for ProductSilhouette in most contexts
// ============================================================
function ProductRender({
  width = 200,
  colorway = "onyx",     // onyx | ivory | champagne | silver (silver→ivory fallback)
  variant = "machine",   // "machine" | "bottle-attached"
  shadow = false,        // shadow is baked into the photo
  style = {},
  alt,
}) {
  // Map legacy "silver" → ivory until we have an explicit silver render
  const c = colorway === "silver" ? "ivory" : colorway;
  const base = variant === "bottle-attached" ? "machine-bottle" : "machine";
  const src = `images/${base}-${c}.jpeg`;
  // Aspect (height / width) for the source crops:
  //   machine: 343 / 1600 → H ≈ 4.66 × W
  //   machine-bottle: 480 / 1548 → H ≈ 3.225 × W
  const aspectH = variant === "bottle-attached" ? 1548 / 480 : 1600 / 343;
  return (
    <img
      src={src}
      alt={alt || `NOVO ONE — ${colorway}${variant === "bottle-attached" ? " with bottle" : ""}`}
      style={{
        width,
        height: width * aspectH,
        display: "block",
        objectFit: "contain",
        ...style,
      }}
    />
  );
}

// ============================================================
// MachineLineup — all three colorways in one shot
// variant: "machines" | "machines-with-bottle" | "lineup-with-bottle"
//   machines:           images/render-machines.jpeg  (3 machines side-by-side)
//   bottles-attached:   images/render-with-bottle-attached.jpeg
//   bottles-front:      images/render-bottles-and-machines.jpeg
//   machine-plus-bottle:images/render-machines-bottle.jpeg
// ============================================================
function MachineLineup({ width = 600, variant = "machines", style = {}, alt }) {
  const map = {
    "machines":            { src: "images/render-machines.jpeg",            aspect: 1600 / 1461 },
    "bottles-attached":    { src: "images/render-with-bottle-attached.jpeg", aspect: 1548 / 1600 },
    "bottles-front":       { src: "images/render-bottles-and-machines.jpeg", aspect: 1391 / 1600 },
    "machine-plus-bottle": { src: "images/render-machines-bottle.jpeg",     aspect: 1431 / 1600 },
  };
  const m = map[variant] || map.machines;
  return (
    <img
      src={m.src}
      alt={alt || "NOVO ONE — colorways"}
      style={{
        width,
        height: width * m.aspect,
        display: "block",
        objectFit: "contain",
        ...style,
      }}
    />
  );
}

// ============================================================
// BottleRender — the 800 ml ONE. bottle alone
// ============================================================
function BottleRender({ width = 160, style = {}, alt }) {
  return (
    <img
      src="images/bottle-onyx.jpeg"
      alt={alt || "NOVO ONE bottle"}
      style={{
        width,
        height: width * (1431 / 352),
        display: "block",
        objectFit: "contain",
        ...style,
      }}
    />
  );
}

Object.assign(window, { ProductSilhouette, ProductRender, MachineLineup, BottleRender });