// Kahla Labs — 8-Direction Compass Mark
// Geometric construction; pure SVG, animated on mount.

const CompassMark = ({ size = 280, animate = true, variant = 'full' }) => {
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    if (!animate) { setT(1); return; }
    let raf; const start = performance.now();
    const tick = (now) => {
      const e = Math.min(1, (now - start) / 2400);
      setT(e);
      if (e < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [animate]);

  // Easing
  const ease = (x) => 1 - Math.pow(1 - x, 3);
  const p = ease(t);

  // Sequenced phases: rings draw → directional points illuminate → K forms → center dot
  const phase = {
    ringOuter: Math.min(1, p * 2),
    ringMid:   Math.min(1, Math.max(0, (p - 0.15) * 2)),
    ringInner: Math.min(1, Math.max(0, (p - 0.3) * 2)),
    ticks:     Math.min(1, Math.max(0, (p - 0.45) * 2.2)),
    points:    Math.min(1, Math.max(0, (p - 0.55) * 2.5)),
    letter:    Math.min(1, Math.max(0, (p - 0.7) * 3)),
    center:    Math.min(1, Math.max(0, (p - 0.85) * 6)),
  };

  const cx = 100, cy = 100;
  const rOuter = 92, rMid = 76, rInner = 58;
  const circ = (r) => 2 * Math.PI * r;

  // 8 cardinal + ordinal directions
  const directions = Array.from({ length: 8 }, (_, i) => {
    const angle = (i * Math.PI) / 4 - Math.PI / 2;
    return { angle, x1: cx + rMid * Math.cos(angle), y1: cy + rMid * Math.sin(angle),
             x2: cx + (rOuter - 4) * Math.cos(angle), y2: cy + (rOuter - 4) * Math.sin(angle),
             tipX: cx + rOuter * Math.cos(angle), tipY: cy + rOuter * Math.sin(angle) };
  });

  // 24 tick marks on outer ring (12 rashis × 2 halves — stylized)
  const ticks = Array.from({ length: 24 }, (_, i) => {
    const angle = (i * Math.PI) / 12;
    const inner = rOuter + 2;
    const outer = rOuter + (i % 3 === 0 ? 8 : 4);
    return {
      x1: cx + inner * Math.cos(angle),
      y1: cy + inner * Math.sin(angle),
      x2: cx + outer * Math.cos(angle),
      y2: cy + outer * Math.sin(angle),
      major: i % 3 === 0,
    };
  });

  return (
    <svg width={size} height={size} viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
         style={{ display: 'block' }}>
      <defs>
        <radialGradient id="compass-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(201,163,79,0.3)" />
          <stop offset="60%" stopColor="rgba(201,163,79,0.0)" />
        </radialGradient>
        <linearGradient id="k-gold-grad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#E2C27A" />
          <stop offset="100%" stopColor="#C9A34F" />
        </linearGradient>
      </defs>

      {/* Ambient glow */}
      <circle cx={cx} cy={cy} r="95" fill="url(#compass-glow)" opacity={phase.center * 0.8} />

      {/* Outer ring — draws in */}
      <circle cx={cx} cy={cy} r={rOuter}
              fill="none"
              stroke="#C9A34F"
              strokeWidth="0.5"
              strokeDasharray={circ(rOuter)}
              strokeDashoffset={circ(rOuter) * (1 - phase.ringOuter)}
              transform={`rotate(-90 ${cx} ${cy})`} />

      {/* 24 tick marks on outer ring */}
      {ticks.map((tk, i) => (
        <line key={i} x1={tk.x1} y1={tk.y1} x2={tk.x2} y2={tk.y2}
              stroke="#C9A34F" strokeWidth="0.5"
              opacity={phase.ticks * (tk.major ? 1 : 0.4)} />
      ))}

      {/* Mid ring (dashed — 27 nakshatras evocation) */}
      <circle cx={cx} cy={cy} r={rMid}
              fill="none"
              stroke="#C9A34F"
              strokeWidth="0.5"
              strokeDasharray="1.8 3"
              opacity={phase.ringMid * 0.5} />

      {/* Inner ring — solid */}
      <circle cx={cx} cy={cy} r={rInner}
              fill="none"
              stroke="#C9A34F"
              strokeWidth="0.5"
              strokeDasharray={circ(rInner)}
              strokeDashoffset={circ(rInner) * (1 - phase.ringInner)}
              transform={`rotate(-90 ${cx} ${cy})`}
              opacity={0.7} />

      {/* 8 directional spokes */}
      {directions.map((d, i) => {
        const isCardinal = i % 2 === 0;
        return (
          <g key={i} opacity={phase.points}>
            <line x1={d.x1} y1={d.y1} x2={d.x2} y2={d.y2}
                  stroke="#C9A34F" strokeWidth={isCardinal ? '0.5' : '0.5'}
                  opacity={isCardinal ? 0.9 : 0.35} />
            {/* Directional diamond tip */}
            {isCardinal && (
              <g transform={`translate(${d.tipX},${d.tipY}) rotate(${(i * 45)})`}>
                <rect x="-2" y="-2" width="4" height="4"
                      fill="#C9A34F" transform="rotate(45)"
                      opacity={phase.points} />
              </g>
            )}
            {!isCardinal && (
              <circle cx={d.tipX} cy={d.tipY} r="1.2"
                      fill="#C9A34F" opacity={phase.points * 0.6} />
            )}
          </g>
        );
      })}

      {/* Cross-hair crosslines inside inner ring (N-S, E-W) */}
      <g opacity={phase.points * 0.2}>
        <line x1={cx} y1={cy - rInner + 4} x2={cx} y2={cy + rInner - 4} stroke="#C9A34F" strokeWidth="0.3" />
        <line x1={cx - rInner + 4} y1={cy} x2={cx + rInner + -4} y2={cy} stroke="#C9A34F" strokeWidth="0.3" />
      </g>

      {/* K letterform — geometric, integrated into inner ring */}
      <g opacity={phase.letter} transform={`translate(${cx},${cy})`}>
        {/* Vertical stroke */}
        <line x1="-14" y1="-26" x2="-14" y2="26"
              stroke="url(#k-gold-grad)" strokeWidth="1.2" strokeLinecap="square" />
        {/* Upper diagonal */}
        <line x1="-14" y1="0" x2="16" y2="-26"
              stroke="url(#k-gold-grad)" strokeWidth="1.2" strokeLinecap="square" />
        {/* Lower diagonal */}
        <line x1="-14" y1="0" x2="16" y2="26"
              stroke="url(#k-gold-grad)" strokeWidth="1.2" strokeLinecap="square" />
        {/* Tiny serif-dot tips */}
        <circle cx="16" cy="-26" r="1" fill="#E2C27A" />
        <circle cx="16" cy="26" r="1" fill="#E2C27A" />
        <circle cx="-14" cy="-26" r="1" fill="#E2C27A" />
        <circle cx="-14" cy="26" r="1" fill="#E2C27A" />
      </g>

      {/* Center dot — Moon in Punarvasu, axis of the chart */}
      <circle cx={cx} cy={cy} r={2.5 * phase.center}
              fill="#E2C27A" />
      <circle cx={cx} cy={cy} r={6 * phase.center}
              fill="none" stroke="#E2C27A" strokeWidth="0.3"
              opacity={phase.center * 0.5} />

      {/* Slow continuous rotation of mid-ring dashes (optional micro-motion) */}
      {animate && (
        <circle cx={cx} cy={cy} r={rMid}
                fill="none"
                stroke="#C9A34F"
                strokeWidth="0.5"
                strokeDasharray="0.8 180"
                opacity={0.6}
                style={{ transformOrigin: `${cx}px ${cy}px`, animation: 'compass-rotate 24s linear infinite' }} />
      )}
    </svg>
  );
};

// Minimal wordmark-only variant for nav
const CompassBug = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="92" fill="none" stroke="#C9A34F" strokeWidth="2" />
    <g>
      {[0,45,90,135,180,225,270,315].map((a, i) => {
        const rad = (a - 90) * Math.PI / 180;
        const isCard = i % 2 === 0;
        return (
          <line key={i}
                x1={100 + 64 * Math.cos(rad)}
                y1={100 + 64 * Math.sin(rad)}
                x2={100 + 86 * Math.cos(rad)}
                y2={100 + 86 * Math.sin(rad)}
                stroke="#C9A34F" strokeWidth="2" opacity={isCard ? 1 : 0.5} />
        );
      })}
    </g>
    <line x1="86" y1="74" x2="86" y2="126" stroke="#C9A34F" strokeWidth="4" strokeLinecap="square" />
    <line x1="86" y1="100" x2="120" y2="74" stroke="#C9A34F" strokeWidth="4" strokeLinecap="square" />
    <line x1="86" y1="100" x2="120" y2="126" stroke="#C9A34F" strokeWidth="4" strokeLinecap="square" />
    <circle cx="100" cy="100" r="3" fill="#E2C27A" />
  </svg>
);

Object.assign(window, { CompassMark, CompassBug });