// components/EnhancedConsultantCard.tsx
'use client';

import { 
  Star, MapPin, Monitor, Clock, MessageSquare, CheckCircle, 
  Brain, Award, Shield, Globe, Users, Zap, ChevronRight,
  ThumbsUp, Percent, Languages, DollarSign, Target, Briefcase,
  GraduationCap, Home, Plane, TrendingUp, Sparkles,
  Phone, Mail, ExternalLink, ShieldCheck, MessageCircle,
  User, Building, PhoneCall, Globe as GlobeIcon, FileText,
  Calendar, CreditCard, BadgeCheck, Sparkle
} from 'lucide-react';
import { useState } from 'react';

interface EnhancedConsultantCardProps {
  consultant: {
    id: number;
    name: string;
    company_name: string;
    seo_slug: string;
    phone?: string;
    email?: string;
    city: string;
    state: string;
    average_rating: number;
    rating_count: number;
    services: string[];
    response_time: string;
    digital_only: boolean;
    profile_picture: string;
    consultation_fee: number;
    consultation_currency?: string;
    specialization: string[];
    target_countries: string[];
    languages?: string[];
    profile_completion?: number;
    ai_match_score?: number;
    ai_match_reason?: string;
    ranking_position?: number;
    ai_extracted_filters?: any;
    ai_confidence?: number;
    website?: string;
    experience_years?: number;
    verified?: boolean;
  };
  aiMode?: boolean;
  compact?: boolean;
  onViewProfile?: (consultantId: number) => void;
  onVisitProfile?: (seoSlug: string) => void;
}

export default function EnhancedConsultantCard({ 
  consultant, 
  aiMode = false, 
  compact = false,
  onViewProfile,
  onVisitProfile
}: EnhancedConsultantCardProps) {
  const [showFullProfile, setShowFullProfile] = useState(false);
  
  // Safe array handling
  const services = Array.isArray(consultant.services) ? consultant.services : [];
  const specialization = Array.isArray(consultant.specialization) ? consultant.specialization : [];
  const targetCountries = Array.isArray(consultant.target_countries) ? consultant.target_countries : [];
  const languages = Array.isArray(consultant.languages) ? consultant.languages : [];
  
  const responseTimeColors = {
    urgent: 'bg-gradient-to-r from-red-500 to-orange-500',
    fast: 'bg-gradient-to-r from-green-500 to-emerald-500',
    normal: 'bg-gradient-to-r from-blue-500 to-cyan-500'
  };

  const responseTimeTextColors = {
    urgent: 'text-red-700 bg-red-50 border-red-200',
    fast: 'text-green-700 bg-green-50 border-green-200',
    normal: 'text-blue-700 bg-blue-50 border-blue-200'
  };

  const getMatchScoreColor = (score: number) => {
    if (score >= 85) return 'from-emerald-500 via-green-500 to-emerald-600';
    if (score >= 70) return 'from-blue-500 via-cyan-500 to-blue-600';
    if (score >= 50) return 'from-amber-500 via-yellow-500 to-amber-600';
    if (score >= 30) return 'from-orange-500 via-red-500 to-orange-600';
    return 'from-gray-500 via-gray-600 to-gray-700';
  };

  const getMatchBadge = (score: number) => {
    if (score >= 85) return { 
      text: 'Perfect Match', 
      color: 'bg-gradient-to-r from-emerald-500 to-green-500',
      icon: ThumbsUp
    };
    if (score >= 70) return { 
      text: 'Excellent Match', 
      color: 'bg-gradient-to-r from-blue-500 to-cyan-500',
      icon: Award
    };
    if (score >= 50) return { 
      text: 'Good Match', 
      color: 'bg-gradient-to-r from-amber-500 to-yellow-500',
      icon: CheckCircle
    };
    if (score >= 30) return { 
      text: 'Fair Match', 
      color: 'bg-gradient-to-r from-orange-500 to-red-500',
      icon: Target
    };
    return { 
      text: 'Basic Match', 
      color: 'bg-gradient-to-r from-gray-500 to-gray-700',
      icon: Brain
    };
  };

  const matchInfo = consultant.ai_match_score ? getMatchBadge(consultant.ai_match_score) : null;
  const MatchIcon = matchInfo?.icon || Brain;

  // Truncate text functions
  const truncateText = (text: string, maxLength: number) => {
    if (!text) return '';
    if (text.length <= maxLength) return text;
    return text.substring(0, maxLength) + '...';
  };

  const truncateArray = (arr: string[], maxItems: number) => {
    if (!arr || arr.length === 0) return [];
    if (arr.length <= maxItems) return arr;
    return [...arr.slice(0, maxItems), `+${arr.length - maxItems} more`];
  };

  // Format phone number for WhatsApp
  const formatPhoneForWhatsApp = (phone: string) => {
    // Remove all non-numeric characters
    const cleaned = phone.replace(/\D/g, '');
    
    // If it starts with 0, replace with country code (Pakistan: 92)
    if (cleaned.startsWith('0')) {
      return '92' + cleaned.substring(1);
    }
    
    // If it's already 10-12 digits without country code, assume it's Pakistan
    if (cleaned.length >= 10 && cleaned.length <= 12 && !cleaned.startsWith('92')) {
      return '92' + cleaned;
    }
    
    return cleaned;
  };

  // Generate WhatsApp URL
  // const getWhatsAppUrl = () => {
  //   if (!consultant.phone) return '#';
    
  //   const phoneNumber = formatPhoneForWhatsApp(consultant.phone);
  //   const message = `Hello ${consultant.company_name},\n\nI found your profile on UniversitiesPage and I'm interested in your immigration consultancy services. Could you please provide more information?`;
    
  //   return `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
  // };

  // Handle WhatsApp click
  // const handleWhatsAppClick = (e: React.MouseEvent) => {
  //   e.preventDefault();
    
  //   if (!consultant.phone) {
  //     alert('Phone number not available for this consultant');
  //     return;
  //   }
    
  //   const whatsappUrl = getWhatsAppUrl();
  //   window.open(whatsappUrl, '_blank', 'noopener,noreferrer');
  // };


    const handleVisitProfile = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    
    if (onVisitProfile) {
      onVisitProfile(consultant.seo_slug);
    } else {
      // Default: open in new tab with dedicated URL
      window.open(`/consultant/${consultant.seo_slug}`, '_blank');
    }
  };

  // Handle view profile
  const handleViewProfile = (e: React.MouseEvent) => {
    e.preventDefault();
    
    if (onViewProfile) {
      onViewProfile(consultant.id);
    } else {
      // Default behavior - open in modal
      setShowFullProfile(true);
    }
  };

  // Close full profile modal
  const closeFullProfile = () => {
    setShowFullProfile(false);
  };

  // Get formatted consultation fee
  const getFormattedFee = () => {
    if (consultant.consultation_fee === 0) return 'Free';
    return `${consultant.consultation_currency}${consultant.consultation_fee.toFixed(2)}`;
  };

  // Render full profile modal
  const renderFullProfileModal = () => {
    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
        <div className="bg-white rounded-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
          {/* Modal Header */}
          <div className="sticky top-0 bg-white border-b border-gray-200 p-6 rounded-t-2xl">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="w-16 h-16 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl flex items-center justify-center">
                  <span className="text-blue-700 font-bold text-2xl">
                    {consultant.company_name?.charAt(0).toUpperCase() || 'C'}
                  </span>
                </div>
                <div>
                  <h2 className="text-2xl font-bold text-gray-900">{consultant.company_name}</h2>
                  <p className="text-gray-600">{consultant.company_name}</p>
                </div>
              </div>
              <button
                onClick={closeFullProfile}
                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <span className="text-2xl">&times;</span>
              </button>
            </div>
          </div>

          {/* Modal Content */}
          <div className="p-6 space-y-6">
            {/* Contact Info */}
            <div className="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-xl p-6">
              <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                <PhoneCall className="w-5 h-5" />
                Contact Information
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {consultant.phone && (
                  <div className="flex items-center gap-3 p-3 bg-white rounded-lg">
                    <Phone className="w-5 h-5 text-green-600" />
                    <div>
                      <p className="text-sm text-gray-500">Phone / WhatsApp</p>
                      <a 
                        href={`tel:${consultant.phone}`}
                        className="font-semibold text-gray-900 hover:text-blue-600"
                      >
                        {consultant.phone}
                      </a>
                    </div>
                  </div>
                )}
                {consultant.email && (
                  <div className="flex items-center gap-3 p-3 bg-white rounded-lg">
                    <Mail className="w-5 h-5 text-blue-600" />
                    <div>
                      <p className="text-sm text-gray-500">Email</p>
                      <a 
                        href={`mailto:${consultant.email}`}
                        className="font-semibold text-gray-900 hover:text-blue-600 break-all"
                      >
                        {consultant.email}
                      </a>
                    </div>
                  </div>
                )}
                {consultant.website && (
                  <div className="flex items-center gap-3 p-3 bg-white rounded-lg">
                    <GlobeIcon className="w-5 h-5 text-purple-600" />
                    <div>
                      <p className="text-sm text-gray-500">Website</p>
                      <a 
                        href={consultant.website}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="font-semibold text-gray-900 hover:text-blue-600 flex items-center gap-1"
                      >
                        {truncateText(consultant.website.replace(/^https?:\/\//, ''), 30)}
                        <ExternalLink className="w-3 h-3" />
                      </a>
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* Detailed Information */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Left Column */}
              <div className="space-y-6">
                {/* Location & Experience */}
                <div className="bg-white border border-gray-200 rounded-xl p-6">
                  <h4 className="font-bold text-gray-900 mb-4">Location & Experience</h4>
                  <div className="space-y-4">
                    <div className="flex items-center gap-3">
                      <MapPin className="w-5 h-5 text-blue-600" />
                      <div>
                        <p className="text-sm text-gray-500">Location</p>
                        <p className="font-medium text-gray-900">
                          {consultant.city}{consultant.state ? `, ${consultant.state}` : ''}
                        </p>
                      </div>
                    </div>
                    {consultant.experience_years && (
                      <div className="flex items-center gap-3">
                        <Calendar className="w-5 h-5 text-green-600" />
                        <div>
                          <p className="text-sm text-gray-500">Experience</p>
                          <p className="font-medium text-gray-900">
                            {consultant.experience_years} {consultant.experience_years === 1 ? 'year' : 'years'}
                          </p>
                        </div>
                      </div>
                    )}
                  </div>
                </div>

                {/* Specializations */}
                <div className="bg-white border border-gray-200 rounded-xl p-6">
                  <h4 className="font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <Target className="w-5 h-5" />
                    Specializations
                  </h4>
                  <div className="flex flex-wrap gap-2">
                    {specialization.map((spec, idx) => (
                      <span
                        key={idx}
                        className="px-3 py-2 bg-gradient-to-r from-purple-50 to-pink-50 text-purple-700 text-sm font-medium rounded-lg border border-purple-100"
                      >
                        {spec}
                      </span>
                    ))}
                  </div>
                </div>
              </div>

              {/* Right Column */}
              <div className="space-y-6">
                {/* Target Countries */}
                <div className="bg-white border border-gray-200 rounded-xl p-6">
                  <h4 className="font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <Globe className="w-5 h-5" />
                    Target Countries
                  </h4>
                  <div className="flex flex-wrap gap-2">
                    {targetCountries.map((country, idx) => (
                      <span
                        key={idx}
                        className="px-3 py-2 bg-gradient-to-r from-green-50 to-emerald-50 text-green-700 text-sm font-medium rounded-lg border border-green-100"
                      >
                        {country}
                      </span>
                    ))}
                  </div>
                </div>

                {/* Services & Languages */}
                <div className="bg-white border border-gray-200 rounded-xl p-6">
                  <h4 className="font-bold text-gray-900 mb-4">Services & Languages</h4>
                  <div className="space-y-4">
                    <div>
                      <p className="text-sm text-gray-500 mb-2">Key Services</p>
                      <ul className="space-y-1">
                        {services.map((service, idx) => (
                          <li key={idx} className="flex items-center gap-2 text-gray-700">
                            <div className="w-1.5 h-1.5 bg-amber-500 rounded-full"></div>
                            {service}
                          </li>
                        ))}
                      </ul>
                    </div>
                    {languages.length > 0 && (
                      <div>
                        <p className="text-sm text-gray-500 mb-2">Languages Spoken</p>
                        <div className="flex flex-wrap gap-2">
                          {languages.map((lang, idx) => (
                            <span
                              key={idx}
                              className="px-3 py-1 bg-gradient-to-r from-blue-50 to-cyan-50 text-blue-700 text-sm font-medium rounded-lg border border-blue-100"
                            >
                              {lang}
                            </span>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>

            {/* Consultation Info */}
            <div className="bg-gradient-to-r from-amber-50 to-yellow-50 rounded-xl p-6">
              <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
                <CreditCard className="w-5 h-5" />
                Consultation Details
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="text-center p-4 bg-white rounded-lg">
                  <div className="text-3xl font-bold text-[#0B6F78] mb-2">
                    {getFormattedFee()}
                  </div>
                  <p className="text-sm text-gray-600">Consultation Fee</p>
                </div>
                <div className="text-center p-4 bg-white rounded-lg">
                  <div className="text-2xl font-bold text-gray-900 mb-2 capitalize">
                    {consultant.response_time || 'normal'}
                  </div>
                  <p className="text-sm text-gray-600">Response Time</p>
                </div>
                <div className="text-center p-4 bg-white rounded-lg">
                  <div className={`text-2xl font-bold mb-2 ${consultant.digital_only ? 'text-green-600' : 'text-blue-600'}`}>
                    {consultant.digital_only ? 'Online Only' : 'In-Person Available'}
                  </div>
                  <p className="text-sm text-gray-600">Consultation Type</p>
                </div>
              </div>
            </div>
          </div>

          {/* Modal Footer */}
          <div className="sticky bottom-0 bg-white border-t border-gray-200 p-6 rounded-b-2xl">
            <div className="flex flex-col sm:flex-row gap-3">
              <button
                className="flex-1 px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white font-semibold rounded-xl hover:shadow-lg hover:scale-[1.02] transition-all duration-300 flex items-center justify-center gap-3"
              >
                <PhoneCall className="w-5 h-5" />
                <span>{consultant.phone}</span>
              </button>
              <button
                onClick={closeFullProfile}
                className="px-6 py-3 border border-gray-300 text-gray-700 font-semibold rounded-xl hover:bg-gray-50 transition-all duration-300"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  };

  if (compact) {
    return (
      <>
        <div className="group bg-white rounded-xl border border-gray-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300 overflow-hidden">
          {/* Header */}
          <div className="p-4 border-b border-gray-100">
            <div className="flex items-start justify-between gap-3">
              <div className="flex items-start gap-3 min-w-0">
                <div className="relative flex-shrink-0">
                  <div className="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg flex items-center justify-center">
                    <span className="text-blue-700 font-bold text-lg">
                      {consultant.company_name?.charAt(0).toUpperCase() || 'C'}
                    </span>
                  </div>
                  {consultant.digital_only && (
                    <div className="absolute -bottom-1 -right-1 p-1 bg-blue-600 rounded-full">
                      <Monitor className="w-2 h-2 text-white" />
                    </div>
                  )}
                </div>
                
                <div className="min-w-0 flex-1">
                  <h3 className="font-bold text-gray-900 truncate">
                    {truncateText(consultant.company_name, 20)}
                  </h3>
                  <p className="text-sm text-gray-600 truncate">
                    {truncateText(consultant.company_name, 25)}
                  </p>
                  <div className="flex items-center gap-2 mt-1 flex-wrap">
                    <MapPin className="w-3 h-3 text-gray-400 flex-shrink-0" />
                    <span className="text-xs text-gray-500 truncate">
                      {consultant.city}
                    </span>
                  </div>
                </div>
              </div>
              
              <div className="text-right flex-shrink-0">
                <div className="text-lg font-bold text-blue-700">
                  ${consultant.consultation_currency}${consultant.consultation_fee.toFixed(0)}
                </div>
                <div className="text-xs text-gray-500">fee</div>
              </div>
            </div>
          </div>
          
          {/* Footer */}
          <div className="p-4">
            <div className="flex gap-2">
              <button 
                onClick={handleVisitProfile}
                className="flex-1 px-3 py-2 border border-blue-200 text-blue-700 text-sm font-medium rounded-lg hover:bg-blue-50 transition-colors"
              >
                Visit Profile
              </button>
              <button 
                onClick={handleViewProfile}
                className="flex-1 px-3 py-2 border border-blue-200 text-blue-700 text-sm font-medium rounded-lg hover:bg-blue-50 transition-colors"
              >
                View Profile
              </button>
            </div>
          </div>
        </div>

        {showFullProfile && renderFullProfileModal()}
      </>
    );
  }

  return (
    <>
      <div className="group bg-white rounded-2xl border border-gray-200 hover:border-blue-300 hover:shadow-xl transition-all duration-300 overflow-hidden hover:-translate-y-1">
        {/* AI Match Score Header */}
        {aiMode && consultant.ai_match_score !== undefined && (
          <div className={`relative overflow-hidden bg-gradient-to-r ${getMatchScoreColor(consultant.ai_match_score)} text-white`}>
            <div className="absolute inset-0 opacity-10">
              <div className="absolute top-0 left-0 w-32 h-32 bg-white rounded-full -translate-x-16 -translate-y-16"></div>
              <div className="absolute bottom-0 right-0 w-40 h-40 bg-white rounded-full translate-x-20 translate-y-20"></div>
            </div>
            
            <div className="relative p-4">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div className="flex items-center gap-3 min-w-0">
                  <div className="p-2 bg-white/20 rounded-lg backdrop-blur-sm flex-shrink-0">
                    <MatchIcon className="w-5 h-5" />
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2 flex-wrap">
                      <span className="font-bold truncate">AI Match Score</span>
                      {matchInfo && (
                        <span className={`px-3 py-1 text-xs font-bold rounded-full ${matchInfo.color} text-white truncate`}>
                          {matchInfo.text}
                        </span>
                      )}
                      {consultant.ranking_position && (
                        <span className="px-2 py-1 bg-white/30 text-white text-xs font-bold rounded-full flex-shrink-0">
                          Rank #{consultant.ranking_position}
                        </span>
                      )}
                    </div>
                    {consultant.ai_match_reason && (
                      <p className="text-sm opacity-90 mt-1 truncate">
                        {consultant.ai_match_reason}
                      </p>
                    )}
                  </div>
                </div>
                
                <div className="flex items-center gap-3 flex-shrink-0">
                  <div className="text-right">
                    <div className="flex items-center gap-2">
                      <div className="w-24 h-2.5 bg-white/30 rounded-full overflow-hidden flex-shrink-0">
                        <div 
                          className="h-full bg-white rounded-full transition-all duration-1000 ease-out"
                          style={{ width: `${consultant.ai_match_score}%` }}
                        ></div>
                      </div>
                      <span className="font-bold text-2xl min-w-[60px]">
                        {consultant.ai_match_score}%
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        <div className="p-5">
          {/* Consultant Header - Responsive Design */}
          <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-5">
            <div className="flex items-start gap-4 min-w-0">
              <div className="relative flex-shrink-0">
  {consultant.profile_picture ? (
    <div className="relative">
      <img
        src={consultant.profile_picture}
        alt={consultant.company_name || 'Consultant'}
        className="w-16 h-16 rounded-xl object-cover shadow-sm"
        onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) => {
          const img = e.currentTarget;

          // Hide broken image
          img.style.display = 'none';

          // Show fallback initials div
          const fallbackDiv = img.nextElementSibling as HTMLDivElement | null;
          if (fallbackDiv) {
            fallbackDiv.style.display = 'flex';
          }
        }}
      />
      {/* Fallback initials - hidden by default */}
      <div 
        className="w-16 h-16 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl hidden items-center justify-center shadow-sm"
        style={{ display: 'none' }}
      >
        <span className="text-blue-700 font-bold text-2xl">
          {consultant.company_name?.charAt(0).toUpperCase() || 'C'}
        </span>
      </div>
    </div>
  ) : (
    <div className="w-16 h-16 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl flex items-center justify-center shadow-sm">
      <span className="text-blue-700 font-bold text-2xl">
        {consultant.company_name?.charAt(0).toUpperCase() || 'C'}
      </span>
    </div>
  )}
  
  {consultant.digital_only && (
    <div className="absolute -bottom-1 -right-1 p-1.5 bg-gradient-to-r from-blue-600 to-cyan-600 rounded-full shadow-md">
      <Monitor className="w-3 h-3 text-white" />
    </div>
  )}
  
  {consultant.verified && (
    <div className="absolute -top-1 -right-1">
      <div className="w-6 h-6 bg-gradient-to-r from-emerald-500 to-green-500 rounded-full flex items-center justify-center shadow-md">
        <BadgeCheck className="w-3 h-3 text-white" />
      </div>
    </div>
  )}
</div>
              
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="text-xl font-bold text-gray-900 group-hover:text-blue-700 transition-colors truncate">
                    {truncateText(consultant.company_name, 30)}
                  </h3>
                  {consultant.verified && (
                    <BadgeCheck className="w-4 h-4 text-green-500 flex-shrink-0" />
                  )}
                </div>
                
                <div className="flex items-center gap-2 mb-2">
                  <Building className="w-4 h-4 text-gray-400 flex-shrink-0" />
                  <p className="text-gray-600 truncate">
                    {truncateText(consultant.company_name, 40)}
                  </p>
                </div>
                
                {/* Stats Row - Responsive */}
                <div className="flex flex-wrap items-center gap-2">
                  {/* Rating */}
                  <div className="flex items-center gap-2 bg-gradient-to-r from-amber-50 to-yellow-50 px-3 py-1.5 rounded-full border border-amber-100">
                    <Star className="w-4 h-4 text-amber-400 fill-current flex-shrink-0" />
                    <span className="font-bold text-gray-900">
                      {consultant.average_rating?.toFixed(1) || '0.0'}
                    </span>
                    <span className="text-gray-500 text-sm">
                      ({consultant.rating_count || 0})
                    </span>
                  </div>
                  
                  {/* Response Time */}
                  <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full font-medium ${responseTimeTextColors[consultant.response_time as keyof typeof responseTimeTextColors] || responseTimeTextColors.normal}`}>
                    <Clock className="w-4 h-4 flex-shrink-0" />
                    <span className="capitalize truncate">
                      {consultant.response_time || 'normal'}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            
            {/* Price - Right aligned */}
            <div className="sm:text-right flex-shrink-0">
              <div className="text-2xl font-bold bg-gradient-to-r from-[#0B6F78] to-[#0a306b] bg-clip-text text-transparent">
                {getFormattedFee()}
              </div>
              <div className="text-sm text-gray-500">consultation fee</div>
              {consultant.digital_only && (
                <div className="inline-flex items-center gap-1 px-2 py-1 bg-gradient-to-r from-blue-50 to-cyan-50 text-blue-700 rounded-full text-xs font-medium mt-2">
                  <Monitor className="w-3 h-3" />
                  <span>Digital Only</span>
                </div>
              )}
            </div>
          </div>

          {/* Location and Target Countries - Grid Layout */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
            {/* Location */}
            <div className="bg-gray-50 rounded-xl p-3">
              <div className="flex items-center gap-2 mb-2">
                <MapPin className="w-4 h-4 text-blue-600 flex-shrink-0" />
                <span className="font-semibold text-gray-900 truncate">Location</span>
              </div>
              <div className="flex items-center gap-2">
                <div className={`w-2 h-2 rounded-full flex-shrink-0 ${responseTimeColors[consultant.response_time as keyof typeof responseTimeColors] || responseTimeColors.normal}`}></div>
                <span className="text-gray-700 truncate">
                  {consultant.city}{consultant.state ? `, ${consultant.state}` : ''}
                </span>
              </div>
            </div>
            
            {/* Target Countries */}
            {targetCountries.length > 0 && (
              <div className="bg-gray-50 rounded-xl p-3">
                <div className="flex items-center gap-2 mb-2">
                  <Globe className="w-4 h-4 text-green-600 flex-shrink-0" />
                  <span className="font-semibold text-gray-900 truncate">Target Countries</span>
                </div>
                <div className="flex flex-wrap gap-1">
                  {truncateArray(targetCountries, 3).map((country, idx) => (
                    <span 
                      key={idx} 
                      className="px-2 py-1 bg-gradient-to-r from-green-50 to-emerald-50 text-green-700 text-xs rounded-lg border border-green-100 truncate max-w-[120px]"
                    >
                      {country}
                    </span>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* Specializations - Responsive Grid */}
          {specialization.length > 0 && (
            <div className="mb-5">
              <div className="flex items-center gap-2 mb-3">
                <Target className="w-5 h-5 text-purple-600 flex-shrink-0" />
                <h4 className="font-semibold text-gray-900 truncate">Specializations</h4>
              </div>
              <div className="flex flex-wrap gap-2">
                {truncateArray(specialization, 4).map((spec, idx) => {
                  const IconMap: { [key: string]: React.ElementType } = {
                    'Student Visa': GraduationCap,
                    'Work Visa': Briefcase,
                    'Tourist Visa': Plane,
                    'Family Visa': Home,
                    'Business Visa': TrendingUp,
                    'Permanent Residency': Award
                  };
                  
                  const SpecIcon = IconMap[spec] || Target;
                  const isLongText = spec.length > 20;
                  
                  return (
                    <span
                      key={idx}
                      className="px-3 py-1.5 bg-gradient-to-r from-purple-50 to-pink-50 text-purple-700 text-sm font-medium rounded-lg border border-purple-100 hover:border-purple-300 transition-colors flex items-center gap-2 min-w-0"
                    >
                      <SpecIcon className="w-4 h-4 flex-shrink-0" />
                      <span className={isLongText ? 'truncate max-w-[150px]' : ''}>
                        {spec}
                      </span>
                    </span>
                  );
                })}
              </div>
            </div>
          )}

          {/* Services & Languages - Responsive Columns */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-6">
            {/* Key Services */}
            {services.length > 0 && (
              <div className="min-w-0">
                <h4 className="flex items-center gap-2 font-semibold text-gray-900 mb-3">
                  <Zap className="w-4 h-4 text-amber-600 flex-shrink-0" />
                  <span className="truncate">Key Services</span>
                </h4>
                <div className="space-y-2.5">
                  {truncateArray(services, 3).map((service, idx) => (
                    <div key={idx} className="flex items-center gap-3">
                      <div className="flex-shrink-0">
                        <div className="w-1.5 h-1.5 bg-amber-500 rounded-full"></div>
                      </div>
                      <span className="text-gray-700 text-sm truncate">
                        {service}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            )}
            
            {/* Languages */}
            {languages.length > 0 && (
              <div className="min-w-0">
                <h4 className="flex items-center gap-2 font-semibold text-gray-900 mb-3">
                  <Languages className="w-4 h-4 text-blue-600 flex-shrink-0" />
                  <span className="truncate">Languages Spoken</span>
                </h4>
                <div className="flex flex-wrap gap-2">
                  {truncateArray(languages, 4).map((lang, idx) => (
                    <span
                      key={idx}
                      className="px-3 py-1.5 bg-gradient-to-r from-blue-50 to-cyan-50 text-blue-700 text-sm font-medium rounded-lg border border-blue-100 truncate max-w-[100px]"
                    >
                      {lang}
                    </span>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* Contact Info - If available */}
          {consultant.phone && (
            <div className="mb-6 p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border border-green-100">
              <div className="flex items-center gap-3 mb-2">
                <Phone className="w-5 h-5 text-green-600" />
                <div>
                  <p className="font-medium text-gray-900">Contact Available</p>
                  <p className="text-sm text-gray-600">Phone/WhatsApp: {consultant.phone}</p>
                </div>
              </div>
            </div>
          )}

          {/* Actions - Responsive Button Layout */}
          <div className="flex flex-col sm:flex-row gap-3 pt-5 border-t border-gray-100">
            <button 
              onClick={handleViewProfile}
              className="px-5 py-3 border border-blue-200 text-blue-700 font-semibold rounded-xl hover:bg-blue-50 hover:border-blue-300 hover:shadow-md transition-all duration-300 flex items-center justify-center gap-3 min-w-0 group/profile"
            >
              <User className="w-4 h-4 group-hover/profile:scale-110 transition-transform flex-shrink-0" />
              <span className="truncate">View Profile</span>
            </button>
              <button 
                onClick={handleVisitProfile}
                className="flex-1 px-3 py-2 border border-blue-200 text-blue-700 text-sm font-medium rounded-lg hover:bg-blue-50 transition-colors"
              >
                Visit Profile
              </button>
          </div>
        </div>
      </div>

      {showFullProfile && renderFullProfileModal()}
    </>
  );
}