import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { ShoppingBag, Search } from "lucide-react";
import { motion } from "framer-motion";

export default function VaelorHomePage() {
  return (
    <div className="min-h-screen bg-white text-gray-900">
      {/* Header */}
      <header className="flex items-center justify-between px-6 py-4 border-b">
        <h1 className="text-2xl font-bold tracking-widest">VÆLOR</h1>
        <div className="flex items-center gap-2">
          <Input placeholder="Search products..." className="w-64" />
          <Button variant="outline"><Search size={18} /></Button>
          <Button variant="ghost"><ShoppingBag size={22} /></Button>
        </div>
      </header>

      {/* Hero Section */}
      <section className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 bg-gray-100">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="flex flex-col justify-center"
        >
          <h2 className="text-4xl font-bold mb-4">Elevate Your Style with VÆLOR</h2>
          <p className="text-gray-700 mb-6">Discover premium clothing designed in Bangladesh, worn worldwide. Bold, ethical, and unforgettable.</p>
          <Button className="w-40 text-lg py-6 rounded-2xl">Shop Now</Button>
        </motion.div>
        <motion.img
          src="/hero-image.jpg"
          alt="Fashion model wearing VÆLOR"
          className="rounded-xl shadow-lg w-full"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.2, duration: 0.8 }}
        />
      </section>

      {/* Featured Products */}
      <section className="p-6">
        <h3 className="text-2xl font-semibold mb-4">Featured Collection</h3>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
          {[1, 2, 3].map((item) => (
            <Card key={item} className="hover:shadow-xl transition-shadow">
              <CardContent className="p-4">
                <img src={`/product-${item}.jpg`} alt="Product" className="rounded-lg mb-2" />
                <h4 className="font-medium text-lg">Classic Tee {item}</h4>
                <p className="text-sm text-gray-500">BDT 999</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Footer */}
      <footer className="p-6 mt-10 bg-gray-900 text-white text-center">
        <p>© 2025 VÆLOR. Designed in Bangladesh. All rights reserved.</p>
      </footer>
    </div>
  );
}