import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { motion } from "framer-motion";

const photos = [
  "/images/photo1.jpg",
  "/images/photo2.jpg",
  "/images/photo3.jpg",
  // Add more image paths here
];

export default function CrybabyGallery() {
  return (
    <div className="min-h-screen bg-[url('/images/forest-background.jpg')] bg-cover bg-center p-6">
      <header className="text-center mb-10">
        <h1 className="text-5xl font-bold text-pink-100 drop-shadow-lg mb-2">Crybaby Gallery</h1>
        <p className="text-lg text-purple-200 drop-shadow">A Melanie Martinez themed photo showcase</p>
      </header>

      <section className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {photos.map((src, index) => (
          <motion.div
            key={index}
            whileHover={{ scale: 1.05 }}
            className="rounded-2xl shadow-xl bg-black bg-opacity-30 backdrop-blur-md overflow-hidden border-2 border-pink-300"
          >
            <Card className="bg-transparent">
              <CardContent className="p-2">
                <img
                  src={src}
                  alt={`Crybaby photo ${index + 1}`}
                  className="w-full h-64 object-cover rounded-xl border-2 border-white shadow-md"
                />
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </section>

      <footer className="text-center mt-10 text-pink-200 drop-shadow">
        <p>Inspired by Melanie Martinez's Crybaby and Portals aesthetic</p>
      </footer>
    </div>
  );
}