'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { 
  ArrowLeft, Star, MapPin, Globe, Clock, Monitor, Phone, Mail, 
  Award, Users, GraduationCap, Briefcase, Target, Zap, 
  Languages, DollarSign, Video, MessageSquare, Share2,
  Copy, Printer, Download, Heart, BadgeCheck,
  CheckCircle, X, ChevronRight, Calendar, Shield, TrendingUp,
  BookOpen, CreditCard, MessageCircle,
  FileText, ClipboardCheck, ThumbsUp, CheckCircle2
} from 'lucide-react';

interface Consultant {
  id: number;
  name: string;
  company_name: string;
  email: string | null;
  phone: string | null;
  city: string;
  state: string;
  average_rating: number;
  rating_count: number;
  services: string[];
  response_time: string;
  digital_only: boolean;
  profile_picture: string | null;
  consultation_fee: number;
  consultation_currency: string;
  specialization: string[];
  target_countries: string[];
  languages: string[];
  website: string | null;
  experience_years: number | null;
  verified: boolean;
  bio: string | null;
  education_background: string[];
  certifications: string[];
  success_rate: number | null;
  total_students_helped: number | null;
  office_hours: string | null;
  consultation_modes: string[];
  seo_slug: string | null;
}

interface ConsultantDetailClientProps {
  consultant: Consultant;
}

export default function ConsultantDetailClient({ consultant }: ConsultantDetailClientProps) {
  const router = useRouter();
  const [activeTab, setActiveTab] = useState('overview');
  const [isFavorite, setIsFavorite] = useState(false);
  const [showShareMenu, setShowShareMenu] = useState(false);
  const [copiedField, setCopiedField] = useState<string | null>(null);

  const getFormattedFee = () => {
    if (!consultant) return 'Free Consultation';
    if (consultant.consultation_fee === 0) return 'Free Consultation';
    return `${consultant.consultation_currency}${consultant.consultation_fee.toLocaleString('en-US', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    })}`;
  };

  const copyToClipboard = (text: string, field: string) => {
    navigator.clipboard.writeText(text);
    setCopiedField(field);
    setTimeout(() => setCopiedField(null), 2000);
  };

  const getRatingColor = (rating: number) => {
    if (rating >= 4.5) return 'text-emerald-600';
    if (rating >= 4.0) return 'text-green-600';
    if (rating >= 3.5) return 'text-yellow-600';
    if (rating >= 3.0) return 'text-amber-600';
    return 'text-red-600';
  };

  if (!consultant) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 flex items-center justify-center">
        <div className="text-center max-w-md p-8 bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-white/20">
          <div className="w-20 h-20 bg-gradient-to-br from-red-100 to-pink-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <X className="w-10 h-10 text-red-500" />
          </div>
          <h1 className="text-3xl font-bold text-gray-900 mb-3">Consultant Not Found</h1>
          <p className="text-gray-600 mb-8">The consultant you are looking for doesn&apos;t exist or has been moved.</p>
          <button
            onClick={() => router.push('/consultant')}
            className="px-8 py-3 bg-gradient-to-r from-[#0B6F78] to-[#0a306b] text-white font-semibold rounded-xl hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5 flex items-center gap-2 mx-auto"
          >
            <ArrowLeft className="w-4 h-4" />
            Browse All Consultants
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
      {/* Header Background */}
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-[#0B6F78]/90 via-[#0B6F78]/80 to-[#0a306b]/90"></div>
        {/* Fixed SVG background pattern */}
        <div className="absolute inset-0 opacity-10">
          <svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fillRule="evenodd">
              <g fill="#ffffff" fillOpacity="0.5">
                <path d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/>
              </g>
            </g>
          </svg>
        </div>
        
        {/* Navigation */}
        <div className="relative container mx-auto px-4 py-6">
          <div className="flex items-center justify-between mb-8">
            <button
              onClick={() => router.push('/consultant')}
              className="group flex items-center gap-2 bg-white/10 backdrop-blur-sm hover:bg-white/20 p-3 rounded-xl transition-all duration-300 border border-white/20"
            >
              <ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
              <span className="font-medium">Back to Consultants</span>
            </button>
          </div>

          {/* Consultant Profile Header */}
          <div className="flex flex-col lg:flex-row items-start gap-8 mb-12">
            {/* Profile Image */}
            <div className="relative">
              <div className="relative w-32 h-32 lg:w-40 lg:h-40">
                {consultant.profile_picture ? (
                  <img
                    src={consultant.profile_picture}
                    alt={consultant.company_name}
                    className="w-full h-full rounded-3xl object-cover border-4 border-white shadow-2xl"
                  />
                ) : (
                  <div className="w-full h-full bg-gradient-to-br from-blue-500 to-cyan-400 rounded-3xl flex items-center justify-center border-4 border-white shadow-2xl">
                    <span className="text-4xl lg:text-5xl font-bold text-white">
                      {consultant.company_name?.charAt(0).toUpperCase() || 'C'}
                    </span>
                  </div>
                )}
                
                {consultant.verified && (
                  <div className="absolute -bottom-3 -right-3">
                    <div className="w-12 h-12 bg-gradient-to-r from-emerald-500 to-green-500 rounded-full flex items-center justify-center shadow-xl border-2 border-white">
                      <BadgeCheck className="w-6 h-6 text-white" />
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* Profile Info */}
            <div className="flex-1">
              <div className="flex flex-wrap items-center gap-3 mb-4">
                <h1 className="text-3xl lg:text-4xl font-bold text-white">{consultant.company_name}</h1>
                <div className="flex items-center gap-2">
                  {consultant.verified && (
                    <span className="px-3 py-1 bg-emerald-500/20 backdrop-blur-sm text-emerald-100 text-sm font-medium rounded-full border border-emerald-500/30">
                      <CheckCircle2 className="w-3 h-3 inline mr-1" />
                      Verified
                    </span>
                  )}
                </div>
              </div>
              
              <div className="flex flex-wrap items-center gap-4 mb-6">
                <div className="flex items-center gap-2 bg-white/10 backdrop-blur-sm px-3 py-2 rounded-lg border border-white/20">
                  <MapPin className="w-4 h-4 text-blue-100" />
                  <span className="text-white font-medium">{consultant.city}{consultant.state ? `, ${consultant.state}` : ''}</span>
                </div>
                
                <div className="flex items-center gap-2 bg-white/10 backdrop-blur-sm px-3 py-2 rounded-lg border border-white/20">
                  <Star className="w-4 h-4 text-yellow-300 fill-yellow-300" />
                  <span className={`font-bold text-white ${getRatingColor(consultant.average_rating || 0)}`}>
                    {(consultant.average_rating || 0).toFixed(1)}
                  </span>
                  <span className="text-blue-100">({consultant.rating_count || 0} reviews)</span>
                </div>
                
                {consultant.experience_years && (
                  <div className="flex items-center gap-2 bg-white/10 backdrop-blur-sm px-3 py-2 rounded-lg border border-white/20">
                    <Briefcase className="w-4 h-4 text-blue-100" />
                    <span className="text-white font-medium">{consultant.experience_years}+ years</span>
                  </div>
                )}
              </div>

              {/* Consultation Fee Badge */}
              <div className="inline-flex items-center gap-2 bg-gradient-to-r from-amber-500 to-orange-500 text-white px-6 py-3 rounded-xl shadow-lg">
                <DollarSign className="w-5 h-5" />
                <div>
                  <div className="text-2xl font-bold">{getFormattedFee()}</div>
                  <div className="text-sm text-amber-100">Consultation Fee</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="container mx-auto px-4 -mt-8 relative z-10">
        {/* Floating Stats Card */}
        <div className="bg-white rounded-2xl shadow-xl border border-gray-200/50 overflow-hidden mb-8">
          <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-gray-100">
            <div className="p-6 text-center group hover:bg-blue-50/50 transition-colors">
              <div className="text-3xl font-bold text-blue-600 mb-2 group-hover:scale-110 transition-transform">
                {consultant.specialization?.length || 10}+
              </div>
              <div className="text-sm text-gray-600 font-medium flex items-center justify-center gap-1">
                <TrendingUp className="w-4 h-4 text-green-500" />
                Specialization
              </div>
            </div>
            
            <div className="p-6 text-center group hover:bg-green-50/50 transition-colors">
              <div className="text-3xl font-bold text-green-600 mb-2 group-hover:scale-110 transition-transform">
                {consultant.target_countries?.length || 10}+
              </div>
              <div className="text-sm text-gray-600 font-medium flex items-center justify-center gap-1">
                <Users className="w-4 h-4 text-green-500" />
                Target Countries
              </div>
            </div>
            
            <div className="p-6 text-center group hover:bg-purple-50/50 transition-colors">
              <div className="text-3xl font-bold text-purple-600 mb-2 group-hover:scale-110 transition-transform">
                {consultant.services?.length || 10}+
              </div>
              <div className="text-sm text-gray-600 font-medium flex items-center justify-center gap-1">
                <Zap className="w-4 h-4 text-purple-500" />
                Services
              </div>
            </div>
            
            <div className="p-6 text-center group hover:bg-amber-50/50 transition-colors">
              <div className="text-3xl font-bold text-amber-600 mb-2 group-hover:scale-110 transition-transform">
                {consultant.rating_count || 0}
              </div>
              <div className="text-sm text-gray-600 font-medium flex items-center justify-center gap-1">
                <ThumbsUp className="w-4 h-4 text-amber-500" />
                Client Reviews
              </div>
            </div>
          </div>
        </div>

        <div className="flex flex-col lg:flex-row gap-8">
          {/* Left Column - Main Content */}
          <div className="lg:w-2/3">
            {/* Tabs */}
            <div className="bg-white rounded-2xl shadow-sm border border-gray-200/50 overflow-hidden mb-8">
              <div className="flex overflow-x-auto">
                {[
                  { id: 'overview', label: 'Overview', icon: FileText },
                  { id: 'services', label: 'Services', icon: Zap },
                  { id: 'expertise', label: 'Expertise', icon: Target },
                  { id: 'contact', label: 'Contact Info', icon: Phone }
                ].map((tab) => {
                  const Icon = tab.icon;
                  return (
                    <button
                      key={tab.id}
                      onClick={() => setActiveTab(tab.id)}
                      className={`flex-1 min-w-0 px-6 py-4 font-medium whitespace-nowrap transition-all duration-300 flex items-center justify-center gap-2 ${
                        activeTab === tab.id
                          ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50/50'
                          : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50/50'
                      }`}
                    >
                      <Icon className="w-4 h-4" />
                      {tab.label}
                    </button>
                  );
                })}
              </div>

              {/* Tab Content */}
              <div className="p-6">
                {/* Overview Tab */}
                {activeTab === 'overview' && (
                  <div className="space-y-6">
                    {consultant.bio && (
                      <div>
                        <h2 className="text-2xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                          <FileText className="w-6 h-6 text-blue-500" />
                          Professional Background
                        </h2>
                        <p className="text-gray-700 leading-relaxed text-lg">
                          {consultant.bio}
                        </p>
                      </div>
                    )}

                    {consultant.education_background?.length > 0 && (
                      <div className="pt-6 border-t border-gray-100">
                        <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                          <GraduationCap className="w-5 h-5 text-emerald-500" />
                          Education
                        </h3>
                        <div className="space-y-3">
                          {consultant.education_background.map((edu, idx) => (
                            <div key={idx} className="flex items-start gap-3 p-3 bg-emerald-50/50 rounded-lg">
                              <CheckCircle className="w-4 h-4 text-emerald-500 mt-1 flex-shrink-0" />
                              <span className="text-gray-800">{edu}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

                    {consultant.languages?.length > 0 && (
                      <div className="pt-6 border-t border-gray-100">
                        <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                          <Globe className="w-5 h-5 text-purple-500" />
                          Languages Spoken
                        </h3>
                        <div className="flex flex-wrap gap-2">
                          {consultant.languages.map((lang, idx) => (
                            <span
                              key={idx}
                              className="px-3 py-2 bg-purple-50 text-purple-700 rounded-lg font-medium"
                            >
                              {lang}
                            </span>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                )}

                {/* Services Tab */}
                {activeTab === 'services' && (
                  <div className="space-y-8">
                    <div>
                      <h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                        <Zap className="w-6 h-6 text-amber-500" />
                        Comprehensive Services
                      </h2>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {consultant.services?.map((service, idx) => (
                          <div key={idx} className="group p-5 bg-gradient-to-br from-amber-50 to-orange-50 rounded-xl border border-amber-100 hover:border-amber-200 transition-all duration-300 hover:shadow-md">
                            <div className="flex items-start gap-3">
                              <div className="w-10 h-10 bg-gradient-to-r from-amber-500 to-orange-500 rounded-lg flex items-center justify-center flex-shrink-0">
                                <CheckCircle2 className="w-5 h-5 text-white" />
                              </div>
                              <div>
                                <h3 className="font-bold text-gray-900 mb-1 group-hover:text-amber-600 transition-colors">
                                  {service}
                                </h3>
                                <p className="text-sm text-gray-600">
                                  Expert guidance and support for your specific needs
                                </p>
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    {consultant.consultation_modes?.length > 0 && (
                      <div className="pt-6 border-t border-gray-100">
                        <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                          <Monitor className="w-5 h-5 text-blue-500" />
                          Consultation Modes Available
                        </h3>
                        <div className="flex flex-wrap gap-3">
                          {consultant.consultation_modes.map((mode, idx) => (
                            <div key={idx} className="flex items-center gap-2 px-4 py-2 bg-blue-50 text-blue-700 rounded-lg">
                              {mode === 'Video' && <Video className="w-4 h-4" />}
                              {mode === 'Phone' && <Phone className="w-4 h-4" />}
                              {mode === 'In-person' && <Users className="w-4 h-4" />}
                              <span className="font-medium">{mode}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                )}

                {/* Expertise Tab */}
                {activeTab === 'expertise' && (
                  <div className="space-y-8">
                    <div>
                      <h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                        <Target className="w-6 h-6 text-purple-500" />
                        Areas of Specialization
                      </h2>
                      <div className="flex flex-wrap gap-3">
                        {consultant.specialization?.map((spec, idx) => (
                          <span
                            key={idx}
                            className="px-4 py-3 bg-gradient-to-r from-purple-50 to-violet-50 text-purple-700 font-medium rounded-xl border border-purple-100 hover:border-purple-200 transition-colors"
                          >
                            {spec}
                          </span>
                        ))}
                      </div>
                    </div>

                    {consultant.certifications?.length > 0 && (
                      <div className="pt-6 border-t border-gray-100">
                        <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                          <Award className="w-5 h-5 text-amber-500" />
                          Professional Certifications
                        </h3>
                        <div className="space-y-3">
                          {consultant.certifications.map((cert, idx) => (
                            <div key={idx} className="flex items-center gap-3 p-4 bg-gradient-to-r from-amber-50/50 to-yellow-50/50 rounded-xl border border-amber-100">
                              <Shield className="w-5 h-5 text-amber-500" />
                              <span className="text-gray-800 font-medium">{cert}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

                    {consultant.target_countries?.length > 0 && (
                      <div className="pt-6 border-t border-gray-100">
                        <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                          <Globe className="w-5 h-5 text-emerald-500" />
                          Target Countries
                        </h3>
                        <div className="flex flex-wrap gap-2">
                          {consultant.target_countries.map((country, idx) => (
                            <span
                              key={idx}
                              className="px-3 py-2 bg-emerald-50 text-emerald-700 rounded-lg font-medium"
                            >
                              {country}
                            </span>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                )}

                {/* Contact Info Tab */}
                {activeTab === 'contact' && (
                  <div className="space-y-6">
                    <h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                      <Phone className="w-6 h-6 text-blue-500" />
                      Contact Information
                    </h2>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      {/* Phone Number */}
                      {consultant.phone && (
                        <div className="relative group">
                          <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-2xl blur opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                          <div className="relative bg-white rounded-xl p-5 border border-gray-200/50 hover:border-blue-200 transition-all duration-300 hover:shadow-md">
                            <div className="flex items-center justify-between mb-4">
                              <div className="flex items-center gap-3">
                                <div className="w-12 h-12 bg-gradient-to-r from-blue-100 to-cyan-100 rounded-lg flex items-center justify-center">
                                  <Phone className="w-6 h-6 text-blue-600" />
                                </div>
                                <div>
                                  <div className="font-bold text-gray-900">Phone Number</div>
                                  <div className="text-2xl font-bold text-gray-900 mt-1">{consultant.phone}</div>
                                </div>
                              </div>
                              <button
                                onClick={() => copyToClipboard(consultant.phone!, 'phone')}
                                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                                title="Copy phone number"
                              >
                                <Copy className={`w-4 h-4 ${copiedField === 'phone' ? 'text-green-600' : 'text-gray-400'}`} />
                              </button>
                            </div>
                            <div className="text-sm text-gray-500">
                              Available during office hours
                            </div>
                          </div>
                        </div>
                      )}

                      {/* Email */}
                      {consultant.email && (
                        <div className="relative group">
                          <div className="absolute inset-0 bg-gradient-to-r from-red-500 to-pink-500 rounded-2xl blur opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                          <div className="relative bg-white rounded-xl p-5 border border-gray-200/50 hover:border-red-200 transition-all duration-300 hover:shadow-md">
                            <div className="flex items-center justify-between mb-4">
                              <div className="flex items-center gap-3">
                                <div className="w-12 h-12 bg-gradient-to-r from-red-100 to-pink-100 rounded-lg flex items-center justify-center">
                                  <Mail className="w-6 h-6 text-red-600" />
                                </div>
                                <div>
                                  <div className="font-bold text-gray-900">Email Address</div>
                                  <div className="text-lg font-medium text-gray-900 mt-1 truncate">{consultant.email}</div>
                                </div>
                              </div>
                              <button
                                onClick={() => copyToClipboard(consultant.email!, 'email')}
                                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                                title="Copy email address"
                              >
                                <Copy className={`w-4 h-4 ${copiedField === 'email' ? 'text-green-600' : 'text-gray-400'}`} />
                              </button>
                            </div>
                            <div className="text-sm text-gray-500">
                              Response within 24 hours
                            </div>
                          </div>
                        </div>
                      )}

                      {/* Website */}
                      {consultant.website && (
                        <div className="relative group">
                          <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-violet-500 rounded-2xl blur opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                          <div className="relative bg-white rounded-xl p-5 border border-gray-200/50 hover:border-purple-200 transition-all duration-300 hover:shadow-md">
                            <div className="flex items-center justify-between mb-4">
                              <div className="flex items-center gap-3">
                                <div className="w-12 h-12 bg-gradient-to-r from-purple-100 to-violet-100 rounded-lg flex items-center justify-center">
                                  <Globe className="w-6 h-6 text-purple-600" />
                                </div>
                                <div>
                                  <div className="font-bold text-gray-900">Website</div>
                                  <div className="text-lg font-medium text-gray-900 mt-1 truncate">
                                    {consultant.website.replace(/^https?:\/\//, '')}
                                  </div>
                                </div>
                              </div>
                              <button
                                onClick={() => window.open(consultant.website!, '_blank')}
                                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                                title="Visit website"
                              >
                                <ChevronRight className="w-4 h-4 text-gray-400" />
                              </button>
                            </div>
                            <div className="text-sm text-gray-500">
                              Visit for more information
                            </div>
                          </div>
                        </div>
                      )}

                      {/* Office Hours */}
                      {consultant.office_hours && (
                        <div className="relative group">
                          <div className="absolute inset-0 bg-gradient-to-r from-emerald-500 to-green-500 rounded-2xl blur opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                          <div className="relative bg-white rounded-xl p-5 border border-gray-200/50 hover:border-emerald-200 transition-all duration-300 hover:shadow-md">
                            <div className="flex items-center gap-3">
                              <div className="w-12 h-12 bg-gradient-to-r from-emerald-100 to-green-100 rounded-lg flex items-center justify-center">
                                <Clock className="w-6 h-6 text-emerald-600" />
                              </div>
                              <div>
                                <div className="font-bold text-gray-900">Office Hours</div>
                                <div className="text-lg font-medium text-gray-900 mt-1">{consultant.office_hours}</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* Response Time & Consultation Info */}
            <div className="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-2xl p-6 border border-blue-100/50 mb-8">
              <div className="flex flex-col md:flex-row items-center justify-between gap-6">
                <div className="text-center md:text-left">
                  <div className="flex items-center gap-2 mb-2">
                    <Clock className="w-5 h-5 text-blue-600" />
                    <span className="font-bold text-gray-900">Response Time</span>
                  </div>
                  <div className="text-2xl font-bold text-blue-600">{consultant.response_time || 'Within 24 hours'}</div>
                </div>
                
                <div className="text-center md:text-left">
                  <div className="flex items-center gap-2 mb-2">
                    <Monitor className="w-5 h-5 text-cyan-600" />
                    <span className="font-bold text-gray-900">Consultation Type</span>
                  </div>
                  <div className="text-2xl font-bold text-cyan-600">
                    {consultant.digital_only ? 'Digital Only' : 'In-person & Digital'}
                  </div>
                </div>
                
              </div>
            </div>
          </div>

          {/* Right Column - Sidebar */}
          <div className="lg:w-1/3">
            {/* Quick Contact Card */}
            <div className="bg-white rounded-2xl shadow-sm border border-gray-200/50 p-6 mb-8 sticky top-8">
              <h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                <MessageSquare className="w-5 h-5 text-blue-500" />
                Contact {consultant.company_name}
              </h3>
              
              <div className="space-y-4 mb-8">
                {consultant.phone && (
                  <div className="p-4 bg-blue-50 rounded-xl">
                    <div className="text-sm text-gray-600 mb-1">Call Directly</div>
                    <div className="text-2xl font-bold text-gray-900">{consultant.phone}</div>
                    <div className="text-xs text-gray-500 mt-1">Available during office hours</div>
                  </div>
                )}
                
                {consultant.email && (
                  <div className="p-4 bg-red-50 rounded-xl">
                    <div className="text-sm text-gray-600 mb-1">Send Email</div>
                    <div className="text-lg font-bold text-gray-900 truncate">{consultant.email}</div>
                    <div className="text-xs text-gray-500 mt-1">Response within 24 hours</div>
                  </div>
                )}
              </div>

              {/* Consultation Fee Card */}
              <div className="bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl p-5 text-white">
                <div className="flex items-center gap-3 mb-3">
                  <DollarSign className="w-6 h-6 text-white" />
                  <div>
                    <div className="text-sm text-blue-100">Consultation Fee</div>
                    <div className="text-2xl font-bold">{getFormattedFee()}</div>
                  </div>
                </div>
                <p className="text-sm text-blue-100">
                  Professional consultation with verified expert
                </p>
              </div>

              {/* Verification Badges */}
              <div className="mt-6 pt-6 border-t border-gray-100">
                <h4 className="font-bold text-gray-900 mb-3">Verification Status</h4>
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <div className={`w-6 h-6 rounded-full flex items-center justify-center ${consultant.verified ? 'bg-emerald-100 text-emerald-600' : 'bg-gray-100 text-gray-400'}`}>
                      {consultant.verified ? <CheckCircle2 className="w-4 h-4" /> : <X className="w-4 h-4" />}
                    </div>
                    <span className="text-sm">Identity Verified</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center">
                      <CheckCircle2 className="w-4 h-4" />
                    </div>
                    <span className="text-sm">Professional Certification</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center">
                      <Shield className="w-4 h-4" />
                    </div>
                    <span className="text-sm">Background Checked</span>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

        {/* Bottom CTA */}
        <div className="mt-12 mb-8">
          <div className="bg-gradient-to-r from-[#0B6F78] to-[#0a306b] rounded-2xl p-8 text-center text-white shadow-xl">
            <h3 className="text-2xl font-bold mb-3">Start Your Journey Today</h3>
            <p className="text-blue-100 mb-6 max-w-2xl mx-auto">
              Contact {consultant.company_name} directly for personalized guidance on your study abroad aspirations.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button
                onClick={() => copyToClipboard(consultant.phone || consultant.email || '', 'contact')}
                className="px-8 py-3 bg-white text-[#0a306b] font-semibold rounded-xl hover:bg-gray-100 transition-all duration-300 transform hover:-translate-y-0.5 shadow-lg"
              >
                Copy Contact Details
              </button>
              <button
                onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
                className="px-8 py-3 bg-white/20 backdrop-blur-sm text-white font-semibold rounded-xl hover:bg-white/30 transition-all duration-300 border border-white/30"
              >
                View Full Profile
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}