/* ── Ornaments ──────────────────────────────────────────────────────────
   SVG filigree library — corners, sigils, fleurons, dividers, frames.
   All currentColor so they pick up the surrounding palette.
   ────────────────────────────────────────────────────────────────────── */

function FiligreeCorner({ className = "", size = 36 }) {
  return (
    <svg
      className={`ornament-corner ${className}`}
      width={size}
      height={size}
      viewBox="0 0 40 40"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.1"
      strokeLinecap="round"
    >
      <path d="M2 12 Q2 2 12 2" opacity="0.85" />
      <path d="M5 18 Q5 5 18 5" opacity="0.55" />
      <path d="M2 18 L2 22 M2 22 Q2 26 6 28" opacity="0.55" />
      <path d="M18 2 L22 2 M22 2 Q26 2 28 6" opacity="0.55" />
      <circle cx="2" cy="2" r="1.4" fill="currentColor" stroke="none" />
      <path d="M11 6 Q14 9 11 12 Q8 9 11 6 Z" fill="currentColor" stroke="none" opacity="0.85" />
      <path d="M9 9 L13 9 M11 7 L11 11" opacity="0.6" strokeWidth="0.6" />
    </svg>
  );
}

function FiligreeCorners() {
  return (
    <>
      <FiligreeCorner className="tl" />
      <FiligreeCorner className="tr" />
      <FiligreeCorner className="bl" />
      <FiligreeCorner className="br" />
    </>
  );
}

function FleuronDivider({ mark = '❦' }) {
  return (
    <div className="filigree-divider">
      <span className="fd-rule" />
      <span className="fd-mark">{mark}</span>
      <span className="fd-rule" />
    </div>
  );
}

function BrandCrest({ size = 38, className = '' }) {
  return (
    <svg
      className={`brand-crest${className ? ' ' + className : ''}`}
      width={size}
      height={size}
      viewBox="0 0 48 48"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.3"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M24 4 L42 9 L42 24 Q42 38 24 44 Q6 38 6 24 L6 9 Z" fill="rgba(212,169,96,0.06)" />
      <path d="M24 8 L38 12 L38 24 Q38 35 24 40 Q10 35 10 24 L10 12 Z" opacity="0.55" />
      <path d="M15 4 L19 8 L24 3 L29 8 L33 4" strokeWidth="1.6" />
      <circle cx="15" cy="4" r="1.2" fill="currentColor" stroke="none" />
      <circle cx="24" cy="3" r="1.4" fill="currentColor" stroke="none" />
      <circle cx="33" cy="4" r="1.2" fill="currentColor" stroke="none" />
      <path d="M19 32 L24 16 L29 32 M21.5 26 L26.5 26" strokeWidth="1.8" />
      <path d="M24 12 L25 14 L27 14.4 L25.5 16 L26 18 L24 17 L22 18 L22.5 16 L21 14.4 L23 14 Z" fill="currentColor" stroke="none" opacity="0.85" />
    </svg>
  );
}

function SigilFrame({ children, accentColor }) {
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg
        viewBox="0 0 100 100"
        className="sigil-frame"
        fill="none"
        stroke="currentColor"
        strokeWidth="0.8"
        style={{ width: '100%', height: '100%', position: 'absolute', inset: 0, color: accentColor || 'currentColor' }}
      >
        <polygon points="30,4 70,4 96,30 96,70 70,96 30,96 4,70 4,30" opacity="0.6" />
        <polygon points="32,8 68,8 92,32 92,68 68,92 32,92 8,68 8,32" opacity="0.3" strokeWidth="0.5" />
        {[
          [50, 4], [50, 96], [4, 50], [96, 50]
        ].map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r="1.6" fill="currentColor" stroke="none" opacity="0.75" />
        ))}
        <path d="M18 18 Q22 22 18 26" opacity="0.55" />
        <path d="M82 18 Q78 22 82 26" opacity="0.55" />
        <path d="M18 82 Q22 78 18 74" opacity="0.55" />
        <path d="M82 82 Q78 78 82 74" opacity="0.55" />
      </svg>
      <div style={{ position: 'relative', zIndex: 1 }}>{children}</div>
    </div>
  );
}

function HeroSigilRings({ accent }) {
  return (
    <>
      <svg className="lobby-hero-sigil-ring" viewBox="0 0 280 280" fill="none" stroke={accent || 'currentColor'} strokeWidth="0.6">
        <circle cx="140" cy="140" r="130" opacity="0.45" />
        <circle cx="140" cy="140" r="124" opacity="0.25" strokeDasharray="2 6" />
        {[0, 90, 180, 270].map(deg => (
          <g key={deg} transform={`rotate(${deg} 140 140)`}>
            <path d="M140 8 L136 16 L144 16 Z" fill={accent || 'currentColor'} opacity="0.7" />
            <path d="M140 20 L140 26" opacity="0.6" />
          </g>
        ))}
        {[45, 135, 225, 315].map(deg => (
          <g key={deg} transform={`rotate(${deg} 140 140)`}>
            <circle cx="140" cy="14" r="2" fill={accent || 'currentColor'} opacity="0.6" />
          </g>
        ))}
        {Array.from({ length: 16 }).map((_, i) => {
          const a = (i * 22.5 + 11.25) * Math.PI / 180;
          const r = 116;
          const x = 140 + Math.cos(a) * r;
          const y = 140 + Math.sin(a) * r;
          const rune = ['ᚠ','ᚱ','ᚦ','ᛟ','ᛞ','ᚱ','ᚹ','ᚾ','ᚷ','ᛁ','ᚺ','ᚳ','ᛗ','ᛊ','ᛏ','ᛒ'][i];
          return (
            <text key={i} x={x} y={y + 3} fontSize="7" fill={accent || 'currentColor'} opacity="0.55" textAnchor="middle" transform={`rotate(${i * 22.5 + 11.25} ${x} ${y})`}>
              {rune}
            </text>
          );
        })}
      </svg>
      <svg className="lobby-hero-sigil-ring reverse" viewBox="0 0 280 280" fill="none" stroke={accent || 'currentColor'} strokeWidth="0.5">
        <circle cx="140" cy="140" r="90" opacity="0.4" />
        <circle cx="140" cy="140" r="84" opacity="0.2" strokeDasharray="1 4" />
        {[0, 60, 120, 180, 240, 300].map(deg => (
          <g key={deg} transform={`rotate(${deg} 140 140)`}>
            <path d="M140 50 L138 56 L142 56 Z" fill={accent || 'currentColor'} opacity="0.55" />
          </g>
        ))}
      </svg>
      <svg className="lobby-hero-sigil-ring" viewBox="0 0 280 280" fill="none" stroke={accent || 'currentColor'} strokeWidth="0.45" style={{ animationDuration: 'calc(120s / var(--motion-scale, 1))' }}>
        <polygon points="140,80 152,124 196,124 161,150 174,194 140,170 106,194 119,150 84,124 128,124" opacity="0.32" />
      </svg>
    </>
  );
}

function OrnamentSection() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, margin: '4px 0 14px', color: 'var(--gold-soft)', opacity: 0.78 }} className="filigree-divider">
      <svg width="60" height="14" viewBox="0 0 60 14" fill="none" stroke="currentColor">
        <path d="M0 7 L20 7 M28 7 L34 7" strokeWidth="0.8" />
        <path d="M22 4 Q24 7 22 10 Q26 7 22 4" strokeWidth="0.7" />
        <path d="M30 4 Q32 7 30 10 Q34 7 30 4" strokeWidth="0.7" />
      </svg>
      <span style={{ fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic', fontSize: 12, letterSpacing: '0.3em' }}>·❦·</span>
      <svg width="60" height="14" viewBox="0 0 60 14" fill="none" stroke="currentColor" style={{ transform: 'scaleX(-1)' }}>
        <path d="M0 7 L20 7 M28 7 L34 7" strokeWidth="0.8" />
        <path d="M22 4 Q24 7 22 10 Q26 7 22 4" strokeWidth="0.7" />
        <path d="M30 4 Q32 7 30 10 Q34 7 30 4" strokeWidth="0.7" />
      </svg>
    </div>
  );
}

Object.assign(window, {
  FiligreeCorner,
  FiligreeCorners,
  FleuronDivider,
  BrandCrest,
  SigilFrame,
  HeroSigilRings,
  OrnamentSection,
});
