karate_halloween/components/SpookyAtmosphere.tsx

"use client";

import React from "react";

interface SpookyAtmosphereProps {
  className?: string;
  variant?: "kiosk" | "fullscreen";
}

export const SpookyAtmosphere: React.FC<SpookyAtmosphereProps> = ({
  className = "",
}) => {
  return (
    <div
      aria-hidden="true"
      className={`absolute inset-0 overflow-hidden pointer-events-none select-none z-0 ${className}`}
    >
      {/* 1. Shanghai Dojo Courtyard Night Background Artwork */}
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src="/assets/theme/shanghai_dojo_night_bg.webp"
        alt="Shanghai Dojo Night Background"
        className="absolute inset-0 w-full h-full object-cover scale-105"
      />

      {/* 2. Cinematic Vignette & Deep Twilight Tint Overlay */}
      <div className="absolute inset-0 bg-gradient-to-b from-[#06020c]/85 via-[#0e0618]/50 to-[#07020d]/90 mix-blend-multiply" />

      {/* 3. Radial Torchlight / Lantern Glow from Bottom Corners */}
      <div className="absolute -bottom-10 -left-10 w-72 h-72 rounded-full bg-orange-600/25 blur-3xl" />
      <div className="absolute -bottom-10 -right-10 w-72 h-72 rounded-full bg-amber-500/20 blur-3xl" />

      {/* 4. Top Header Moon Radiance */}
      <div className="absolute -top-16 -right-16 w-80 h-80 rounded-full bg-amber-300/15 blur-3xl" />

      {/* 5. Floating Halloween Sparks & Chi Embers */}
      <div className="absolute top-[35%] left-[10%] w-2 h-2 rounded-full bg-amber-400 opacity-80 animate-ping" />
      <div className="absolute top-[22%] right-[18%] w-1.5 h-1.5 rounded-full bg-cyan-300 opacity-70 animate-pulse" />
      <div className="absolute top-[62%] right-[12%] w-2.5 h-2.5 rounded-full bg-orange-500 opacity-60 animate-bounce" />
      <div className="absolute top-[75%] left-[20%] w-1.5 h-1.5 rounded-full bg-amber-200 opacity-50 animate-ping" />
    </div>
  );
};