import InteractiveGalleryNavigator from '@/components/InteractiveGalleryNavigator';

  export default function HomePage() {
    const galleryItems = [
      { id: 1, title: "Sunrise", image: "sunrise.jpg", category: "Nature" },
      { id: 2, title: "Urban Life", image: "city.jpg", category: "City" },
      { id: 3, title: "Chinatown", image: "chinatown.jpg", category: "People" },
    ];

  const categories = ["Nature", "City", "People", "Tech", "Art"];

  return (
    <main className="p-6 space-y-12">
      <header className="text-center">
        <h1 className="text-4xl font-bold">Gallery by OdynDev</h1>
        <p className="text-gray-600 mt-2">Explore categories and images from around the world.</p>
      </header>

      <section>
        <h2 className="text-2xl font-semibold mb-4">Categories</h2>
        <div className="flex flex-wrap gap-4">
          {categories.map((cat) => (
            <div key={cat} className="px-4 py-2 bg-gray-100 rounded">{cat}</div>
          ))}
        </div>
      </section>

      <section>
        <h2 className="text-2xl font-semibold mb-4">Gallery</h2>
        <InteractiveGalleryNavigator items={galleryItems} />
      </section>

      <section className="bg-blue-100 p-6 rounded-lg">
        <h2 className="text-xl font-bold mb-2">Join our newsletter</h2>
        <div className="flex flex-col sm:flex-row gap-2">
          <input type="email" placeholder="Your email" className="p-2 flex-1 rounded" />
          <button className="bg-blue-500 text-white px-4 py-2 rounded">Subscribe</button>
        </div>
      </section>

      <footer className="text-center text-gray-400">
        2025 Gallery by OdynDev
      </footer>
    </main>
  );
}