"use client";

type Sparkle = {
  top: string;
  left: string;
  size: number;
  delay: number;
  duration: number;
  goldTone: number;
};

const SPARKLE_COUNT = 50;

function hash(i: number, salt: number): number {
  return (i * 9301 + salt * 49297) % 233280;
}

function buildSparkles(count: number): Sparkle[] {
  return Array.from({ length: count }, (_, i) => {
    const top = 3 + (hash(i, 1) % 94);
    const left = 2 + (hash(i, 2) % 96);
    const goldTone = hash(i, 3) % 3;
    const size = 8 + (hash(i, 6) % 7);
    const delay = (hash(i, 8) % 40) / 10;
    const duration = 1.8 + (hash(i, 9) % 14) / 10;

    return {
      top: `${top}%`,
      left: `${left}%`,
      size,
      delay,
      duration,
      goldTone,
    };
  });
}

const SPARKLES = buildSparkles(SPARKLE_COUNT);

const GOLD_TONE_CLASS = [
  "bg-amber-300 shadow-[0_0_16px_rgba(251,191,36,1),0_0_6px_rgba(255,237,160,0.9)]",
  "bg-yellow-300 shadow-[0_0_18px_rgba(250,204,21,1),0_0_8px_rgba(255,245,180,0.95)]",
  "bg-amber-400 shadow-[0_0_16px_rgba(245,158,11,0.98),0_0_6px_rgba(253,224,71,0.9)]",
] as const;

function SparkleItem({ sparkle }: { sparkle: Sparkle }) {
  const { top, left, size, delay, duration, goldTone } = sparkle;
  const base = GOLD_TONE_CLASS[goldTone]!;
  const style = {
    top,
    left,
    animationDelay: `${delay}s`,
    animationDuration: `${duration}s`,
    width: size,
    height: size,
  } as const;

  return (
    <span
      className={`home-sparkle-star absolute animate-sparkle-twinkle ${base}`}
      style={style}
    />
  );
}

export function HomeHeroSparkles() {
  return (
    <div
      className="pointer-events-none absolute inset-0 z-[1] overflow-hidden"
      aria-hidden
    >
      {SPARKLES.map((sparkle, index) => (
        <SparkleItem key={index} sparkle={sparkle} />
      ))}
      <div className="home-sparkle-shimmer absolute inset-0 opacity-85" />
      <div className="home-sparkle-shimmer-alt absolute inset-0 opacity-70" />
    </div>
  );
}