// ════════════════════════════════════════════════════════════════
// Constellation etchings — gold lines + star points
// Each figure is a star-chart reading of a myth. Shared gold-foil
// gradients live in <SharedDefs/> (rendered once in the page).
// ════════════════════════════════════════════════════════════════

// A single star point. `s` = scale (1 normal, >1 anchor star w/ sparkle).
function Star({ x, y, s = 1, sparkle = false }) {
  return (
    <g>
      <circle className="star-halo" cx={x} cy={y} r={9 * s} />
      <circle className="star" cx={x} cy={y} r={3.1 * s} />
      <circle className="star-core" cx={x} cy={y} r={1.3 * s} />
      {sparkle && (
        <g className="con-line--faint" stroke="url(#goldFoil)">
          <line x1={x - 11 * s} y1={y} x2={x + 11 * s} y2={y} strokeWidth={0.8} />
          <line x1={x} y1={y - 11 * s} x2={x} y2={y + 11 * s} strokeWidth={0.8} />
        </g>
      )}
    </g>
  );
}

// Draw a polyline path string through points [[x,y],...]
function poly(pts) {
  return pts.map((p, i) => (i ? "L" : "M") + p[0] + " " + p[1]).join(" ");
}

// A constellation wrapper: engraved shadow line under gold lines, then stars.
function Con({ viewBox, draw = 1, lines, stars, extra }) {
  return (
    <svg viewBox={viewBox} style={{ "--draw": draw }}>
      {/* engraved shadow */}
      <g>
        {lines.map((l, i) => (
          <path key={"e" + i} className="con-engrave" d={l.d} />
        ))}
      </g>
      {/* gold lines */}
      <g>
        {lines.map((l, i) => (
          <path key={"l" + i}
            className={"con-line draws" + (l.k ? " con-line--" + l.k : "")}
            style={{ "--len": l.len || 1400 }}
            d={l.d} />
        ))}
      </g>
      {extra}
      {/* stars */}
      <g>{stars.map((st, i) => <Star key={i} {...st} />)}</g>
    </svg>
  );
}

// ── PROMETHEUS — the figure who carries fire aloft ──────────────
function ConPrometheus({ draw = 1 }) {
  const lines = [
    // spine + torso
    { d: poly([[168,86],[172,150],[176,250]]), len: 200 },
    // raised right arm to torch
    { d: poly([[176,150],[226,108],[262,66]]), k: "bold", len: 150 },
    // left arm down/back
    { d: poly([[172,150],[120,176],[98,224]]), len: 150 },
    // hips to legs
    { d: poly([[176,250],[150,326],[138,404]]), len: 210 },
    { d: poly([[176,250],[206,322],[220,404]]), len: 210 },
    // shoulders
    { d: poly([[140,150],[176,150],[212,150]]), k: "faint", len: 90 },
    // the stolen fire — burst from the torch (262,66)
    { d: poly([[262,66],[280,30]]), k: "bold", len: 50 },
    { d: poly([[262,66],[300,40]]), len: 50 },
    { d: poly([[262,66],[254,24]]), len: 50 },
    { d: poly([[262,66],[300,72]]), k: "faint", len: 50 },
    { d: poly([[262,66],[228,40]]), k: "faint", len: 50 },
  ];
  const stars = [
    { x: 168, y: 86, s: 1.15 },             // head
    { x: 140, y: 150 }, { x: 212, y: 150 }, // shoulders
    { x: 176, y: 250 },                     // hips
    { x: 226, y: 108 }, { x: 262, y: 66, s: 1.5, sparkle: true }, // arm + torch (anchor)
    { x: 120, y: 176 }, { x: 98, y: 224 },  // left arm
    { x: 150, y: 326 }, { x: 138, y: 404 }, // left leg
    { x: 206, y: 322 }, { x: 220, y: 404 }, // right leg
    { x: 280, y: 30, s: 1.2, sparkle: true }, // flame tip (the spark)
    { x: 300, y: 40 }, { x: 254, y: 24 },
  ];
  return <Con viewBox="0 0 360 440" draw={draw} lines={lines} stars={stars} />;
}

// ── ICARUS — winged, falling; the sun above sheds feathers ──────
function ConIcarus({ draw = 1 }) {
  const lines = [
    // tilted falling body  (head low, legs flung up)
    { d: poly([[176,318],[198,262],[210,212]]), k: "bold", len: 150 }, // torso, tilting
    // arms flung wide
    { d: poly([[198,262],[120,250],[86,236]]), len: 140 },  // left arm
    { d: poly([[198,262],[256,214],[286,182]]), len: 130 }, // right arm
    // legs kicking up
    { d: poly([[210,212],[238,250],[252,300]]), len: 130 },
    { d: poly([[210,212],[186,256],[176,306]]), len: 130 },
    // LEFT WING — fan of feathers from shoulder
    { d: poly([[120,250],[78,206]]), len: 70 },
    { d: poly([[120,250],[64,232]]), len: 70 },
    { d: poly([[120,250],[92,184]]), k: "faint", len: 80 },
    { d: poly([[78,206],[64,232]]), k: "faint", len: 40 },
    // RIGHT WING — fan
    { d: poly([[256,214],[300,176]]), len: 70 },
    { d: poly([[256,214],[316,196]]), len: 70 },
    { d: poly([[256,214],[300,150]]), k: "faint", len: 80 },
    { d: poly([[300,176],[316,196]]), k: "faint", len: 40 },
    // detaching feather trail rising to the sun
    { d: poly([[286,182],[262,140],[300,104],[286,64]]), k: "faint", len: 200 },
    // sun rays
    { d: poly([[300,52],[300,18]]), k: "bold", len: 40 },
    { d: poly([[300,52],[332,40]]), len: 40 },
    { d: poly([[300,52],[332,72]]), k: "faint", len: 40 },
    { d: poly([[300,52],[268,36]]), k: "faint", len: 40 },
  ];
  const stars = [
    { x: 176, y: 318, s: 1.15 },  // head (falling)
    { x: 198, y: 262 }, { x: 210, y: 212 },
    { x: 120, y: 250 }, { x: 86, y: 236 },
    { x: 256, y: 214 }, { x: 286, y: 182 },
    { x: 238, y: 250 }, { x: 252, y: 300 },
    { x: 186, y: 256 }, { x: 176, y: 306 },
    // wing tips
    { x: 78, y: 206 }, { x: 64, y: 232 }, { x: 92, y: 184, s: 0.85 },
    { x: 300, y: 176 }, { x: 316, y: 196 }, { x: 300, y: 150, s: 0.85 },
    // feathers + sun
    { x: 262, y: 140, s: 0.8 }, { x: 300, y: 104, s: 0.8 },
    { x: 300, y: 52, s: 1.7, sparkle: true }, // the sun (anchor)
  ];
  return <Con viewBox="0 0 380 360" draw={draw} lines={lines} stars={stars} />;
}

// ── SISYPHUS — the figure, the boulder, the endless slope ───────
function ConSisyphus({ draw = 1 }) {
  const lines = [
    // the slope (incline he climbs)
    { d: poly([[40,408],[360,128]]), k: "faint", len: 430 },
    // figure leaning into the rock
    { d: poly([[168,214],[156,250],[146,298]]), k: "bold", len: 130 }, // back/torso
    // arms reaching up to boulder
    { d: poly([[160,236],[206,196]]), len: 70 },
    { d: poly([[156,250],[210,222]]), len: 70 },
    // legs driving
    { d: poly([[146,298],[120,344],[100,388]]), len: 130 },  // planted leg
    { d: poly([[146,298],[178,330],[196,372]]), len: 120 },  // pushing leg
    // head to shoulders
    { d: poly([[176,196],[168,214],[160,236]]), len: 60 },
  ];
  // boulder circle approximated by its outline via path so it can draw
  const boulderR = 46, bx = 256, by = 162;
  const circle = `M ${bx-boulderR} ${by} a ${boulderR} ${boulderR} 0 1 0 ${boulderR*2} 0 a ${boulderR} ${boulderR} 0 1 0 ${-boulderR*2} 0`;
  lines.push({ d: circle, k: "bold", len: 300 });
  const stars = [
    { x: 176, y: 196, s: 1.1 },  // head
    { x: 168, y: 214 }, { x: 146, y: 298 },
    { x: 206, y: 196 }, { x: 210, y: 222 },
    { x: 120, y: 344 }, { x: 100, y: 388 },
    { x: 178, y: 330 }, { x: 196, y: 372 },
    // boulder rim stars
    { x: bx, y: by - boulderR, s: 0.9 }, { x: bx + boulderR, y: by },
    { x: bx, y: by + boulderR, s: 0.9 }, { x: bx - boulderR, y: by },
    { x: bx, y: by, s: 1.5, sparkle: true }, // boulder core (anchor)
    // slope ends
    { x: 40, y: 408, s: 0.8 }, { x: 360, y: 128, s: 0.9 },
  ];
  return <Con viewBox="0 0 400 440" draw={draw} lines={lines} stars={stars} />;
}

// ── ARIADNE — the thread; a labyrinth meander drawn as one line ─
function ConAriadne({ draw = 1 }) {
  // A square Greek-meander labyrinth spiralling inward — the thread.
  const thread =
    "M 56 372 " +
    "L 56 84 L 312 84 L 312 340 L 104 340 L 104 132 L 264 132 " +
    "L 264 296 L 148 296 L 148 176 L 220 176 L 220 252 L 188 252 L 188 212";
  const lines = [
    { d: thread, k: "bold", len: 1900 },
    // a loose tail of thread leaving the entrance (held in hand)
    { d: poly([[56,372],[40,396],[58,418],[34,438]]), len: 120 },
  ];
  const stars = [
    { x: 56, y: 372, s: 1.2, sparkle: true },  // the spool at the entrance (anchor)
    { x: 56, y: 84 }, { x: 312, y: 84 },
    { x: 312, y: 340 }, { x: 104, y: 340 },
    { x: 104, y: 132 }, { x: 264, y: 132 },
    { x: 264, y: 296 }, { x: 148, y: 296 },
    { x: 148, y: 176 }, { x: 220, y: 176 },
    { x: 188, y: 212, s: 1.55, sparkle: true }, // the center — the way out
    { x: 34, y: 438, s: 0.85 },
  ];
  return <Con viewBox="0 0 360 460" draw={draw} lines={lines} stars={stars} />;
}

// ── Overture starfield — faint scattered figures hinting at all ─
function ConStarfield() {
  const pts = [
    [120,90,1],[180,140,0.7],[240,80,0.8],[300,150,0.6],[360,100,1.1],
    [90,220,0.7],[160,260,0.9],[230,210,0.6],[300,270,0.8],[380,230,0.7],
    [140,360,0.8],[210,400,0.6],[280,360,1],[350,410,0.7],[60,330,0.6],
  ];
  return (
    <svg viewBox="0 0 440 480" style={{ "--draw": 1 }}>
      <g className="con-line--faint" stroke="url(#goldFoil)">
        <path className="con-line con-line--faint" d={poly([[120,90],[180,140],[240,80],[300,150]])} />
        <path className="con-line con-line--faint" d={poly([[90,220],[160,260],[230,210],[300,270]])} />
        <path className="con-line con-line--faint" d={poly([[140,360],[210,400],[280,360],[350,410]])} />
      </g>
      <g>{pts.map((p, i) => <Star key={i} x={p[0]} y={p[1]} s={p[2] * 0.8} />)}</g>
    </svg>
  );
}

// ── Shared gradient defs (render once) ──────────────────────────
function SharedDefs() {
  return (
    <svg width="0" height="0" style={{ position: "absolute" }} aria-hidden="true">
      <defs>
        <linearGradient id="goldFoil" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#9A7228" />
          <stop offset="28%" stopColor="#E7CE8C" />
          <stop offset="55%" stopColor="#B0883C" />
          <stop offset="74%" stopColor="#F0DDA6" />
          <stop offset="100%" stopColor="#8C6624" />
        </linearGradient>
        <linearGradient id="goldFoilV" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#E7CE8C" />
          <stop offset="50%" stopColor="#B0883C" />
          <stop offset="100%" stopColor="#876326" />
        </linearGradient>
        <radialGradient id="goldRadial" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#F6E8BE" />
          <stop offset="55%" stopColor="#D8B86A" />
          <stop offset="100%" stopColor="#9A7228" />
        </radialGradient>
        <radialGradient id="starHalo" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(231,206,140,0.55)" />
          <stop offset="40%" stopColor="rgba(231,206,140,0.18)" />
          <stop offset="100%" stopColor="rgba(231,206,140,0)" />
        </radialGradient>
      </defs>
    </svg>
  );
}

Object.assign(window, {
  Star, Con, poly,
  ConPrometheus, ConIcarus, ConSisyphus, ConAriadne, ConStarfield, SharedDefs,
});