/**
 * LCL vs FCL - Wiki Page
 *
 * Comparison between Less than Container Load and Full Container Load
 */

import Link from 'next/link';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

export default function LclVsFclPage() {
  return (
    <div className="space-y-6">
      {/* Header with back link */}
      <div className="flex items-center gap-4 mb-6">
        <Link
          href="/dashboard/wiki"
          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
        >
          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
          Retour au Wiki
        </Link>
      </div>

      {/* Title */}
      <div className="mb-8">
        <div className="flex items-center gap-3">
          <span className="text-4xl">⚖️</span>
          <h1 className="text-3xl font-bold text-gray-900">LCL vs FCL</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">
          Choisir entre LCL (Less than Container Load) et FCL (Full Container Load) est une décision
          cruciale qui impacte les coûts, les délais et la sécurité de vos marchandises.
        </p>
      </div>

      {/* Definitions */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card className="bg-blue-50 border-blue-200">
          <CardHeader>
            <CardTitle className="text-blue-900 flex items-center gap-2">
              <span className="text-2xl">📦</span>
              LCL - Groupage
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-blue-800 mb-4">
              <strong>Less than Container Load</strong> - Vos marchandises partagent un conteneur
              avec d&apos;autres expéditeurs. Vous payez uniquement pour l&apos;espace utilisé.
            </p>
            <div className="bg-white p-3 rounded-lg">
              <p className="text-sm font-medium text-blue-900 mb-2">Caractéristiques:</p>
              <ul className="text-sm text-blue-800 space-y-1">
                <li>• Volume: généralement &lt; 15 m³</li>
                <li>• Consolidation en entrepôt (CFS)</li>
                <li>• Facturation au m³ ou tonne</li>
                <li>• Délai transit plus long (+3-7 jours)</li>
              </ul>
            </div>
          </CardContent>
        </Card>

        <Card className="bg-green-50 border-green-200">
          <CardHeader>
            <CardTitle className="text-green-900 flex items-center gap-2">
              <span className="text-2xl">🚛</span>
              FCL - Complet
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-green-800 mb-4">
              <strong>Full Container Load</strong> - Vous réservez un conteneur entier, même s&apos;il
              n&apos;est pas plein. Vos marchandises ne sont pas mélangées.
            </p>
            <div className="bg-white p-3 rounded-lg">
              <p className="text-sm font-medium text-green-900 mb-2">Caractéristiques:</p>
              <ul className="text-sm text-green-800 space-y-1">
                <li>• Volume: 20&apos;, 40&apos; ou 40&apos;HC</li>
                <li>• Chargement direct porte-à-porte</li>
                <li>• Facturation par conteneur</li>
                <li>• Transit direct (plus rapide)</li>
              </ul>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Comparison Table */}
      <h2 className="text-xl font-bold text-gray-900 mt-8 mb-4">Comparaison Détaillée</h2>
      <Card className="bg-white overflow-hidden">
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-4 py-3 text-left text-sm font-semibold text-gray-900">Critère</th>
                  <th className="px-4 py-3 text-left text-sm font-semibold text-blue-700">LCL</th>
                  <th className="px-4 py-3 text-left text-sm font-semibold text-green-700">FCL</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200">
                <tr>
                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Coût</td>
                  <td className="px-4 py-3 text-sm text-gray-600">Payez au m³/tonne</td>
                  <td className="px-4 py-3 text-sm text-gray-600">Prix fixe par conteneur</td>
                </tr>
                <tr className="bg-gray-50">
                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Seuil de rentabilité</td>
                  <td className="px-4 py-3 text-sm text-gray-600">&lt; 10-15 m³</td>
                  <td className="px-4 py-3 text-sm text-gray-600">&gt; 15 m³</td>
                </tr>
                <tr>
                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Transit time</td>
                  <td className="px-4 py-3 text-sm text-gray-600">+3-7 jours (consolidation)</td>
                  <td className="px-4 py-3 text-sm text-gray-600">Direct, plus rapide</td>
                </tr>
                <tr className="bg-gray-50">
                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Manutention</td>
                  <td className="px-4 py-3 text-sm text-gray-600">Multiple (risque de dommage)</td>
                  <td className="px-4 py-3 text-sm text-gray-600">Minimale</td>
                </tr>
                <tr>
                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Sécurité</td>
                  <td className="px-4 py-3 text-sm text-gray-600">Marchandises mélangées</td>
                  <td className="px-4 py-3 text-sm text-gray-600">Conteneur scellé</td>
                </tr>
                <tr className="bg-gray-50">
                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Flexibilité</td>
                  <td className="px-4 py-3 text-sm text-gray-600">Haute (petits volumes)</td>
                  <td className="px-4 py-3 text-sm text-gray-600">Moyenne</td>
                </tr>
                <tr>
                  <td className="px-4 py-3 text-sm font-medium text-gray-900">Documentation</td>
                  <td className="px-4 py-3 text-sm text-gray-600">Plus complexe</td>
                  <td className="px-4 py-3 text-sm text-gray-600">Simplifiée</td>
                </tr>
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

      {/* Cost Calculation */}
      <Card className="mt-8 bg-gray-50">
        <CardHeader>
          <CardTitle className="text-gray-900">Calcul du Seuil de Rentabilité</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-gray-600 mb-4">
            Le point où FCL devient plus économique que LCL dépend de la route et des tarifs.
            Voici un exemple de calcul:
          </p>
          <div className="bg-white p-4 rounded-lg space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="p-3 border rounded-lg">
                <p className="font-medium text-blue-700">LCL</p>
                <p className="text-sm text-gray-600">Tarif: 80 €/m³</p>
                <p className="text-sm text-gray-600">Pour 15 m³: 15 × 80 = <strong>1,200 €</strong></p>
              </div>
              <div className="p-3 border rounded-lg">
                <p className="font-medium text-green-700">FCL 20&apos;</p>
                <p className="text-sm text-gray-600">Tarif conteneur: 1,100 €</p>
                <p className="text-sm text-gray-600">Capacité: ~28 m³ pour <strong>1,100 €</strong></p>
              </div>
            </div>
            <p className="text-sm text-gray-700 bg-amber-50 p-3 rounded">
              <strong>Conclusion:</strong> Dans cet exemple, le FCL devient rentable à partir de ~14 m³.
              Demandez toujours des cotations LCL et FCL pour comparer.
            </p>
          </div>
        </CardContent>
      </Card>

      {/* When to Choose */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
        <Card className="bg-blue-50 border-blue-200">
          <CardHeader>
            <CardTitle className="text-blue-900">Choisissez LCL si:</CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              <li className="flex items-start gap-2">
                <span className="text-blue-600">✓</span>
                <span className="text-blue-800">Volume inférieur à 10-15 m³</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-blue-600">✓</span>
                <span className="text-blue-800">Expéditions régulières de petites quantités</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-blue-600">✓</span>
                <span className="text-blue-800">Test de nouveaux marchés</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-blue-600">✓</span>
                <span className="text-blue-800">Marchandises non fragiles</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-blue-600">✓</span>
                <span className="text-blue-800">Flexibilité sur les délais</span>
              </li>
            </ul>
          </CardContent>
        </Card>

        <Card className="bg-green-50 border-green-200">
          <CardHeader>
            <CardTitle className="text-green-900">Choisissez FCL si:</CardTitle>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              <li className="flex items-start gap-2">
                <span className="text-green-600">✓</span>
                <span className="text-green-800">Volume supérieur à 15 m³</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-green-600">✓</span>
                <span className="text-green-800">Marchandises de valeur ou fragiles</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-green-600">✓</span>
                <span className="text-green-800">Délais de livraison critiques</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-green-600">✓</span>
                <span className="text-green-800">Sécurité renforcée requise</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-green-600">✓</span>
                <span className="text-green-800">Marchandises incompatibles avec d&apos;autres</span>
              </li>
            </ul>
          </CardContent>
        </Card>
      </div>

      {/* LCL Process */}
      <Card className="mt-8 bg-white">
        <CardHeader>
          <CardTitle className="text-gray-900">Processus LCL (Groupage)</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
            {[
              { step: '1', title: 'Collecte', desc: 'Enlèvement chez l\'expéditeur' },
              { step: '2', title: 'CFS Origine', desc: 'Consolidation en entrepôt' },
              { step: '3', title: 'Transport', desc: 'Acheminement maritime' },
              { step: '4', title: 'CFS Destination', desc: 'Dégroupage' },
              { step: '5', title: 'Livraison', desc: 'Livraison finale' },
            ].map((item, index) => (
              <div key={item.step} className="flex flex-col md:flex-row items-center">
                <div className="text-center">
                  <div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mb-2">
                    {item.step}
                  </div>
                  <p className="font-medium text-sm">{item.title}</p>
                  <p className="text-xs text-gray-500">{item.desc}</p>
                </div>
                {index < 4 && (
                  <div className="hidden md:block text-gray-400 mx-2">→</div>
                )}
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Tips */}
      <Card className="mt-8 bg-amber-50 border-amber-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-amber-900 mb-3">Conseils Pratiques</h3>
          <ul className="list-disc list-inside space-y-2 text-amber-800">
            <li>Demandez toujours des cotations LCL ET FCL pour comparer</li>
            <li>En LCL, emballez solidement car vos marchandises seront manipulées plusieurs fois</li>
            <li>Vérifiez les frais additionnels (CFS, manutention) qui peuvent surprendre en LCL</li>
            <li>Un conteneur 40&apos; n&apos;est pas le double du prix d&apos;un 20&apos; - parfois 20-30% plus cher seulement</li>
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}