import './AmbientBackground.css';

/** Slow-rotating sacred geometry SVG — Flower of Life circles inscribed in a pentagram ring */
function SacredGeometry() {
  const cx = 50;
  const cy = 50;
  const R = 32; // outer circle radius

  // Six-petal Flower of Life petal centres (offset by R from centre)
  const petalAngles = [0, 60, 120, 180, 240, 300];
  const petals = petalAngles.map((deg) => {
    const rad = (deg * Math.PI) / 180;
    return { x: cx + R * Math.cos(rad), y: cy + R * Math.sin(rad) };
  });

  // 5-pointed star vertices inscribed at radius R*1.15
  const starR = R * 1.15;
  const starPts = Array.from({ length: 5 }, (_, i) => {
    const rad = ((i * 72 - 90) * Math.PI) / 180;
    return { x: cx + starR * Math.cos(rad), y: cy + starR * Math.sin(rad) };
  });
  const starPath = starPts.map((p, i) => (i === 0 ? `M${p.x},${p.y}` : `L${p.x},${p.y}`)).join(' ') + ' Z';

  // Inner triangles (upward + downward — Star of David inner ring)
  const triR = R * 0.7;
  const triUp = [0, 120, 240].map((d) => {
    const rad = ((d - 90) * Math.PI) / 180;
    return `${cx + triR * Math.cos(rad)},${cy + triR * Math.sin(rad)}`;
  }).join(' ');
  const triDown = [60, 180, 300].map((d) => {
    const rad = ((d - 90) * Math.PI) / 180;
    return `${cx + triR * Math.cos(rad)},${cy + triR * Math.sin(rad)}`;
  }).join(' ');

  return (
    <svg className="ambient-sacred-geo" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden>
      <g opacity="0.55">
        {/* Outer ring */}
        <circle cx={cx} cy={cy} r={R * 1.35} fill="none" stroke="#c9a227" strokeWidth="0.18" strokeDasharray="1.2 1.8" />
        {/* Middle ring */}
        <circle cx={cx} cy={cy} r={R} fill="none" stroke="#c9a227" strokeWidth="0.22" />
        {/* Inner ring */}
        <circle cx={cx} cy={cy} r={R * 0.5} fill="none" stroke="#c9a227" strokeWidth="0.18" strokeDasharray="0.6 1.2" />
        {/* Flower of Life petal circles */}
        {petals.map((p, i) => (
          <circle key={i} cx={p.x} cy={p.y} r={R} fill="none" stroke="#c9a227" strokeWidth="0.16" opacity="0.7" />
        ))}
        {/* Pentagon star */}
        <path d={starPath} fill="none" stroke="#ff8c00" strokeWidth="0.2" strokeLinejoin="round" opacity="0.6" />
        {/* Merkaba triangles */}
        <polygon points={triUp} fill="none" stroke="#c9a227" strokeWidth="0.2" opacity="0.8" />
        <polygon points={triDown} fill="none" stroke="#c9a227" strokeWidth="0.2" opacity="0.8" />
        {/* Centre dot */}
        <circle cx={cx} cy={cy} r="0.6" fill="#c9a227" opacity="0.9" />
        {/* Spoke lines to star points */}
        {starPts.map((p, i) => (
          <line key={i} x1={cx} y1={cy} x2={p.x} y2={p.y} stroke="#c9a227" strokeWidth="0.1" opacity="0.35" />
        ))}
      </g>
    </svg>
  );
}

export default function AmbientBackground() {
  return (
    <div className="ambient-bg" aria-hidden>
      <div className="ambient-grid" />
      <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" />
      {/* Sacred geometry watermark — centre of the main content area */}
      <SacredGeometry />
    </div>
  );
}