import React from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

export default function LuxuryMagazine() {
  return (
    <div className="min-h-screen bg-white text-black">
      {/* Header */}
      <header className="flex justify-between items-center p-4 shadow-md sticky top-0 bg-white z-50">
        <div className="text-2xl font-bold tracking-widest uppercase">Luxora</div>
        <nav className="hidden md:flex gap-6 text-sm font-medium">
          <a href="#" className="hover:underline">Cars</a>
          <a href="#" className="hover:underline">Fashion</a>
          <a href="#" className="hover:underline">Travel</a>
          <a href="#" className="hover:underline">Real Estate</a>
          <a href="#" className="hover:underline">Watches</a>
          <a href="#" className="hover:underline">Jewelry</a>
        </nav>
        <div className="w-40">
          <Input type="search" placeholder="Search..." className="text-sm" />
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative h-[70vh] bg-cover bg-center flex items-center justify-center text-white" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1503736334956-4c8f8e92946d)' }}>
        <div className="bg-black bg-opacity-60 p-6 rounded-xl max-w-2xl text-center">
          <h1 className="text-4xl md:text-6xl font-extrabold mb-4">Experience the World of Luxury</h1>
          <p className="text-lg md:text-xl mb-6">Discover curated stories on travel, style, wealth, and elegance.</p>
          <Button className="text-sm">Explore Now</Button>
        </div>
      </section>

      {/* Article Categories Preview */}
      <main className="p-6 grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
        {[
          { title: "Exotic Cars", image: "https://images.unsplash.com/photo-1511914265871-b6a5d4f31634" },
          { title: "High Fashion", image: "https://images.unsplash.com/photo-1618375531917-aec9283b6b62" },
          { title: "Luxury Travel", image: "https://images.unsplash.com/photo-1506744038136-46273834b3fb" },
          { title: "Real Estate", image: "https://images.unsplash.com/photo-1600585154356-596af9009e4a" },
          { title: "Premium Watches", image: "https://images.unsplash.com/photo-1532635223-6cb6362f2c04" },
          { title: "Fine Jewelry", image: "https://images.unsplash.com/photo-1522312346375-d1a52e2b99b3" }
        ].map((cat, idx) => (
          <div key={idx} className="rounded-2xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">
            <img src={cat.image} alt={cat.title} className="w-full h-48 object-cover" />
            <div className="p-4">
              <h2 className="text-xl font-semibold mb-2">{cat.title}</h2>
              <p className="text-sm text-gray-600">Explore the latest in {cat.title.toLowerCase()} and trends curated by our editors.</p>
            </div>
          </div>
        ))}
      </main>
    </div>
  );
}