// src\app\(root)\websites\WebsitesClient.tsx


'use client';

import { useState, useCallback } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import Image from 'next/image';
import Link from 'next/link';
import { motion, AnimatePresence } from 'framer-motion';
import { useCart } from '@/hooks/useCart';
import { useWishlist } from '@/hooks/useWishlist';
import {
  Search,
  Filter,
  X,
  ChevronLeft,
  ChevronRight,
  TrendingUp,
  Users,
  Globe,
  Shield,
  Heart,
  ShoppingCart,
  Star,
  SlidersHorizontal,
  ArrowUpDown,
  CheckCircle,
  Clock,
  ThumbsUp,
  ExternalLink,
  BarChart3,
  CheckCircle2,
  Info,
  AlertTriangle,
  AlertCircle,
} from 'lucide-react';

import type { searchParams } from './page';

// ─── Types ─────────────────────────────────────────────────────────────────────

interface Website {
  id: string;
  name: string;
  slug: string;
  domain: string;
  da: number;
  dr: number;
  traffic: string;
  spam_score: number;
  backlinks: number;
  link_type: string;
  base_price: number;
  sale_price: number | null;
  current_price?: number;
  content_service_price: number;
  description: string;
  featured_image: string | null;
  featured_image_alt_text: string | null;
  featured: boolean;
  status: string;
  category_name: string | null;
  category_slug: string | null;
  categories: Array<{ id: string; name: string; slug: string; type: string }>;
}

interface Category {
  id: number | string;
  slug: string;
  name: string;
}

interface Pagination {
  current_page: number;
  per_page: number;
  total: number;
  total_pages: number;
  has_next: boolean;
  has_prev: boolean;
}

interface WebsitesClientProps {
  initialData: {
    success: boolean;
    data: Website[];
    pagination: Pagination;
    filters: unknown;
  };
  categories: unknown[];
  searchParams: searchParams;
}

// ─── Pure helpers (module-level — never recreated on render) ───────────────────

const getCurrentPrice = (website: Website): number => {
  if (website.current_price) return website.current_price;
  if (website.sale_price) return website.sale_price;
  return website.base_price || 0;
};

const getTrafficValue = (traffic: string): number => {
  if (!traffic) return 0;
  return parseInt(traffic.replace(/[^0-9]/g, '')) || 0;
};

const getTrafficColor = (traffic: string): string => {
  const value = getTrafficValue(traffic);
  if (value >= 80_000_000) return 'text-green-600';
  if (value >= 50_000_000) return 'text-blue-600';
  if (value >= 25_000_000) return 'text-yellow-600';
  return 'text-orange-600';
};

const getScoreColor = (score: number, type: 'da' | 'dr' | 'spam'): string => {
  if (!score && score !== 0) return 'text-gray-400';
  if (type === 'spam') {
    if (score <= 2) return 'text-green-600';
    if (score <= 4) return 'text-yellow-600';
    return 'text-red-600';
  }
  if (score >= 90) return 'text-green-600';
  if (score >= 80) return 'text-blue-600';
  if (score >= 70) return 'text-yellow-600';
  return 'text-orange-600';
};

// Static option arrays — defined once at module level
const SORT_OPTIONS = [
  { value: 'created_at', label: 'Latest' },
  { value: 'da', label: 'Domain Authority' },
  { value: 'dr', label: 'Domain Rating' },
  { value: 'base_price', label: 'Price' },
  { value: 'name', label: 'Name' },
  { value: 'traffic', label: 'Traffic' },
];

const TRAFFIC_OPTIONS = [
  { value: '1000000', label: '1M+' },
  { value: '5000000', label: '5M+' },
  { value: '10000000', label: '10M+' },
  { value: '25000000', label: '25M+' },
  { value: '50000000', label: '50M+' },
  { value: '100000000', label: '100M+' },
];

const PRICE_OPTIONS = [
  { value: '100', label: '$100' },
  { value: '250', label: '$250' },
  { value: '500', label: '$500' },
  { value: '1000', label: '$1,000' },
  { value: '2500', label: '$2,500' },
  { value: '5000', label: '$5,000' },
];

const FADE_IN_UP = { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 } };
const STAGGER    = { animate: { transition: { staggerChildren: 0.05 } } };

const DEFAULT_PAGINATION: Pagination = {
  current_page: 1,
  per_page: 18,
  total: 0,
  total_pages: 0,
  has_next: false,
  has_prev: false,
};

// ─── Toast System ──────────────────────────────────────────────────────────────

type ToastType = 'success' | 'error' | 'info' | 'warning';
interface Toast { id: string; message: string; type: ToastType }

function ToastContainer({ toasts, onRemove }: { toasts: Toast[]; onRemove: (id: string) => void }) {
  const icons: Record<ToastType, React.ReactNode> = {
    success: <CheckCircle2 className="h-4 w-4 text-emerald-500" />,
    error:   <AlertCircle  className="h-4 w-4 text-rose-500"    />,
    info:    <Info         className="h-4 w-4 text-blue-500"    />,
    warning: <AlertTriangle className="h-4 w-4 text-amber-500" />,
  };
  const bg: Record<ToastType, string> = {
    success: 'bg-emerald-50 border-emerald-200',
    error:   'bg-rose-50 border-rose-200',
    info:    'bg-blue-50 border-blue-200',
    warning: 'bg-amber-50 border-amber-200',
  };
  return (
    <div className="fixed top-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none">
      <AnimatePresence>
        {toasts.map(toast => (
          <motion.div
            key={toast.id}
            initial={{ opacity: 0, x: 60, scale: 0.95 }}
            animate={{ opacity: 1, x: 0, scale: 1 }}
            exit={{ opacity: 0, x: 60, scale: 0.95 }}
            transition={{ duration: 0.2 }}
            className={`pointer-events-auto flex items-center gap-2 px-4 py-3 rounded-xl border shadow-lg text-sm font-medium text-slate-700 ${bg[toast.type]}`}
          >
            {icons[toast.type]}
            <span>{toast.message}</span>
            <button onClick={() => onRemove(toast.id)} className="ml-2 p-0.5 hover:bg-black/10 rounded-md transition-colors">
              <X className="h-3.5 w-3.5" />
            </button>
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}

function useToast() {
  const [toasts, setToasts] = useState<Toast[]>([]);
  const addToast = useCallback((message: string, type: ToastType = 'success') => {
    const id = crypto.randomUUID();
    setToasts(prev => [...prev, { id, message, type }]);
    setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 3500);
  }, []);
  const removeToast = useCallback((id: string) => {
    setToasts(prev => prev.filter(t => t.id !== id));
  }, []);
  return { toasts, addToast, removeToast };
}

// ─── Pagination component ──────────────────────────────────────────────────────

function PaginationBar({ pagination, onPage }: { pagination: Pagination; onPage: (p: number) => void }) {
  if (pagination.total_pages <= 1) return null;

  const { current_page: cur, total_pages: total } = pagination;

  // Build page number list with ellipsis
  const pages: (number | '…')[] = [];
  if (total <= 7) {
    for (let i = 1; i <= total; i++) pages.push(i);
  } else {
    pages.push(1);
    if (cur > 3) pages.push('…');
    const start = Math.max(2, cur - 1);
    const end   = Math.min(total - 1, cur + 1);
    for (let i = start; i <= end; i++) pages.push(i);
    if (cur < total - 2) pages.push('…');
    pages.push(total);
  }

  return (
    <div className="mt-8 flex justify-center">
      <div className="flex items-center gap-2">
        <button
          onClick={() => onPage(cur - 1)}
          disabled={!pagination.has_prev}
          aria-label="Previous page"
          className="p-2 rounded-lg border border-gray-200 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 transition"
        >
          <ChevronLeft className="h-5 w-5" />
        </button>

        <div className="flex items-center gap-1">
          {pages.map((p, i) =>
            p === '…' ? (
              <span key={`ellipsis-${i}`} className="px-2 text-gray-400 select-none">…</span>
            ) : (
              <button
                key={p}
                onClick={() => onPage(p)}
                aria-label={`Page ${p}`}
                aria-current={cur === p ? 'page' : undefined}
                className={`min-w-[2.5rem] h-10 rounded-lg font-semibold transition ${
                  cur === p
                    ? 'bg-gradient-to-r from-blue-600 to-cyan-600 text-white shadow-md'
                    : 'hover:bg-gray-100 text-gray-700'
                }`}
              >
                {p}
              </button>
            )
          )}
        </div>

        <button
          onClick={() => onPage(cur + 1)}
          disabled={!pagination.has_next}
          aria-label="Next page"
          className="p-2 rounded-lg border border-gray-200 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 transition"
        >
          <ChevronRight className="h-5 w-5" />
        </button>
      </div>

      {/* Page info */}
      <p className="ml-4 self-center text-sm text-gray-500">
        Page {cur} of {total}
      </p>
    </div>
  );
}

// ─── Main Component ────────────────────────────────────────────────────────────

export default function WebsitesClient({ initialData, categories, searchParams }: WebsitesClientProps) {
  const router   = useRouter();
  const pathname = usePathname();
  const { addWebsite: addToCart }                                    = useCart();
  const { addItem: addToWishlist, isInWishlist, removeItem: removeFromWishlist } = useWishlist();
  const { toasts, addToast, removeToast } = useToast();

  // Plain constants — no setter, data never mutates in this component
  const websites   = initialData?.data       || [];
  const pagination = initialData?.pagination ?? DEFAULT_PAGINATION;

  const [showFilters, setShowFilters] = useState(false);

  // Filter state — initialised from URL search params
  const [selectedCategory, setSelectedCategory] = useState(searchParams?.category || '');
  const [minDA,     setMinDA    ] = useState(searchParams?.minDA       || '');
  const [minDR,     setMinDR    ] = useState(searchParams?.minDR       || '');
  const [minTraffic,setMinTraffic] = useState(searchParams?.minTraffic || '');
  const [maxPrice,  setMaxPrice ] = useState(searchParams?.maxPrice    || '');
  const [linkType,  setLinkType ] = useState(searchParams?.linkType    || '');
  const [sortBy,    setSortBy   ] = useState(searchParams?.sortBy      || 'created_at');
  const [sortOrder, setSortOrder] = useState(searchParams?.sortOrder   || 'DESC');
  const [searchQuery, setSearchQuery] = useState(searchParams?.search  || '');

  // ── Helpers ──────────────────────────────────────────────────────────────────

  /** Build URLSearchParams from current filter state */
  const buildParams = useCallback(
    (overrides?: Partial<Record<string, string>>) => {
      const p = new URLSearchParams();
      const add = (key: string, val: string) => { if (val) p.set(key, val); };
      add('category', selectedCategory);
      add('minDA',    minDA);
      add('minDR',    minDR);
      add('minTraffic', minTraffic);
      add('maxPrice', maxPrice);
      add('linkType', linkType);
      add('sortBy',   sortBy);
      add('sortOrder',sortOrder);
      add('search',   searchQuery);
      p.set('page', '1');
      if (overrides) Object.entries(overrides).forEach(([k, v]) => v ? p.set(k, v) : p.delete(k));
      return p;
    },
    [selectedCategory, minDA, minDR, minTraffic, maxPrice, linkType, sortBy, sortOrder, searchQuery]
  );

  const applyFilters = useCallback(() => {
    router.push(`${pathname}?${buildParams().toString()}`);
    setShowFilters(false);
  }, [router, pathname, buildParams]);

  const clearFilters = useCallback(() => {
    setSelectedCategory('');
    setMinDA('');
    setMinDR('');
    setMinTraffic('');
    setMaxPrice('');
    setLinkType('');
    setSortBy('created_at');
    setSortOrder('DESC');
    setSearchQuery('');
    router.push(pathname);
  }, [router, pathname]);

  const handleSearch = useCallback((e: React.FormEvent) => {
    e.preventDefault();
    applyFilters();
  }, [applyFilters]);

  /** Toggle sort direction and immediately navigate */
  const handleToggleSortOrder = useCallback(() => {
    const next = sortOrder === 'DESC' ? 'ASC' : 'DESC';
    setSortOrder(next);
    const p = buildParams({ sortOrder: next });
    router.push(`${pathname}?${p.toString()}`);
  }, [sortOrder, buildParams, router, pathname]);

  const goToPage = useCallback((page: number) => {
    const p = buildParams({ page: page.toString() });
    router.push(`${pathname}?${p.toString()}`);
  }, [buildParams, router, pathname]);

  // ── Cart / Wishlist ───────────────────────────────────────────────────────────

  const handleAddToCart = useCallback((website: Website, e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    addToCart({
      type: 'website',
      websiteId: website.id,
      name: website.name,
      domain: website.domain,
      price: getCurrentPrice(website),
      requestedNiche: undefined,
      contentService: false,
    });
    addToast(`"${website.name}" added to cart!`, 'success');
  }, [addToCart, addToast]);

  const handleToggleWishlist = useCallback((website: Website, e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (isInWishlist(website.id)) {
      removeFromWishlist(website.id);
      addToast(`"${website.name}" removed from wishlist`, 'info');
    } else {
      addToWishlist({
        websiteId: website.id,
        name: website.name,
        domain: website.domain,
        price: getCurrentPrice(website),
        da: website.da,
        dr: website.dr,
        niches: [website.category_name || ''].filter(Boolean),
      });
      addToast(`"${website.name}" added to wishlist`, 'success');
    }
  }, [isInWishlist, removeFromWishlist, addToWishlist, addToast]);

  // ── Render ────────────────────────────────────────────────────────────────────

  return (
    <>
      <ToastContainer toasts={toasts} onRemove={removeToast} />

      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50/30 pt-28 pb-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

          {/* Header */}
          <div className="text-center mb-8 sm:mb-12">
            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
              All Guest Posting Websites
            </h1>
            <p className="text-base sm:text-lg text-gray-600 max-w-2xl mx-auto">
              Browse our curated collection of premium websites. Find the perfect platform to boost your SEO and online presence.
            </p>
          </div>

          {/* Search Bar */}
          <div className="mb-6 sm:mb-8">
            <form onSubmit={handleSearch} className="flex gap-3">
              <div className="flex-1 relative">
                <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={e => setSearchQuery(e.target.value)}
                  placeholder="Search websites by name, domain, or description..."
                  className="w-full pl-12 pr-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-all"
                />
              </div>
              <button
                type="submit"
                className="px-6 py-3 bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-xl font-semibold hover:shadow-lg transition-all"
              >
                Search
              </button>
              <button
                type="button"
                onClick={() => setShowFilters(v => !v)}
                className="px-6 py-3 bg-white border border-gray-200 rounded-xl font-semibold hover:bg-gray-50 transition-all flex items-center gap-2"
              >
                <SlidersHorizontal className="h-5 w-5" />
                <span className="hidden sm:inline">Filters</span>
              </button>
            </form>
          </div>

          {/* Filters Panel */}
          <AnimatePresence>
            {showFilters && (
              <motion.div
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: 'auto' }}
                exit={{ opacity: 0, height: 0 }}
                className="mb-8 bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden"
              >
                <div className="p-6">
                  <div className="flex items-center justify-between mb-6">
                    <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
                      <Filter className="h-5 w-5" />
                      Filter Websites
                    </h3>
                    <button onClick={() => setShowFilters(false)} className="p-1 hover:bg-gray-100 rounded-lg transition" aria-label="Close filters">
                      <X className="h-5 w-5" />
                    </button>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    {/* Category */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Category</label>
                      <select value={selectedCategory} onChange={e => setSelectedCategory(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="">All Categories</option>
                        {(categories as Category[]).map(cat => (
                          <option key={cat.id} value={cat.slug}>{cat.name}</option>
                        ))}
                      </select>
                    </div>

                    {/* Min DA */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Min Domain Authority (DA)</label>
                      <input type="number" value={minDA} onChange={e => setMinDA(e.target.value)} placeholder="Min DA" min="0" max="100" className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" />
                    </div>

                    {/* Min DR */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Min Domain Rating (DR)</label>
                      <input type="number" value={minDR} onChange={e => setMinDR(e.target.value)} placeholder="Min DR" min="0" max="100" className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" />
                    </div>

                    {/* Traffic */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Min Monthly Traffic</label>
                      <select value={minTraffic} onChange={e => setMinTraffic(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="">Any Traffic</option>
                        {TRAFFIC_OPTIONS.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
                      </select>
                    </div>

                    {/* Max Price */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Max Price</label>
                      <select value={maxPrice} onChange={e => setMaxPrice(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="">Any Price</option>
                        {PRICE_OPTIONS.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
                      </select>
                    </div>

                    {/* Link Type */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Link Type</label>
                      <select value={linkType} onChange={e => setLinkType(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="">All Links</option>
                        <option value="Dofollow">Dofollow</option>
                        <option value="Nofollow">Nofollow</option>
                      </select>
                    </div>

                    {/* Sort By */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
                      <select value={sortBy} onChange={e => setSortBy(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        {SORT_OPTIONS.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
                      </select>
                    </div>

                    {/* Sort Order */}
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Sort Order</label>
                      <select value={sortOrder} onChange={e => setSortOrder(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="DESC">Descending</option>
                        <option value="ASC">Ascending</option>
                      </select>
                    </div>
                  </div>

                  <div className="flex gap-3 mt-6 pt-4 border-t border-gray-200">
                    <button onClick={applyFilters} className="px-6 py-2 bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg font-semibold hover:shadow-lg transition-all">
                      Apply Filters
                    </button>
                    <button onClick={clearFilters} className="px-6 py-2 bg-gray-100 text-gray-700 rounded-lg font-semibold hover:bg-gray-200 transition-all">
                      Clear All
                    </button>
                  </div>
                </div>
              </motion.div>
            )}
          </AnimatePresence>

          {/* Results Count + Sort Toggle */}
          <div className="flex items-center justify-between mb-6">
            <p className="text-sm text-gray-600">
              Showing <span className="font-semibold text-gray-900">{websites.length}</span> of{' '}
              <span className="font-semibold text-gray-900">{pagination.total}</span> websites
            </p>
            <button
              onClick={handleToggleSortOrder}
              className="flex items-center gap-1 text-sm text-gray-600 hover:text-blue-600 transition"
            >
              <ArrowUpDown className="h-4 w-4" />
              {sortOrder === 'DESC' ? 'Descending' : 'Ascending'}
            </button>
          </div>

          {/* Websites Grid */}
          {websites.length === 0 ? (
            <div className="text-center py-16 bg-white rounded-2xl shadow-md">
              <Globe className="h-16 w-16 text-gray-300 mx-auto mb-4" />
              <h3 className="text-xl font-semibold text-gray-900 mb-2">No websites found</h3>
              <p className="text-gray-500">Try adjusting your filters or search query</p>
              <button onClick={clearFilters} className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition">
                Clear Filters
              </button>
            </div>
          ) : (
            <motion.div
              variants={STAGGER}
              initial="initial"
              animate="animate"
              className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
            >
              {websites.map(website => {
                const currentPrice = getCurrentPrice(website);
                return (
                  <motion.div
                    key={website.id}
                    variants={FADE_IN_UP}
                    whileHover={{ y: -4 }}
                    className="group bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100"
                  >
                    <Link href={`/website/${website.slug}`} className="block">
                      {/* Image */}
                      <div className="relative h-48 overflow-hidden bg-gradient-to-r from-blue-500/10 to-cyan-500/10">
                        {website.featured_image ? (
                          <Image
                            src={website.featured_image}
                            alt={website.featured_image_alt_text || website.name}
                            fill
                            className="object-cover group-hover:scale-105 transition-transform duration-500"
                          />
                        ) : (
                          <div className="absolute inset-0 flex items-center justify-center">
                            <Globe className="h-12 w-12 text-gray-400" />
                          </div>
                        )}

                        {website.featured && (
                          <div className="absolute top-3 left-3">
                            <span className="inline-flex items-center gap-1 bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-2 py-1 rounded-lg text-xs font-semibold">
                              <Star className="h-3 w-3" />
                              Featured
                            </span>
                          </div>
                        )}

                        <button
                          onClick={e => handleToggleWishlist(website, e)}
                          aria-label={isInWishlist(website.id) ? 'Remove from wishlist' : 'Add to wishlist'}
                          className="absolute top-3 right-3 p-2 bg-white/90 backdrop-blur-sm hover:bg-white rounded-full transition-all z-10"
                        >
                          <Heart className={`h-4 w-4 transition-colors ${isInWishlist(website.id) ? 'fill-red-500 text-red-500' : 'text-gray-600 hover:text-red-500'}`} />
                        </button>
                      </div>

                      {/* Content */}
                      <div className="p-5">
                        <div className="mb-3">
                          <h3 className="font-bold text-lg text-gray-900 group-hover:text-blue-600 transition-colors mb-1 truncate">
                            {website.name}
                          </h3>
                          <div className="flex items-center gap-1 text-sm text-gray-500">
                            <Globe className="h-3 w-3" />
                            <span className="truncate">{website.domain}</span>
                            <ExternalLink className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity" />
                          </div>
                        </div>

                        {/* Metrics */}
                        <div className="grid grid-cols-4 gap-2 mb-4">
                          {[
                            { Icon: TrendingUp, value: `DA ${website.da || 0}`, color: getScoreColor(website.da, 'da') },
                            { Icon: BarChart3,  value: `DR ${website.dr || 0}`, color: getScoreColor(website.dr, 'dr') },
                            { Icon: Users,      value: website.traffic || '0',  color: getTrafficColor(website.traffic) },
                            { Icon: Shield,     value: `SS ${website.spam_score || 0}`, color: getScoreColor(website.spam_score, 'spam') },
                          ].map(({ Icon, value, color }) => (
                            <div key={value} className="text-center">
                              <Icon className={`h-4 w-4 mx-auto mb-1 ${color}`} />
                              <div className={`text-sm font-bold ${color}`}>{value}</div>
                            </div>
                          ))}
                        </div>

                        {/* Categories */}
                        {website.categories && website.categories.length > 0 && (
                          <div className="flex flex-wrap gap-1 mb-3">
                            {website.categories.slice(0, 2).map(cat => (
                              <span key={cat.id} className="text-xs px-2 py-0.5 bg-gray-100 text-gray-600 rounded-full">{cat.name}</span>
                            ))}
                            {website.categories.length > 2 && (
                              <span className="text-xs px-2 py-0.5 bg-gray-100 text-gray-600 rounded-full">+{website.categories.length - 2}</span>
                            )}
                          </div>
                        )}

                        {/* Link Type Badge */}
                        <div className="mb-3">
                          <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${website.link_type === 'Dofollow' ? 'bg-green-100 text-green-700' : 'bg-orange-100 text-orange-700'}`}>
                            {website.link_type || 'Dofollow'}
                          </span>
                        </div>

                        {/* Price + Add to Cart */}
                        <div className="flex items-center justify-between pt-3 border-t border-gray-100">
                          <div>
                            <span className="text-2xl font-bold text-blue-600">${currentPrice.toLocaleString()}</span>
                            <span className="text-xs text-gray-500 ml-1">/ post</span>
                            {website.sale_price && website.sale_price > 0 && (
                              <div className="text-xs text-gray-400 line-through">${website.base_price?.toLocaleString() || 0}</div>
                            )}
                          </div>
                          <button
                            onClick={e => handleAddToCart(website, e)}
                            className="flex items-center gap-2 px-3 py-2 bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white text-sm rounded-lg font-semibold transition-all duration-300"
                          >
                            <ShoppingCart className="h-4 w-4" />
                            Add to Cart
                          </button>
                        </div>
                      </div>
                    </Link>
                  </motion.div>
                );
              })}
            </motion.div>
          )}

          {/* Pagination */}
          <PaginationBar pagination={pagination} onPage={goToPage} />

          {/* Trust Section */}
          <div className="mt-12 text-center">
            <div className="flex flex-wrap justify-center gap-6">
              {[
                { Icon: CheckCircle, label: '100% Verified Websites' },
                { Icon: Clock,       label: '24-Hour Delivery'       },
                { Icon: ThumbsUp,    label: 'Satisfaction Guaranteed' },
              ].map(({ Icon, label }) => (
                <div key={label} className="flex items-center gap-2 text-sm text-gray-500">
                  <Icon className="h-4 w-4 text-green-500" />
                  <span>{label}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}