// compass.jsx — compass mark (logo) + compass rose (background motif) + needle
// Globals: BrandMark, CompassRose, CompassDial

function BrandMark({ size = 26, animate = true }) {
  const s = size;
  return (
    <svg
      className="brand-mark"
      width={s}
      height={s}
      viewBox="0 0 40 40"
      fill="none"
      aria-hidden="true"
    >
      <circle cx="20" cy="20" r="18.5" stroke="currentColor" strokeWidth="1" opacity="0.55"/>
      <circle cx="20" cy="20" r="14" stroke="currentColor" strokeWidth="0.6" opacity="0.35"/>
      {/* cardinal ticks */}
      {[0, 90, 180, 270].map((d) => (
        <line
          key={d}
          x1="20" y1="3" x2="20" y2="6.5"
          stroke="currentColor" strokeWidth="1"
          transform={`rotate(${d} 20 20)`}
        />
      ))}
      {[45, 135, 225, 315].map((d) => (
        <line
          key={d}
          x1="20" y1="4.5" x2="20" y2="6"
          stroke="currentColor" strokeWidth="0.6" opacity="0.45"
          transform={`rotate(${d} 20 20)`}
        />
      ))}
      {/* north needle */}
      <g className={animate ? "needle" : ""} style={{ transformOrigin: "20px 20px" }}>
        <path d="M20 7 L23.2 20 L20 20 Z" fill="var(--red)"/>
        <path d="M20 33 L16.8 20 L20 20 Z" fill="currentColor" opacity="0.55"/>
        <circle cx="20" cy="20" r="1.6" fill="currentColor"/>
      </g>
    </svg>
  );
}

// Large decorative compass rose for backgrounds. Stroked, very subtle.
function CompassRose({ withN = true }) {
  return (
    <svg viewBox="0 0 600 600" width="100%" height="100%" aria-hidden="true">
      <g stroke="currentColor" fill="none" strokeWidth="0.6">
        <circle cx="300" cy="300" r="298"/>
        <circle cx="300" cy="300" r="240"/>
        <circle cx="300" cy="300" r="180"/>
        <circle cx="300" cy="300" r="120"/>
        <circle cx="300" cy="300" r="60"/>
        {/* 32-point tick marks */}
        {Array.from({ length: 32 }).map((_, i) => {
          const angle = (i * 360) / 32;
          const inner = i % 8 === 0 ? 260 : i % 4 === 0 ? 272 : 282;
          const rad = (angle - 90) * (Math.PI / 180);
          const x1 = 300 + Math.cos(rad) * inner;
          const y1 = 300 + Math.sin(rad) * inner;
          const x2 = 300 + Math.cos(rad) * 298;
          const y2 = 300 + Math.sin(rad) * 298;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} strokeWidth={i % 8 === 0 ? 1 : 0.5}/>;
        })}
        {/* 8 main rays */}
        {[0, 45, 90, 135, 180, 225, 270, 315].map((deg) => (
          <line
            key={deg}
            x1="300" y1="300" x2="300" y2="60"
            transform={`rotate(${deg} 300 300)`}
            strokeWidth={deg % 90 === 0 ? 1 : 0.5}
          />
        ))}
        {/* fancy diamonds for cardinals */}
        {[0, 90, 180, 270].map((deg) => (
          <g key={deg} transform={`rotate(${deg} 300 300)`}>
            <path d="M300 110 L312 180 L300 250 L288 180 Z" strokeWidth="0.6"/>
          </g>
        ))}
      </g>
      {/* N label */}
      {withN && (
        <g>
          <text
            x="300" y="48"
            textAnchor="middle"
            fill="var(--red)"
            style={{ fontFamily: 'var(--mono)', fontSize: 18, letterSpacing: '0.2em' }}
          >N</text>
          <text x="300" y="566" textAnchor="middle" fill="currentColor" opacity="0.55" style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.2em' }}>S</text>
          <text x="44" y="305" textAnchor="middle" fill="currentColor" opacity="0.55" style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.2em' }}>W</text>
          <text x="556" y="305" textAnchor="middle" fill="currentColor" opacity="0.55" style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.2em' }}>E</text>
        </g>
      )}
    </svg>
  );
}

// CompassDial — larger functional compass with red north arrow, for hero v2
function CompassDial() {
  return (
    <svg viewBox="0 0 500 500" width="100%" height="100%" aria-hidden="true" style={{ overflow: "visible" }}>
      <defs>
        <radialGradient id="rn-paper" cx="50%" cy="48%" r="55%">
          <stop offset="0%" stopColor="var(--bg)" stopOpacity="1"/>
          <stop offset="100%" stopColor="var(--bg-alt)" stopOpacity="1"/>
        </radialGradient>
      </defs>
      <circle cx="250" cy="250" r="240" fill="url(#rn-paper)" stroke="var(--line)" strokeWidth="1"/>
      <circle cx="250" cy="250" r="210" fill="none" stroke="var(--line)" strokeWidth="0.6"/>
      <circle cx="250" cy="250" r="160" fill="none" stroke="var(--line-soft)" strokeWidth="0.5"/>
      <circle cx="250" cy="250" r="110" fill="none" stroke="var(--line-soft)" strokeWidth="0.5"/>
      <circle cx="250" cy="250" r="60" fill="none" stroke="var(--line-soft)" strokeWidth="0.5"/>

      {/* 72 ticks (5° each) */}
      {Array.from({ length: 72 }).map((_, i) => {
        const angle = i * 5;
        const isMajor = i % 9 === 0; // every 45°
        const isMed = i % 3 === 0;
        const inner = isMajor ? 200 : isMed ? 214 : 222;
        const rad = (angle - 90) * (Math.PI / 180);
        const x1 = 250 + Math.cos(rad) * inner;
        const y1 = 250 + Math.sin(rad) * inner;
        const x2 = 250 + Math.cos(rad) * 232;
        const y2 = 250 + Math.sin(rad) * 232;
        return (
          <line
            key={i}
            x1={x1} y1={y1} x2={x2} y2={y2}
            stroke="var(--ink)"
            strokeOpacity={isMajor ? 0.75 : isMed ? 0.4 : 0.18}
            strokeWidth={isMajor ? 1.2 : 0.6}
          />
        );
      })}

      {/* degree labels every 30° */}
      {Array.from({ length: 12 }).map((_, i) => {
        const angle = i * 30;
        const rad = (angle - 90) * (Math.PI / 180);
        const x = 250 + Math.cos(rad) * 180;
        const y = 250 + Math.sin(rad) * 180 + 4;
        return (
          <text
            key={i}
            x={x} y={y}
            textAnchor="middle"
            fill="var(--ink)"
            fillOpacity="0.45"
            style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.06em' }}
          >{String(angle).padStart(3, '0')}</text>
        );
      })}

      {/* cardinal letters */}
      <text x="250" y="58" textAnchor="middle" fill="var(--red)" style={{ fontFamily: 'var(--mono)', fontSize: 18, fontWeight: 600, letterSpacing: '0.2em' }}>N</text>
      <text x="250" y="455" textAnchor="middle" fill="var(--ink)" opacity="0.7" style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.2em' }}>S</text>
      <text x="50" y="255" textAnchor="middle" fill="var(--ink)" opacity="0.7" style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.2em' }}>W</text>
      <text x="450" y="255" textAnchor="middle" fill="var(--ink)" opacity="0.7" style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.2em' }}>E</text>

      {/* mexico→north annotation */}
      <g>
        <line x1="250" y1="250" x2="250" y2="60" stroke="var(--red)" strokeWidth="0.5" strokeDasharray="2 3" opacity="0.5"/>
        <text x="262" y="135" fill="var(--red)" opacity="0.7" style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.14em' }}>BEARING 000°</text>
      </g>

      {/* needle */}
      <g className="needle" style={{ transformOrigin: '250px 250px' }}>
        {/* red north blade */}
        <path d="M250 70 L264 250 L250 250 Z" fill="var(--red)"/>
        <path d="M250 70 L236 250 L250 250 Z" fill="var(--red-ink)" opacity="0.8"/>
        {/* south blade */}
        <path d="M250 430 L240 250 L250 250 Z" fill="var(--ink)" opacity="0.45"/>
        <path d="M250 430 L260 250 L250 250 Z" fill="var(--ink)" opacity="0.65"/>
        {/* hub */}
        <circle cx="250" cy="250" r="9" fill="var(--bg)" stroke="var(--ink)" strokeWidth="1.4"/>
        <circle cx="250" cy="250" r="3" fill="var(--ink)"/>
      </g>

      {/* outer monogram */}
      <g>
        <text x="250" y="496" textAnchor="middle" fill="var(--ink)" opacity="0.45" style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.32em' }}>ROJO NORTE · MTY</text>
      </g>
    </svg>
  );
}

Object.assign(window, { BrandMark, CompassRose, CompassDial });
