import React, { useState, useEffect } from 'react';
import { useShop } from '../context/ShopContext';
import { ProductCard } from '../components/common/ProductCard';
import {
  ArrowRight,
  Sparkles,
  Clock,
  ShieldCheck,
  Truck,
  RotateCcw,
  Headphones,
  CheckCircle2,
  Star,
  Quote,
  Flame,
  ChevronRight,
  ChevronLeft,
  Smartphone,
  Download
} from 'lucide-react';

export const HomePage: React.FC = () => {
  const {
    products,
    categories,
    navigateTo,
    language,
    t,
    formatPrice,
    reviews,
    heroBanners,
    triggerInstallApp
  } = useShop();

  // Active filter tab for Featured Products
  const [activeTab, setActiveTab] = useState<string>('all');

  // Hero Banner Slider State
  const [currentBannerIdx, setCurrentBannerIdx] = useState(0);
  const [isBannerHovered, setIsBannerHovered] = useState(false);

  // Active banners list
  const activeBanners = heroBanners.filter((b) => b.isActive);

  // Auto-advance banner every 5 seconds
  useEffect(() => {
    if (activeBanners.length <= 1 || isBannerHovered) return;
    const interval = setInterval(() => {
      setCurrentBannerIdx((prev) => (prev + 1) % activeBanners.length);
    }, 5000);
    return () => clearInterval(interval);
  }, [activeBanners.length, isBannerHovered]);

  const handlePrevBanner = () => {
    setCurrentBannerIdx((prev) => (prev - 1 + activeBanners.length) % activeBanners.length);
  };

  const handleNextBanner = () => {
    setCurrentBannerIdx((prev) => (prev + 1) % activeBanners.length);
  };

  const currentBanner = activeBanners[currentBannerIdx] || activeBanners[0];

  // Flash deal countdown timer state (hours, minutes, seconds)
  const [timeLeft, setTimeLeft] = useState({
    hours: 14,
    minutes: 32,
    seconds: 48
  });

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

  // Filtered product slices
  const flashDeals = products.filter((p) => p.isFlashDeal && p.status === 'published');
  const bestSellers = products.filter((p) => p.isBestSeller && p.status === 'published').slice(0, 4);
  const newArrivals = products.filter((p) => p.isNewArrival && p.status === 'published').slice(0, 4);

  const tabFilteredProducts = products.filter((p) => {
    if (p.status !== 'published') return false;
    if (activeTab === 'all') return true;
    return p.category === activeTab;
  }).slice(0, 8);

  return (
    <div className="space-y-16 pb-12">
      {/* 1. Dynamic Hero Promotional Banner System with Slider */}
      {currentBanner && (
        <section
          onMouseEnter={() => setIsBannerHovered(true)}
          onMouseLeave={() => setIsBannerHovered(false)}
          className="relative overflow-hidden bg-stone-900 text-white rounded-3xl mx-4 sm:mx-6 lg:mx-8 mt-6 shadow-xl transition-all"
        >
          {/* Background ambient lighting */}
          <div className="absolute inset-0 bg-radial from-emerald-900/70 via-stone-900/90 to-stone-950 opacity-95 pointer-events-none"></div>

          <div className="relative max-w-7xl mx-auto px-6 sm:px-10 lg:px-12 py-14 sm:py-20 grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
            {/* Hero Copy */}
            <div className="lg:col-span-7 space-y-5 z-10">
              {/* Badge & Discount Tag */}
              <div className="flex flex-wrap items-center gap-2">
                <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-800/80 border border-emerald-600/50 text-emerald-300 text-xs font-bold backdrop-blur-xs">
                  <Sparkles className="w-3.5 h-3.5 text-amber-400" />
                  <span>{currentBanner.badgeBn} ({currentBanner.badge})</span>
                </span>
                {currentBanner.discountBadge && (
                  <span className="px-2.5 py-1 rounded-full bg-rose-600 text-white font-extrabold text-[11px] shadow-sm">
                    {currentBanner.discountBadge}
                  </span>
                )}
              </div>

              {/* Headline (90% Bangla dominant) */}
              <h1 className="text-3xl sm:text-5xl lg:text-6xl font-black tracking-tight leading-[1.15]">
                <span className="text-white block">{currentBanner.titleBn}</span>
                <span className="text-emerald-400 font-medium text-lg sm:text-2xl lg:text-3xl block mt-1">
                  {currentBanner.title}
                </span>
              </h1>

              {/* Subtitle */}
              <p className="text-xs sm:text-sm text-stone-200 max-w-xl leading-relaxed">
                <span className="font-semibold text-emerald-100 block text-sm sm:text-base mb-1">
                  {currentBanner.subtitleBn}
                </span>
                <span className="text-stone-300 text-xs">
                  {currentBanner.subtitle}
                </span>
              </p>

              {/* CTA Buttons */}
              <div className="flex flex-wrap items-center gap-3 pt-2">
                <button
                  onClick={() => {
                    if (currentBanner.targetProductSlug) {
                      navigateTo('product', { productSlug: currentBanner.targetProductSlug });
                    } else if (currentBanner.targetCategory) {
                      navigateTo('category', { categorySlug: currentBanner.targetCategory });
                    } else {
                      navigateTo('shop');
                    }
                  }}
                  className="py-3.5 px-8 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-stone-950 font-extrabold text-xs sm:text-sm transition-all duration-200 shadow-lg shadow-emerald-500/20 hover:scale-105 flex items-center gap-2"
                >
                  <span>{currentBanner.ctaTextBn} ({currentBanner.ctaText})</span>
                  <ArrowRight className="w-4 h-4" />
                </button>

                <button
                  onClick={() => navigateTo('shop', { query: 'deal' })}
                  className="py-3.5 px-6 rounded-xl bg-stone-800 hover:bg-stone-700 text-white font-bold text-xs sm:text-sm border border-stone-700 transition-colors flex items-center gap-2"
                >
                  <Flame className="w-4 h-4 text-rose-500" />
                  <span>ফ্ল্যাশ ডিল (Flash Deals)</span>
                </button>

                <button
                  onClick={triggerInstallApp}
                  className="hidden sm:inline-flex py-3.5 px-4 rounded-xl bg-emerald-950/80 hover:bg-emerald-900 text-emerald-300 font-semibold text-xs border border-emerald-800 transition-colors items-center gap-1.5"
                  title="মিক বাজার অ্যাপ ইনস্টল করুন"
                >
                  <Download className="w-3.5 h-3.5" />
                  <span>অ্যাপ ডাউনলোড (App)</span>
                </button>
              </div>

              {/* Quick Metrics */}
              <div className="pt-4 border-t border-stone-800/80 flex items-center gap-6 sm:gap-8 text-xs text-stone-400">
                <div>
                  <span className="block font-bold text-white text-base sm:text-lg">১০,০০০+</span>
                  <span className="text-[11px] text-stone-300">সন্তুষ্ট গ্রাহক (Customers)</span>
                </div>
                <div className="w-px h-6 bg-stone-800"></div>
                <div>
                  <span className="block font-bold text-white text-base sm:text-lg">১০০% খাঁটি</span>
                  <span className="text-[11px] text-stone-300">আসল পণ্য (100% Pure)</span>
                </div>
                <div className="w-px h-6 bg-stone-800"></div>
                <div>
                  <span className="block font-bold text-white text-base sm:text-lg">৬৪ জেলায়</span>
                  <span className="text-[11px] text-stone-300">ক্যাশ অন ডেলিভারি (COD)</span>
                </div>
              </div>
            </div>

            {/* Hero Visual Card */}
            <div className="lg:col-span-5 relative">
              <div className="relative mx-auto max-w-md aspect-4/5 rounded-2xl overflow-hidden shadow-2xl border border-stone-700/60 group">
                <img
                  src={currentBanner.imageUrl}
                  alt={currentBanner.title}
                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-stone-950/90 via-stone-950/20 to-transparent"></div>

                {/* Float Card on Hero */}
                <div className="absolute bottom-5 left-5 right-5 p-4 rounded-xl bg-white/95 text-stone-900 backdrop-blur-md shadow-xl border border-stone-200">
                  <div className="flex items-center justify-between">
                    <div>
                      <span className="text-[10px] font-bold uppercase tracking-wider text-emerald-800 block">
                        Featured Offer (বিশেষ অফার)
                      </span>
                      <h3 className="font-bold text-xs sm:text-sm truncate">
                        {currentBanner.title}
                      </h3>
                      <p className="text-[11px] text-stone-500 truncate">
                        {currentBanner.subtitleBn}
                      </p>
                    </div>
                    <button
                      onClick={() => navigateTo('shop')}
                      className="p-2.5 bg-emerald-700 hover:bg-emerald-800 text-white rounded-lg text-xs font-bold shrink-0 transition-colors ml-2"
                    >
                      View
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Carousel Arrows & Dots Controls */}
          {activeBanners.length > 1 && (
            <div className="absolute bottom-4 left-6 right-6 flex items-center justify-between z-20 pointer-events-none">
              {/* Prev / Next buttons */}
              <div className="flex gap-2 pointer-events-auto">
                <button
                  onClick={handlePrevBanner}
                  className="p-2 rounded-full bg-black/40 hover:bg-black/70 text-white backdrop-blur-xs transition-colors"
                  aria-label="Previous Slide"
                >
                  <ChevronLeft className="w-4 h-4" />
                </button>
                <button
                  onClick={handleNextBanner}
                  className="p-2 rounded-full bg-black/40 hover:bg-black/70 text-white backdrop-blur-xs transition-colors"
                  aria-label="Next Slide"
                >
                  <ChevronRight className="w-4 h-4" />
                </button>
              </div>

              {/* Indicator Dots */}
              <div className="flex items-center gap-1.5 pointer-events-auto">
                {activeBanners.map((_, idx) => (
                  <button
                    key={idx}
                    onClick={() => setCurrentBannerIdx(idx)}
                    className={`h-2 rounded-full transition-all ${
                      currentBannerIdx === idx
                        ? 'w-6 bg-emerald-400'
                        : 'w-2 bg-white/40 hover:bg-white/70'
                    }`}
                    aria-label={`Go to slide ${idx + 1}`}
                  />
                ))}
              </div>
            </div>
          )}
        </section>
      )}

      {/* 2. Customer Benefits Strip */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-white rounded-2xl border border-stone-200 p-6 shadow-xs grid grid-cols-2 lg:grid-cols-4 gap-6 divide-y sm:divide-y-0 sm:divide-x divide-stone-100">
          <div className="flex items-center gap-3.5 pt-3 sm:pt-0 sm:pl-3 first:pl-0">
            <div className="w-11 h-11 rounded-xl bg-emerald-50 text-emerald-700 flex items-center justify-center shrink-0">
              <Truck className="w-5 h-5" />
            </div>
            <div>
              <h4 className="font-bold text-xs sm:text-sm text-stone-900">
                দ্রুত ডেলিভারি (Express Delivery)
              </h4>
              <p className="text-[11px] text-stone-500">
                ঢাকায় ২৪-৪৮ ঘণ্টা, সারাদেশে ৭২ ঘণ্টা
              </p>
            </div>
          </div>

          <div className="flex items-center gap-3.5 pt-3 sm:pt-0 sm:pl-3">
            <div className="w-11 h-11 rounded-xl bg-emerald-50 text-emerald-700 flex items-center justify-center shrink-0">
              <ShieldCheck className="w-5 h-5" />
            </div>
            <div>
              <h4 className="font-bold text-xs sm:text-sm text-stone-900">
                ক্যাশ অন ডেলিভারি (COD)
              </h4>
              <p className="text-[11px] text-stone-500">
                পণ্য হাতে পেয়ে মূল্য পরিশোধ করুন
              </p>
            </div>
          </div>

          <div className="flex items-center gap-3.5 pt-3 sm:pt-0 sm:pl-3">
            <div className="w-11 h-11 rounded-xl bg-emerald-50 text-emerald-700 flex items-center justify-center shrink-0">
              <RotateCcw className="w-5 h-5" />
            </div>
            <div>
              <h4 className="font-bold text-xs sm:text-sm text-stone-900">
                ৭ দিনে সহজ রিটার্ন (7-Day Return)
              </h4>
              <p className="text-[11px] text-stone-500">
                ত্রুটিযুক্ত পণ্যে দ্রুত এক্সচেঞ্জ বা রিফান্ড
              </p>
            </div>
          </div>

          <div className="flex items-center gap-3.5 pt-3 sm:pt-0 sm:pl-3">
            <div className="w-11 h-11 rounded-xl bg-emerald-50 text-emerald-700 flex items-center justify-center shrink-0">
              <Headphones className="w-5 h-5" />
            </div>
            <div>
              <h4 className="font-bold text-xs sm:text-sm text-stone-900">
                সার্বক্ষণিক সহায়তা (24/7 Helpline)
              </h4>
              <p className="text-[11px] text-stone-500">
                ফোন কল এবং হোয়াটসঅ্যাপে বন্ধুসুলভ সেবা
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 3. Category Shortcuts */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-end justify-between mb-8">
          <div>
            <span className="text-xs font-bold text-emerald-800 tracking-wider uppercase">
              ক্যাটাগরি সমূহ (Collections)
            </span>
            <h2 className="text-2xl sm:text-3xl font-extrabold text-stone-900">
              জনপ্রিয় ক্যাটাগরি (Featured Categories)
            </h2>
          </div>
          <button
            onClick={() => navigateTo('shop')}
            className="text-xs font-bold text-emerald-700 hover:text-emerald-800 flex items-center gap-1 group"
          >
            <span>সবগুলো দেখুন (View All)</span>
            <ChevronRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
          </button>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
          {categories.map((cat) => (
            <div
              key={cat.id}
              onClick={() => navigateTo('category', { categorySlug: cat.slug })}
              className="group cursor-pointer bg-white rounded-2xl border border-stone-200/90 p-3.5 text-center transition-all duration-200 hover:border-emerald-400 hover:shadow-lg flex flex-col items-center"
            >
              <div className="relative w-20 h-20 rounded-full overflow-hidden bg-stone-100 mb-3 border-2 border-white shadow-xs group-hover:scale-105 transition-transform duration-300">
                <img
                  src={cat.image}
                  alt={cat.name}
                  className="w-full h-full object-cover"
                />
              </div>
              <h3 className="font-bold text-xs sm:text-sm text-stone-900 group-hover:text-emerald-700 transition-colors line-clamp-1">
                {cat.name}
              </h3>
              <span className="text-[11px] text-emerald-800 font-medium">
                {cat.nameBn}
              </span>
              <span className="text-[10px] text-stone-400 mt-0.5">
                {cat.itemCount} Items
              </span>
            </div>
          ))}
        </div>
      </section>

      {/* 4. Flash Deals Section with Countdown Timer */}
      {flashDeals.length > 0 && (
        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-gradient-to-r from-rose-900 via-rose-800 to-amber-900 rounded-3xl p-6 sm:p-8 text-white shadow-xl">
            {/* Header with real countdown */}
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-6 border-b border-rose-700/60 mb-6">
              <div className="flex items-center gap-3">
                <div className="p-3 bg-white/10 rounded-2xl backdrop-blur-xs">
                  <Flame className="w-7 h-7 text-amber-400 fill-amber-400" />
                </div>
                <div>
                  <div className="flex items-center gap-2">
                    <h2 className="text-2xl font-black tracking-tight">
                      ফ্ল্যাশ ডিল ধামাকা (Flash Deals)
                    </h2>
                    <span className="bg-amber-400 text-stone-950 text-[10px] font-black px-2 py-0.5 rounded uppercase">
                      ২৫% পর্যন্ত ছাড়
                    </span>
                  </div>
                  <p className="text-xs text-rose-200 mt-0.5">
                    দেরি করবেন না! অফারটি দ্রুত শেষ হতে চলেছে (সীমিত স্টক)।
                  </p>
                </div>
              </div>

              {/* Countdown Clocks */}
              <div className="flex items-center gap-2">
                <span className="text-xs font-semibold text-rose-200 mr-2 flex items-center gap-1">
                  <Clock className="w-3.5 h-3.5" />
                  সময় বাকি:
                </span>
                <div className="bg-black/40 border border-white/20 rounded-xl px-3 py-1.5 text-center min-w-12">
                  <span className="block font-black text-lg text-white">
                    {String(timeLeft.hours).padStart(2, '0')}
                  </span>
                  <span className="text-[9px] uppercase tracking-wider text-rose-200">ঘণ্টা</span>
                </div>
                <span className="font-bold text-white">:</span>
                <div className="bg-black/40 border border-white/20 rounded-xl px-3 py-1.5 text-center min-w-12">
                  <span className="block font-black text-lg text-white">
                    {String(timeLeft.minutes).padStart(2, '0')}
                  </span>
                  <span className="text-[9px] uppercase tracking-wider text-rose-200">মিনিট</span>
                </div>
                <span className="font-bold text-white">:</span>
                <div className="bg-black/40 border border-white/20 rounded-xl px-3 py-1.5 text-center min-w-12">
                  <span className="block font-black text-lg text-amber-400">
                    {String(timeLeft.seconds).padStart(2, '0')}
                  </span>
                  <span className="text-[9px] uppercase tracking-wider text-rose-200">সেকেন্ড</span>
                </div>
              </div>
            </div>

            {/* Flash Deal Products Grid */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
              {flashDeals.slice(0, 4).map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          </div>
        </section>
      )}

      {/* 5. Featured Products with Interactive Category Tabs */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-6">
          <div>
            <span className="text-xs font-bold text-emerald-800 tracking-wider uppercase">
              নির্বাচিত সংগ্রহ (Handpicked)
            </span>
            <h2 className="text-2xl sm:text-3xl font-extrabold text-stone-900">
              সেরা পণ্য সম্ভার (Featured Products)
            </h2>
          </div>

          {/* Clean Segmented Tabs */}
          <div className="flex flex-wrap items-center gap-1.5 p-1 bg-stone-100 rounded-xl">
            <button
              onClick={() => setActiveTab('all')}
              className={`px-3.5 py-1.5 text-xs font-semibold rounded-lg transition-colors ${
                activeTab === 'all'
                  ? 'bg-white text-stone-900 shadow-xs'
                  : 'text-stone-600 hover:text-stone-900'
              }`}
            >
              সবগুলো (All)
            </button>
            {categories.slice(0, 4).map((c) => (
              <button
                key={c.id}
                onClick={() => setActiveTab(c.slug)}
                className={`px-3.5 py-1.5 text-xs font-semibold rounded-lg transition-colors ${
                  activeTab === c.slug
                    ? 'bg-white text-stone-900 shadow-xs'
                    : 'text-stone-600 hover:text-stone-900'
                }`}
              >
                {c.nameBn} ({c.name})
              </button>
            ))}
          </div>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {tabFilteredProducts.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </section>

      {/* 6. Promotional Seasonal Banner */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="relative overflow-hidden bg-emerald-900 rounded-3xl text-white p-8 sm:p-12 grid grid-cols-1 md:grid-cols-12 gap-8 items-center shadow-xl">
          <div className="md:col-span-8 space-y-4">
            <span className="inline-block px-3 py-1 rounded-md bg-emerald-800 text-emerald-200 text-xs font-bold uppercase tracking-wider">
              ঐতিহ্যবাহী artisanal সংগ্রহ
            </span>
            <h3 className="text-2xl sm:text-4xl font-extrabold leading-tight">
              টাঙ্গাইলের জামদানি ও খাঁটি সুন্দরবনের মধু উৎসব <br />
              <span className="text-emerald-300 font-serif italic text-lg sm:text-2xl font-normal block mt-1">
                Tangail Jamdani & Sundarbans Pure Honey Fest
              </span>
            </h3>
            <p className="text-xs sm:text-sm text-emerald-100/90 max-w-xl leading-relaxed">
              কোনো মধ্যস্বত্বভোগী ছাড়া সরাসরি তাঁতি ও বনজীবীদের খাঁটি পণ্য আপনার দোরগোড়ায়। ১০০% গুণগত মান ও ন্যাচারাল বিশুদ্ধতার লিখিত গ্যারান্টি।
            </p>
            <div className="pt-2 flex items-center gap-4">
              <button
                onClick={() => navigateTo('category', { categorySlug: 'fashion' })}
                className="py-3 px-6 rounded-xl bg-white text-emerald-950 font-bold text-xs hover:bg-emerald-50 transition-colors shadow-sm"
              >
                জামদানি কালেকশন দেখুন
              </button>
              <button
                onClick={() => navigateTo('category', { categorySlug: 'organic-food' })}
                className="py-3 px-6 rounded-xl bg-emerald-800 hover:bg-emerald-700 text-white font-semibold text-xs border border-emerald-700 transition-colors"
              >
                খাঁটি মধু ও ফুড আইটেম
              </button>
            </div>
          </div>

          <div className="md:col-span-4 flex justify-center">
            <div className="relative w-full max-w-xs aspect-square rounded-2xl overflow-hidden border-2 border-emerald-700 shadow-2xl">
              <img
                src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?auto=format&fit=crop&w=600&q=80"
                alt="Sundarbans Honey"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* 7. Best Sellers & New Arrivals in 2 Columns */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
          {/* Best Sellers */}
          <div>
            <div className="flex items-center justify-between mb-6 pb-2 border-b border-stone-200">
              <h3 className="text-xl font-bold text-stone-900 flex items-center gap-2">
                <span className="w-2.5 h-2.5 rounded-full bg-emerald-600"></span>
                <span>সেরা বিক্রিত পণ্য (Best Sellers)</span>
              </h3>
              <button
                onClick={() => navigateTo('shop')}
                className="text-xs font-semibold text-emerald-700 hover:text-emerald-800"
              >
                আরও দেখুন →
              </button>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {bestSellers.map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          </div>

          {/* New Arrivals */}
          <div>
            <div className="flex items-center justify-between mb-6 pb-2 border-b border-stone-200">
              <h3 className="text-xl font-bold text-stone-900 flex items-center gap-2">
                <span className="w-2.5 h-2.5 rounded-full bg-amber-500"></span>
                <span>নতুন কালেকশন (New Arrivals)</span>
              </h3>
              <button
                onClick={() => navigateTo('shop')}
                className="text-xs font-semibold text-emerald-700 hover:text-emerald-800"
              >
                আরও দেখুন →
              </button>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {newArrivals.map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 8. Customer Reviews Section */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-xl mx-auto mb-10">
          <span className="text-xs font-bold text-emerald-800 tracking-wider uppercase">
            গ্রাহকদের বাস্তব মতামত (Customer Reviews)
          </span>
          <h2 className="text-2xl sm:text-3xl font-extrabold text-stone-900 mt-1">
            সারা বাংলাদেশের মানুষের ভালোবাসা ও আস্থা
          </h2>
          <p className="text-xs text-stone-500 mt-2">
            ঢাকা, চট্টগ্রাম, সিলেট, রাজশাহীসহ ৬৪ জেলার প্রকৃত ক্রেতাদের যাচাইকৃত রিভিউ।
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {reviews.slice(0, 3).map((rev) => (
            <div
              key={rev.id}
              className="bg-white rounded-2xl border border-stone-200 p-6 flex flex-col justify-between shadow-xs hover:border-emerald-300 transition-colors"
            >
              <div>
                <div className="flex items-center justify-between mb-4">
                  <div className="flex text-amber-400">
                    {[...Array(rev.rating)].map((_, i) => (
                      <Star key={i} className="w-4 h-4 fill-amber-400 text-amber-400" />
                    ))}
                  </div>
                  <Quote className="w-6 h-6 text-stone-200" />
                </div>

                <p className="text-xs sm:text-sm text-stone-700 leading-relaxed mb-6 italic">
                  "{rev.comment}"
                </p>
              </div>

              <div className="pt-4 border-t border-stone-100 flex items-center justify-between text-xs">
                <div>
                  <h4 className="font-bold text-stone-900">{rev.userName}</h4>
                  <span className="text-stone-400 text-[11px]">{rev.location || 'Dhaka, Bangladesh'}</span>
                </div>
                {rev.verifiedPurchase && (
                  <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-emerald-700">
                    <CheckCircle2 className="w-3.5 h-3.5" />
                    Verified (আসল ক্রেতা)
                  </span>
                )}
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};