import { useState } from 'react';
import { Camera, Heart, PartyPopper, Mail, Instagram, Facebook, MapPin, Phone, GraduationCap } from 'lucide-react';

export default function FDMStudio() {
  const [activeImage, setActiveImage] = useState(0);
  
  const portfolioImages = [
    "https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=800&q=80",
    "https://images.unsplash.com/photo-1519741497674-611481863552?w=800&q=80",
    "https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=800&q=80",
    "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=800&q=80"
  ];

  const services = [
    { title: "Bodas", icon: Heart, description: "Capturamos los momentos más emotivos de tu día especial" },
    { title: "Eventos Especiales", icon: PartyPopper, description: "Quinceañeras, bautizos, aniversarios y celebraciones únicas" },
    { title: "Sesiones Familiares", icon: Camera, description: "Inmortalizamos los momentos más valiosos con tus seres queridos" },
    { title: "Graduaciones", icon: GraduationCap, description: "Eternizamos tu logro académico con fotos memorables" }
  ];

  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <h1 className="text-2xl font-bold text-gray-800">FDM Studio Fotográfico</h1>
          <nav className="hidden md:flex gap-6">
            <a href="#inicio" className="text-gray-600 hover:text-gray-900">Inicio</a>
            <a href="#servicios" className="text-gray-600 hover:text-gray-900">Servicios</a>
            <a href="#portfolio" className="text-gray-600 hover:text-gray-900">Portfolio</a>
            <a href="#contacto" className="text-gray-600 hover:text-gray-900">Contacto</a>
          </nav>
        </div>
      </header>

      {/* Hero Section */}
      <section id="inicio" className="pt-24 pb-12 md:pt-32 md:pb-24 px-4">
        <div className="container mx-auto text-center">
          <h2 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
            Capturando Momentos Especiales
          </h2>
          <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
            Especialistas en fotografía de bodas, graduaciones, quinceañeras y todos tus eventos especiales que merecen ser recordados para siempre.
          </p>
          <a href="#contacto" className="inline-block bg-gray-900 text-white px-8 py-3 rounded-lg hover:bg-gray-800 transition-colors">
            Reserva tu sesión
          </a>
        </div>
      </section>

      {/* Services Section */}
      <section id="servicios" className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Nuestros Servicios</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {services.map((service, index) => (
              <div key={index} className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                <service.icon className="w-12 h-12 text-gray-800 mb-4" />
                <h3 className="text-xl font-semibold mb-2">{service.title}</h3>
                <p className="text-gray-600">{service.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Portfolio Section */}
      <section id="portfolio" className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Nuestro Portfolio</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {portfolioImages.map((image, index) => (
              <div 
                key={index}
                className="relative aspect-square overflow-hidden rounded-lg cursor-pointer"
                onClick={() => setActiveImage(index)}
              >
                <img 
                  src={image} 
                  alt={`Portfolio ${index + 1}`}
                  className="object-cover w-full h-full hover:scale-105 transition-transform duration-300"
                />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contacto" className="py-16 bg-gray-900 text-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Contáctanos</h2>
          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <div className="space-y-6">
              <div className="flex items-center gap-4">
                <Phone className="w-6 h-6" />
                <span>+502 4851 5760</span>
              </div>
              <div className="flex items-center gap-4">
                <Mail className="w-6 h-6" />
                <span>vanner.morales@gmail.com</span>
              </div>
              <div className="flex items-center gap-4">
                <MapPin className="w-6 h-6" />
                <span>Calle Principal 123, Ciudad</span>
              </div>
              <div className="flex gap-4 pt-4">
                <a href="#" className="hover:text-gray-300"><Instagram className="w-6 h-6" /></a>
                <a href="#" className="hover:text-gray-300"><Facebook className="w-6 h-6" /></a>
              </div>
            </div>
            <form className="space-y-4">
              <input
                type="text"
                placeholder="Nombre"
                className="w-full px-4 py-2 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:border-white"
              />
              <input
                type="email"
                placeholder="Email"
                className="w-full px-4 py-2 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:border-white"
              />
              <textarea
                placeholder="Mensaje"
                rows={4}
                className="w-full px-4 py-2 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:border-white"
              ></textarea>
              <button
                type="submit"
                className="w-full bg-white text-gray-900 py-2 rounded-lg hover:bg-gray-100 transition-colors"
              >
                Enviar Mensaje
              </button>
            </form>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-gray-400 py-8">
        <div className="container mx-auto px-4 text-center">
          <p>© 2024 FDM Studio Fotográfico. Todos los derechos reservados.</p>
        </div>
      </footer>
    </div>
  );
}