import { FlowerOfLifeWatermark, SacredMotif } from '../Visual/sacredGeometry/motifs';
import GlowParticles from './GlowParticles';
import './AmbientBackground.css';

/** Slow-rotating sacred geometry SVG — Flower of Life circles inscribed in a pentagram ring */
function SacredGeometry() {
  return <FlowerOfLifeWatermark className="ambient-sacred-geo" opacity={0.55} />;
}

export default function AmbientBackground() {
  return (
    <div className="ambient-bg" aria-hidden>
      <div className="ambient-grid" />
      <GlowParticles />
      <div className="ambient-vignette" />
      <div className="ambient-orb ambient-orb-cyan" />
      <div className="ambient-orb ambient-orb-magenta" />
      <div className="ambient-orb ambient-orb-amber" />
      <div className="ambient-scanline" />
      <div className="ambient-gear ambient-gear-1" />
      <div className="ambient-gear ambient-gear-2" />
      <div className="ambient-geo-hex-veil" />
      <div className="ambient-geo-corner ambient-geo-corner--tl" aria-hidden>
        <SacredMotif name="metatron" opacity={0.65} />
      </div>
      <div className="ambient-geo-corner ambient-geo-corner--br" aria-hidden>
        <SacredMotif name="hex" opacity={0.6} />
      </div>
      {/* Sacred geometry watermark — centre of the main content area */}
      <SacredGeometry />
    </div>
  );
}
