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

const familyVideos = [
  {
    title: "AI-Animated Video 1",
    url: "https://youtube.com/shorts/pxwjmAAafKM",
    description: "Mom glancing gently with a subtle smile, recreated with animation."
  },
  // Add more video entries here with titles and descriptions
];

export default function FamilyAIVideoGallery() {
  return (
    <div className="min-h-screen bg-gray-50 py-10 px-4 sm:px-8">
      <h1 className="text-4xl font-bold text-center mb-10 text-gray-800">
        AI Family Photo Animations
      </h1>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 items-start">
        <div className="lg:col-span-1">
          <img
            src="https://redbeardatx.neocities.org/momdad.jpeg"
            alt="Source Family Photo"
            className="rounded-2xl shadow-lg w-full h-auto"
          />
        </div>

        <div className="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {familyVideos.map((video, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
            >
              <Card className="rounded-2xl shadow-md hover:shadow-xl transition duration-300">
                <CardContent className="p-4">
                  <div className="aspect-video overflow-hidden rounded-xl">
                    <iframe
                      width="100%"
                      height="100%"
                      src={video.url}
                      title={video.title}
                      frameBorder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowFullScreen
                    ></iframe>
                  </div>
                  <h2 className="mt-4 text-lg font-medium text-gray-700 text-center">
                    {video.title}
                  </h2>
                  <p className="mt-2 text-sm text-gray-600 text-center">
                    {video.description}
                  </p>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}