components/GlassCard.js

export default function GlassCard({ image, caption, price }) {
  return (
    // 1. FULL SCREEN CONTAINER (Centered)
    <div className="relative w-full h-full flex items-center justify-center">
      
      {/* 2. THE INSTAGRAM FRAME (Max width to look like a phone app) */}
      <div className="relative w-full max-w-md aspect-[9/16] max-h-[85vh]">
        
        {/* LAYER 1: The Image Logic (Behind the Glass) */}
        {/* We use percentages to tuck the image safely inside your PNG borders */}
        <div className="absolute top-[3%] bottom-[15%] left-[5%] right-[5%] z-0 bg-transparent overflow-hidden rounded-lg">
          {image ? (
            <img 
              src={image} 
              alt="Model" 
              className="w-full h-full object-cover" 
            />
          ) : (
            // EMPTY STATE: Just transparent (or subtle placeholder)
            <div className="w-full h-full flex items-center justify-center opacity-30">
              {/* Optional: Tiny text saying 'Waiting for Model' if you want, otherwise blank */}
            </div>
          )}
        </div>

        {/* LAYER 2: The Glass Frame PNG (Overlay) */}
        <div className="absolute inset-0 z-10 pointer-events-none">
          <img 
            src="/assets/picture_frame.png" 
            className="w-full h-full object-fill drop-shadow-2xl" 
          />
        </div>

        {/* LAYER 3: Caption (Only shows AFTER upload) */}
        {/* Sits inside the bottom glass ledge */}
        {caption && (
          <div className="absolute bottom-[6%] left-[10%] right-[10%] z-20 text-center">
            <p className="font-bold text-[#1E293B] text-sm truncate">{caption}</p>
             {/* If you want the price, uncomment this: */}
            {/* <p className="text-[#0EA5E9] font-extrabold">{price}</p> */}
          </div>
        )}

      </div>
    </div>
  );
}