'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import {
  BookOpen,
  Star,
  ShoppingBag,
  ArrowRight,
  ShieldCheck,
  Truck,
  Sparkles,
  Award,
  Flame,
  ChevronLeft,
  ChevronRight,
  Percent,
  CheckCircle2,
  Heart,
  Mail,
  Quote,
  Clock,
} from 'lucide-react';
import { useDispatch } from 'react-redux';
import { addToCart } from '@/store/cartSlice';
import { FlashDealsSection } from '@/components/common/FlashDealsSection';
import StoreLocatorMap from '@/components/common/StoreLocatorMap';
import api from '@/lib/api';
import { BOOK_COVER_PLACEHOLDER, bookCoverUrl } from '@/lib/bookImage';
import { useRecentlyViewed } from '@/hooks/useRecentlyViewed';

interface Book {
  id: string;
  title: string;
  slug: string;
  price: number;
  discountPrice?: number;
  coverImage?: string;
  ratingAverage: number;
  authorName?: string;
  categoryName?: string;
  language?: string;
  stock: number;
  isBestseller?: boolean;
}

export default function PremiumHomepage() {
  const dispatch = useDispatch();
  const [books, setBooks] = useState<Book[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeHeroIndex, setActiveHeroIndex] = useState(0);

  const { recentlyViewed, fetchDetails } = useRecentlyViewed();

  useEffect(() => {
    fetchDetails();
  }, [fetchDetails]);

  const heroSlides = [
    {
      title: 'Discover Ancient Wisdom & Sacred Scriptures',
      subtitle: 'The Mahabharata, Upanishads & Bhagavad Gita Unabridged',
      tag: 'Vedic Collection',
      cta: 'Explore Vedic Library',
      bg: 'from-amber-950 via-zinc-900 to-black',
      image: 'https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=800&auto=format&fit=crop&q=80',
    },
    {
      title: 'Timeless Classics of Indian Literature',
      subtitle: 'Works by Rabindranath Tagore, R.K. Narayan & Premchand',
      tag: 'Literary Bestsellers',
      cta: 'Browse Classics',
      bg: 'from-teal-950 via-zinc-900 to-black',
      image: 'https://images.unsplash.com/photo-1512820790803-83ca734da794?w=800&auto=format&fit=crop&q=80',
    },
    {
      title: '5,000 Years of History & Heritage',
      subtitle: 'Chronicles, Ancient Empires, and Regional Masterpieces',
      tag: 'History & Culture',
      cta: 'Read History Books',
      bg: 'from-purple-950 via-zinc-900 to-black',
      image: 'https://images.unsplash.com/photo-1532012197267-da84d127e765?w=800&auto=format&fit=crop&q=80',
    },
  ];

  useEffect(() => {
    async function fetchBooks() {
      try {
        const res = await api.get('/books?limit=12');
        setBooks(res.data.data.books || []);
      } catch (err) {
        setBooks([
          { id: '1', title: 'The Mahabharata: Complete Unabridged', slug: 'mahabharata', price: 1499, discountPrice: 1199, coverImage: BOOK_COVER_PLACEHOLDER, ratingAverage: 4.9, authorName: 'Vyasa (Tr. Bibek Debroy)', categoryName: 'Vedic & Spiritual', language: 'English', stock: 25, isBestseller: true },
          { id: '2', title: 'Malgudi Days', slug: 'malgudi-days', price: 399, discountPrice: 299, coverImage: BOOK_COVER_PLACEHOLDER, ratingAverage: 4.8, authorName: 'R.K. Narayan', categoryName: 'Fiction', language: 'English', stock: 40, isBestseller: true },
          { id: '3', title: 'Discovery of India', slug: 'discovery-of-india', price: 699, discountPrice: 549, coverImage: BOOK_COVER_PLACEHOLDER, ratingAverage: 4.7, authorName: 'Jawaharlal Nehru', categoryName: 'History', language: 'English', stock: 18, isBestseller: true },
          { id: '4', title: 'Gitanjali (Song Offerings)', slug: 'gitanjali', price: 299, discountPrice: 199, coverImage: BOOK_COVER_PLACEHOLDER, ratingAverage: 4.9, authorName: 'Rabindranath Tagore', categoryName: 'Poetry', language: 'Bengali', stock: 50 },
          { id: '5', title: 'Srimad Bhagavad Gita', slug: 'bhagavad-gita', price: 499, discountPrice: 399, coverImage: BOOK_COVER_PLACEHOLDER, ratingAverage: 5.0, authorName: 'Vyasa', categoryName: 'Vedic & Spiritual', language: 'Sanskrit', stock: 30 },
          { id: '6', title: 'Train to Pakistan', slug: 'train-to-pakistan', price: 350, discountPrice: 280, coverImage: BOOK_COVER_PLACEHOLDER, ratingAverage: 4.6, authorName: 'Khushwant Singh', categoryName: 'Literature', language: 'English', stock: 15 },
          { id: '7', title: 'Autobiography of a Yogi', slug: 'autobiography-yogi', price: 250, discountPrice: 199, coverImage: BOOK_COVER_PLACEHOLDER, ratingAverage: 4.8, authorName: 'Paramahansa Yogananda', categoryName: 'Vedic & Spiritual', language: 'English', stock: 12 },
          { id: '8', title: 'Shantaram', slug: 'shantaram', price: 450, discountPrice: 360, coverImage: BOOK_COVER_PLACEHOLDER, ratingAverage: 4.5, authorName: 'Gregory David Roberts', categoryName: 'Fiction', language: 'English', stock: 8 },
          { id: '9', title: 'The Palace of Illusions', slug: 'palace-of-illusions', price: 399, discountPrice: 320, coverImage: BOOK_COVER_PLACEHOLDER, ratingAverage: 4.7, authorName: 'Chitra Banerjee Divakaruni', categoryName: 'Fiction', language: 'English', stock: 14 },
          { id: '10', title: 'The Guide', slug: 'the-guide', price: 299, discountPrice: 240, coverImage: BOOK_COVER_PLACEHOLDER, ratingAverage: 4.6, authorName: 'R.K. Narayan', categoryName: 'Fiction', language: 'English', stock: 22 },
          { id: '11', title: 'Panchatantra: Moral Tales', slug: 'panchatantra', price: 199, discountPrice: 150, coverImage: BOOK_COVER_PLACEHOLDER, ratingAverage: 4.9, authorName: 'Vishnu Sharma', categoryName: 'Children Books', language: 'Sanskrit', stock: 60 },
          { id: '12', title: 'India Unbound', slug: 'india-unbound', price: 499, discountPrice: 399, coverImage: BOOK_COVER_PLACEHOLDER, ratingAverage: 4.7, authorName: 'Gurcharan Das', categoryName: 'History', language: 'English', stock: 10 }
        ]);
      } finally {
        setLoading(false);
      }
    }
    fetchBooks();
  }, []);

  const handleAddToCart = (book: Book) => {
    dispatch(
      addToCart({
        id: book.id,
        bookId: book.id,
        title: book.title,
        price: book.price,
        discountPrice: book.discountPrice,
        coverImage: book.coverImage,
        stock: book.stock,
      })
    );
  };

  return (
    <div className="space-y-16 pb-20">
      {/* 1. Hero Banner Carousel */}
      <section className="relative overflow-hidden bg-zinc-950 text-white min-h-[500px] flex items-center">
        <div className={`absolute inset-0 bg-gradient-to-r ${heroSlides[activeHeroIndex].bg} opacity-90 transition-all duration-700`} />
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 relative z-10 w-full">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-6">
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-saffron-500/20 border border-saffron-500/30 text-saffron-400 text-xs font-bold uppercase tracking-wider">
                <Sparkles className="w-3.5 h-3.5" /> {heroSlides[activeHeroIndex].tag}
              </div>
              <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight leading-tight">
                {heroSlides[activeHeroIndex].title}
              </h1>
              <p className="text-zinc-300 text-base sm:text-lg">
                {heroSlides[activeHeroIndex].subtitle}
              </p>
              <div className="flex flex-wrap gap-4 pt-2">
                <Link
                  href="/books"
                  className="px-7 py-3.5 rounded-2xl gradient-saffron font-bold text-sm text-white shadow-xl shadow-saffron-500/30 hover:scale-105 transition-transform flex items-center gap-2"
                >
                  {heroSlides[activeHeroIndex].cta} <ArrowRight className="w-4 h-4" />
                </Link>
              </div>
            </div>

            <div className="relative flex justify-center">
              <div className="w-full max-w-sm rounded-3xl overflow-hidden shadow-2xl border border-white/20 relative group">
                <img
                  src={heroSlides[activeHeroIndex].image}
                  alt="Spotlight Book"
                  className="w-full h-[380px] object-cover group-hover:scale-105 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent flex items-end p-6">
                  <div>
                    <span className="text-xs text-saffron-400 font-bold uppercase tracking-widest">Featured Collection</span>
                    <h3 className="text-lg font-extrabold text-white mt-1">Official Publisher Catalogue</h3>
                    <p className="text-xs text-zinc-300">Shipped directly from India worldwide</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Carousel Pagination Controls */}
          <div className="flex justify-center gap-2 mt-8">
            {heroSlides.map((_, idx) => (
              <button
                key={idx}
                onClick={() => setActiveHeroIndex(idx)}
                className={`w-3 h-3 rounded-full transition-all ${activeHeroIndex === idx ? 'bg-saffron-500 w-8' : 'bg-white/30'}`}
              />
            ))}
          </div>
        </div>
      </section>

      {/* 2. Category Pill Slider */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-4">
        <div className="flex items-center justify-between">
          <h2 className="text-xl font-extrabold text-zinc-900 dark:text-zinc-100 flex items-center gap-2">
            <BookOpen className="w-5 h-5 text-saffron-500" /> Explore Book Genres
          </h2>
          <Link href="/categories" className="text-xs font-bold text-saffron-600 hover:text-saffron-700">
            View All Categories →
          </Link>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
          {[
            { name: 'Vedic & Spiritual', count: '1,240 Titles', color: 'bg-amber-50 dark:bg-amber-950/40 text-amber-600' },
            { name: 'Indian Fiction', count: '2,890 Titles', color: 'bg-teal-50 dark:bg-teal-950/40 text-teal-600' },
            { name: 'History & Heritage', count: '940 Titles', color: 'bg-purple-50 dark:bg-purple-950/40 text-purple-600' },
            { name: 'Philosophy & Yoga', count: '620 Titles', color: 'bg-blue-50 dark:bg-blue-950/40 text-blue-600' },
            { name: 'Regional Languages', count: '3,100 Titles', color: 'bg-rose-50 dark:bg-rose-950/40 text-rose-600' },
            { name: 'Poetry & Dramatics', count: '450 Titles', color: 'bg-emerald-50 dark:bg-emerald-950/40 text-emerald-600' },
          ].map((cat, idx) => (
            <Link
              key={idx}
              href={`/books?category=${encodeURIComponent(cat.name)}`}
              className="p-4 rounded-2xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 shadow-sm hover:shadow-md hover:scale-105 transition-all text-center space-y-1 block"
            >
              <div className={`w-10 h-10 rounded-xl ${cat.color} flex items-center justify-center mx-auto font-bold text-sm`}>
                {cat.name[0]}
              </div>
              <h4 className="font-bold text-xs text-zinc-900 dark:text-zinc-100">{cat.name}</h4>
              <span className="text-[10px] text-zinc-400 font-semibold block">{cat.count}</span>
            </Link>
          ))}
        </div>
      </section>

      {/* Lightning Flash Deals with Live Countdown Clock */}
      <FlashDealsSection />

      {/* 3. Bestsellers Rank Section (#1, #2, #3 Badges) */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
        <div className="flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800 pb-4">
          <div>
            <h2 className="text-2xl font-extrabold text-zinc-900 dark:text-zinc-100 flex items-center gap-2">
              <Flame className="w-6 h-6 text-saffron-500" /> Bestselling Indian Classics
            </h2>
            <p className="text-xs text-zinc-500 mt-0.5">Top ranked books ordered by readers around the globe</p>
          </div>
          <Link href="/bestsellers" className="text-xs font-bold text-saffron-600 hover:text-saffron-700">
            Full Bestseller List →
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {books.slice(0, 3).map((book, rank) => (
            <div
              key={book.id}
              className="bg-white dark:bg-zinc-900 p-5 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-lg flex gap-4 items-center relative overflow-hidden group"
            >
              <div className="absolute top-0 left-0 w-10 h-10 gradient-saffron text-white font-extrabold text-sm flex items-center justify-center rounded-br-2xl shadow-md">
                #{rank + 1}
              </div>
              <div className="w-24 h-32 rounded-2xl overflow-hidden bg-zinc-100 dark:bg-zinc-800 shrink-0 mt-3">
                <img
                  src={bookCoverUrl(book.coverImage)}
                  alt={book.title}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform"
                />
              </div>
              <div className="flex-1 space-y-1 mt-3">
                <span className="text-[10px] text-saffron-600 font-extrabold uppercase tracking-wider">{book.categoryName}</span>
                <h3 className="font-extrabold text-sm text-zinc-900 dark:text-zinc-100 line-clamp-1">{book.title}</h3>
                <p className="text-xs text-zinc-500 font-medium">{book.authorName}</p>
                <div className="flex items-center gap-1 text-amber-500 text-xs pt-1">
                  <Star className="w-3.5 h-3.5 fill-amber-500" />
                  <span className="font-bold">{book.ratingAverage || 4.9}</span>
                </div>
                <div className="flex items-center justify-between pt-2">
                  <span className="text-base font-extrabold text-zinc-900 dark:text-zinc-100">
                    ₹{book.discountPrice || book.price}
                  </span>
                  <button
                    onClick={() => handleAddToCart(book)}
                    className="px-3 py-1.5 rounded-xl gradient-saffron text-white font-bold text-xs shadow hover:opacity-90 transition-opacity"
                  >
                    Add
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Featured Books Collection Grid - 12 Books */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
        <div className="flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800 pb-4">
          <div>
            <h2 className="text-2xl font-extrabold text-zinc-900 dark:text-zinc-100 flex items-center gap-2">
              <BookOpen className="w-5.5 h-5.5 text-saffron-500" /> Featured Scripture Collection
            </h2>
            <p className="text-xs text-zinc-500 mt-0.5">Explore our top 12 curated selections of Indian scriptures and heritage literature</p>
          </div>
          <Link href="/books" className="text-xs font-bold text-saffron-600 hover:text-saffron-700">
            View Entire Library →
          </Link>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {books.slice(0, 12).map((book) => (
            <div
              key={book.id}
              className="bg-white dark:bg-zinc-900 p-4 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm hover:shadow-lg transition-all flex flex-col justify-between group"
            >
              <div className="w-full aspect-[3/4] rounded-2xl overflow-hidden bg-zinc-100 dark:bg-zinc-800 relative">
                {book.isBestseller && (
                  <span className="absolute top-2 left-2 px-2 py-0.5 rounded bg-saffron-500 text-white text-[9px] font-extrabold uppercase z-10">Bestseller</span>
                )}
                <img
                  src={bookCoverUrl(book.coverImage)}
                  alt={book.title}
                  className="w-full h-full object-cover group-hover:scale-102 transition-transform"
                />
              </div>

              <div className="pt-4 space-y-1.5 flex-1 flex flex-col justify-between">
                <div>
                  <span className="text-[10px] text-zinc-400 font-bold uppercase tracking-wider block">{book.categoryName}</span>
                  <h3 className="font-extrabold text-xs text-zinc-950 dark:text-zinc-100 line-clamp-2 mt-0.5">{book.title}</h3>
                  <span className="text-[10px] text-zinc-550 block mt-0.5">{book.authorName}</span>
                </div>

                <div className="pt-2 flex items-center justify-between border-t border-zinc-100 dark:border-zinc-800 mt-2">
                  <div className="flex flex-col">
                    {book.discountPrice ? (
                      <>
                        <span className="text-xs font-bold text-zinc-400 line-through">₹{book.price}</span>
                        <span className="text-sm font-extrabold text-[#701a08]">₹{book.discountPrice}</span>
                      </>
                    ) : (
                      <span className="text-sm font-extrabold text-[#701a08]">₹{book.price}</span>
                    )}
                  </div>

                  <button
                    onClick={() => handleAddToCart(book)}
                    className="px-3 py-2 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold text-[10px] shadow-sm transition-colors"
                  >
                    Add
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* 4. Special Offers & Promotional Banner */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-gradient-to-r from-saffron-600 via-saffron-700 to-amber-700 rounded-3xl p-8 sm:p-12 text-white shadow-2xl relative overflow-hidden flex flex-col md:flex-row items-center justify-between gap-8">
          <div className="space-y-4 max-w-xl text-center md:text-left z-10">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/20 backdrop-blur-md text-xs font-extrabold uppercase tracking-widest">
              <Percent className="w-3.5 h-3.5" /> Festive Literary Special
            </div>
            <h2 className="text-3xl sm:text-4xl font-extrabold tracking-tight">
              Flat 25% OFF On Unabridged Sanskrit & Vedic Scripture Sets
            </h2>
            <p className="text-xs sm:text-sm text-white/90 leading-relaxed">
              Use promo code <span className="font-extrabold underline decoration-white">VEDIC25</span> at checkout. Express courier shipping included.
            </p>
            <Link
              href="/books?category=vedic"
              className="inline-flex items-center gap-2 px-6 py-3.5 rounded-2xl bg-white text-saffron-700 font-extrabold text-xs shadow-xl hover:bg-zinc-100 transition-colors"
            >
              Claim Offer Now <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
          <div className="w-64 h-64 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center shrink-0 border border-white/20 shadow-inner">
            <div className="text-center space-y-1">
              <span className="text-5xl font-extrabold">25%</span>
              <span className="block text-xs uppercase font-bold tracking-widest">OFF STOREWIDE</span>
            </div>
          </div>
        </div>
      </section>

      {/* 5. Featured Authors Section */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
        <div className="text-center space-y-2">
          <h2 className="text-2xl font-extrabold text-zinc-900 dark:text-zinc-100">Featured Indian Authors</h2>
          <p className="text-xs text-zinc-500 max-w-lg mx-auto">Explore works by Nobel Laureates, master storytellers, and modern chroniclers</p>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-4 gap-6">
          {[
            { name: 'Rabindranath Tagore', role: 'Nobel Laureate in Literature', works: '28 Works', image: 'https://images.unsplash.com/photo-1497633762265-9d179a990aa6?w=400&auto=format&fit=crop&q=80' },
            { name: 'R.K. Narayan', role: 'Creator of Malgudi', works: '19 Works', image: 'https://images.unsplash.com/photo-1532012197267-da84d127e765?w=400&auto=format&fit=crop&q=80' },
            { name: 'Ruskin Bond', role: 'Master of Short Fiction', works: '34 Works', image: 'https://images.unsplash.com/photo-1512820790803-83ca734da794?w=400&auto=format&fit=crop&q=80' },
            { name: 'Amish Tripathi', role: 'Mythological Fiction', works: '12 Works', image: 'https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=400&auto=format&fit=crop&q=80' },
          ].map((author, idx) => (
            <div key={idx} className="bg-white dark:bg-zinc-900 p-5 rounded-3xl border border-zinc-200 dark:border-zinc-800 text-center space-y-3 shadow-sm hover:shadow-xl transition-all">
              <div className="w-20 h-20 rounded-full overflow-hidden mx-auto bg-zinc-200 dark:bg-zinc-800 border-2 border-saffron-500">
                <img src={author.image} alt={author.name} className="w-full h-full object-cover" />
              </div>
              <div>
                <h4 className="font-extrabold text-sm text-zinc-900 dark:text-zinc-100">{author.name}</h4>
                <p className="text-[11px] text-zinc-500 font-medium mt-0.5">{author.role}</p>
                <span className="inline-block mt-2 text-[10px] font-extrabold px-2.5 py-0.5 rounded-full bg-saffron-50 dark:bg-saffron-950/40 text-saffron-600">
                  {author.works}
                </span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* 6. Featured Publishing Houses */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
        <div className="text-center space-y-1">
          <h3 className="text-xs uppercase font-extrabold tracking-widest text-zinc-400">Official Publisher Partners</h3>
          <p className="text-sm font-bold text-zinc-700 dark:text-zinc-300">Sourced directly from India's most prestigious presses</p>
        </div>

        <div className="flex flex-wrap items-center justify-center gap-8 opacity-75 grayscale hover:grayscale-0 transition-all">
          {['Penguin Random House India', 'Oxford University Press India', 'Motilal Banarsidass (MLBD)', 'HarperCollins India', 'Jaico Publishing House'].map((pub, idx) => (
            <span key={idx} className="font-extrabold text-sm text-zinc-600 dark:text-zinc-400 tracking-tight">
              • {pub}
            </span>
          ))}
        </div>
      </section>

      {/* Recently Viewed Books Section */}
      {recentlyViewed && recentlyViewed.length > 0 && (
        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
          <div className="flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800 pb-4">
            <div>
              <h2 className="text-2xl font-extrabold text-zinc-900 dark:text-zinc-100 flex items-center gap-2">
                <Clock className="w-5.5 h-5.5 text-saffron-500" /> Recently Viewed Books
              </h2>
              <p className="text-xs text-zinc-500 mt-0.5">Your recently browsed literary selections</p>
            </div>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {recentlyViewed.map((book) => (
              <div
                key={book.id}
                className="bg-white dark:bg-zinc-900 p-4 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm hover:shadow-lg transition-all flex flex-col justify-between group"
              >
                <Link href={`/books/${book.slug}`} className="block flex-1">
                  <div className="w-full aspect-[3/4] rounded-2xl overflow-hidden bg-zinc-100 dark:bg-zinc-800 relative">
                    <img
                      src={bookCoverUrl(book.coverImage)}
                      alt={book.title}
                      className="w-full h-full object-cover group-hover:scale-102 transition-transform"
                    />
                  </div>

                  <div className="pt-4 space-y-1.5">
                    <span className="text-[10px] text-zinc-400 font-bold uppercase tracking-wider block">{book.categoryName}</span>
                    <h3 className="font-extrabold text-xs text-zinc-950 dark:text-zinc-100 line-clamp-2 mt-0.5 group-hover:text-[#701a08] transition-colors">{book.title}</h3>
                    <span className="text-[10px] text-zinc-550 block mt-0.5">{book.authorName}</span>
                  </div>
                </Link>

                <div className="pt-2 flex items-center justify-between border-t border-zinc-100 dark:border-zinc-800 mt-2">
                  <div className="flex flex-col">
                    {book.discountPrice ? (
                      <>
                        <span className="text-xs font-bold text-zinc-400 line-through">₹{book.price}</span>
                        <span className="text-sm font-extrabold text-[#701a08]">₹{book.discountPrice}</span>
                      </>
                    ) : (
                      <span className="text-sm font-extrabold text-[#701a08]">₹{book.price}</span>
                    )}
                  </div>

                  <button
                    onClick={() => handleAddToCart(book as any)}
                    className="px-3 py-2 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold text-[10px] shadow-sm transition-colors"
                  >
                    Add
                  </button>
                </div>
              </div>
            ))}
          </div>
        </section>
      )}

      {/* 7. Reader Testimonials */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
        <div className="text-center space-y-2">
          <h2 className="text-2xl font-extrabold text-zinc-900 dark:text-zinc-100">Loved by Readers Worldwide</h2>
          <p className="text-xs text-zinc-500">Over 50,000+ orders shipped across 150 countries</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {[
            { quote: 'Ordered the complete Mahabharata set to London. Received in 4 days in pristine hardcover condition. Unmatched service!', author: 'Prof. David Miller', loc: 'London, UK' },
            { quote: 'Finding authentic Sanskrit texts in San Francisco was impossible until I found Indian Books Worldwide. Highly recommended.', author: 'Sunita Vasudevan', loc: 'California, USA' },
            { quote: 'Prompt customer care and genuine publisher prints. Will be ordering all my Indian history books from IBW.', author: 'Dr. Rahul Bose', loc: 'Sydney, Australia' },
          ].map((t, idx) => (
            <div key={idx} className="bg-white dark:bg-zinc-900 p-6 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-4 relative">
              <Quote className="w-8 h-8 text-saffron-500/20 absolute top-4 right-4" />
              <p className="text-xs text-zinc-600 dark:text-zinc-300 leading-relaxed italic">"{t.quote}"</p>
              <div className="pt-2 border-t border-zinc-100 dark:border-zinc-800">
                <span className="font-extrabold text-xs text-zinc-900 dark:text-zinc-100 block">{t.author}</span>
                <span className="text-[10px] text-zinc-400">{t.loc}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Google Maps Store Locator */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <StoreLocatorMap />
      </section>

      {/* 8. Newsletter Subscription Box */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-zinc-900 text-white rounded-3xl p-8 sm:p-12 border border-zinc-800 shadow-2xl flex flex-col md:flex-row items-center justify-between gap-8">
          <div className="space-y-2 text-center md:text-left">
            <h2 className="text-2xl font-extrabold tracking-tight">Join Our Global Readers Club</h2>
            <p className="text-xs text-zinc-400 max-w-md">
              Subscribe to receive weekly literary recommendations, rare manuscript release alerts, and an instant ₹200 discount coupon.
            </p>
          </div>

          <form onSubmit={(e) => { e.preventDefault(); alert('Thank you for subscribing! Your ₹200 discount coupon code is READ200.'); }} className="flex w-full md:w-auto gap-2">
            <input
              type="email"
              required
              placeholder="Enter your email address..."
              className="px-4 py-3 text-xs rounded-xl bg-zinc-800 border border-zinc-700 text-white focus:outline-none focus:ring-2 focus:ring-saffron-500 min-w-[260px]"
            />
            <button type="submit" className="px-6 py-3 rounded-xl gradient-saffron text-white font-bold text-xs shadow-lg shrink-0">
              Subscribe
            </button>
          </form>
        </div>
      </section>
    </div>
  );
}