// Глубина · мандалы
// Декоративные SVG-мандалы в стиле бренда (тонкие линии, акцентный цвет).
// Несколько вариантов с разной сложностью + опциональное медленное вращение.

function GlubinaMandala({
  variant = 'lotus',
  size = 200,
  color,
  opacity = 0.22,
  strokeWidth = 0.6,
  spin = false,
  spinDuration = 60,
  style = {},
}) {
  const t = useTheme();
  const stroke = color || t.accent;
  const id = React.useId();

  const wrapStyle = {
    width: size,
    height: size,
    display: 'block',
    pointerEvents: 'none',
    opacity,
    animation: spin ? `gm-spin-${id.replace(/[^a-z0-9]/gi,'')} ${spinDuration}s linear infinite` : undefined,
    ...style,
  };

  return (
    <>
      {spin && (
        <style>{`
          @keyframes gm-spin-${id.replace(/[^a-z0-9]/gi,'')} {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
          }
        `}</style>
      )}
      <svg
        viewBox="-100 -100 200 200"
        style={wrapStyle}
        fill="none"
        stroke={stroke}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
      >
        {variant === 'lotus' && <LotusMandala />}
        {variant === 'compass' && <CompassMandala />}
        {variant === 'star' && <StarMandala />}
        {variant === 'wave' && <WaveMandala />}
      </svg>
    </>
  );
}

// ───────────────────────────────────── Lotus — 12 petals + concentric rings
function LotusMandala() {
  const petals = 12;
  const inner = 18;
  const outer = 70;
  return (
    <g>
      {/* outermost rings */}
      <circle r="92" strokeOpacity="0.4" />
      <circle r="86" strokeOpacity="0.7" />
      <circle r="82" strokeOpacity="0.3" strokeDasharray="2 4" />

      {/* radial ticks at outer ring */}
      {Array.from({ length: 48 }).map((_, i) => {
        const a = (i * Math.PI * 2) / 48;
        const r1 = 84;
        const r2 = 88;
        return (
          <line key={i}
            x1={Math.cos(a) * r1} y1={Math.sin(a) * r1}
            x2={Math.cos(a) * r2} y2={Math.sin(a) * r2}
            strokeOpacity="0.55"
          />
        );
      })}

      {/* outer petals */}
      {Array.from({ length: petals }).map((_, i) => {
        const a = (i * 360) / petals;
        return (
          <g key={i} transform={`rotate(${a})`}>
            <path d={`M 0 -${inner} Q ${(outer - inner) / 2.2} -${(outer + inner) / 2}, 0 -${outer} Q -${(outer - inner) / 2.2} -${(outer + inner) / 2}, 0 -${inner} Z`} />
            <path d={`M 0 -${inner + 6} Q ${(outer - inner) / 3.6} -${(outer + inner) / 2 - 2}, 0 -${outer - 8}`} strokeOpacity="0.45" />
          </g>
        );
      })}

      {/* mid ring with smaller petals */}
      <circle r="42" strokeOpacity="0.5" />
      {Array.from({ length: petals * 2 }).map((_, i) => {
        const a = (i * 360) / (petals * 2);
        return (
          <g key={i} transform={`rotate(${a + 7.5})`}>
            <path d="M 0 -28 Q 4 -36, 0 -42 Q -4 -36, 0 -28 Z" strokeOpacity="0.6" />
          </g>
        );
      })}

      {/* inner radial lines */}
      {Array.from({ length: petals }).map((_, i) => {
        const a = (i * Math.PI * 2) / petals;
        return (
          <line key={i}
            x1={Math.cos(a) * 6} y1={Math.sin(a) * 6}
            x2={Math.cos(a) * 18} y2={Math.sin(a) * 18}
            strokeOpacity="0.55"
          />
        );
      })}

      {/* core */}
      <circle r="18" />
      <circle r="10" strokeOpacity="0.55" />
      <circle r="3.5" />
    </g>
  );
}

// ───────────────────────────────────── Compass — cardinal direction mandala
function CompassMandala() {
  return (
    <g>
      {/* concentric rings */}
      <circle r="94" strokeOpacity="0.3" />
      <circle r="88" />
      <circle r="78" strokeOpacity="0.6" strokeDasharray="1 3" />
      <circle r="62" strokeOpacity="0.55" />
      <circle r="44" />
      <circle r="28" strokeOpacity="0.6" />

      {/* degree ticks */}
      {Array.from({ length: 72 }).map((_, i) => {
        const a = (i * Math.PI * 2) / 72;
        const big = i % 6 === 0;
        const r1 = big ? 78 : 82;
        const r2 = 88;
        return (
          <line key={i}
            x1={Math.cos(a) * r1} y1={Math.sin(a) * r1}
            x2={Math.cos(a) * r2} y2={Math.sin(a) * r2}
            strokeOpacity={big ? 0.85 : 0.4}
            strokeWidth={big ? 0.9 : 0.5}
          />
        );
      })}

      {/* 8-point star */}
      {[0, 45, 90, 135, 180, 225, 270, 315].map((deg, i) => (
        <g key={i} transform={`rotate(${deg})`}>
          <path d="M 0 0 L 4 -22 L 0 -62 L -4 -22 Z" strokeOpacity={deg % 90 === 0 ? 0.9 : 0.5} />
        </g>
      ))}

      {/* outer cardinal triangles */}
      {[0, 90, 180, 270].map((deg, i) => (
        <g key={i} transform={`rotate(${deg})`}>
          <path d="M -3 -88 L 0 -94 L 3 -88 Z" strokeOpacity="0.85" />
        </g>
      ))}

      {/* inner geometry */}
      <circle r="14" />
      <circle r="6" strokeOpacity="0.6" />
      <circle r="1.6" fill="currentColor" stroke="none" opacity="0.7" />

      {/* radial spokes */}
      {Array.from({ length: 24 }).map((_, i) => {
        const a = (i * Math.PI * 2) / 24;
        return (
          <line key={i}
            x1={Math.cos(a) * 14} y1={Math.sin(a) * 14}
            x2={Math.cos(a) * 28} y2={Math.sin(a) * 28}
            strokeOpacity="0.35"
          />
        );
      })}
    </g>
  );
}

// ───────────────────────────────────── Star — 8-pointed sacred geometry
function StarMandala() {
  return (
    <g>
      <circle r="92" strokeOpacity="0.3" />
      <circle r="86" />
      <circle r="58" strokeOpacity="0.55" />
      <circle r="32" />

      {/* 8-fold overlapping circles (rosette) */}
      {Array.from({ length: 8 }).map((_, i) => {
        const a = (i * Math.PI * 2) / 8;
        const cx = Math.cos(a) * 30;
        const cy = Math.sin(a) * 30;
        return <circle key={i} cx={cx} cy={cy} r="30" strokeOpacity="0.55" />;
      })}

      {/* 16-fold overlapping circles outer */}
      {Array.from({ length: 16 }).map((_, i) => {
        const a = (i * Math.PI * 2) / 16;
        const cx = Math.cos(a) * 58;
        const cy = Math.sin(a) * 58;
        return <circle key={i} cx={cx} cy={cy} r="14" strokeOpacity="0.4" />;
      })}

      {/* 8-pointed star */}
      {[0, 45, 90, 135].map((deg, i) => (
        <g key={i} transform={`rotate(${deg})`}>
          <line x1="0" y1="-86" x2="0" y2="86" strokeOpacity="0.55" />
        </g>
      ))}

      {/* triangular points */}
      {Array.from({ length: 16 }).map((_, i) => {
        const deg = i * 22.5;
        return (
          <g key={i} transform={`rotate(${deg})`}>
            <path d="M -2.5 -86 L 0 -92 L 2.5 -86 Z" strokeOpacity={i % 2 === 0 ? 0.85 : 0.4} />
          </g>
        );
      })}

      {/* core */}
      <circle r="8" />
      <circle r="3" fill="currentColor" stroke="none" opacity="0.5" />
    </g>
  );
}

// ───────────────────────────────────── Wave — flowing oceanic rings
function WaveMandala() {
  return (
    <g>
      {/* concentric ripples */}
      {[18, 28, 40, 54, 70, 88].map((r, i) => (
        <circle key={i} r={r} strokeOpacity={0.3 + (i % 2) * 0.3} strokeDasharray={i % 2 === 0 ? '3 6' : undefined} />
      ))}

      {/* 24 radial lines, varying length */}
      {Array.from({ length: 24 }).map((_, i) => {
        const a = (i * Math.PI * 2) / 24;
        const r1 = 14;
        const r2 = i % 3 === 0 ? 92 : i % 3 === 1 ? 78 : 64;
        return (
          <line key={i}
            x1={Math.cos(a) * r1} y1={Math.sin(a) * r1}
            x2={Math.cos(a) * r2} y2={Math.sin(a) * r2}
            strokeOpacity={i % 3 === 0 ? 0.75 : 0.35}
          />
        );
      })}

      {/* small dots at outer points */}
      {Array.from({ length: 24 }).map((_, i) => {
        const a = (i * Math.PI * 2) / 24;
        const r = i % 3 === 0 ? 92 : i % 3 === 1 ? 78 : 64;
        return (
          <circle key={i}
            cx={Math.cos(a) * r} cy={Math.sin(a) * r}
            r="1.2" fill="currentColor" stroke="none" opacity="0.55"
          />
        );
      })}

      {/* core triple ring */}
      <circle r="14" />
      <circle r="8" strokeOpacity="0.6" />
      <circle r="2.4" fill="currentColor" stroke="none" opacity="0.7" />
    </g>
  );
}

Object.assign(window, { GlubinaMandala });