import { SacredMotif } from './motifs';
import './SacredGeometryLayer.css';

/** Viewport-wide sacred geometry — corners, keys, wisdom rail */
export default function SacredGeometryLayer() {
  return (
    <div className="sacred-layer" aria-hidden>
      <div className="sacred-layer__corner sacred-layer__corner--tl">
        <SacredMotif name="metatron" opacity={0.55} />
      </div>
      <div className="sacred-layer__corner sacred-layer__corner--tr">
        <SacredMotif name="yantra" opacity={0.5} />
      </div>
      <div className="sacred-layer__corner sacred-layer__corner--bl">
        <SacredMotif name="spiral" opacity={0.5} />
      </div>
      <div className="sacred-layer__corner sacred-layer__corner--br">
        <SacredMotif name="key" opacity={0.55} />
      </div>
      <div className="sacred-layer__corner sacred-layer__corner--mid-l">
        <SacredMotif name="vesica" opacity={0.45} />
      </div>
      <div className="sacred-layer__corner sacred-layer__corner--mid-r">
        <SacredMotif name="torus" opacity={0.45} />
      </div>

      <div className="sacred-layer__keys">
        <span className="sacred-key sacred-key--1" title="Shell index">
          ◈
        </span>
        <span className="sacred-key sacred-key--2" title="Ley ledger">
          ✦
        </span>
        <span className="sacred-key sacred-key--3" title="Root chord">
          ◎
        </span>
        <span className="sacred-key sacred-key--4" title="Archive gate">
          ψ
        </span>
      </div>

      <div className="sacred-layer__wisdom-rail font-tech" title="Whispers from the deck">
        <span>Ω</span>
        <span>∇</span>
        <span>∞</span>
        <span>⌬</span>
      </div>
    </div>
  );
}
