// src/app/(root)/website/[slug]/WebsiteDetailClient.tsx

'use client';

import { useCart } from '@/hooks/useCart';
import { useWishlist } from '@/hooks/useWishlist';
import { motion, AnimatePresence } from 'framer-motion';
import { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import {
  TrendingUp,
  Users,
  Globe,
  Shield,
  Heart,
  ShoppingCart,
  MessageCircle,
  CheckCircle,
  Star,
  Link as LinkIcon,
  Share2,
  ExternalLink,
  Sparkles,
  ChevronRight,
  Clock,
  BarChart3,
  Layers,
  FileText,
  ThumbsUp,
  Zap,
  Crown,
} from 'lucide-react';

interface NicheOption {
  id: string;
  name: string;
  slug: string;
  type: 'GENERAL' | 'SPECIAL';
  price?: number;
  originalPrice?: number;
}

interface WebsiteDetail {
  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;
  content_service_price: number;
  description: string;
  featured_image: string | null;
  featured_image_alt_text: string | null;
  meta_title: string | null;
  meta_description: string | null;
  schemas: unknown[];
  status: string;
  featured: boolean;
  category_name: string | null;
  category_slug: string | null;
  generalNiches: NicheOption[];
  specialNiches: NicheOption[];
}

interface RelatedWebsite {
  id: string;
  name: string;
  slug: string;
  domain: string;
  da: number;
  dr: number;
  traffic: string;
  base_price: number;
  sale_price: number | null;
  featured_image: string | null;
}

interface WebsiteDetailClientProps {
  initialData: {
    website: WebsiteDetail;
    relatedWebsites: RelatedWebsite[];
  };
  slug: string;
}

export default function WebsiteDetailClient({ initialData }: WebsiteDetailClientProps) {

  const { addWebsite: addToCart } = useCart();
  const { addItem: addToWishlist, isInWishlist, removeItem: removeFromWishlist } = useWishlist();

  const [website] = useState(initialData.website);
  const [relatedWebsites] = useState(initialData.relatedWebsites || []);
  const [copied, setCopied] = useState(false);
  const [selectedNiche, setSelectedNiche] = useState<NicheOption | null>(null);
  const [includeContentService, setIncludeContentService] = useState(false);
  const [showConsultation, setShowConsultation] = useState(false);
  const [showToast, setShowToast] = useState(false);
  const [toastMessage, setToastMessage] = useState('');
  const [consultationForm, setConsultationForm] = useState({
    name: '',
    email: '',
    message: '',
  });
  const [imageError, setImageError] = useState(false);

  const standardPrice = website.sale_price || website.base_price;
  
  const getCurrentPrice = () => {
    if (selectedNiche?.type === 'SPECIAL' && selectedNiche.price) {
      return selectedNiche.price;
    }
    return standardPrice;
  };

  const getTotalPrice = () => {
    const basePrice = getCurrentPrice();
    const contentPrice = includeContentService ? website.content_service_price : 0;
    return basePrice + contentPrice;
  };

  // Show toast notification
  const showToastNotification = (message: string) => {
    setToastMessage(message);
    setShowToast(true);
    setTimeout(() => {
      setShowToast(false);
    }, 3000);
  };

  const handleAddToCart = (e?: React.MouseEvent) => {
    if (e) e.stopPropagation();
    
    const totalPrice = getTotalPrice();

    addToCart({
      type: 'website',
      websiteId: website.id,
      name: website.name,
      domain: website.domain,
      price: totalPrice,
      requestedNiche: selectedNiche?.id || undefined,
      contentService: includeContentService,
      contentServicePrice: includeContentService ? website.content_service_price : undefined,
      da: website.da,
      dr: website.dr,
    });
    
    showToastNotification(`${website.name} added to cart successfully!`);
  };

  const handleAddRelatedToCart = (relatedWebsite: RelatedWebsite, e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    
    const price = relatedWebsite.sale_price || relatedWebsite.base_price;
    
    addToCart({
      type: 'website',
      websiteId: relatedWebsite.id,
      name: relatedWebsite.name,
      domain: relatedWebsite.domain,
      price: price,
      requestedNiche: undefined,
      contentService: false,
      contentServicePrice: undefined,
      da: relatedWebsite.da,
      dr: relatedWebsite.dr,
    });
    
    showToastNotification(`${relatedWebsite.name} added to cart successfully!`);
  };

  const handleToggleWishlist = () => {
    if (isInWishlist(website.id)) {
      removeFromWishlist(website.id);
      showToastNotification(`${website.name} removed from wishlist`);
    } else {
      addToWishlist({
        websiteId: website.id,
        name: website.name,
        domain: website.domain,
        price: standardPrice,
        da: website.da,
        dr: website.dr,
        niches: [website.category_name || ''].filter(Boolean),
      });
      showToastNotification(`${website.name} added to wishlist`);
    }
  };

  const handleShare = async () => {
    const url = window.location.href;
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
      showToastNotification('Link copied to clipboard!');
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };

  const handleConsultationSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Consultation request:', consultationForm);
    setShowConsultation(false);
    showToastNotification('Thank you! Our team will contact you shortly.');
  };

  const getTrafficColor = (traffic: string) => {
    const value = parseInt(traffic.replace(/[^0-9]/g, ''));
    if (value >= 80000000) return 'text-green-600';
    if (value >= 50000000) return 'text-blue-600';
    if (value >= 25000000) return 'text-yellow-600';
    return 'text-orange-600';
  };

  const getScoreColor = (score: number, type: 'da' | 'dr' | 'spam') => {
    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';
  };

  const fadeInUp = {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
  };

  return (
    <>
      {/* Toast Notification */}
      <AnimatePresence>
        {showToast && (
          <motion.div
            initial={{ opacity: 0, y: -50 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -50 }}
            className="fixed top-24 left-1/2 transform -translate-x-1/2 z-50 bg-green-500 text-white px-6 py-3 rounded-xl shadow-lg flex items-center gap-2 whitespace-nowrap"
          >
            <CheckCircle className="h-5 w-5" />
            <span>{toastMessage}</span>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Schema Markup */}
      {website.schemas && website.schemas.length > 0 && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(website.schemas),
          }}
        />
      )}

      <div className="min-h-screen bg-linear-to-br from-slate-50 via-white to-blue-50/30 pt-28 pb-12">
        {/* Breadcrumb */}
        <div className="bg-white/80 backdrop-blur-sm border-b border-gray-200 top-18 z-40">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div className="flex items-center gap-2 text-sm">
              <Link href="/" className="text-gray-500 hover:text-blue-600 transition-colors">
                Home
              </Link>
              <ChevronRight className="h-4 w-4 text-gray-400" />
              <Link href="/websites" className="text-gray-500 hover:text-blue-600 transition-colors">
                Websites
              </Link>
              <ChevronRight className="h-4 w-4 text-gray-400" />
              <span className="text-gray-900 font-medium truncate">{website.name}</span>
            </div>
          </div>
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12">
            {/* Main Content Column */}
            <div className="lg:col-span-2 space-y-8">
              {/* Header with Image */}
              <motion.div
                {...fadeInUp}
                className="bg-white rounded-2xl shadow-xl overflow-hidden"
                >
                {website.featured_image && !imageError ? (
                    <div className="relative h-48 sm:h-64 lg:h-80 w-full">
                    <Image
                        src={website.featured_image}
                        alt={website.featured_image_alt_text || website.name}
                        fill
                        className="object-cover"
                        priority
                        onError={() => setImageError(true)}
                    />
                    </div>
                ) : (
                    <div className="h-48 sm:h-64 lg:h-80 w-full bg-linear-to-r from-blue-500/10 to-cyan-500/10 flex items-center justify-center">
                    <div className="text-center px-4">
                        <Globe className="h-12 w-12 sm:h-16 sm:w-16 text-gray-400 mx-auto mb-4" />
                        <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900">
                        {website.name}
                        </h1>
                    </div>
                    </div>
                )}
                
                <div className="p-4 sm:p-6 lg:p-8">
                    <div className="flex flex-wrap items-start justify-between gap-4">
                    <div className="flex-1">
                        <div className="flex flex-wrap items-center gap-2 mb-2">
                        {website.featured && (
                            <span className="inline-flex items-center gap-1 bg-linear-to-r from-yellow-500 to-orange-500 text-white px-2 sm:px-3 py-1 rounded-full text-xs font-semibold">
                            <Star className="h-3 w-3" />
                            Featured
                            </span>
                        )}
                        {website.category_name && (
                            <span className="inline-flex items-center gap-1 bg-blue-100 text-blue-700 px-2 sm:px-3 py-1 rounded-full text-xs font-semibold">
                            <Layers className="h-3 w-3" />
                            {website.category_name}
                            </span>
                        )}
                        </div>
                        {!website.featured_image && (
                        <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-2">
                            {website.name}
                        </h1>
                        )}
                        <Link
                        href={`https://${website.domain}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 transition-colors group text-sm sm:text-base"
                        >
                        <Globe className="h-4 w-4" />
                        <span>{website.domain}</span>
                        <ExternalLink className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity" />
                        </Link>
                    </div>
                    
                    <div className="flex items-center gap-3">
                        {/* Add to Cart Button with Price */}
                        <button
                        onClick={handleAddToCart}
                        className="flex items-center gap-2 bg-linear-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-4 sm:px-6 py-2 sm:py-2.5 rounded-xl font-semibold shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105 text-sm sm:text-base"
                        >
                        <ShoppingCart className="h-4 w-4 sm:h-5 sm:w-5" />
                        <span className="hidden sm:inline">Add to Cart</span>
                        <span className="sm:hidden">Buy</span>
                        <span className="font-bold">${getTotalPrice().toLocaleString()}</span>
                        </button>
                        
                        {/* Share Button */}
                        <button
                        onClick={handleShare}
                        className="p-2 bg-gray-100 hover:bg-gray-200 rounded-xl transition-colors relative group"
                        title="Share"
                        >
                        {copied ? (
                            <CheckCircle className="h-5 w-5 text-green-600" />
                        ) : (
                            <Share2 className="h-5 w-5 text-gray-600" />
                        )}
                        </button>
                        
                        {/* Wishlist Button */}
                        <button
                        onClick={handleToggleWishlist}
                        className="p-2 bg-gray-100 hover:bg-gray-200 rounded-xl transition-colors group"
                        title={isInWishlist(website.id) ? 'Remove from wishlist' : 'Add to wishlist'}
                        >
                        <Heart
                            className={`h-5 w-5 transition-colors ${
                            isInWishlist(website.id)
                                ? 'fill-red-500 text-red-500'
                                : 'text-gray-600 group-hover:text-red-500'
                            }`}
                        />
                        </button>
                    </div>
                    </div>
                </div>
                </motion.div>

              {/* Metrics Grid - Responsive */}
              <motion.div
                {...fadeInUp}
                transition={{ delay: 0.1 }}
                className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4"
              >
                <div className="bg-white rounded-xl shadow-md p-3 sm:p-4 text-center hover:shadow-lg transition-shadow">
                  <TrendingUp className={`h-5 w-5 sm:h-6 sm:w-6 mx-auto mb-2 ${getScoreColor(website.da, 'da')}`} />
                  <div className={`text-lg sm:text-2xl font-bold ${getScoreColor(website.da, 'da')}`}>
                    DA {website.da}
                  </div>
                  <div className="text-xs text-gray-500">Domain Authority</div>
                </div>
                
                <div className="bg-white rounded-xl shadow-md p-3 sm:p-4 text-center hover:shadow-lg transition-shadow">
                  <BarChart3 className={`h-5 w-5 sm:h-6 sm:w-6 mx-auto mb-2 ${getScoreColor(website.dr, 'dr')}`} />
                  <div className={`text-lg sm:text-2xl font-bold ${getScoreColor(website.dr, 'dr')}`}>
                    DR {website.dr}
                  </div>
                  <div className="text-xs text-gray-500">Domain Rating</div>
                </div>
                
                <div className="bg-white rounded-xl shadow-md p-3 sm:p-4 text-center hover:shadow-lg transition-shadow">
                  <Users className={`h-5 w-5 sm:h-6 sm:w-6 mx-auto mb-2 ${getTrafficColor(website.traffic)}`} />
                  <div className={`text-lg sm:text-2xl font-bold ${getTrafficColor(website.traffic)}`}>
                    {website.traffic}
                  </div>
                  <div className="text-xs text-gray-500">Monthly Traffic</div>
                </div>
                
                <div className="bg-white rounded-xl shadow-md p-3 sm:p-4 text-center hover:shadow-lg transition-shadow">
                  <Shield className={`h-5 w-5 sm:h-6 sm:w-6 mx-auto mb-2 ${getScoreColor(website.spam_score, 'spam')}`} />
                  <div className={`text-lg sm:text-2xl font-bold ${getScoreColor(website.spam_score, 'spam')}`}>
                    SS {website.spam_score}
                  </div>
                  <div className="text-xs text-gray-500">Spam Score</div>
                </div>
              </motion.div>

              {/* Description */}
              <motion.div
                {...fadeInUp}
                transition={{ delay: 0.2 }}
                className="bg-white rounded-2xl shadow-md p-4 sm:p-6 lg:p-8"
              >
                <h2 className="text-lg sm:text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                  <FileText className="h-5 w-5 text-blue-600" />
                  About This Website
                </h2>
                <div className="prose prose-blue max-w-none">
                  <p className="text-gray-600 leading-relaxed whitespace-pre-wrap text-sm sm:text-base">
                    {website.description}
                  </p>
                </div>
              </motion.div>

              {/* Related Websites - Always visible add to cart button for mobile */}
              <motion.div
                {...fadeInUp}
                transition={{ delay: 0.3 }}
                className="bg-white rounded-2xl shadow-md p-4 sm:p-6 lg:p-8"
              >
                <h3 className="text-lg sm:text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                  <Sparkles className="h-5 w-5 text-blue-600" />
                  Similar Websites You Might Like
                  {relatedWebsites.length > 0 && (
                    <span className="text-xs sm:text-sm text-gray-500 ml-2">({relatedWebsites.length})</span>
                  )}
                </h3>
                
                {relatedWebsites.length === 0 ? (
                  <div className="text-center py-8 sm:py-12">
                    <Globe className="h-12 w-12 sm:h-16 sm:w-16 text-gray-300 mx-auto mb-4" />
                    <p className="text-gray-500 text-sm sm:text-base">No similar websites found</p>
                  </div>
                ) : (
                  <div className="grid grid-cols-1 gap-4">
                    {relatedWebsites.map((related) => {
                      const relatedPrice = related.sale_price || related.base_price;
                      return (
                        <div
                          key={related.id}
                          className="group relative"
                        >
                          <Link
                            href={`/website/${related.slug}`}
                            className="block"
                          >
                            <div className="flex flex-col sm:flex-row sm:items-start gap-4 p-4 rounded-xl border border-gray-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300 bg-white">
                              {related.featured_image ? (
                                <div className="relative w-full sm:w-16 h-32 sm:h-16 shrink-0">
                                  <Image
                                    src={related.featured_image}
                                    alt={related.name}
                                    fill
                                    className="rounded-lg object-cover"
                                  />
                                </div>
                              ) : (
                                <div className="w-full sm:w-16 h-32 sm:h-16 shrink-0 bg-linear-to-r from-blue-100 to-cyan-100 rounded-lg flex items-center justify-center">
                                  <Globe className="h-8 w-8 text-blue-500" />
                                </div>
                              )}
                              <div className="flex-1 min-w-0">
                                <h4 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors truncate text-base sm:text-lg">
                                  {related.name}
                                </h4>
                                <div className="flex flex-wrap items-center gap-2 sm:gap-3 mt-2 text-xs sm:text-sm text-gray-500">
                                  <div className="flex items-center gap-1">
                                    <TrendingUp className="h-3 w-3" />
                                    <span>DA {related.da}</span>
                                  </div>
                                  <div className="flex items-center gap-1">
                                    <BarChart3 className="h-3 w-3" />
                                    <span>DR {related.dr}</span>
                                  </div>
                                  <div className="flex items-center gap-1">
                                    <Users className="h-3 w-3" />
                                    <span>{related.traffic}</span>
                                  </div>
                                </div>
                                <div className="mt-3 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                                  <div>
                                    <span className="text-lg font-bold text-blue-600">
                                      ${relatedPrice.toLocaleString()}
                                    </span>
                                    <span className="text-xs text-gray-500 ml-1">/ post</span>
                                  </div>
                                  <button
                                    onClick={(e) => handleAddRelatedToCart(related, e)}
                                    className="w-full sm:w-auto flex items-center justify-center gap-2 px-4 py-2.5 bg-linear-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white text-sm rounded-lg transition-all duration-300"
                                  >
                                    <ShoppingCart className="h-4 w-4" />
                                    Add to Cart
                                  </button>
                                </div>
                              </div>
                              <ChevronRight className="hidden sm:block h-5 w-5 text-gray-400 group-hover:text-blue-600 transition-colors shrink-0 mt-2" />
                            </div>
                          </Link>
                        </div>
                      );
                    })}
                  </div>
                )}
              </motion.div>
            </div>

            {/* Sidebar Column - Pricing Card Only */}
            <div className="space-y-6">
              {/* Pricing Card - Sticky */}
              <div className="sticky top-26">
                <motion.div
                  initial={{ opacity: 0, x: 20 }}
                  animate={{ opacity: 1, x: 0 }}
                  className="bg-white rounded-2xl shadow-xl overflow-hidden"
                >
                  <div className="bg-linear-to-r from-blue-600 to-cyan-600 p-4 sm:p-6 text-white">
                    <h3 className="text-base sm:text-lg font-semibold mb-2">Guest Post Pricing</h3>
                    <div className="flex items-baseline gap-1">
                      <span className="text-3xl sm:text-4xl font-bold">${getTotalPrice().toLocaleString()}</span>
                      <span className="text-blue-100 text-sm">/ post</span>
                    </div>
                    {website.sale_price && (
                      <div className="text-xs sm:text-sm text-blue-100 line-through mt-1">
                        ${website.base_price.toLocaleString()}
                      </div>
                    )}
                  </div>
                  
                  <div className="p-4 sm:p-6 space-y-4 sm:space-y-5">
                    {/* Standard Post Option */}
                    <div className="space-y-3">
                      <div 
                        className={`flex items-start gap-3 p-3 sm:p-4 rounded-xl border-2 transition-all cursor-pointer ${
                          !selectedNiche 
                            ? 'border-blue-500 bg-blue-50/50' 
                            : 'border-gray-200 hover:border-blue-300'
                        }`}
                        onClick={() => setSelectedNiche(null)}
                      >
                        <div className="mt-0.5">
                          <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                            !selectedNiche ? 'border-blue-500 bg-blue-500' : 'border-gray-300'
                          }`}>
                            {!selectedNiche && <div className="w-2 h-2 rounded-full bg-white" />}
                          </div>
                        </div>
                        <div className="flex-1">
                          <div className="flex items-center justify-between flex-wrap gap-2">
                            <div>
                              <h4 className="font-semibold text-gray-900 text-sm sm:text-base">
                                Standard Post
                              </h4>
                              {website.generalNiches.length > 0 && (
                                <p className="text-xs text-gray-500 mt-1">
                                  ({website.generalNiches.map(n => n.name).join(', ')})
                                </p>
                              )}
                            </div>
                            <div className="text-right">
                              <span className="text-lg sm:text-xl font-bold text-gray-900">
                                ${standardPrice.toLocaleString()}
                              </span>
                            </div>
                          </div>
                          <p className="text-xs text-gray-500 mt-2">
                            Standard guest post with dofollow link
                          </p>
                        </div>
                      </div>
                    </div>

                    {/* Special Niches Options */}
                    {website.specialNiches.length > 0 && (
                      <div className="space-y-3">
                        <div className="flex items-center gap-2 text-sm font-medium text-gray-700">
                          <Zap className="h-4 w-4 text-orange-500" />
                          <span>Specialized Niches</span>
                        </div>
                        
                        {website.specialNiches.map((niche) => (
                          <div
                            key={niche.id}
                            className={`flex items-start gap-3 p-3 sm:p-4 rounded-xl border-2 transition-all cursor-pointer ${
                              selectedNiche?.id === niche.id
                                ? 'border-orange-500 bg-orange-50/50'
                                : 'border-gray-200 hover:border-orange-300'
                            }`}
                            onClick={() => setSelectedNiche(niche)}
                          >
                            <div className="mt-0.5">
                              <div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
                                selectedNiche?.id === niche.id ? 'border-orange-500 bg-orange-500' : 'border-gray-300'
                              }`}>
                                {selectedNiche?.id === niche.id && <div className="w-2 h-2 rounded-full bg-white" />}
                              </div>
                            </div>
                            <div className="flex-1">
                              <div className="flex items-center justify-between flex-wrap gap-2">
                                <div>
                                  <h4 className="font-semibold text-gray-900 text-sm sm:text-base">
                                    {niche.name}
                                  </h4>
                                  <div className="flex items-center gap-1 mt-1">
                                    <Crown className="h-3 w-3 text-orange-500" />
                                    <span className="text-xs text-orange-600 font-medium">Premium Niche</span>
                                  </div>
                                </div>
                                <div className="text-right">
                                  <span className="text-lg sm:text-xl font-bold text-orange-600">
                                    ${niche.price?.toLocaleString()}
                                  </span>
                                  {niche.originalPrice && niche.price && niche.price > niche.originalPrice && (
                                    <div className="text-xs text-gray-400 line-through">
                                      ${niche.originalPrice.toLocaleString()}
                                    </div>
                                  )}
                                </div>
                              </div>
                              <p className="text-xs text-gray-500 mt-2">
                                Specialized content tailored for {niche.name} audience
                              </p>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}

                    {/* Link Type & Backlinks */}
                    <div className="grid grid-cols-2 gap-3 pt-2 border-t border-gray-200">
                      <div className="flex items-center justify-between">
                        <span className="text-xs sm:text-sm text-gray-600 flex items-center gap-1">
                          <LinkIcon className="h-3 w-3" />
                          Link Type:
                        </span>
                        <span className={`font-semibold text-xs sm:text-sm ${
                          website.link_type === 'Dofollow' ? 'text-green-600' : 'text-orange-600'
                        }`}>
                          {website.link_type}
                        </span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-xs sm:text-sm text-gray-600 flex items-center gap-1">
                          <Globe className="h-3 w-3" />
                          Backlinks:
                        </span>
                        <span className="font-semibold text-xs sm:text-sm text-gray-900">
                          {website.backlinks?.toLocaleString() || 'N/A'}
                        </span>
                      </div>
                    </div>

                    {/* Content Service Checkbox */}
                    <div className="border-t border-gray-200 pt-4">
                      <label className="flex items-start gap-3 cursor-pointer group">
                        <input
                          type="checkbox"
                          checked={includeContentService}
                          onChange={(e) => setIncludeContentService(e.target.checked)}
                          className="mt-1 w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                        />
                        <div className="flex-1">
                          <div className="flex items-center justify-between">
                            <span className="font-medium text-gray-900 text-sm sm:text-base">Content Writing Service</span>
                            <span className="font-semibold text-blue-600 text-sm sm:text-base">${website.content_service_price}/Article</span>
                          </div>
                          <p className="text-xs text-gray-500 mt-1">
                            Professional SEO-optimized content written by expert writers
                          </p>
                        </div>
                      </label>
                    </div>

                    {/* Total Price Display */}
                    <div className="bg-linear-to-r from-gray-50 to-blue-50 rounded-xl p-3 sm:p-4 flex items-center justify-between border border-blue-100">
                      <span className="text-sm font-semibold text-gray-700">Total Investment:</span>
                      <div className="text-right">
                        <span className="text-xl sm:text-2xl font-bold text-blue-600">${getTotalPrice().toLocaleString()}</span>
                        <p className="text-xs text-gray-500 mt-0.5">One-time payment</p>
                      </div>
                    </div>

                    {/* Add to Cart Button */}
                    <button
                      onClick={handleAddToCart}
                      className="w-full flex items-center justify-center gap-2 bg-linear-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white py-3 sm:py-3.5 rounded-xl font-semibold shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-[1.02] text-sm sm:text-base"
                    >
                      <ShoppingCart className="h-4 w-4 sm:h-5 sm:w-5" />
                      Add to Cart - ${getTotalPrice().toLocaleString()}
                    </button>

                    {/* Consultation Button */}
                    <button
                      onClick={() => setShowConsultation(true)}
                      className="w-full flex items-center justify-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 py-3 sm:py-3.5 rounded-xl font-semibold border border-gray-200 transition-all duration-300 text-sm sm:text-base"
                    >
                      <MessageCircle className="h-4 w-4 sm:h-5 sm:w-5" />
                      Get Free Consultation
                    </button>

                    {/* Trust Badges */}
                    <div className="flex flex-wrap justify-center gap-3 sm:gap-4 pt-4 border-t border-gray-200">
                      <div className="flex items-center gap-1.5 text-xs text-gray-500">
                        <CheckCircle className="h-3 w-3 text-green-600" />
                        <span>100% Secure</span>
                      </div>
                      <div className="flex items-center gap-1.5 text-xs text-gray-500">
                        <Clock className="h-3 w-3 text-green-600" />
                        <span>24h Delivery</span>
                      </div>
                      <div className="flex items-center gap-1.5 text-xs text-gray-500">
                        <ThumbsUp className="h-3 w-3 text-green-600" />
                        <span>Money Back Guarantee</span>
                      </div>
                    </div>
                  </div>
                </motion.div>
              </div>
            </div>
          </div>
        </div>

        {/* Consultation Modal */}
        <AnimatePresence>
          {showConsultation && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
              onClick={() => setShowConsultation(false)}
            >
              <motion.div
                initial={{ scale: 0.9, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                exit={{ scale: 0.9, opacity: 0 }}
                className="bg-white rounded-2xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto"
                onClick={(e) => e.stopPropagation()}
              >
                <div className="bg-linear-to-r from-blue-600 to-cyan-600 p-6 text-white">
                  <h3 className="text-xl font-bold mb-2">Free Consultation</h3>
                  <p className="text-blue-100 text-sm">
                    Get expert advice on how to maximize your guest post on {website.name}
                  </p>
                </div>
                
                <form onSubmit={handleConsultationSubmit} className="p-6 space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Your Name *
                    </label>
                    <input
                      type="text"
                      required
                      value={consultationForm.name}
                      onChange={(e) => setConsultationForm({ ...consultationForm, name: e.target.value })}
                      className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="John Doe"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Email Address *
                    </label>
                    <input
                      type="email"
                      required
                      value={consultationForm.email}
                      onChange={(e) => setConsultationForm({ ...consultationForm, email: e.target.value })}
                      className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="john@example.com"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Message
                    </label>
                    <textarea
                      rows={4}
                      value={consultationForm.message}
                      onChange={(e) => setConsultationForm({ ...consultationForm, message: e.target.value })}
                      className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="Tell us about your requirements..."
                    />
                  </div>
                  
                  <div className="flex gap-3 pt-4">
                    <button
                      type="button"
                      onClick={() => setShowConsultation(false)}
                      className="flex-1 px-4 py-2 border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors"
                    >
                      Cancel
                    </button>
                    <button
                      type="submit"
                      className="flex-1 bg-linear-to-r from-blue-600 to-cyan-600 text-white py-2 rounded-xl font-semibold hover:shadow-lg transition-all"
                    >
                      Send Request
                    </button>
                  </div>
                </form>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </>
  );
}