// ============================================================
// ATHAR — Bottle component
// Editorial line-drawings: 1px gold strokes, no fills.
// Six distinct silhouettes — one per perfume in the Six.
// ============================================================

const BOTTLE_VARIANTS = {
  // bodyW/H: glass body. capW/H: cap. capStyle: profile detail.
  // shoulderR: bottle shoulder rounding (kept at 0 — brand: sharp rectangles).
  1:  { bodyW: 132, bodyH: 196, capW: 58, capH: 60,  capStyle: 'flat'    }, // classic square
  2:  { bodyW: 108, bodyH: 232, capW: 48, capH: 54,  capStyle: 'flat'    }, // tall slim
  3:  { bodyW: 148, bodyH: 168, capW: 76, capH: 44,  capStyle: 'dome'    }, // squat apothecary
  7:  { bodyW: 124, bodyH: 212, capW: 54, capH: 68,  capStyle: 'tall'    }, // hero proportion
  12: { bodyW: 104, bodyH: 240, capW: 44, capH: 72,  capStyle: 'tall'    }, // tower
  99: { bodyW: 156, bodyH: 184, capW: 64, capH: 50,  capStyle: 'wide'    }, // wide flacon
};

function AtharBottle({ n, height = 360, ariaLabel }) {
  const v = BOTTLE_VARIANTS[n];
  if (!v) return null;

  // Canvas
  const W = 240;
  const H = 400;
  const cx = W / 2;

  // Cap geometry
  const capY = 28;
  const capX = cx - v.capW / 2;
  const neckH = 10;
  const neckW = v.capW * 0.42;
  const neckX = cx - neckW / 2;
  const neckY = capY + v.capH;

  // Body geometry
  const bodyY = neckY + neckH;
  const bodyX = cx - v.bodyW / 2;

  // Label geometry (centred ~60% down the body)
  const labelW = Math.min(v.bodyW * 0.72, 110);
  const labelH = 56;
  const labelX = cx - labelW / 2;
  const labelY = bodyY + v.bodyH * 0.42;

  // "Liquid" line — a single hairline near the bottom suggesting fill
  const liquidY = bodyY + v.bodyH - 24;

  // Stroke palette — single 1px gold throughout (editorial line treatment)
  const gold = '#A8862E';
  const goldDim = '#6E5417';
  const ink = '#4A3F2D';  // small label sub-text, warm muted brown

  // Cap texture: a series of horizontal hairlines (milled cap)
  const capLines = [];
  const lineGap = 4;
  const linesCount = Math.floor((v.capH - 12) / lineGap);
  for (let i = 0; i < linesCount; i++) {
    const y = capY + 6 + i * lineGap;
    capLines.push(
      <line
        key={i}
        x1={capX + 4} x2={capX + v.capW - 4}
        y1={y} y2={y}
        stroke={goldDim} strokeOpacity="0.5" strokeWidth="0.6"
      />
    );
  }

  // Dome cap top (variant 3)
  const capTop = v.capStyle === 'dome' ? (
    <path
      d={`M ${capX} ${capY + 10} Q ${cx} ${capY - 18}, ${capX + v.capW} ${capY + 10}`}
      fill="none" stroke={gold} strokeWidth="1"
    />
  ) : null;

  // Wide cap subtle shoulder (variant 99)
  const capShoulder = v.capStyle === 'wide' ? (
    <line
      x1={capX - 4} x2={capX + v.capW + 4}
      y1={capY + v.capH - 4} y2={capY + v.capH - 4}
      stroke={gold} strokeWidth="1"
    />
  ) : null;

  return (
    <svg
      viewBox={`0 0 ${W} ${H}`}
      height={height}
      width="100%"
      role="img"
      aria-label={ariaLabel || `Athar №${n} flacon`}
      style={{ display: 'block', maxWidth: '100%' }}
      preserveAspectRatio="xMidYMid meet"
    >
      {/* CAP */}
      <rect
        x={capX} y={v.capStyle === 'dome' ? capY + 6 : capY}
        width={v.capW}
        height={v.capStyle === 'dome' ? v.capH - 6 : v.capH}
        fill="none" stroke={gold} strokeWidth="1"
      />
      {capTop}
      {capShoulder}
      {capLines}

      {/* NECK */}
      <rect
        x={neckX} y={neckY}
        width={neckW} height={neckH}
        fill="none" stroke={gold} strokeWidth="1"
      />

      {/* BODY */}
      <rect
        x={bodyX} y={bodyY}
        width={v.bodyW} height={v.bodyH}
        fill="none" stroke={gold} strokeWidth="1"
      />
      {/* shoulder hairline just under neck */}
      <line
        x1={bodyX + 6} x2={bodyX + v.bodyW - 6}
        y1={bodyY + 8} y2={bodyY + 8}
        stroke={goldDim} strokeOpacity="0.6" strokeWidth="0.6"
      />
      {/* liquid level hairline */}
      <line
        x1={bodyX + 2} x2={bodyX + v.bodyW - 2}
        y1={liquidY} y2={liquidY}
        stroke={goldDim} strokeOpacity="0.45" strokeWidth="0.6"
      />

      {/* LABEL — a thin gold frame with the numeral */}
      <rect
        x={labelX} y={labelY}
        width={labelW} height={labelH}
        fill="none" stroke={gold} strokeWidth="1"
      />
      <text
        x={cx} y={labelY + 30}
        textAnchor="middle"
        fontFamily="'Cormorant Garamond', serif"
        fontSize="28" fontWeight="400"
        fill={gold}
        letterSpacing="-0.02em"
      >{n}</text>
      <text
        x={cx} y={labelY + 46}
        textAnchor="middle"
        fontFamily="'Cormorant Garamond', serif"
        fontSize="6" fontWeight="500"
        fill={ink}
        letterSpacing="2.4"
      >ATHAR</text>
    </svg>
  );
}

window.AtharBottle = AtharBottle;