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

// ✅ Easy customization: update these values
const siteConfig = {
  name: "Mark B Photography",
  tagline: "Capturing timeless moments through the lens",
  about: `I’m a professional photographer specializing in portraits, events, and landscapes. My mission is to tell stories through visuals that last a lifetime.`,
  photos: [
    { src: "/photos/photo1.jpg", title: "Sunset Bliss" },
    { src: "/photos/photo2.jpg", title: "Urban Lights" },
    { src: "/photos/photo3.jpg", title: "Nature Calm" },
    { src: "/photos/photo4.jpg", title: "Portrait Glow" },
  ],
};

export default function PortfolioSite() {
  const [selected, setSelected] = useState(null);

  return (
    <div className="font-sans text-gray-900">
      {/* Hero Section */}
      <section className="h-screen flex flex-col justify-center items-center bg-black text-white text-center">
        <motion.h1 initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }} className="text-5xl font-bold mb-4">
          {siteConfig.name}
        </motion.h1>
        <p className="text-xl mb-6">{siteConfig.tagline}</p>
        <Button className="rounded-2xl px-6 py-3 text-lg" onClick={() => document.getElementById("portfolio").scrollIntoView({ behavior: "smooth" })}>
          View Portfolio
        </Button>
      </section>

      {/* Portfolio Section */}
      <section className="p-10 bg-gray-50" id="portfolio">
        <h2 className="text-3xl font-bold mb-6 text-center">Portfolio</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
          {siteConfig.photos.map((photo, i) => (
            <Card key={i} className="cursor-pointer" onClick={() => setSelected(photo)}>
              <CardContent className="p-0">
                <img src={photo.src} alt={photo.title} className="w-full h-64 object-cover rounded-2xl" />
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* About Section */}
      <section className="p-10 bg-white text-center">
        <h2 className="text-3xl font-bold mb-4">About Me</h2>
        <p className="max-w-2xl mx-auto text-lg text-gray-600">{siteConfig.about}</p>
      </section>

      {/* Contact Section */}
      <section className="p-10 bg-gray-100 text-center">
        <h2 className="text-3xl font-bold mb-4">Contact</h2>
        <form className="max-w-xl mx-auto grid gap-4">
          <input type="text" placeholder="Your Name" className="border rounded-xl p-3" />
          <input type="email" placeholder="Your Email" className="border rounded-xl p-3" />
          <textarea placeholder="Your Message" className="border rounded-xl p-3 h-32" />
          <Button className="rounded-2xl px-6 py-3 text-lg">Send Message</Button>
        </form>
      </section>

      {/* Lightbox */}
      {selected && (
        <div className="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50">
          <div className="relative">
            <img src={selected.src} alt={selected.title} className="max-h-[90vh] max-w-[90vw] rounded-2xl" />
            <button onClick={() => setSelected(null)} className="absolute top-2 right-2 bg-white text-black rounded-full px-3 py-1">✕</button>
          </div>
        </div>
      )}
    </div>
  );
}