/* Add custom CSS styles below */ 
import { Button } from "@/components/ui/button";
import { useState, useEffect } from "react";

export default function Home() {
  const [scrollY, setScrollY] = useState(0);
  const [countdown, setCountdown] = useState({ days: 5, hours: 12, minutes: 34, seconds: 56 });

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  useEffect(() => {
    const timer = setInterval(() => {
      setCountdown((prev) => {
        if (prev.seconds > 0) return { ...prev, seconds: prev.seconds - 1 };
        if (prev.minutes > 0) return { ...prev, minutes: prev.minutes - 1, seconds: 59 };
        if (prev.hours > 0) return { ...prev, hours: prev.hours - 1, minutes: 59, seconds: 59 };
        if (prev.days > 0) return { ...prev, days: prev.days - 1, hours: 23, minutes: 59, seconds: 59 };
        return prev;
      });
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div className="min-h-screen bg-background text-foreground overflow-hidden">
      {/* HERO SECTION */}
      <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
        {/* Background with parallax effect */}
        <div
          className="absolute inset-0 opacity-30"
          style={{
            transform: `translateY(${scrollY * 0.5}px)`,
            background: "radial-gradient(ellipse at center, rgba(200, 169, 107, 0.1) 0%, transparent 70%)",
          }}
        />

        {/* Animated background elements */}
        <div className="absolute top-20 right-10 w-96 h-96 bg-accent opacity-5 rounded-full blur-3xl animate-pulse" />
        <div className="absolute bottom-20 left-10 w-80 h-80 bg-accent opacity-5 rounded-full blur-3xl animate-pulse" style={{ animationDelay: "1s" }} />

        {/* Content */}
        <div className="relative z-10 container mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Left: Text Content */}
          <div className="space-y-8 animate-fade-in">
            <div className="space-y-4">
              <p className="text-accent text-lg font-light tracking-widest uppercase">عود طبيعي فاخر</p>
              <h1 className="text-5xl md:text-7xl font-bold leading-tight text-foreground">
                نتحداك ما يعجبك <span className="text-accent">العود</span>
              </h1>
              <p className="text-xl text-muted-foreground font-light leading-relaxed max-w-lg">
                عود طبيعي فاخر بضمان استرداد كامل للمبلغ. اختبر الفخامة الحقيقية مع كل نفس.
              </p>
            </div>

            {/* CTA Buttons */}
            <div className="flex flex-col sm:flex-row gap-4 pt-4">
              <Button
                size="lg"
                className="bg-accent hover:bg-accent/90 text-primary-foreground px-8 py-6 text-lg font-semibold rounded-lg transition-all duration-300 hover:shadow-lg hover:shadow-accent/50"
              >
                اطلب الآن
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-accent text-accent hover:bg-accent/10 px-8 py-6 text-lg font-semibold rounded-lg transition-all duration-300"
              >
                اكتشف المجموعة
              </Button>
            </div>
          </div>

          {/* Right: Visual Element (Placeholder for image) */}
          <div className="relative h-96 lg:h-full flex items-center justify-center">
            <div className="absolute inset-0 bg-gradient-to-br from-accent/20 via-transparent to-transparent rounded-2xl" />
            <div className="relative w-full h-full flex items-center justify-center">
              <div className="w-64 h-64 bg-gradient-to-br from-accent to-accent/50 rounded-full opacity-20 blur-3xl" />
              <div className="absolute text-center">
                <i className="fas fa-gem text-6xl text-accent opacity-40" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TRUST BAR */}
      <section className="bg-card/50 backdrop-blur-sm border-t border-border py-12">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            {[
              { icon: "fa-shield-alt", title: "ضمان استرجاع", desc: "100% ضمان استرداد المبلغ" },
              { icon: "fa-truck", title: "شحن سريع", desc: "توصيل خلال 24-48 ساعة" },
              { icon: "fa-lock", title: "دفع آمن", desc: "تشفير SSL عالي الحماية" },
              { icon: "fa-gift", title: "تغليف فاخر", desc: "صناديق هدايا مخملية" },
            ].map((item, idx) => (
              <div key={idx} className="text-center space-y-3 hover:scale-105 transition-transform duration-300">
                <i className={`fas ${item.icon} text-3xl text-accent`} />
                <h3 className="text-lg font-semibold text-foreground">{item.title}</h3>
                <p className="text-sm text-muted-foreground">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CATEGORIES SECTION */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center space-y-4 mb-16">
            <p className="text-accent text-lg font-light tracking-widest uppercase">تصنيفاتنا</p>
            <h2 className="text-4xl md:text-5xl font-bold text-foreground">اختر ما يناسبك</h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
            {[
              { name: "عود طبيعي", icon: "fa-leaf", color: "from-green-500/20" },
              { name: "دهن عود", icon: "fa-droplet", color: "from-amber-500/20" },
              { name: "صناديق الهدايا", icon: "fa-box", color: "from-rose-500/20" },
              { name: "بخور المنزل", icon: "fa-home", color: "from-blue-500/20" },
              { name: "الهدايا الرجالية", icon: "fa-crown", color: "from-purple-500/20" },
            ].map((cat, idx) => (
              <div
                key={idx}
                className={`group relative overflow-hidden rounded-xl p-8 cursor-pointer transition-all duration-300 hover:scale-105 bg-gradient-to-br ${cat.color} to-transparent border border-border hover:border-accent`}
              >
                <div className="absolute inset-0 bg-accent opacity-0 group-hover:opacity-5 transition-opacity duration-300" />
                <div className="relative z-10 space-y-4 text-center">
                  <i className={`fas ${cat.icon} text-4xl text-accent`} />
                  <h3 className="text-lg font-semibold text-foreground">{cat.name}</h3>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* BEST SELLERS SECTION */}
      <section className="py-20 bg-card/30">
        <div className="container mx-auto px-4">
          <div className="text-center space-y-4 mb-16">
            <p className="text-accent text-lg font-light tracking-widest uppercase">الأكثر مبيعاً</p>
            <h2 className="text-4xl md:text-5xl font-bold text-foreground">منتجات مختارة بعناية</h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              { name: "عود مروكي سوبر", price: "450", discount: "20%" },
              { name: "عود كمبودي تربل", price: "850", discount: "15%" },
              { name: "دهن عود هندي", price: "350", discount: "10%" },
              { name: "صندوق هدايا فاخر", price: "650", discount: "25%" },
            ].map((product, idx) => (
              <div
                key={idx}
                className="group relative overflow-hidden rounded-xl bg-card border border-border hover:border-accent transition-all duration-300 hover:shadow-2xl hover:shadow-accent/20"
              >
                {/* Product Image Placeholder */}
                <div className="relative h-64 bg-gradient-to-br from-accent/10 to-transparent overflow-hidden">
                  <div className="absolute inset-0 flex items-center justify-center">
                    <i className="fas fa-gem text-5xl text-accent opacity-20" />
                  </div>

                  {/* Discount Badge */}
                  {product.discount && (
                    <div className="absolute top-4 right-4 bg-accent text-primary-foreground px-3 py-1 rounded-full text-sm font-bold">
                      -{product.discount}
                    </div>
                  )}

                  {/* Hover Overlay */}
                  <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <Button className="bg-accent hover:bg-accent/90 text-primary-foreground">
                      أضف للسلة
                    </Button>
                  </div>
                </div>

                {/* Product Info */}
                <div className="p-6 space-y-4">
                  <h3 className="text-lg font-semibold text-foreground group-hover:text-accent transition-colors duration-300">
                    {product.name}
                  </h3>
                  <div className="flex items-center justify-between">
                    <div className="space-y-1">
                      <p className="text-2xl font-bold text-accent">{product.price} ر.س</p>
                      <p className="text-sm text-muted-foreground line-through">600 ر.س</p>
                    </div>
                    <div className="flex gap-1">
                      {[...Array(5)].map((_, i) => (
                        <i key={i} className="fas fa-star text-accent text-sm" />
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WHY US SECTION */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center space-y-4 mb-16">
            <p className="text-accent text-lg font-light tracking-widest uppercase">لماذا نحن</p>
            <h2 className="text-4xl md:text-5xl font-bold text-foreground">لماذا Golden Oud؟</h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
            {[
              { title: "عود طبيعي مختار", desc: "نختار أفضل أنواع العود من أجود المصادر العالمية" },
              { title: "جودة مضمونة", desc: "كل منتج يمر بفحوصات جودة صارمة وشهادات أصالة" },
              { title: "تغليف فاخر", desc: "صناديق مخملية وتغليف احترافي يليق بالهدايا الفاخرة" },
              { title: "مناسب للهدايا", desc: "مثالي لكل المناسبات والاحتفالات الخاصة" },
              { title: "ضمان استرداد", desc: "100% ضمان استرداد المبلغ إذا لم تكن راضياً" },
            ].map((item, idx) => (
              <div key={idx} className="text-center space-y-3 p-6 rounded-xl bg-card/50 border border-border hover:border-accent transition-all duration-300">
                <h3 className="text-lg font-semibold text-foreground">{item.title}</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* EMOTIONAL BANNER */}
      <section className="relative py-32 overflow-hidden">
        <div
          className="absolute inset-0 opacity-20"
          style={{
            transform: `translateY(${scrollY * 0.3}px)`,
            background: "linear-gradient(135deg, rgba(200, 169, 107, 0.1) 0%, transparent 100%)",
          }}
        />
        <div className="relative z-10 container mx-auto px-4 text-center space-y-6">
          <h2 className="text-5xl md:text-6xl font-bold text-foreground leading-tight">
            لأن الهدية الفاخرة <br /> <span className="text-accent">تُشم قبل أن تُرى</span>
          </h2>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            كل نفس من عود Golden Oud يحكي قصة الفخامة والأصالة
          </p>
        </div>
      </section>

      {/* SPECIAL OFFER SECTION */}
      <section className="py-20 bg-gradient-to-r from-accent/10 via-transparent to-accent/10 border-y border-border">
        <div className="container mx-auto px-4">
          <div className="text-center space-y-8">
            <div className="space-y-4">
              <p className="text-accent text-lg font-light tracking-widest uppercase">عرض محدود</p>
              <h2 className="text-5xl md:text-6xl font-bold text-foreground">خصم 30% لفترة محدودة</h2>
              <p className="text-xl text-muted-foreground">استمتع بأفضل الأسعار على منتجاتنا الفاخرة</p>
            </div>

            {/* Countdown Timer */}
            <div className="flex justify-center gap-6 py-8">
              {[
                { label: "أيام", value: countdown.days },
                { label: "ساعات", value: countdown.hours },
                { label: "دقائق", value: countdown.minutes },
                { label: "ثوان", value: countdown.seconds },
              ].map((item, idx) => (
                <div key={idx} className="text-center">
                  <div className="bg-card border-2 border-accent rounded-lg p-4 min-w-20">
                    <p className="text-3xl font-bold text-accent">{String(item.value).padStart(2, "0")}</p>
                  </div>
                  <p className="text-sm text-muted-foreground mt-2">{item.label}</p>
                </div>
              ))}
            </div>

            <Button
              size="lg"
              className="bg-accent hover:bg-accent/90 text-primary-foreground px-12 py-6 text-lg font-semibold rounded-lg transition-all duration-300 hover:shadow-lg hover:shadow-accent/50"
            >
              استفد من العرض الآن
            </Button>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS SECTION */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="text-center space-y-4 mb-16">
            <p className="text-accent text-lg font-light tracking-widest uppercase">آراء العملاء</p>
            <h2 className="text-4xl md:text-5xl font-bold text-foreground">ماذا يقول عملاؤنا</h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { name: "محمد السعيد", text: "أفضل عود جربته في حياتي، الجودة والرائحة لا تضاهى!", rating: 5 },
              { name: "فاطمة الشهري", text: "هدية رائعة جداً، التغليف فاخر والعود طبيعي 100%", rating: 5 },
              { name: "سارة العتيبي", text: "خدمة العملاء ممتازة والتوصيل سريع جداً", rating: 5 },
            ].map((testimonial, idx) => (
              <div key={idx} className="bg-card border border-border rounded-xl p-8 space-y-4 hover:border-accent transition-all duration-300">
                <div className="flex gap-1">
                  {[...Array(testimonial.rating)].map((_, i) => (
                    <i key={i} className="fas fa-star text-accent text-sm" />
                  ))}
                </div>
                <p className="text-foreground italic">&quot;{testimonial.text}&quot;</p>
                <p className="text-accent font-semibold">{testimonial.name}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FINAL CTA SECTION */}
      <section className="py-20 bg-card/50">
        <div className="container mx-auto px-4 text-center space-y-8">
          <h2 className="text-5xl md:text-6xl font-bold text-foreground">جرّب العود بدون أي مخاطرة</h2>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            100% ضمان استرداد المبلغ إذا لم تكن راضياً. لا توجد أسئلة، لا توجد مشاكل.
          </p>
          <Button
            size="lg"
            className="bg-accent hover:bg-accent/90 text-primary-foreground px-12 py-6 text-lg font-semibold rounded-lg transition-all duration-300 hover:shadow-lg hover:shadow-accent/50"
          >
            اطلب الآن
          </Button>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="bg-card border-t border-border py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
            {/* Brand */}
            <div className="space-y-4">
              <h3 className="text-2xl font-bold text-accent">Golden Oud</h3>
              <p className="text-muted-foreground text-sm">متجر العود الفاخر الأول في المملكة</p>
            </div>

            {/* Links */}
            <div className="space-y-3">
              <h4 className="font-semibold text-foreground">الروابط السريعة</h4>
              {["الرئيسية", "المنتجات", "عن المتجر", "التواصل"].map((link) => (
                <a key={link} href="#" className="block text-muted-foreground hover:text-accent transition-colors text-sm">
                  {link}
                </a>
              ))}
            </div>

            {/* Policies */}
            <div className="space-y-3">
              <h4 className="font-semibold text-foreground">السياسات</h4>
              {["سياسة الخصوصية", "شروط الاستخدام", "سياسة الإرجاع", "الشحن"].map((policy) => (
                <a key={policy} href="#" className="block text-muted-foreground hover:text-accent transition-colors text-sm">
                  {policy}
                </a>
              ))}
            </div>

            {/* Social & Contact */}
            <div className="space-y-4">
              <h4 className="font-semibold text-foreground">تواصل معنا</h4>
              <div className="flex gap-3">
                {["fa-facebook", "fa-instagram", "fa-twitter", "fa-whatsapp"].map((icon) => (
                  <a
                    key={icon}
                    href="#"
                    className="w-10 h-10 rounded-full bg-accent/10 hover:bg-accent/20 flex items-center justify-center text-accent transition-all duration-300"
                  >
                    <i className={`fab ${icon}`} />
                  </a>
                ))}
              </div>
              <p className="text-muted-foreground text-sm">واتساب: +966 50 123 4567</p>
            </div>
          </div>

          {/* Bottom Footer */}
          <div className="border-t border-border pt-8 flex flex-col md:flex-row justify-between items-center text-muted-foreground text-sm">
            <p>&copy; 2026 Golden Oud. جميع الحقوق محفوظة.</p>
            <div className="flex gap-4 mt-4 md:mt-0">
              <i className="fab fa-cc-visa text-lg" />
              <i className="fab fa-cc-mastercard text-lg" />
              <i className="fab fa-cc-paypal text-lg" />
            </div>
          </div>
        </div>
      </footer>

      {/* Global Animations */}
      <style>{`
        @keyframes fade-in {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .animate-fade-in {
          animation: fade-in 0.8s ease-out;
        }

        html {
          scroll-behavior: smooth;
        }
      `}</style>
    </div>
  );
}