xpeditis2.0/apps/frontend/app/dashboard/wiki/assurance/page.tsx

/**
 * Assurance Maritime - Wiki Page
 *
 * Protection des marchandises en transit
 */

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

const clausesICC = [
  {
    code: 'ICC A',
    name: 'All Risks',
    coverage: 'Tous risques',
    description: 'Couverture la plus complète. Couvre tous les risques de perte ou dommage sauf exclusions spécifiques.',
    includes: ['Vol', 'Casse', 'Mouille', 'Manquants', 'Chute', 'Écrasement'],
    excludes: ['Vice propre', 'Emballage insuffisant', 'Guerre', 'Grèves'],
    recommended: true,
  },
  {
    code: 'ICC B',
    name: 'With Average',
    coverage: 'Risques majeurs',
    description: 'Couverture intermédiaire incluant les événements majeurs de transport.',
    includes: ['Incendie', 'Naufrage', 'Échouement', 'Collision', 'Jet à la mer', 'Avarie commune'],
    excludes: ['Vol', 'Mouille', 'Manquants (hors avarie commune)', 'Casse isolée'],
    recommended: false,
  },
  {
    code: 'ICC C',
    name: 'Free of Particular Average',
    coverage: 'Risques minimaux',
    description: 'Couverture de base pour les sinistres majeurs uniquement.',
    includes: ['Incendie', 'Naufrage', 'Échouement', 'Collision', 'Avarie commune'],
    excludes: ['Vol', 'Mouille', 'Casse', 'Manquants', 'Perte partielle'],
    recommended: false,
  },
];

const extensionsGaranties = [
  { name: 'Guerre et grèves', description: 'Extension pour couvrir les risques de guerre, grèves, émeutes.' },
  { name: 'Magasin à magasin', description: 'Couverture étendue incluant les phases de stockage.' },
  { name: 'Frais de réexpédition', description: 'Couvre les frais en cas de changement de destination.' },
  { name: 'Pertes financières', description: 'Perte de marge, frais supplémentaires liés au sinistre.' },
  { name: 'Transport frigorifique', description: 'Risques spécifiques liés au froid (panne, variation).' },
];

export default function AssurancePage() {
  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">Assurance Maritime (Cargo Insurance)</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">
          L&apos;assurance transport maritime protège les marchandises contre les risques de perte ou de dommage
          pendant le transit. Elle est régie par les Institute Cargo Clauses (ICC) de l&apos;Institute of London Underwriters.
        </p>
      </div>

      {/* Why insure */}
      <Card className="bg-blue-50 border-blue-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-blue-900 mb-3">Pourquoi s&apos;assurer ?</h3>
          <ul className="list-disc list-inside space-y-2 text-blue-800">
            <li><strong>Responsabilité limitée du transporteur</strong> : Maximum ~2 DTS/kg (Convention de Bruxelles)</li>
            <li><strong>Délai de réclamation court</strong> : 3 jours pour les réserves au transporteur</li>
            <li><strong>Preuves difficiles</strong> : Charge de la preuve souvent sur l&apos;expéditeur</li>
            <li><strong>Exigence bancaire</strong> : Souvent requise pour les lettres de crédit (CIF, CIP)</li>
          </ul>
        </CardContent>
      </Card>

      {/* ICC Clauses */}
      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">📋 Clauses ICC (Institute Cargo Clauses)</h2>
        <div className="space-y-4">
          {clausesICC.map((clause) => (
            <Card key={clause.code} className={`bg-white ${clause.recommended ? 'border-green-300 border-2' : ''}`}>
              <CardHeader className="pb-2">
                <CardTitle className="flex items-center gap-3">
                  <span className={`px-3 py-1 text-white rounded-md font-mono ${clause.recommended ? 'bg-green-600' : 'bg-gray-600'}`}>
                    {clause.code}
                  </span>
                  <span className="text-lg">{clause.name}</span>
                  {clause.recommended && (
                    <span className="px-2 py-1 text-xs bg-green-100 text-green-700 rounded">Recommandé</span>
                  )}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 mb-4">{clause.description}</p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <h4 className="font-medium text-green-700 mb-2">✓ Couvert</h4>
                    <ul className="text-sm text-gray-600 space-y-1">
                      {clause.includes.map((item) => (
                        <li key={item} className="flex items-center gap-2">
                          <span className="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-medium text-red-700 mb-2">✗ Non couvert</h4>
                    <ul className="text-sm text-gray-600 space-y-1">
                      {clause.excludes.map((item) => (
                        <li key={item} className="flex items-center gap-2">
                          <span className="w-1.5 h-1.5 bg-red-500 rounded-full"></span>
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Valeur assurée */}
      <Card className="mt-8 bg-gray-50">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-gray-900 mb-3">💰 Calcul de la Valeur Assurée</h3>
          <div className="bg-white p-4 rounded-lg border">
            <div className="text-center mb-4">
              <p className="text-lg font-mono bg-blue-100 text-blue-800 p-3 rounded inline-block">
                Valeur assurée = (CIF + 10%) × Taux de change
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
              <div>
                <h4 className="font-medium">CIF</h4>
                <p className="text-gray-600">Coût + Assurance + Fret jusqu&apos;au port de destination</p>
              </div>
              <div>
                <h4 className="font-medium">+ 10%</h4>
                <p className="text-gray-600">Majoration standard pour couvrir le profit espéré</p>
              </div>
              <div>
                <h4 className="font-medium">Taux de prime</h4>
                <p className="text-gray-600">0.1% à 1% selon marchandise, trajet, clause</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Extensions */}
      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">➕ Extensions de Garantie</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {extensionsGaranties.map((ext) => (
            <Card key={ext.name} className="bg-white">
              <CardContent className="pt-4">
                <h4 className="font-medium text-gray-900">{ext.name}</h4>
                <p className="text-sm text-gray-600 mt-1">{ext.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Process */}
      <Card className="mt-8 bg-gray-50">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-gray-900 mb-3">📝 En Cas de Sinistre</h3>
          <ol className="list-decimal list-inside space-y-3 text-gray-700">
            <li><strong>Constater</strong> : Émettre des réserves précises sur le bon de livraison</li>
            <li><strong>Préserver</strong> : Ne pas modifier l&apos;état des marchandises (photos, témoins)</li>
            <li><strong>Notifier</strong> : Informer l&apos;assureur sous 5 jours ouvrés</li>
            <li><strong>Documenter</strong> : Rassembler tous les documents (B/L, facture, expertise)</li>
            <li><strong>Réclamer</strong> : Déposer une réclamation formelle avec justificatifs</li>
          </ol>
        </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>Toujours opter pour ICC A (All Risks) sauf marchandises très résistantes</li>
            <li>Vérifier les exclusions et souscrire les extensions nécessaires</li>
            <li>Photographier la marchandise avant expédition</li>
            <li>Conserver tous les documents originaux</li>
            <li>Ne jamais signer &quot;reçu conforme&quot; sans avoir vérifié</li>
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}