import React from 'react';
import { Camera, Instagram, Mail, Twitter } from 'lucide-react';

// Sample photo data - in a real app, this would come from a CMS or database
const photos = [
  {
    id: 1,
    title: 'Mountain Sunrise',
    url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&q=80&w=1000',
    category: 'Landscape'
  },
  {
    id: 2,
    title: 'Urban Night',
    url: 'https://images.unsplash.com/photo-1519501025264-65ba15a82390?auto=format&fit=crop&q=80&w=1000',
    category: 'Urban'
  },
  {
    id: 3,
    title: 'Portrait Study',
    url: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&q=80&w=1000',
    category: 'Portrait'
  },
  {
    id: 4,
    title: 'Nature Close-up',
    url: 'https://images.unsplash.com/photo-1504198322253-cfa87a0ff25f?auto=format&fit=crop&q=80&w=1000',
    category: 'Nature'
  },
  {
    id: 5,
    title: 'Street Life',
    url: 'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&q=80&w=1000',
    category: 'Street'
  },
  {
    id: 6,
    title: 'Architecture',
    url: 'https://images.unsplash.com/photo-1488972685288-c3fd157d7c7a?auto=format&fit=crop&q=80&w=1000',
    category: 'Architecture'
  }
];

function App() {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex justify-between items-center">
            <div className="flex items-center space-x-2">
              <Camera className="h-8 w-8 text-indigo-600" />
              <h1 className="text-2xl font-bold text-gray-900">Your Name</h1>
            </div>
            <nav className="flex space-x-4">
              <a href="#portfolio" className="text-gray-600 hover:text-indigo-600">Portfolio</a>
              <a href="#about" className="text-gray-600 hover:text-indigo-600">About</a>
              <a href="#contact" className="text-gray-600 hover:text-indigo-600">Contact</a>
            </nav>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative h-[60vh] bg-black">
        <img 
          src="https://images.unsplash.com/photo-1452587925148-ce544e77e70d?auto=format&fit=crop&q=80&w=2000"
          alt="Hero"
          className="w-full h-full object-cover opacity-70"
        />
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="text-center">
            <h2 className="text-4xl md:text-6xl font-bold text-white mb-4">Capturing Moments</h2>
            <p className="text-xl text-gray-200">Photography Portfolio</p>
          </div>
        </div>
      </section>

      {/* Portfolio Grid */}
      <section id="portfolio" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <h2 className="text-3xl font-bold text-gray-900 mb-8">Portfolio</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {photos.map((photo) => (
            <div key={photo.id} className="group relative overflow-hidden rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl">
              <img 
                src={photo.url} 
                alt={photo.title}
                className="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <div className="absolute bottom-0 p-4">
                  <h3 className="text-white text-xl font-semibold">{photo.title}</h3>
                  <p className="text-gray-300">{photo.category}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="bg-white py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">About Me</h2>
            <p className="text-gray-600 mb-6">
              I'm a passionate photographer specializing in capturing the beauty of everyday moments.
              With a keen eye for detail and composition, I strive to tell stories through my lens.
            </p>
            <p className="text-gray-600">
              Whether it's landscape, portrait, or street photography, I bring creativity and technical expertise
              to every shoot.
            </p>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="bg-gray-50 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">Get in Touch</h2>
          <div className="flex justify-center space-x-6">
            <a href="#" className="text-gray-600 hover:text-indigo-600">
              <Mail className="h-6 w-6" />
            </a>
            <a href="#" className="text-gray-600 hover:text-indigo-600">
              <Instagram className="h-6 w-6" />
            </a>
            <a href="#" className="text-gray-600 hover:text-indigo-600">
              <Twitter className="h-6 w-6" />
            </a>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-white border-t border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <p className="text-center text-gray-500">© {new Date().getFullYear()} Your Name. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}

export default App;