// components/Logo.jsx — Clean seal with continuously rotating sun rays.
// The continuous rotation IS the day-and-night metaphor: prayer never stops.

const SunburstLogo = ({ size = 440, animated = true }) => {
  const rays = 24;
  const isPercent = typeof size === 'string';
  const sizeStyle = isPercent ? { width: '100%', height: '100%' } : { width: size, height: size };

  return (
    <div style={{ ...sizeStyle, position: 'relative' }}>
      {/* SPINNING RAY RING — outer layer */}
      <svg
        viewBox="0 0 400 400"
        width="100%"
        height="100%"
        style={{ position: 'absolute', inset: 0 }}
        className={animated ? 'spin-slow' : ''}
      >
        <defs>
          <radialGradient id="rayGlow" cx="50%" cy="50%" r="50%">
            <stop offset="60%" stopColor="#FFD75A" stopOpacity="0" />
            <stop offset="100%" stopColor="#F2B705" stopOpacity="0.3" />
          </radialGradient>
        </defs>
        <circle cx="200" cy="200" r="200" fill="url(#rayGlow)" />
        {Array.from({ length: rays }).map((_, i) => {
          const angle = (i / rays) * 360;
          const long = i % 2 === 0;
          return (
            <g key={i} transform={`rotate(${angle} 200 200)`}>
              <path
                d={long
                  ? 'M 200 8 L 208 50 L 192 50 Z'
                  : 'M 200 20 L 206 52 L 194 52 Z'
                }
                fill="#F2B705"
              />
            </g>
          );
        })}
      </svg>

      {/* STATIC CENTER SEAL — overlaid, doesn't spin */}
      <svg
        viewBox="0 0 400 400"
        width="100%"
        height="100%"
        style={{ position: 'absolute', inset: 0 }}
      >
        <defs>
          <radialGradient id="sealFill" cx="50%" cy="50%" r="55%">
            <stop offset="0%" stopColor="#0B2D5C" />
            <stop offset="100%" stopColor="#061C3A" />
          </radialGradient>
        </defs>

        {/* Inner blue disc with gold border */}
        <circle cx="200" cy="200" r="150" fill="url(#sealFill)" stroke="#F2B705" strokeWidth="5" />
        <circle cx="200" cy="200" r="140" fill="none" stroke="#F2B705" strokeWidth="1" opacity="0.5" />

        {/* Top: small cross */}
        <g transform="translate(200, 112)">
          <path d="M -4,-10 h 8 v 8 h 8 v 8 h -8 v 14 h -8 v -14 h -8 v -8 h 8 z" fill="#F2B705" />
        </g>

        {/* SACRAMENTO — straight horizontal */}
        <text
          x="200"
          y="158"
          textAnchor="middle"
          fill="#F2B705"
          style={{
            fontFamily: 'Cinzel, serif',
            fontSize: 15,
            fontWeight: 700,
            letterSpacing: '0.14em',
          }}
        >
          SACRAMENTO
        </text>

        {/* Decorative divider */}
        <line x1="150" y1="170" x2="250" y2="170" stroke="#C99700" strokeWidth="1" opacity="0.6" />
        <circle cx="200" cy="170" r="2" fill="#F2B705" />

        {/* PRAYS — large */}
        <text
          x="200"
          y="210"
          textAnchor="middle"
          fill="#FFD75A"
          style={{
            fontFamily: 'Cinzel, serif',
            fontSize: 34,
            fontWeight: 700,
            letterSpacing: '0.1em',
          }}
        >
          PRAYS
        </text>

        {/* 24/7 — biggest */}
        <text
          x="200"
          y="258"
          textAnchor="middle"
          fill="#F2B705"
          style={{
            fontFamily: 'Cinzel, serif',
            fontSize: 44,
            fontWeight: 800,
            letterSpacing: '0.02em',
          }}
        >
          24/7
        </text>

        {/* Divider stars */}
        <g fill="#C99700">
          <line x1="150" y1="275" x2="185" y2="275" stroke="#C99700" strokeWidth="1" opacity="0.6" />
          <line x1="215" y1="275" x2="250" y2="275" stroke="#C99700" strokeWidth="1" opacity="0.6" />
          <circle cx="200" cy="275" r="1.5" />
        </g>

        {/* Bottom: CITY OF TREES */}
        <text
          x="200"
          y="295"
          textAnchor="middle"
          fill="#FFD75A"
          style={{
            fontFamily: 'Cinzel, serif',
            fontSize: 11,
            fontWeight: 500,
            letterSpacing: '0.32em',
          }}
        >
          ✦ CITY OF TREES ✦
        </text>
      </svg>
    </div>
  );
};

// Mobile mark — rotating rays + blue disc + cross only (no text). For inline use under hero title.
const MobileSealMark = ({ size = 140 }) => (
  <div style={{ width: size, height: size, position: 'relative' }}>
    {/* Rotating ray ring */}
    <svg viewBox="0 0 400 400" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }} className="spin-slow">
      <defs>
        <radialGradient id="mobileRayGlow" cx="50%" cy="50%" r="50%">
          <stop offset="60%" stopColor="#FFD75A" stopOpacity="0" />
          <stop offset="100%" stopColor="#F2B705" stopOpacity="0.3" />
        </radialGradient>
      </defs>
      <circle cx="200" cy="200" r="200" fill="url(#mobileRayGlow)" />
      {Array.from({ length: 24 }).map((_, i) => {
        const angle = (i / 24) * 360;
        const long = i % 2 === 0;
        return (
          <g key={i} transform={`rotate(${angle} 200 200)`}>
            <path
              d={long ? 'M 200 8 L 208 50 L 192 50 Z' : 'M 200 20 L 206 52 L 194 52 Z'}
              fill="#F2B705"
            />
          </g>
        );
      })}
    </svg>

    {/* Static blue disc with cross */}
    <svg viewBox="0 0 400 400" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
      <defs>
        <radialGradient id="mobileSealFill" cx="50%" cy="50%" r="55%">
          <stop offset="0%" stopColor="#0B2D5C" />
          <stop offset="100%" stopColor="#061C3A" />
        </radialGradient>
      </defs>
      <circle cx="200" cy="200" r="150" fill="url(#mobileSealFill)" stroke="#F2B705" strokeWidth="5" />
      <circle cx="200" cy="200" r="140" fill="none" stroke="#F2B705" strokeWidth="1" opacity="0.5" />
      {/* Centered cross */}
      <g transform="translate(200, 200)">
        <path d="M -14,-44 h 28 v 28 h 28 v 28 h -28 v 50 h -28 v -50 h -28 v -28 h 28 z" fill="#F2B705" />
      </g>
    </svg>
  </div>
);

// Compact version for nav
const LogoMark = ({ size = 44 }) => (
  <div style={{
    width: size,
    height: size,
    borderRadius: '50%',
    background: 'linear-gradient(180deg, #0B2D5C 0%, #061C3A 100%)',
    border: '2px solid #F2B705',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    boxShadow: '0 4px 12px rgba(11,45,92,0.3)',
  }}>
    <svg viewBox="0 0 60 80" width={size * 0.38}>
      <path d="M26 8 h8 v20 h16 v8 h-16 v36 h-8 v-36 h-16 v-8 h16 z" fill="#F2B705" />
    </svg>
  </div>
);

Object.assign(window, { SunburstLogo, LogoMark, MobileSealMark });