// src/app/(root)/package/[slug]/PackageDetailClient.tsx
'use client';

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

interface WebsiteInPackage {
  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;
  featured_image: string | null;
  category_name: string | null;
}

interface PackageDetail {
  id: string;
  name: string;
  slug: string;
  description: string;
  package_type: 'standard' | 'special_niche' | 'custom';
  base_price: number;
  sale_price: number | null;
  features: string[];
  status: string;
  is_popular: boolean;
  is_featured: boolean;
  meta_title: string | null;
  meta_description: string | null;
  created_at: string;
}

interface PackageDetailClientProps {
  initialData: {
    package: PackageDetail;
    websites: WebsiteInPackage[];
    relatedPackages: PackageDetail[];
  };
  slug: string;
}

export default function PackageDetailClient({ initialData }: PackageDetailClientProps) {
  const { addPackage: addToCart } = useCart();
  const { addItem: addToWishlist, isInWishlist, removeItem: removeFromWishlist } = useWishlist();
  
  const [pkg] = useState(initialData.package);
  const [websites] = useState(initialData.websites);
  const [relatedPackages] = useState(initialData.relatedPackages || []);
  const [copied, setCopied] = useState(false);
  const [showConsultation, setShowConsultation] = useState(false);
  const [showToast, setShowToast] = useState(false);
  const [toastMessage, setToastMessage] = useState('');
  const [consultationForm, setConsultationForm] = useState({
    name: '',
    email: '',
    message: '',
  });
  
  // FIXED: Use useMemo to derive selected websites instead of useState + useEffect
  // This completely eliminates the need for setState in an effect
  const selectedWebsites = useMemo(() => {
    // For non-custom packages, always select all websites
    if (pkg.package_type !== 'custom') {
      console.log('Auto-selecting all websites for package type:', pkg.package_type);
      return new Set(websites.map(w => w.id));
    }
    // For custom packages, return empty set initially
    return new Set<string>();
  }, [pkg.package_type, websites]);
  
  // For custom packages, we need a separate state to track user selections
  const [customSelectedWebsites, setCustomSelectedWebsites] = useState<Set<string>>(new Set());
  
  // Use the appropriate selection based on package type
  const effectiveSelectedWebsites = pkg.package_type === 'custom' 
    ? customSelectedWebsites 
    : selectedWebsites;
  
  // Debug: Log websites when component mounts
  useEffect(() => {
    console.log('Package Detail - Websites:', websites);
    console.log('Package Type:', pkg.package_type);
    console.log('Total websites count:', websites.length);
  }, [websites, pkg.package_type]);

  const currentPrice = pkg.sale_price || pkg.base_price;

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

  const handleAddToCart = () => {
    // For standard packages, if selectedWebsites is empty but we have websites, use all websites
    let assignedWebsiteIds: string[] = [];
    
    if (pkg.package_type !== 'custom') {
      // For standard/special_niche packages, always use all websites
      assignedWebsiteIds = websites.map(w => w.id);
      console.log('Standard package - using all websites:', assignedWebsiteIds);
    } else {
      // For custom packages, use selected websites
      if (customSelectedWebsites.size === 0) {
        showToastNotification('Please select at least one website to include in your package');
        return;
      }
      assignedWebsiteIds = Array.from(customSelectedWebsites);
      console.log('Custom package - using selected websites:', assignedWebsiteIds);
    }

    // Final validation
    if (assignedWebsiteIds.length === 0) {
      console.error('No website IDs found for package!');
      showToastNotification('Error: No websites available for this package');
      return;
    }

    console.log('Adding package to cart:', {
      packageId: pkg.id,
      name: pkg.name,
      packageType: pkg.package_type,
      assignedWebsiteIds: assignedWebsiteIds,
      websitesCount: assignedWebsiteIds.length
    });

    // FIXED: Removed 'quantity' property as it doesn't exist in CartItem type
    addToCart({
      type: 'package',
      packageId: pkg.id,
      packageSlug: pkg.slug,
      name: pkg.name,
      packageType: pkg.package_type,
      description: pkg.description,
      features: pkg.features,
      price: currentPrice,
      assignedWebsiteIds: assignedWebsiteIds,
      contentService: false,
    });
    
    showToastNotification(`${pkg.name} added to cart successfully with ${assignedWebsiteIds.length} websites!`);
  };

  const handleToggleWishlist = () => {
    if (isInWishlist(pkg.id)) {
      removeFromWishlist(pkg.id);
      showToastNotification(`${pkg.name} removed from wishlist`);
    } else {
      addToWishlist({
        websiteId: pkg.id,
        name: pkg.name,
        domain: '',
        price: currentPrice,
        da: 0,
        dr: 0,
        niches: [],
      });
      showToastNotification(`${pkg.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 handleToggleWebsiteSelection = (websiteId: string) => {
    if (pkg.package_type !== 'custom') return;
    
    const newSelected = new Set(customSelectedWebsites);
    if (newSelected.has(websiteId)) {
      newSelected.delete(websiteId);
    } else {
      newSelected.add(websiteId);
    }
    setCustomSelectedWebsites(newSelected);
  };

  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 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 fadeInUp = {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
  };

  // Count selected websites
  const selectedCount = effectiveSelectedWebsites.size;
  const totalWebsites = websites.length;

  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>

      <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">
          <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="/packages" className="text-gray-500 hover:text-blue-600 transition-colors">
                Packages
              </Link>
              <ChevronRight className="h-4 w-4 text-gray-400" />
              <span className="text-gray-900 font-medium truncate">{pkg.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">
              {/* Package Header */}
              <motion.div {...fadeInUp} className="bg-white rounded-2xl shadow-xl overflow-hidden">
                <div className="bg-linear-to-r from-blue-600 to-cyan-600 p-6 sm: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-3">
                        {pkg.is_popular && (
                          <span className="inline-flex items-center gap-1 bg-yellow-500 text-white px-3 py-1 rounded-full text-xs font-semibold">
                            <Crown className="h-3 w-3" />
                            Most Popular
                          </span>
                        )}
                        {pkg.is_featured && (
                          <span className="inline-flex items-center gap-1 bg-purple-500 text-white px-3 py-1 rounded-full text-xs font-semibold">
                            <Star className="h-3 w-3" />
                            Featured
                          </span>
                        )}
                        <span className="inline-flex items-center gap-1 bg-white/20 text-white px-3 py-1 rounded-full text-xs font-semibold backdrop-blur-sm">
                          <PackageIcon className="h-3 w-3" />
                          {pkg.package_type.replace('_', ' ').toUpperCase()}
                        </span>
                      </div>
                      <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-2">
                        {pkg.name}
                      </h1>
                      <p className="text-blue-100 text-sm sm:text-base max-w-2xl">
                        {pkg.description}
                      </p>
                    </div>
                    
                    <div className="flex items-center gap-3">
                      <button
                        onClick={handleShare}
                        className="p-2 bg-white/20 hover:bg-white/30 rounded-xl transition-colors text-white"
                        title="Share"
                      >
                        {copied ? <CheckCircle className="h-5 w-5" /> : <Share2 className="h-5 w-5" />}
                      </button>
                      <button
                        onClick={handleToggleWishlist}
                        className="p-2 bg-white/20 hover:bg-white/30 rounded-xl transition-colors text-white"
                        title={isInWishlist(pkg.id) ? 'Remove from wishlist' : 'Add to wishlist'}
                      >
                        <Heart
                          className={`h-5 w-5 transition-colors ${
                            isInWishlist(pkg.id) ? 'fill-red-500 text-red-500' : ''
                          }`}
                        />
                      </button>
                    </div>
                  </div>
                </div>
              </motion.div>

              {/* Features Section */}
              <motion.div {...fadeInUp} transition={{ delay: 0.1 }} className="bg-white rounded-2xl shadow-md p-6 sm:p-8">
                <h2 className="text-lg sm:text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                  <Sparkles className="h-5 w-5 text-blue-600" />
                  What`s Included
                </h2>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  {pkg.features.map((feature, index) => (
                    <div key={index} className="flex items-start gap-2">
                      <CheckCircle className="h-5 w-5 text-green-500 shrink-0 mt-0.5" />
                      <span className="text-gray-700 text-sm sm:text-base">{feature}</span>
                    </div>
                  ))}
                </div>
              </motion.div>

              {/* Websites in Package Section */}
              <motion.div {...fadeInUp} transition={{ delay: 0.2 }} className="bg-white rounded-2xl shadow-md p-6 sm:p-8">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
                  <h2 className="text-lg sm:text-xl font-bold text-gray-900 flex items-center gap-2">
                    <Globe className="h-5 w-5 text-blue-600" />
                    Included Websites ({totalWebsites})
                    {pkg.package_type === 'custom' && selectedCount > 0 && (
                      <span className="text-sm font-normal text-green-600 ml-2">
                        ({selectedCount} selected)
                      </span>
                    )}
                    {pkg.package_type !== 'custom' && totalWebsites > 0 && (
                      <span className="text-sm font-normal text-green-600 ml-2">
                        (All {totalWebsites} included)
                      </span>
                    )}
                  </h2>
                  {pkg.package_type === 'custom' && (
                    <div className="flex items-center gap-2 text-sm text-amber-600 bg-amber-50 px-3 py-2 rounded-lg">
                      <AlertCircle className="h-4 w-4" />
                      <span>Select which websites to include</span>
                    </div>
                  )}
                </div>

                {websites.length === 0 ? (
                  <div className="text-center py-12">
                    <PackageIcon className="h-16 w-16 text-gray-300 mx-auto mb-4" />
                    <p className="text-gray-500">No websites assigned to this package yet.</p>
                  </div>
                ) : (
                  <div className="space-y-4">
                    {websites.map((website) => {
                      const price = website.sale_price || website.base_price;
                      const isSelected = effectiveSelectedWebsites.has(website.id);
                      const isSelectable = pkg.package_type === 'custom';
                      
                      return (
                        <div
                          key={website.id}
                          className={`group relative rounded-xl border-2 transition-all duration-300 ${
                            isSelectable
                              ? isSelected
                                ? 'border-blue-500 bg-blue-50/30 cursor-pointer'
                                : 'border-gray-200 hover:border-blue-300 cursor-pointer'
                              : 'border-gray-200'
                          }`}
                          onClick={() => {
                            if (isSelectable) {
                              handleToggleWebsiteSelection(website.id);
                            }
                          }}
                        >
                          <div className="p-4">
                            <div className="flex flex-col sm:flex-row sm:items-start gap-4">
                              {website.featured_image ? (
                                <div className="relative w-full sm:w-20 h-32 sm:h-20 shrink-0">
                                  <Image
                                    src={website.featured_image}
                                    alt={website.name}
                                    fill
                                    className="rounded-lg object-cover"
                                  />
                                </div>
                              ) : (
                                <div className="w-full sm:w-20 h-32 sm:h-20 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">
                                <Link href={`/website/${website.slug}`} className="block group/link">
                                  <h3 className="font-semibold text-gray-900 group-hover/link:text-blue-600 transition-colors text-base sm:text-lg">
                                    {website.name}
                                  </h3>
                                </Link>
                                <div className="flex flex-wrap items-center 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 ${getScoreColor(website.da, 'da')}`} />
                                    <span>DA {website.da}</span>
                                  </div>
                                  <div className="flex items-center gap-1">
                                    <BarChart3 className={`h-3 w-3 ${getScoreColor(website.dr, 'dr')}`} />
                                    <span>DR {website.dr}</span>
                                  </div>
                                  <div className="flex items-center gap-1">
                                    <Users className={`h-3 w-3 ${getTrafficColor(website.traffic)}`} />
                                    <span>{website.traffic}</span>
                                  </div>
                                  <div className="flex items-center gap-1">
                                    <Shield className={`h-3 w-3 ${getScoreColor(website.spam_score, 'spam')}`} />
                                    <span>SS {website.spam_score}</span>
                                  </div>
                                  <div className="flex items-center gap-1">
                                    <LinkIcon className="h-3 w-3" />
                                    <span className={website.link_type === 'Dofollow' ? 'text-green-600' : 'text-orange-600'}>
                                      {website.link_type}
                                    </span>
                                  </div>
                                </div>
                                <div className="mt-3">
                                  <span className="text-sm text-gray-500 line-through">
                                    ${website.base_price.toLocaleString()}
                                  </span>
                                  <span className="text-lg font-bold text-blue-600 ml-2">
                                    ${price.toLocaleString()}
                                  </span>
                                  <span className="text-xs text-gray-500 ml-1">/ post</span>
                                </div>
                              </div>
                              
                              {isSelectable && (
                                <div className="shrink-0">
                                  <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${
                                    isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300'
                                  }`}>
                                    {isSelected && <Check className="h-4 w-4 text-white" />}
                                  </div>
                                </div>
                              )}
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}
              </motion.div>

              {/* Related Packages */}
              {relatedPackages.length > 0 && (
                <motion.div {...fadeInUp} transition={{ delay: 0.3 }} className="bg-white rounded-2xl shadow-md p-6 sm: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" />
                    You Might Also Like
                  </h3>
                  
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    {relatedPackages.map((relatedPkg) => {
                      const relatedPrice = relatedPkg.sale_price || relatedPkg.base_price;
                      return (
                        <Link key={relatedPkg.id} href={`/package/${relatedPkg.slug}`}>
                          <div className="group p-4 rounded-xl border border-gray-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300">
                            <h4 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
                              {relatedPkg.name}
                            </h4>
                            <p className="text-xs text-gray-500 mt-1 line-clamp-2">{relatedPkg.description}</p>
                            <div className="mt-3 flex items-center justify-between">
                              <div>
                                <span className="text-lg font-bold text-blue-600">
                                  ${relatedPrice.toLocaleString()}
                                </span>
                                {relatedPkg.sale_price && (
                                  <span className="text-xs text-gray-400 line-through ml-2">
                                    ${relatedPkg.base_price.toLocaleString()}
                                  </span>
                                )}
                              </div>
                              <ChevronRight className="h-5 w-5 text-gray-400 group-hover:text-blue-600 transition-colors" />
                            </div>
                          </div>
                        </Link>
                      );
                    })}
                  </div>
                </motion.div>
              )}
            </div>

            {/* Sidebar - Pricing Card */}
            <div className="space-y-6">
              <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-6 text-white">
                    <h3 className="text-lg font-semibold mb-2">Package Pricing</h3>
                    <div className="flex items-baseline gap-1">
                      <span className="text-3xl sm:text-4xl font-bold">${currentPrice.toLocaleString()}</span>
                      <span className="text-blue-100 text-sm">/ package</span>
                    </div>
                    {pkg.sale_price && (
                      <div className="text-sm text-blue-100 line-through mt-1">
                        ${pkg.base_price.toLocaleString()}
                      </div>
                    )}
                    <div className="mt-3 text-xs text-blue-100">
                      Includes {pkg.package_type === 'custom' ? selectedCount : totalWebsites} of {totalWebsites} premium websites
                    </div>
                  </div>
                  
                  <div className="p-6 space-y-5">
                    {/* Features Summary */}
                    <div className="space-y-2">
                      <div className="text-sm font-medium text-gray-700">Package Benefits:</div>
                      <div className="space-y-1.5">
                        <div className="flex items-center gap-2 text-xs text-gray-600">
                          <CheckCircle className="h-3 w-3 text-green-500" />
                          <span>{pkg.package_type === 'custom' ? selectedCount : totalWebsites} High DA Websites</span>
                        </div>
                        <div className="flex items-center gap-2 text-xs text-gray-600">
                          <CheckCircle className="h-3 w-3 text-green-500" />
                          <span>Dofollow Backlinks</span>
                        </div>
                        <div className="flex items-center gap-2 text-xs text-gray-600">
                          <CheckCircle className="h-3 w-3 text-green-500" />
                          <span>24/7 Support</span>
                        </div>
                      </div>
                    </div>

                    {/* Selection Summary for Custom Packages */}
                    {pkg.package_type === 'custom' && (
                      <div className="bg-blue-50 rounded-lg p-3">
                        <div className="text-sm font-medium text-blue-800 mb-1">
                          Selected Websites: {selectedCount}
                        </div>
                        {selectedCount === 0 && (
                          <p className="text-xs text-amber-600">
                            Please select at least one website to continue
                          </p>
                        )}
                      </div>
                    )}

                    {/* Add to Cart Button */}
                    <button
                      onClick={handleAddToCart}
                      disabled={pkg.package_type === 'custom' && selectedCount === 0}
                      className={`w-full flex items-center justify-center gap-2 py-3.5 rounded-xl font-semibold shadow-lg transition-all duration-300 transform ${
                        pkg.package_type === 'custom' && selectedCount === 0
                          ? 'bg-gray-300 cursor-not-allowed transform-none shadow-none'
                          : 'bg-linear-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 hover:scale-[1.02] text-white'
                      }`}
                    >
                      <ShoppingCart className="h-5 w-5" />
                      Add to Cart - ${currentPrice.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.5 rounded-xl font-semibold border border-gray-200 transition-all duration-300"
                    >
                      <MessageCircle className="h-5 w-5" />
                      Get Free Consultation
                    </button>

                    {/* Trust Badges */}
                    <div className="flex flex-wrap justify-center 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 the {pkg.name} package
                  </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>
    </>
  );
}