"use client";

import React from 'react';
import { Briefcase, ShoppingBag } from 'lucide-react';

const parseEuro = (str: string) => {
  if (!str || str === '-') return null;
  const cleaned = str.replace(/\s/g, '').replace('€', '').replace(',', '.');
  return parseFloat(cleaned);
};

const euro = (n: number | null) => {
  if (n === null) return '-';
  return new Intl.NumberFormat('fr-FR', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(n) + ' €';
};

export default function CategorieAContent() {
  return (
    <div className="space-y-6">
      {/* En-tête */}
      <div className="rounded-xl border bg-gradient-to-br from-blue-50 to-cyan-50 p-4">
        <h2 className="text-lg font-semibold text-blue-900 mb-1">
          Catégorie A - Personnel d'administration et commercial
        </h2>
        <p className="text-sm text-blue-700">
          Minima conventionnels pour le personnel administratif et commercial de la production audiovisuelle
        </p>
        <p className="text-xs text-blue-600 mt-2">
          Grille de salaires CCNPA (IDCC 2642) - Valeurs 2025
        </p>
      </div>

      {/* Hors niveau */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-slate-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-slate-500"></span>
          <Briefcase className="w-5 h-5" />
          Hors niveau
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-slate-50">
                <th className="text-left p-3 text-slate-900 font-bold border border-slate-200">Emplois</th>
                <th className="text-center p-3 text-slate-900 font-bold border border-slate-200 bg-slate-100">Salaire minimum</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-slate-50/30">
                <td className="p-3 border border-slate-200">Producteur</td>
                <td className="text-center p-3 font-semibold border border-slate-200">{euro(null)}</td>
              </tr>
              <tr className="hover:bg-slate-50/30">
                <td className="p-3 border border-slate-200">Directeur général (non mandataire social)</td>
                <td className="text-center p-3 font-semibold border border-slate-200">{euro(null)}</td>
              </tr>
              <tr className="hover:bg-slate-50/30">
                <td className="p-3 border border-slate-200">Directeur général délégué (non mandataire social)</td>
                <td className="text-center p-3 font-semibold border border-slate-200">{euro(null)}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Niveau I - Administration */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-blue-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-blue-500"></span>
          <Briefcase className="w-5 h-5" />
          Niveau I - Filière Administration
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-blue-50">
                <th className="text-left p-3 text-blue-900 font-bold border border-blue-200">Emplois</th>
                <th className="text-center p-3 text-blue-900 font-bold border border-blue-200 bg-blue-100">Salaire minimum CDI/CDD</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-blue-50/30">
                <td className="p-3 border border-blue-200">Délégué Général</td>
                <td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(parseEuro("3 314,29 €"))}</td>
              </tr>
              <tr className="hover:bg-blue-50/30">
                <td className="p-3 border border-blue-200">Directeur général adjoint</td>
                <td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(parseEuro("3 314,29 €"))}</td>
              </tr>
              <tr className="hover:bg-blue-50/30">
                <td className="p-3 border border-blue-200">Directeur des productions</td>
                <td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(parseEuro("3 314,29 €"))}</td>
              </tr>
              <tr className="hover:bg-blue-50/30">
                <td className="p-3 border border-blue-200">Directeur des programmes</td>
                <td className="text-center p-3 font-bold text-blue-900 border border-blue-200 bg-blue-50">{euro(parseEuro("3 314,29 €"))}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Niveau II - Administration */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-cyan-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-cyan-500"></span>
          <Briefcase className="w-5 h-5" />
          Niveau II - Filière Administration
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-cyan-50">
                <th className="text-left p-3 text-cyan-900 font-bold border border-cyan-200">Emplois</th>
                <th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200 bg-cyan-100">Salaire minimum CDI/CDD</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-cyan-50/30">
                <td className="p-3 border border-cyan-200">Directeur des jeux</td>
                <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("3 162,15 €"))}</td>
              </tr>
              <tr className="hover:bg-cyan-50/30">
                <td className="p-3 border border-cyan-200">Secrétaire général</td>
                <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("3 013,00 €"))}</td>
              </tr>
              <tr className="hover:bg-cyan-50/30">
                <td className="p-3 border border-cyan-200">Directeur administratif et financier</td>
                <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("3 013,00 €"))}</td>
              </tr>
              <tr className="hover:bg-cyan-50/30">
                <td className="p-3 border border-cyan-200">Directeur financier</td>
                <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
              </tr>
              <tr className="hover:bg-cyan-50/30">
                <td className="p-3 border border-cyan-200">Directeur juridique</td>
                <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
              </tr>
              <tr className="hover:bg-cyan-50/30">
                <td className="p-3 border border-cyan-200">Directeur technique</td>
                <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
              </tr>
              <tr className="hover:bg-cyan-50/30">
                <td className="p-3 border border-cyan-200">Directeur des ressources humaines</td>
                <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
              </tr>
              <tr className="hover:bg-cyan-50/30">
                <td className="p-3 border border-cyan-200">Directeur littéraire</td>
                <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
              </tr>
              <tr className="hover:bg-cyan-50/30">
                <td className="p-3 border border-cyan-200">Directeur du développement</td>
                <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
              </tr>
              <tr className="hover:bg-cyan-50/30">
                <td className="p-3 border border-cyan-200">Directeur informatique</td>
                <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
              </tr>
              <tr className="hover:bg-cyan-50/30">
                <td className="p-3 border border-cyan-200">Directeur de la Comptabilité</td>
                <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
              </tr>
              <tr className="hover:bg-cyan-50/30">
                <td className="p-3 border border-cyan-200">Directeur de la communication</td>
                <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(parseEuro("2 892,47 €"))}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Niveau II - Commercial et édition */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-emerald-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-emerald-500"></span>
          <ShoppingBag className="w-5 h-5" />
          Niveau II - Filière Commercial et édition
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-emerald-50">
                <th className="text-left p-3 text-emerald-900 font-bold border border-emerald-200">Emplois</th>
                <th className="text-center p-3 text-emerald-900 font-bold border border-emerald-200 bg-emerald-100">Salaire minimum CDI/CDD</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-emerald-50/30">
                <td className="p-3 border border-emerald-200">Directeur du Pôle Edition - Distribution</td>
                <td className="text-center p-3 font-bold text-emerald-900 border border-emerald-200 bg-emerald-50">{euro(parseEuro("2 892,47 €"))}</td>
              </tr>
              <tr className="hover:bg-emerald-50/30">
                <td className="p-3 border border-emerald-200">Directeur multimedia</td>
                <td className="text-center p-3 font-bold text-emerald-900 border border-emerald-200 bg-emerald-50">{euro(parseEuro("2 892,47 €"))}</td>
              </tr>
              <tr className="hover:bg-emerald-50/30">
                <td className="p-3 border border-emerald-200">Directeur produits dérivés</td>
                <td className="text-center p-3 font-bold text-emerald-900 border border-emerald-200 bg-emerald-50">{euro(parseEuro("2 892,47 €"))}</td>
              </tr>
              <tr className="hover:bg-emerald-50/30">
                <td className="p-3 border border-emerald-200">Directeur commercial</td>
                <td className="text-center p-3 font-bold text-emerald-900 border border-emerald-200 bg-emerald-50">{euro(parseEuro("2 651,44 €"))}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Niveau IIIA - Administration */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-sky-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-sky-500"></span>
          <Briefcase className="w-5 h-5" />
          Niveau IIIA - Filière Administration
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-sky-50">
                <th className="text-left p-3 text-sky-900 font-bold border border-sky-200">Emplois</th>
                <th className="text-center p-3 text-sky-900 font-bold border border-sky-200 bg-sky-100">Salaire minimum CDI/CDD</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Responsable administratif et financier</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 651,44 €"))}</td>
              </tr>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Chef comptable</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 530,92 €"))}</td>
              </tr>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Responsable des ressources humaines</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 530,92 €"))}</td>
              </tr>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Responsable du développement</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 530,92 €"))}</td>
              </tr>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Responsable informatique</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 530,92 €"))}</td>
              </tr>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Responsable juridique</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 530,92 €"))}</td>
              </tr>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Contrôleur de gestion</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 410,40 €"))}</td>
              </tr>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Responsable de la trésorerie</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 410,40 €"))}</td>
              </tr>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Responsable de la communication</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 410,40 €"))}</td>
              </tr>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Responsable de la paie</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 339,74 €"))}</td>
              </tr>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Responsable technique</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 289,87 €"))}</td>
              </tr>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Responsable des services généraux</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 289,87 €"))}</td>
              </tr>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Chargé de mission</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 289,87 €"))}</td>
              </tr>
              <tr className="hover:bg-sky-50/30">
                <td className="p-3 border border-sky-200">Attaché de direction</td>
                <td className="text-center p-3 font-bold text-sky-900 border border-sky-200 bg-sky-50">{euro(parseEuro("2 171,66 €"))}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Niveau IIIA - Commercial et édition */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-teal-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-teal-500"></span>
          <ShoppingBag className="w-5 h-5" />
          Niveau IIIA - Filière Commercial et édition
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-teal-50">
                <th className="text-left p-3 text-teal-900 font-bold border border-teal-200">Emplois</th>
                <th className="text-center p-3 text-teal-900 font-bold border border-teal-200 bg-teal-100">Salaire minimum CDI/CDD</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-teal-50/30">
                <td className="p-3 border border-teal-200">Responsable des sites web/multimedia</td>
                <td className="text-center p-3 font-bold text-teal-900 border border-teal-200 bg-teal-50">{euro(parseEuro("2 410,40 €"))}</td>
              </tr>
              <tr className="hover:bg-teal-50/30">
                <td className="p-3 border border-teal-200">Responsable des ventes</td>
                <td className="text-center p-3 font-bold text-teal-900 border border-teal-200 bg-teal-50">{euro(parseEuro("2 289,87 €"))}</td>
              </tr>
              <tr className="hover:bg-teal-50/30">
                <td className="p-3 border border-teal-200">Responsable des produits dérivés</td>
                <td className="text-center p-3 font-bold text-teal-900 border border-teal-200 bg-teal-50">{euro(parseEuro("2 289,87 €"))}</td>
              </tr>
              <tr className="hover:bg-teal-50/30">
                <td className="p-3 border border-teal-200">Responsable acquisitions</td>
                <td className="text-center p-3 font-bold text-teal-900 border border-teal-200 bg-teal-50">{euro(parseEuro("2 289,87 €"))}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Niveau IIIB - Administration */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-indigo-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-indigo-500"></span>
          <Briefcase className="w-5 h-5" />
          Niveau IIIB - Filière Administration
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-indigo-50">
                <th className="text-left p-3 text-indigo-900 font-bold border border-indigo-200">Emplois</th>
                <th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200 bg-indigo-100">Salaire minimum CDI/CDD</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-indigo-50/30">
                <td className="p-3 border border-indigo-200">Responsable de la comptabilité</td>
                <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 169,36 €"))}</td>
              </tr>
              <tr className="hover:bg-indigo-50/30">
                <td className="p-3 border border-indigo-200">Responsable de l'administration du personnel</td>
                <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 169,36 €"))}</td>
              </tr>
              <tr className="hover:bg-indigo-50/30">
                <td className="p-3 border border-indigo-200">Attaché de presse</td>
                <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 048,84 €"))}</td>
              </tr>
              <tr className="hover:bg-indigo-50/30">
                <td className="p-3 border border-indigo-200">Collaborateur juridique</td>
                <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 048,84 €"))}</td>
              </tr>
              <tr className="hover:bg-indigo-50/30">
                <td className="p-3 border border-indigo-200">Contrôleur de gestion junior</td>
                <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 048,84 €"))}</td>
              </tr>
              <tr className="hover:bg-indigo-50/30">
                <td className="p-3 border border-indigo-200">Informaticien</td>
                <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 048,84 €"))}</td>
              </tr>
              <tr className="hover:bg-indigo-50/30">
                <td className="p-3 border border-indigo-200">Responsable d'exploitation</td>
                <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 048,84 €"))}</td>
              </tr>
              <tr className="hover:bg-indigo-50/30">
                <td className="p-3 border border-indigo-200">Chargé d'étude</td>
                <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(parseEuro("2 028,56 €"))}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Niveau IIIB - Commercial et édition */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-violet-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-violet-500"></span>
          <ShoppingBag className="w-5 h-5" />
          Niveau IIIB - Filière Commercial et édition
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-violet-50">
                <th className="text-left p-3 text-violet-900 font-bold border border-violet-200">Emplois</th>
                <th className="text-center p-3 text-violet-900 font-bold border border-violet-200 bg-violet-100">Salaire minimum CDI/CDD</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-violet-50/30">
                <td className="p-3 border border-violet-200">Responsable des supports</td>
                <td className="text-center p-3 font-bold text-violet-900 border border-violet-200 bg-violet-50">{euro(parseEuro("2 048,84 €"))}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Niveau IV - Administration */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-purple-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-purple-500"></span>
          <Briefcase className="w-5 h-5" />
          Niveau IV - Filière Administration
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-purple-50">
                <th className="text-left p-3 text-purple-900 font-bold border border-purple-200">Emplois</th>
                <th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Salaire minimum CDI/CDD</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-purple-50/30">
                <td className="p-3 border border-purple-200">Comptable</td>
                <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(parseEuro("1 988,58 €"))}</td>
              </tr>
              <tr className="hover:bg-purple-50/30">
                <td className="p-3 border border-purple-200">Gestionnaire paie</td>
                <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(parseEuro("1 988,58 €"))}</td>
              </tr>
              <tr className="hover:bg-purple-50/30">
                <td className="p-3 border border-purple-200">Webmestre</td>
                <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(parseEuro("1 928,32 €"))}</td>
              </tr>
              <tr className="hover:bg-purple-50/30">
                <td className="p-3 border border-purple-200">Chargé des services généraux</td>
                <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-purple-50/30">
                <td className="p-3 border border-purple-200">Assistant de direction</td>
                <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-purple-50/30">
                <td className="p-3 border border-purple-200">Assistant juridique</td>
                <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Niveau IV - Commercial et édition */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-fuchsia-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-fuchsia-500"></span>
          <ShoppingBag className="w-5 h-5" />
          Niveau IV - Filière Commercial et édition
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-fuchsia-50">
                <th className="text-left p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Emplois</th>
                <th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Salaire minimum CDI/CDD</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-fuchsia-50/30">
                <td className="p-3 border border-fuchsia-200">Gestionnaire des supports</td>
                <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(parseEuro("1 909,23 €"))}</td>
              </tr>
              <tr className="hover:bg-fuchsia-50/30">
                <td className="p-3 border border-fuchsia-200">Vendeur</td>
                <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Niveau V - Administration */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-pink-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-pink-500"></span>
          <Briefcase className="w-5 h-5" />
          Niveau V - Filière Administration
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-pink-50">
                <th className="text-left p-3 text-pink-900 font-bold border border-pink-200">Emplois</th>
                <th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Salaire minimum CDI/CDD</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-pink-50/30">
                <td className="p-3 border border-pink-200">Secrétaire - assistant</td>
                <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-pink-50/30">
                <td className="p-3 border border-pink-200">Secrétaire - standardiste</td>
                <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-pink-50/30">
                <td className="p-3 border border-pink-200">Responsable d'entretien</td>
                <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-pink-50/30">
                <td className="p-3 border border-pink-200">Assistant paye</td>
                <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-pink-50/30">
                <td className="p-3 border border-pink-200">Assistant comptable</td>
                <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-pink-50/30">
                <td className="p-3 border border-pink-200">Assistant de la communication</td>
                <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-pink-50/30">
                <td className="p-3 border border-pink-200">Agent des services généraux</td>
                <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Niveau V - Commercial et édition */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-rose-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-rose-500"></span>
          <ShoppingBag className="w-5 h-5" />
          Niveau V - Filière Commercial et édition
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-rose-50">
                <th className="text-left p-3 text-rose-900 font-bold border border-rose-200">Emplois</th>
                <th className="text-center p-3 text-rose-900 font-bold border border-rose-200 bg-rose-100">Salaire minimum CDI/CDD</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-rose-50/30">
                <td className="p-3 border border-rose-200">Assistant web / téléphonie / multimedia</td>
                <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-rose-50/30">
                <td className="p-3 border border-rose-200">Assistant commercial</td>
                <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Niveau VI - Administration */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-red-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-red-500"></span>
          <Briefcase className="w-5 h-5" />
          Niveau VI - Filière Administration
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-red-50">
                <th className="text-left p-3 text-red-900 font-bold border border-red-200">Emplois</th>
                <th className="text-center p-3 text-red-900 font-bold border border-red-200 bg-red-100">Salaire minimum CDI/CDD</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-red-50/30">
                <td className="p-3 border border-red-200">Hôtesse - standardiste</td>
                <td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-red-50/30">
                <td className="p-3 border border-red-200">Chauffeur d'entreprise</td>
                <td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-red-50/30">
                <td className="p-3 border border-red-200">Agent d'exploitation</td>
                <td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-red-50/30">
                <td className="p-3 border border-red-200">Coursier</td>
                <td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-red-50/30">
                <td className="p-3 border border-red-200">Gardien</td>
                <td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
              <tr className="hover:bg-red-50/30">
                <td className="p-3 border border-red-200">Agent d'entretien</td>
                <td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(parseEuro("1 828,83 €"))}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
