import Image from "next/image";
import { GlassInfoCard } from "../ui/GlassInfoCard";

type GlassCardItem = {
  text: string;
  icon?: string;
};

type HeroVisualCollageProps = {
  centerImage: string;
  leftImage?: string;
  rightImage?: string;
  glassCards: GlassCardItem[];
  isPhoneCenter?: boolean;
};

export function HeroVisualCollage({
  centerImage,
  leftImage,
  rightImage,
  glassCards,
  isPhoneCenter = true,
}: HeroVisualCollageProps) {
  return (
    <div className="relative w-full h-[380px] sm:h-[450px] lg:h-[500px] max-w-[540px] mx-auto flex items-center justify-center select-none">
      {/* Decorative backgrounds */}
      {/* 1. Soft purple circle */}
      <div className="absolute w-[240px] h-[240px] rounded-full bg-[#7C3AED]/10 blur-[60px] -z-10" />

      {/* 2. SVG Dot grid */}
      <div className="absolute -top-4 -right-4 w-32 h-32 text-[#6330D6]/10 -z-10 opacity-20">
        <svg className="w-full h-full" fill="currentColor">
          <pattern id="collage-dots" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="1.5" />
          </pattern>
          <rect width="100%" height="100%" fill="url(#collage-dots)" />
        </svg>
      </div>

      {/* 3. Small x marks */}
      <div className="absolute top-12 left-6 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>
      <div className="absolute bottom-16 right-8 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>

      {/* LEFT IMAGE PANEL (Hidden or compact on small mobile) */}
      {leftImage && (
        <div className="absolute left-2 sm:left-4 top-[15%] w-[100px] sm:w-[130px] h-[180px] sm:h-[220px] rounded-[18px] overflow-hidden border-2 border-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] z-10 transition-transform hover:scale-105 duration-300">
          <Image
            src={leftImage}
            alt="Collage left asset"
            fill
            className="object-cover"
            sizes="(max-width: 640px) 100px, 130px"
          />
        </div>
      )}

      {/* RIGHT IMAGE PANEL */}
      {rightImage && (
        <div className="absolute right-2 sm:right-4 bottom-[15%] w-[100px] sm:w-[130px] h-[180px] sm:h-[220px] rounded-[18px] overflow-hidden border-2 border-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] z-10 transition-transform hover:scale-105 duration-300">
          <Image
            src={rightImage}
            alt="Collage right asset"
            fill
            className="object-cover"
            sizes="(max-width: 640px) 100px, 130px"
          />
        </div>
      )}

      {/* CENTER COMPONENT */}
      <div className="relative z-20">
        {isPhoneCenter ? (
          /* Phone Frame Container */
          <div className="relative w-[180px] sm:w-[220px] h-[360px] sm:h-[440px] rounded-[36px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_50px_rgba(99,48,214,0.12)] bg-[#FAF8FC] overflow-hidden flex flex-col justify-center items-center">
            <Image
              src={centerImage}
              alt="Phone Mockup Screen"
              fill
              className="object-cover"
              sizes="(max-width: 640px) 180px, 220px"
              priority
            />
          </div>
        ) : (
          /* Central Logo / Visual Panel */
          <div className="relative w-[180px] sm:w-[220px] h-[280px] sm:h-[340px] rounded-[24px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_40px_rgba(99,48,214,0.1)] bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-6">
            <Image
              src={centerImage}
              alt="Central logo panel"
              width={160}
              height={160}
              className="object-contain max-h-[140px] w-auto animate-[pulse_6s_infinite]"
              priority
            />
          </div>
        )}
      </div>

      {/* FLOATING GLASS CARDS (Positioned Absolute, scaled down on mobile) */}
      {glassCards.length > 0 && (
        <div className="absolute inset-0 z-30 pointer-events-none">
          {/* Card 1: Top Right */}
          {glassCards[0] && (
            <div className="absolute right-0 sm:right-[5%] top-[10%] pointer-events-auto hover:translate-y-[-2px] transition-transform duration-200">
              <GlassInfoCard
                text={glassCards[0].text}
                icon={glassCards[0].icon}
                className="scale-90 sm:scale-100"
              />
            </div>
          )}

          {/* Card 2: Bottom Left */}
          {glassCards[1] && (
            <div className="absolute left-0 sm:left-[5%] bottom-[10%] pointer-events-auto hover:translate-y-[-2px] transition-transform duration-200">
              <GlassInfoCard
                text={glassCards[1].text}
                icon={glassCards[1].icon}
                className="scale-90 sm:scale-100"
              />
            </div>
          )}

          {/* Card 3: Mid Left/Right */}
          {glassCards[2] && (
            <div className="absolute left-[5%] top-[45%] pointer-events-auto hover:translate-y-[-2px] transition-transform duration-200">
              <GlassInfoCard
                text={glassCards[2].text}
                icon={glassCards[2].icon}
                className="scale-90 sm:scale-100"
              />
            </div>
          )}
        </div>
      )}
    </div>
  );
}