import { Link } from "react-router-dom";
import { ArrowLeft, Truck, Shield, RefreshCw, Headphones, Star } from "lucide-react";
import HeroBanner from "@/components/features/HeroBanner";
import ProductCard from "@/components/features/ProductCard";
import DealOfTheDay from "@/components/features/DealOfTheDay";
import { PRODUCTS, CATEGORIES, TESTIMONIALS } from "@/constants/data";

export default function HomePage() {
  const featuredProducts = PRODUCTS.filter((p) => p.isFeatured);
  const newProducts = PRODUCTS.filter((p) => p.isNew);
  const offersProducts = PRODUCTS.filter((p) => p.originalPrice);

  return (
    <div className="max-w-7xl mx-auto px-4 pb-8">
      {/* Hero Banner */}
      <HeroBanner />

      {/* Trust badges */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-6">
        {[
          { icon: Truck, label: "توصيل سريع", sub: "خلال 24-48 ساعة", color: "text-blue-500 bg-blue-50" },
          { icon: Shield, label: "ضمان الجودة", sub: "منتجات أصلية 100%", color: "text-green-500 bg-green-50" },
          { icon: RefreshCw, label: "إرجاع مجاني", sub: "خلال 7 أيام", color: "text-purple-500 bg-purple-50" },
          { icon: Headphones, label: "دعم 24/7", sub: "نحن دائماً هنا", color: "text-orange-500 bg-orange-50" },
        ].map(({ icon: Icon, label, sub, color }) => (
          <div key={label} className="bg-white rounded-xl p-4 flex items-center gap-3 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
            <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${color}`}>
              <Icon size={20} />
            </div>
            <div>
              <p className="text-sm font-bold text-gray-800">{label}</p>
              <p className="text-xs text-gray-500">{sub}</p>
            </div>
          </div>
        ))}
      </div>

      {/* Categories */}
      <section className="mt-10">
        <div className="flex items-center justify-between mb-5">
          <h2 className="section-title">تسوق حسب التصنيف</h2>
          <Link to="/products" className="text-orange-500 font-semibold text-sm flex items-center gap-1 hover:text-orange-600 transition-colors">
            الكل <ArrowLeft size={14} />
          </Link>
        </div>
        <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
          {CATEGORIES.map((cat) => (
            <Link
              key={cat.id}
              to={`/products?category=${cat.id}`}
              className="group flex flex-col items-center gap-2 bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:shadow-lg hover:-translate-y-1 transition-all duration-200"
            >
              <div className={`w-14 h-14 rounded-2xl flex items-center justify-center text-2xl ${cat.color} group-hover:scale-110 transition-transform duration-200`}>
                {cat.icon}
              </div>
              <span className="text-xs font-bold text-gray-700 text-center leading-tight">{cat.name}</span>
              <span className="text-xs text-gray-400">{cat.productCount} منتج</span>
            </Link>
          ))}
        </div>
      </section>

      {/* Deal of the Day */}
      <DealOfTheDay />

      {/* Featured Products */}
      <section className="mt-12">
        <div className="flex items-center justify-between mb-5">
          <div>
            <h2 className="section-title">المنتجات المميزة</h2>
            <p className="text-gray-500 text-sm mt-1">منتجات مختارة بعناية لك</p>
          </div>
          <Link to="/products?filter=featured" className="text-orange-500 font-semibold text-sm flex items-center gap-1 hover:text-orange-600 transition-colors">
            عرض الكل <ArrowLeft size={14} />
          </Link>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {featuredProducts.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </section>

      {/* Promo Banner */}
      <section className="mt-12">
        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-l from-amber-500 to-orange-600 p-8 md:p-12">
          <div className="relative z-10">
            <span className="text-white/80 text-sm font-semibold block mb-2">عروض حصرية ومحدودة</span>
            <h2 className="text-white text-2xl md:text-4xl font-black mb-3">
              خصومات تصل حتى <span className="text-yellow-300">40%</span>
            </h2>
            <p className="text-white/80 mb-6 max-w-md">
              لا تفوت هذه العروض الرائعة على المنتجات المنزلية والشخصية المختارة
            </p>
            <Link
              to="/products?filter=offers"
              className="inline-block bg-white text-orange-600 font-black px-8 py-3 rounded-xl hover:bg-yellow-50 transition-all duration-200 shadow-lg active:scale-95"
            >
              اكتشف العروض ←
            </Link>
          </div>
          {/* Decorative circles */}
          <div className="absolute -top-8 -left-8 w-48 h-48 bg-white/10 rounded-full" />
          <div className="absolute -bottom-12 -left-4 w-64 h-64 bg-white/10 rounded-full" />
          <div className="absolute top-4 left-1/3 w-20 h-20 bg-white/10 rounded-full" />
        </div>
      </section>

      {/* New Products */}
      {newProducts.length > 0 && (
        <section className="mt-12">
          <div className="flex items-center justify-between mb-5">
            <div>
              <h2 className="section-title">وصل حديثاً 🆕</h2>
              <p className="text-gray-500 text-sm mt-1">أحدث المنتجات في متجرنا</p>
            </div>
            <Link to="/products?filter=new" className="text-orange-500 font-semibold text-sm flex items-center gap-1 hover:text-orange-600 transition-colors">
              عرض الكل <ArrowLeft size={14} />
            </Link>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {newProducts.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        </section>
      )}

      {/* Offers */}
      {offersProducts.length > 0 && (
        <section className="mt-12">
          <div className="flex items-center justify-between mb-5">
            <div>
              <h2 className="section-title">العروض والخصومات 🔥</h2>
              <p className="text-gray-500 text-sm mt-1">أفضل الأسعار، لفترة محدودة</p>
            </div>
            <Link to="/products?filter=offers" className="text-orange-500 font-semibold text-sm flex items-center gap-1 hover:text-orange-600 transition-colors">
              عرض الكل <ArrowLeft size={14} />
            </Link>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {offersProducts.slice(0, 4).map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        </section>
      )}

      {/* Testimonials */}
      <section className="mt-12">
        <div className="text-center mb-8">
          <h2 className="section-title">ماذا يقول عملاؤنا</h2>
          <p className="text-gray-500 text-sm mt-2">آراء حقيقية من عملاء راضين</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {TESTIMONIALS.map((t) => (
            <div key={t.id} className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
              <div className="flex gap-1 mb-3">
                {Array.from({ length: 5 }).map((_, i) => (
                  <Star
                    key={i}
                    size={14}
                    className={i < t.rating ? "text-amber-400" : "text-gray-200"}
                    fill={i < t.rating ? "currentColor" : "none"}
                  />
                ))}
              </div>
              <p className="text-gray-600 text-sm leading-relaxed mb-4">"{t.review}"</p>
              <div className="flex items-center gap-3">
                <img src={t.avatar} alt={t.name} className="w-10 h-10 rounded-full object-cover" />
                <span className="font-bold text-gray-800 text-sm">{t.name}</span>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
