// FMProject — PageBackdrop & SectionDecor
// Three layered ambient elements for the dark page:
//  1. Persistent grid + dot lattice (page-wide)
//  2. Slow drifting node graph (page-wide)
//  3. Diagonal "data tracer" light beams (page-wide)
// Plus drop-in SectionDecor variants for individual sections.

const PageBackdrop = () => {
  return (
    <div
      aria-hidden="true"
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 0,
        pointerEvents: "none",
        overflow: "hidden",
      }}
    >
      {/* Layer 1 — grid + dot lattice */}
      <svg
        width="100%"
        height="100%"
        style={{ position: "absolute", inset: 0 }}
        preserveAspectRatio="none"
      >
        <defs>
          <pattern id="fm-grid" width="64" height="64" patternUnits="userSpaceOnUse">
            <path d="M 64 0 L 0 0 0 64" fill="none" stroke="rgba(255,255,255,0.022)" strokeWidth="1" />
          </pattern>
          <pattern id="fm-dots" width="128" height="128" patternUnits="userSpaceOnUse">
            <circle cx="64" cy="64" r="1.1" fill="rgba(96,165,250,0.16)" />
            <circle cx="0"  cy="0"  r="0.8" fill="rgba(96,165,250,0.10)" />
          </pattern>
          <radialGradient id="fm-vignette" cx="50%" cy="40%" r="80%">
            <stop offset="0%"  stopColor="rgba(0,0,0,0)" />
            <stop offset="70%" stopColor="rgba(0,0,0,0)" />
            <stop offset="100%" stopColor="rgba(0,0,0,0.55)" />
          </radialGradient>
        </defs>
        <rect width="100%" height="100%" fill="url(#fm-grid)" />
        <rect width="100%" height="100%" fill="url(#fm-dots)" />
        <rect width="100%" height="100%" fill="url(#fm-vignette)" />
      </svg>

      {/* Layer 2 — drifting node lattice (small, slow) */}
      <svg
        width="1600"
        height="900"
        viewBox="0 0 1600 900"
        style={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          width: "120vw",
          height: "120vh",
          opacity: 0.55,
          mixBlendMode: "screen",
        }}
        preserveAspectRatio="xMidYMid slice"
      >
        <g style={{ animation: "fm-drift 60s linear infinite" }}>
          {[
            [120, 180], [340, 90], [560, 220], [820, 140], [1080, 240], [1320, 160], [1480, 320],
            [80, 480], [320, 540], [600, 460], [880, 560], [1140, 500], [1400, 620],
            [180, 760], [440, 820], [720, 740], [980, 820], [1260, 780],
          ].map(([x, y], i) => (
            <g key={i}>
              <circle cx={x} cy={y} r="1.6" fill="rgba(96,165,250,0.55)">
                <animate attributeName="opacity" values="0.25;0.85;0.25" dur={`${4 + (i % 5)}s`} repeatCount="indefinite" begin={`${i * 0.2}s`} />
              </circle>
              <circle cx={x} cy={y} r="6" fill="rgba(96,165,250,0.10)" />
            </g>
          ))}
          {/* faint connecting lines between nearby nodes */}
          {[
            [120, 180, 340, 90], [340, 90, 560, 220], [560, 220, 820, 140],
            [820, 140, 1080, 240], [1080, 240, 1320, 160], [1320, 160, 1480, 320],
            [80, 480, 320, 540], [320, 540, 600, 460], [600, 460, 880, 560],
            [880, 560, 1140, 500], [1140, 500, 1400, 620],
            [180, 760, 440, 820], [440, 820, 720, 740], [720, 740, 980, 820], [980, 820, 1260, 780],
            [120, 180, 80, 480], [560, 220, 600, 460], [1080, 240, 1140, 500],
            [320, 540, 440, 820], [880, 560, 980, 820],
          ].map(([x1, y1, x2, y2], i) => (
            <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(96,165,250,0.10)" strokeWidth="1" />
          ))}
        </g>
      </svg>

      {/* Layer 3 — diagonal light beams */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background:
            "linear-gradient(115deg, transparent 30%, rgba(96,165,250,0.045) 42%, transparent 55%)," +
            "linear-gradient(115deg, transparent 60%, rgba(245,158,11,0.030) 72%, transparent 84%)",
          backgroundSize: "200% 200%, 200% 200%",
          animation: "fm-beam 24s ease-in-out infinite alternate",
        }}
      />
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────
// Small inline corner decorations for individual sections
// ─────────────────────────────────────────────────────────────────────

const TerminalDecor = ({ className = "", style = {} }) => (
  <div
    aria-hidden="true"
    className={"font-mono text-[10px] leading-[1.5] select-none " + className}
    style={{
      color: "rgba(96,165,250,0.30)",
      letterSpacing: "0.02em",
      pointerEvents: "none",
      ...style,
    }}
  >
    <div style={{ color: "rgba(245,158,11,0.45)" }}>{"$ fmp-deploy --compliance=eu_ai_act"}</div>
    <div>{"› checking GDPR boundaries......... ok"}</div>
    <div>{"› scanning NIS2 controls............ ok"}</div>
    <div>{"› audit ledger sealed             ✓"}</div>
    <div style={{ color: "rgba(96,165,250,0.55)" }}>
      {"› ready "}
      <span style={{ animation: "fm-blink 1s step-end infinite" }}>{"▍"}</span>
    </div>
  </div>
);

const DotMatrixDecor = ({ className = "", style = {} }) => (
  <svg
    aria-hidden="true"
    width="120"
    height="120"
    viewBox="0 0 120 120"
    className={className}
    style={{ pointerEvents: "none", ...style }}
  >
    {Array.from({ length: 8 }).map((_, r) =>
      Array.from({ length: 8 }).map((__, c) => {
        const seed = (r * 31 + c * 17) % 100;
        const opacity = 0.08 + (seed % 30) / 100;
        const isAccent = seed % 23 === 0;
        return (
          <circle
            key={`${r}-${c}`}
            cx={8 + c * 14}
            cy={8 + r * 14}
            r={isAccent ? 2.2 : 1.4}
            fill={isAccent ? "rgba(245,158,11,0.7)" : "rgba(96,165,250,0.7)"}
            opacity={opacity}
          />
        );
      })
    )}
  </svg>
);

const BlueprintDecor = ({ className = "", style = {} }) => (
  <svg
    aria-hidden="true"
    width="180"
    height="80"
    viewBox="0 0 180 80"
    className={className}
    style={{ pointerEvents: "none", ...style }}
  >
    <g fill="none" stroke="rgba(96,165,250,0.30)" strokeWidth="1">
      <rect x="6" y="6" width="56" height="38" rx="3" />
      <rect x="72" y="6" width="36" height="22" rx="2" />
      <rect x="118" y="6" width="56" height="38" rx="3" />
      <rect x="72" y="36" width="36" height="36" rx="2" />
      <line x1="62" y1="25" x2="72" y2="17" />
      <line x1="108" y1="17" x2="118" y2="25" />
      <line x1="62" y1="25" x2="72" y2="54" />
      <line x1="108" y1="54" x2="118" y2="25" />
    </g>
    <g fill="rgba(245,158,11,0.55)">
      <circle cx="34" cy="25" r="2" />
      <circle cx="146" cy="25" r="2" />
      <circle cx="90" cy="17" r="1.6" />
      <circle cx="90" cy="54" r="1.6" />
    </g>
    <g fontFamily="ui-monospace, monospace" fontSize="6" fill="rgba(96,165,250,0.45)" style={{ letterSpacing: "0.08em" }}>
      <text x="9" y="18">CLIENT</text>
      <text x="75" y="18">FMP·AI</text>
      <text x="121" y="18">AUDIT</text>
      <text x="75" y="48">RULES</text>
    </g>
  </svg>
);

Object.assign(window, {
  PageBackdrop,
  TerminalDecor,
  DotMatrixDecor,
  BlueprintDecor,
});