// Compass.jsx — the brand's line-work compass + north star motif.
// Drawn to match the logo's thin single-weight pen style. Needle settles to north.
function Compass({ size = 360, animate = true, tone = "ink" }) {
  const ref = React.useRef(null);
  const [settled, setSettled] = React.useState(!animate);
  React.useEffect(() => {
    if (!animate) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) { setSettled(true); return; }
    const t = setTimeout(() => setSettled(true), 120);
    return () => clearTimeout(t);
  }, [animate]);

  const line = tone === "night" ? "var(--on-night)" : "var(--ink-soft)";
  const faint = tone === "night" ? "var(--night-line)" : "var(--line-strong)";

  return (
    <div style={{ position: "relative", width: size, height: size }}>
      <svg viewBox="0 0 200 200" width={size} height={size} fill="none"
           stroke={line} strokeWidth="1.1" style={{ overflow: "visible" }}>
        {/* dials */}
        <circle cx="100" cy="100" r="92" stroke={faint} />
        <circle cx="100" cy="100" r="82" />
        <circle cx="100" cy="100" r="73" stroke={faint} />
        {/* tick marks */}
        {Array.from({ length: 72 }).map((_, i) => {
          const a = (i * 5 * Math.PI) / 180;
          const major = i % 9 === 0;
          const r1 = 82, r2 = major ? 73 : 78.5;
          return (
            <line key={i}
              x1={100 + r1 * Math.sin(a)} y1={100 - r1 * Math.cos(a)}
              x2={100 + r2 * Math.sin(a)} y2={100 - r2 * Math.cos(a)}
              stroke={major ? line : faint} strokeWidth={major ? 1.1 : 0.7} />
          );
        })}
        {/* cardinal letters */}
        {[["N", 100, 28], ["E", 172, 104], ["S", 100, 178], ["W", 28, 104]].map(([l, x, y]) => (
          <text key={l} x={x} y={y} fill={line} stroke="none"
            fontFamily="var(--font-display)" fontSize="13" fontStyle="italic"
            textAnchor="middle" dominantBaseline="middle">{l}</text>
        ))}
        {/* needle group — rotates to settle on north */}
        <g style={{
          transformOrigin: "100px 100px",
          transform: settled ? "rotate(0deg)" : "rotate(-42deg)",
          transition: "transform 1400ms cubic-bezier(.16,1,.3,1)",
        }}>
          {/* north (gold) blade */}
          <path d="M100 34 L108 100 L100 108 L92 100 Z"
            fill="var(--gold)" stroke="var(--gold-600)" strokeWidth="0.8" />
          {/* south (ink) blade */}
          <path d="M100 166 L108 100 L100 92 L92 100 Z"
            fill={tone === "night" ? "var(--on-night-muted)" : "var(--ink-soft)"} stroke="none" opacity="0.85" />
          <circle cx="100" cy="100" r="5.5" fill={tone === "night" ? "var(--night)" : "var(--paper)"} stroke={line} strokeWidth="1.1" />
          <circle cx="100" cy="100" r="1.6" fill="var(--gold)" stroke="none" />
        </g>
      </svg>
      {/* north star */}
      <Star style={{ position: "absolute", top: size * 0.015, right: size * 0.02, width: size * 0.16 }} settled={settled} />
    </div>
  );
}

function Star({ style, settled = true }) {
  return (
    <svg viewBox="0 0 48 48" style={{
      ...style,
      opacity: settled ? 1 : 0,
      transform: settled ? "scale(1)" : "scale(.4)",
      transformOrigin: "center",
      transition: "opacity 700ms ease 900ms, transform 700ms cubic-bezier(.16,1,.3,1) 900ms",
    }} fill="none">
      <path d="M24 2 L29 19 L46 24 L29 29 L24 46 L19 29 L2 24 L19 19 Z"
        fill="var(--gold)" stroke="var(--gold-600)" strokeWidth="1" strokeLinejoin="round" />
      <path d="M24 2 L29 19 L46 24 L24 24 Z" fill="var(--gold-bright)" stroke="none" opacity="0.7" />
    </svg>
  );
}

// faint oversized watermark version for section backgrounds
function CompassWatermark({ size = 620, tone = "ink", style }) {
  const c = tone === "night" ? "var(--night-line)" : "var(--line)";
  return (
    <svg viewBox="0 0 200 200" width={size} height={size} fill="none" stroke={c}
      strokeWidth="0.8" style={{ pointerEvents: "none", ...style }} aria-hidden="true">
      <circle cx="100" cy="100" r="92" />
      <circle cx="100" cy="100" r="73" />
      {Array.from({ length: 4 }).map((_, i) => {
        const a = (i * 90 * Math.PI) / 180;
        return <line key={i} x1={100 + 92 * Math.sin(a)} y1={100 - 92 * Math.cos(a)} x2={100 - 92 * Math.sin(a)} y2={100 + 92 * Math.cos(a)} />;
      })}
      <path d="M100 30 L110 100 L100 110 L90 100 Z" />
      <path d="M100 170 L110 100 L100 90 L90 100 Z" />
    </svg>
  );
}

Object.assign(window, { Compass, Star, CompassWatermark });