// 6-point spark/asterisk inside a circle — same spark motif used across
// the homepage (see AboutSection.tsx's Spark), just ringed here to match
// `kolabora-eventpage.jpg`'s bottom-right corner mark.
function CircledSpark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 64 64" className={className} aria-hidden="true" focusable="false">
      <circle cx="32" cy="32" r="27" fill="none" stroke="currentColor" strokeWidth="2" />
      <path
        d="M32 20 V44 M22.7 25.3 L41.3 38.7 M22.7 38.7 L41.3 25.3"
        stroke="currentColor"
        strokeWidth="2.4"
        strokeLinecap="round"
        fill="none"
      />
    </svg>
  );
}

// Two crossing sweeps + the node dot at their intersection — traced by eye
// from `kolabora-eventpage.jpg` (not an official brand asset export like
// the homepage's line assets, since this exact composition isn't among
// those files) at a 1366x768 reference canvas, stretched to fill via
// preserveAspectRatio="none" so the crossing point stays proportionally in
// the same spot at any viewport size.
function CrossingSweeps({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 1366 768"
      className={className}
      preserveAspectRatio="none"
      aria-hidden="true"
      focusable="false"
    >
      <path
        d="M 1120,-20 C 1050,150 1010,300 999,383 C 950,480 700,520 380,590 C 150,640 20,700 -20,760"
        fill="none"
        stroke="currentColor"
        strokeWidth="3"
        strokeLinecap="round"
      />
      <path
        d="M 895,-20 C 950,150 985,300 999,383 C 1010,470 900,560 750,620 C 650,660 580,710 550,790"
        fill="none"
        stroke="currentColor"
        strokeWidth="3"
        strokeLinecap="round"
      />
      <circle cx="999" cy="383" r="7" fill="currentColor" />
    </svg>
  );
}

/**
 * Full-page decorative background for /events (the Kolabora event listing
 * page) — recreates `kolabora-eventpage.jpg` (cream backdrop, two crossing
 * orange sweeps with a node dot, circled spark in the corner) as real
 * markup instead of a raster image, same approach as the homepage's About/
 * Event sections. Absolutely positioned behind the page's actual content
 * (z-0); the caller is responsible for giving its content wrapper a
 * higher z-index and `position: relative`.
 */
export function EventsPageBackground() {
  return (
    <div
      className="pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-kolabora-secondary text-kolabora-primary"
      aria-hidden="true"
    >
      <CrossingSweeps className="absolute inset-0 h-full w-full" />
      <CircledSpark className="absolute bottom-[6%] right-[4%] h-14 w-14 sm:h-16 sm:w-16" />
    </div>
  );
}
