import Image from "next/image";

export const ReportFan = () => {
  return (
    <div className="animate-fade-in relative mx-auto mt-12 -translate-y-4 opacity-0 [--animation-delay:800ms] sm:mt-16 md:mt-20">
      {/* Ambient glow behind the fan */}
      <div className="pointer-events-none absolute inset-0 -inset-x-20 -bottom-10">
        <div className="absolute top-1/2 left-1/2 h-[500px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/8 blur-[100px]" />
        <div className="absolute top-1/3 left-1/3 h-[300px] w-[300px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/10 blur-[80px]" />
      </div>

      {/* Fan container with perspective */}
      <div
        className="pointer-events-none relative mx-auto w-[340px] sm:w-[480px] md:w-[620px] lg:w-[740px]"
        style={{ perspective: "1200px" }}
      >
        {/* Floating grid dots decoration */}
        <div className="pointer-events-none absolute -top-8 -right-12 h-24 w-24 opacity-[0.04]"
          style={{
            backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)",
            backgroundSize: "8px 8px",
          }}
        />
        <div className="pointer-events-none absolute -bottom-6 -left-10 h-20 w-20 opacity-[0.04]"
          style={{
            backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)",
            backgroundSize: "8px 8px",
          }}
        />

        <div className="relative flex aspect-[3/2.2] items-end justify-center">
          {/* Left page — tilted, peeking */}
          <div
            className="absolute bottom-0 left-0 z-0 w-[42%]"
            style={{
              transform: "rotate(-8deg) translateY(-4%) translateX(6%)",
              transformOrigin: "bottom center",
            }}
          >
            <div className="relative overflow-hidden rounded-xl border border-white/60 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.15)]">
              <Image
                src="/images/report/page-2.png"
                alt="Report table of contents"
                width={1653}
                height={2339}
                className="block w-full"
              />
              {/* Top fade for depth */}
              <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-white/20 via-transparent to-transparent" />
            </div>
          </div>

          {/* Right page — tilted, peeking */}
          <div
            className="absolute right-0 bottom-0 z-0 w-[42%]"
            style={{
              transform: "rotate(8deg) translateY(-4%) translateX(-6%)",
              transformOrigin: "bottom center",
            }}
          >
            <div className="relative overflow-hidden rounded-xl border border-white/60 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.15)]">
              <Image
                src="/images/report/page-3.png"
                alt="Report reading guide"
                width={1653}
                height={2339}
                className="block w-full"
              />
              <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-white/20 via-transparent to-transparent" />
            </div>
          </div>

          {/* Center page — hero, elevated */}
          <div
            className="relative z-10 w-[52%]"
            style={{
              transform: "translateY(-2%)",
            }}
          >
            <div className="relative overflow-hidden rounded-xl border border-white/80 shadow-[0_32px_80px_-12px_rgba(0,0,0,0.25)]">
              <Image
                src="/images/report/page-1.png"
                alt="Reputation Blueprint cover"
                width={1653}
                height={2339}
                className="block w-full"
                priority
              />
            </div>
            {/* Reflection hint */}
            <div className="pointer-events-none mx-auto mt-1 h-8 w-[90%] rounded-b-xl bg-gradient-to-b from-black/[0.04] to-transparent blur-sm" />
          </div>
        </div>
      </div>
    </div>
  );
};
