404 Not Found

T.ME/BIBIL_0DAY
Server : Apache/2
System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64
User : gositeme ( 1004)
PHP Version : 8.2.29
Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname
Directory : /home/gositeme/domains/lavocat.ca/private_html/src/components/
Upload File :
Current File : /home/gositeme/domains/lavocat.ca/private_html/src/components/CaseProfileShowcase.tsx
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { 
  Calendar, 
  MapPin, 
  DollarSign, 
  Users, 
  Target, 
  Award,
  CheckCircle,
  Clock,
  AlertTriangle,
  FileText,
  Scale,
  Building,
  Star,
  MessageCircle,
  Share2,
  Bookmark,
  ExternalLink,
  ChevronRight,
  Zap,
  Globe,
  Shield,
  Heart,
  TrendingUp,
  Eye,
  User,
  Phone,
  Mail,
  ArrowRight
} from 'lucide-react';
import Link from 'next/link';
import { format } from 'date-fns';

interface CaseProfileShowcaseProps {
  caseData: any;
  isMobile?: boolean;
  onApply?: () => void;
  onContact?: () => void;
}

const CaseProfileShowcase: React.FC<CaseProfileShowcaseProps> = ({ 
  caseData, 
  isMobile = false, 
  onApply, 
  onContact 
}) => {
  const [isBookmarked, setIsBookmarked] = useState(false);

  const getStatusIcon = (status: string) => {
    switch (status?.toLowerCase()) {
      case 'active': return <CheckCircle className="h-5 w-5 text-green-500" />;
      case 'pending': return <Clock className="h-5 w-5 text-yellow-500" />;
      case 'closed': return <AlertTriangle className="h-5 w-5 text-gray-500" />;
      case 'suspended': return <AlertTriangle className="h-5 w-5 text-red-500" />;
      default: return <Clock className="h-5 w-5 text-gray-400" />;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status?.toLowerCase()) {
      case 'active': return 'bg-green-100 text-green-800 border-green-200';
      case 'pending': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
      case 'closed': return 'bg-gray-100 text-gray-800 border-gray-200';
      case 'suspended': return 'bg-red-100 text-red-800 border-red-200';
      default: return 'bg-gray-100 text-gray-800 border-gray-200';
    }
  };

  const getPriorityColor = (priority: string) => {
    switch (priority?.toLowerCase()) {
      case 'high': return 'bg-red-100 text-red-800 border-red-200';
      case 'medium': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
      case 'low': return 'bg-green-100 text-green-800 border-green-200';
      default: return 'bg-gray-100 text-gray-800 border-gray-200';
    }
  };

  const getCategoryIcon = (category: string) => {
    switch (category?.toLowerCase()) {
      case 'human_rights': return '🏛️';
      case 'criminal': return '⚖️';
      case 'civil': return '📋';
      case 'family': return '👨‍👩‍👧‍👦';
      case 'corporate': return '🏢';
      case 'class_action': return '👥';
      case 'immigration': return '🌍';
      case 'employment': return '💼';
      default: return '📄';
    }
  };

  const getCategoryColor = (category: string) => {
    switch (category?.toLowerCase()) {
      case 'human_rights': return 'from-red-600 to-orange-600';
      case 'criminal': return 'from-purple-600 to-indigo-600';
      case 'civil': return 'from-blue-600 to-cyan-600';
      case 'family': return 'from-pink-600 to-rose-600';
      case 'corporate': return 'from-gray-600 to-slate-600';
      case 'class_action': return 'from-green-600 to-emerald-600';
      case 'immigration': return 'from-teal-600 to-cyan-600';
      case 'employment': return 'from-amber-600 to-orange-600';
      default: return 'from-blue-600 to-purple-600';
    }
  };

  const toggleBookmark = () => {
    setIsBookmarked(!isBookmarked);
  };

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('en-CA', {
      style: 'currency',
      currency: 'CAD'
    }).format(amount);
  };

  const formatDate = (date: string) => {
    return format(new Date(date), 'PPP');
  };

  return (
    <div className={`mx-auto space-y-8 ${isMobile ? 'px-2 py-4 max-w-full' : 'max-w-6xl px-4 py-8'}`}>
      
      {/* Hero Section */}
      <motion.div
        className={`text-center bg-gradient-to-br ${getCategoryColor(caseData.category)} text-white rounded-2xl shadow-xl ${isMobile ? 'p-6' : 'p-8'}`}
        initial={{ opacity: 0, y: -40 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.7 }}
      >
        <div className={`mb-4 ${isMobile ? 'text-sm' : 'text-lg'}`}>
          <span className="bg-white/20 px-3 py-1 rounded-full font-semibold">
            {getCategoryIcon(caseData.category)} {caseData.status?.toUpperCase() || 'ACTIVE'}
          </span>
        </div>
        
        <h1 className={`font-extrabold mb-4 drop-shadow-lg ${isMobile ? 'text-2xl' : 'text-5xl'}`}>
          {caseData.title}
        </h1>
        
        <h2 className={`mb-6 font-semibold ${isMobile ? 'text-base' : 'text-2xl md:text-3xl'}`}>
          {caseData.publicSummary || caseData.description?.substring(0, 100) + '...'}
        </h2>
        
        {caseData.leadLawyer && (
          <p className={`mb-6 leading-relaxed ${isMobile ? 'text-sm' : 'text-lg'}`}>
            "Leading this case with dedication and expertise"<br/>
            <span className="font-semibold">— {caseData.leadLawyer.name}</span>
          </p>
        )}
        
        <div className={`bg-white/10 rounded-lg p-4 mb-6 ${isMobile ? 'text-sm' : 'text-base'}`}>
          {caseData.caseNumber && (
            <p className="mb-2"><strong>Case Number:</strong> {caseData.caseNumber}</p>
          )}
          {caseData.jurisdiction && (
            <p className="mb-2"><strong>Jurisdiction:</strong> {caseData.jurisdiction}</p>
          )}
          {caseData.court && (
            <p className="mb-2"><strong>Court:</strong> {caseData.court}</p>
          )}
          <p><strong>Status:</strong> {getStatusIcon(caseData.status)} {caseData.status?.toUpperCase() || 'ACTIVE'}</p>
        </div>
        
        <div className={`${isMobile ? 'flex flex-col space-y-3' : 'flex flex-col md:flex-row justify-center gap-4'}`}>
          {caseData.isAcceptingApplications && (
            <button
              onClick={onApply}
              className={`bg-white text-gray-800 rounded-lg font-bold shadow-lg hover:scale-105 transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base' : 'px-8 py-4 text-lg'}`}
            >
              🚀 Apply to Join This Case
            </button>
          )}
          <button
            onClick={onContact}
            className={`bg-transparent border-2 border-white text-white rounded-lg font-bold hover:bg-white hover:text-gray-800 transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base' : 'px-8 py-4 text-lg'}`}
          >
            💬 Contact Legal Team
          </button>
        </div>
      </motion.div>

      {/* Case Overview */}
      <motion.section
        className={`bg-white rounded-xl shadow-xl border border-gray-200 ${isMobile ? 'p-6' : 'p-8'}`}
        initial={{ opacity: 0, x: -40 }}
        whileInView={{ opacity: 1, x: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.7, delay: 0.1 }}
      >
        <h3 className={`font-bold text-gray-800 mb-6 ${isMobile ? 'text-xl' : 'text-3xl'}`}>Case Overview</h3>
        <div className={`grid gap-6 ${isMobile ? 'grid-cols-1' : 'md:grid-cols-2'}`}>
          <div>
            <h4 className={`font-semibold text-gray-800 mb-3 ${isMobile ? 'text-base' : 'text-xl'}`}>🎯 What This Case Addresses</h4>
            <p className={`text-gray-700 mb-4 ${isMobile ? 'text-sm' : ''}`}>
              {caseData.description || caseData.publicSummary || 'This case addresses important legal issues that require expert representation and dedicated advocacy.'}
            </p>
            {caseData.estimatedValue && (
              <div className="bg-blue-50 rounded-lg p-4">
                <p className={`text-blue-700 font-semibold ${isMobile ? 'text-sm' : ''}`}>
                  💰 <strong>Estimated Value:</strong> {formatCurrency(caseData.estimatedValue)}
                </p>
                {caseData.riskLevel && (
                  <p className={`text-blue-700 font-semibold ${isMobile ? 'text-sm' : ''}`}>
                    ⚠️ <strong>Risk Level:</strong> {caseData.riskLevel.toUpperCase()}
                  </p>
                )}
              </div>
            )}
          </div>
          <div>
            <h4 className={`font-semibold text-gray-800 mb-3 ${isMobile ? 'text-base' : 'text-xl'}`}>👥 Who Can Participate</h4>
            <p className={`text-gray-700 mb-4 ${isMobile ? 'text-sm' : ''}`}>
              <strong>Eligibility criteria:</strong>
            </p>
            <ul className={`text-gray-700 space-y-2 ${isMobile ? 'text-sm' : ''}`}>
              <li className="flex items-start">
                <span className="text-green-600 mr-2">✓</span>
                Individuals affected by the issues in this case
              </li>
              <li className="flex items-start">
                <span className="text-green-600 mr-2">✓</span>
                Those seeking legal representation for similar matters
              </li>
              <li className="flex items-start">
                <span className="text-green-600 mr-2">✓</span>
                Anyone with relevant evidence or testimony
              </li>
              <li className="flex items-start">
                <span className="text-green-600 mr-2">✓</span>
                Family members or representatives of affected parties
              </li>
            </ul>
          </div>
        </div>
      </motion.section>

      {/* Key Details */}
      <motion.section
        className={`bg-gray-50 border border-gray-200 rounded-xl shadow-xl ${isMobile ? 'p-6' : 'p-8'}`}
        initial={{ opacity: 0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.7, delay: 0.2 }}
      >
        <h3 className={`font-bold text-gray-800 mb-6 text-center ${isMobile ? 'text-xl' : 'text-3xl'}`}>Case Details</h3>
        <div className={`grid gap-6 ${isMobile ? 'grid-cols-1' : 'md:grid-cols-2 lg:grid-cols-4'}`}>
          <motion.div 
            className={`bg-white rounded-lg shadow-md ${isMobile ? 'p-4' : 'p-6'}`}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.3 }}
          >
            <div className={`text-blue-600 mb-3 text-center ${isMobile ? 'text-2xl' : 'text-4xl'}`}>📅</div>
            <h4 className={`font-bold text-blue-600 mb-3 text-center ${isMobile ? 'text-sm' : 'text-lg'}`}>Timeline</h4>
            <div className={`text-gray-700 space-y-1 ${isMobile ? 'text-xs' : 'text-sm'}`}>
              {caseData.filingDate && (
                <p>Filed: {formatDate(caseData.filingDate)}</p>
              )}
              {caseData.applicationDeadline && (
                <p>Deadline: {formatDate(caseData.applicationDeadline)}</p>
              )}
              <p>Status: {caseData.status}</p>
            </div>
          </motion.div>

          <motion.div 
            className={`bg-white rounded-lg shadow-md ${isMobile ? 'p-4' : 'p-6'}`}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.35 }}
          >
            <div className={`text-green-600 mb-3 text-center ${isMobile ? 'text-2xl' : 'text-4xl'}`}>⚖️</div>
            <h4 className={`font-bold text-green-600 mb-3 text-center ${isMobile ? 'text-sm' : 'text-lg'}`}>Legal Area</h4>
            <div className={`text-gray-700 space-y-1 ${isMobile ? 'text-xs' : 'text-sm'}`}>
              <p>{caseData.legalArea || 'General Law'}</p>
              <p>{caseData.caseType?.replace('_', ' ') || 'Legal Case'}</p>
              {caseData.jurisdiction && (
                <p>{caseData.jurisdiction}</p>
              )}
            </div>
          </motion.div>

          <motion.div 
            className={`bg-white rounded-lg shadow-md ${isMobile ? 'p-4' : 'p-6'}`}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.4 }}
          >
            <div className={`text-purple-600 mb-3 text-center ${isMobile ? 'text-2xl' : 'text-4xl'}`}>👥</div>
            <h4 className={`font-bold text-purple-600 mb-3 text-center ${isMobile ? 'text-sm' : 'text-lg'}`}>Team</h4>
            <div className={`text-gray-700 space-y-1 ${isMobile ? 'text-xs' : 'text-sm'}`}>
              {caseData.leadLawyer && (
                <p>Lead: {caseData.leadLawyer.name}</p>
              )}
              <p>Priority: {caseData.priority || 'Medium'}</p>
              <p>Urgency: {caseData.urgencyLevel || 'Normal'}</p>
            </div>
          </motion.div>

          <motion.div 
            className={`bg-white rounded-lg shadow-md ${isMobile ? 'p-4' : 'p-6'}`}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.45 }}
          >
            <div className={`text-orange-600 mb-3 text-center ${isMobile ? 'text-2xl' : 'text-4xl'}`}>📊</div>
            <h4 className={`font-bold text-orange-600 mb-3 text-center ${isMobile ? 'text-sm' : 'text-lg'}`}>Statistics</h4>
            <div className={`text-gray-700 space-y-1 ${isMobile ? 'text-xs' : 'text-sm'}`}>
              {caseData.viewCount && (
                <p>Views: {caseData.viewCount.toLocaleString()}</p>
              )}
              {caseData.supporterCount && (
                <p>Supporters: {caseData.supporterCount}</p>
              )}
              {caseData.estimatedValue && (
                <p>Value: {formatCurrency(caseData.estimatedValue)}</p>
              )}
            </div>
          </motion.div>
        </div>
      </motion.section>

      {/* Lead Lawyer Profile */}
      {caseData.leadLawyer && (
        <motion.section
          className={`bg-white rounded-xl shadow-xl border border-blue-200 ${isMobile ? 'p-6' : 'p-8'}`}
          initial={{ opacity: 0, x: 40 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.7, delay: 0.25 }}
        >
          <h3 className={`font-bold text-blue-700 mb-6 text-center ${isMobile ? 'text-xl' : 'text-3xl'}`}>Lead Legal Team</h3>
          <div className={`bg-blue-50 rounded-lg p-6 ${isMobile ? 'text-sm' : 'text-base'}`}>
            <div className="flex items-center gap-4 mb-4">
              {caseData.leadLawyer.profilePicture ? (
                <img
                  src={caseData.leadLawyer.profilePicture}
                  alt={caseData.leadLawyer.name}
                  className="w-16 h-16 rounded-full object-cover border-2 border-blue-200"
                />
              ) : (
                <div className="w-16 h-16 rounded-full bg-blue-200 flex items-center justify-center">
                  <User className="w-8 h-8 text-blue-600" />
                </div>
              )}
              <div>
                <h4 className="font-bold text-blue-800 text-lg">{caseData.leadLawyer.name}</h4>
                <p className="text-blue-600">{caseData.leadLawyer.specialization || 'Legal Professional'}</p>
                {caseData.leadLawyer.isVerified && (
                  <span className="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium mt-1">
                    <CheckCircle className="w-3 h-3 mr-1" />
                    Verified
                  </span>
                )}
              </div>
            </div>
            {caseData.leadLawyer.averageRating && (
              <div className="flex items-center gap-2 mb-3">
                <div className="flex items-center">
                  {[1, 2, 3, 4, 5].map((star) => (
                    <Star
                      key={star}
                      className={`w-4 h-4 ${
                        star <= caseData.leadLawyer.averageRating
                          ? 'text-yellow-400 fill-current'
                          : 'text-gray-300'
                      }`}
                    />
                  ))}
                </div>
                <span className="text-sm text-gray-600">
                  {caseData.leadLawyer.averageRating.toFixed(1)} ({caseData.leadLawyer.totalCases || 0} cases)
                </span>
              </div>
            )}
            <div className="flex gap-4">
              <button
                onClick={onContact}
                className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
              >
                <MessageCircle className="w-4 h-4" />
                Contact
              </button>
              <Link
                href={`/profile/${caseData.leadLawyer.username || caseData.leadLawyer.id}`}
                className="flex items-center gap-2 bg-white border border-blue-600 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-50 transition-colors"
              >
                <User className="w-4 h-4" />
                View Profile
              </Link>
            </div>
          </div>
        </motion.section>
      )}

      {/* Call to Action */}
      <motion.section
        className={`bg-gradient-to-br from-green-50 to-emerald-100 rounded-xl shadow-xl border border-green-200 ${isMobile ? 'p-6' : 'p-8'}`}
        initial={{ opacity: 0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.7, delay: 0.3 }}
      >
        <h3 className={`font-bold text-green-800 mb-6 text-center ${isMobile ? 'text-xl' : 'text-3xl'}`}>Get Involved</h3>
        
        <div className={`text-center ${isMobile ? 'space-y-3' : ''}`}>
          <div className={`${isMobile ? 'flex flex-col space-y-3' : 'flex flex-col md:flex-row justify-center gap-4'}`}>
            {caseData.isAcceptingApplications && (
              <button
                onClick={onApply}
                className={`bg-green-600 text-white rounded-lg font-bold shadow-lg hover:scale-105 hover:bg-green-700 transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base' : 'px-8 py-4 text-lg'}`}
              >
                🚀 Apply to Join This Case
              </button>
            )}
            <button
              onClick={onContact}
              className={`bg-white border-2 border-green-600 text-green-600 rounded-lg font-bold shadow hover:scale-105 hover:bg-green-600 hover:text-white transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base' : 'px-8 py-4 text-lg'}`}
            >
              💬 Contact Legal Team
            </button>
          </div>
          <div className={`bg-green-100 rounded-lg p-3 mt-4 ${isMobile ? 'text-sm' : ''}`}>
            <p className="text-green-800 font-semibold">
              🔒 100% Confidential • 💰 No Upfront Costs • ⚖️ Expert Legal Team
            </p>
          </div>
        </div>
      </motion.section>
    </div>
  );
};

export default CaseProfileShowcase;
CasperSecurity Mini