// Moon.jsx — animated phase moon
const Moon = ({ size = 280, phase = 0.35, glow = true }) => {
  // phase: 0 = new, 0.5 = full, 1 = new again
  // We simulate via a clipped arc/circle overlay
  const r = size / 2;
  const t = phase; // 0..1
  // Ellipse offset controlling shadow: -1 (new waxing crescent) → 0 (full) → 1 (waning)
  const ex = (0.5 - t) * 2; // -1..1

  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block' }}>
      <defs>
        <radialGradient id="moon-body" cx="45%" cy="40%" r="65%">
          <stop offset="0%" stopColor="oklch(0.97 0.015 85)" />
          <stop offset="70%" stopColor="oklch(0.88 0.02 80)" />
          <stop offset="100%" stopColor="oklch(0.78 0.03 75)" />
        </radialGradient>
        <radialGradient id="moon-shadow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="oklch(0.95 0.012 85)" stopOpacity="1" />
          <stop offset="100%" stopColor="oklch(0.95 0.012 85)" stopOpacity="1" />
        </radialGradient>
        <filter id="moon-glow" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="3" />
        </filter>
        <pattern id="moon-texture" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
          <circle cx="8" cy="10" r="1.2" fill="oklch(0.78 0.03 75)" opacity="0.35"/>
          <circle cx="25" cy="22" r="0.8" fill="oklch(0.7 0.03 70)" opacity="0.4"/>
          <circle cx="32" cy="6" r="0.6" fill="oklch(0.72 0.025 80)" opacity="0.3"/>
          <circle cx="15" cy="33" r="1" fill="oklch(0.75 0.025 75)" opacity="0.3"/>
        </pattern>
      </defs>

      {/* Outer ring / glow */}
      {glow && (
        <circle cx={r} cy={r} r={r - 2} fill="none"
          stroke="oklch(0.55 0.11 60)" strokeWidth="0.5"
          strokeDasharray="1 4" opacity="0.5"/>
      )}

      {/* Moon body */}
      <circle cx={r} cy={r} r={r - 6} fill="url(#moon-body)" />
      <circle cx={r} cy={r} r={r - 6} fill="url(#moon-texture)" opacity="0.5"/>

      {/* Shadow (ellipse offset to create phase) */}
      <ellipse
        cx={r + ex * (r - 6)}
        cy={r}
        rx={(r - 6) * Math.abs(ex)}
        ry={r - 6}
        fill="url(#moon-shadow)"
        opacity={0.96}
        style={{ transition: 'cx 2s cubic-bezier(.4,.1,.3,1), rx 2s cubic-bezier(.4,.1,.3,1)' }}
      />
      {/* Clip outside body */}
      <circle cx={r} cy={r} r={r - 6} fill="none"
        stroke="oklch(0.35 0.03 260)" strokeWidth="0.5" opacity="0.4"/>

      {/* Coordinate cross */}
      <line x1={r} y1={r - (r - 6)} x2={r} y2={r + (r - 6)}
        stroke="oklch(0.35 0.03 260)" strokeWidth="0.3" strokeDasharray="2 4" opacity="0.3"/>
      <line x1={r - (r - 6)} y1={r} x2={r + (r - 6)} y2={r}
        stroke="oklch(0.35 0.03 260)" strokeWidth="0.3" strokeDasharray="2 4" opacity="0.3"/>
    </svg>
  );
};

// MoonPhases — 8 little moons in a row
const MoonPhases = ({ size = 34 }) => {
  const phases = [0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875];
  const labels = ["new", "wax. cres.", "first q.", "wax. gib.", "full", "wan. gib.", "last q.", "wan. cres."];
  return (
    <div className="moon-phases-wrap">
      <div style={{ display: 'flex', gap: 16, alignItems: 'flex-end' }}>
        {phases.map((p, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
            <Moon size={size} phase={p} glow={false} />
            <span style={{
              fontFamily: 'var(--mono)',
              fontSize: 9,
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              color: 'var(--ink-mute)'
            }}>{labels[i]}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ConstellationLines — decorative SVG connecting stars
const ConstellationLines = ({ nodes, style }) => {
  // nodes: [{x, y, label?}] in % coords
  const width = 1000, height = 120;
  return (
    <svg viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none"
      style={{ width: '100%', height: '100%', ...style }}>
      {/* Connect lines */}
      {nodes.map((n, i) => {
        if (i === nodes.length - 1) return null;
        const next = nodes[i + 1];
        return (
          <line key={i}
            x1={n.x * 10} y1={n.y * 1.2}
            x2={next.x * 10} y2={next.y * 1.2}
            stroke="oklch(0.55 0.11 60)" strokeWidth="0.6"
            strokeDasharray="3 4" opacity="0.6"/>
        );
      })}
      {/* Stars */}
      {nodes.map((n, i) => (
        <g key={'s' + i}>
          <circle cx={n.x * 10} cy={n.y * 1.2} r="3"
            fill="oklch(0.55 0.11 60)" opacity="0.9"/>
          <circle cx={n.x * 10} cy={n.y * 1.2} r="6"
            fill="none" stroke="oklch(0.55 0.11 60)" strokeWidth="0.4" opacity="0.3"/>
        </g>
      ))}
    </svg>
  );
};

Object.assign(window, { Moon, MoonPhases, ConstellationLines });