espace-paie-odentas/app/(app)/minima-ccn/ccnsvp/annexe5-data.tsx

"use client";

import React, { useState } from 'react';

const euro = (n: number) => new Intl.NumberFormat('fr-FR', {
  minimumFractionDigits: Number.isInteger(n) ? 0 : 2,
  maximumFractionDigits: 2
}).format(n) + '€';

interface Annexe5ContentProps {}

export default function Annexe5Content({}: Annexe5ContentProps) {
  const [activeSection, setActiveSection] = useState<'artistes' | 'techniciens'>('artistes');

  return (
    <div className="space-y-6">
      {/* En-tête */}
      <div className="rounded-xl border bg-gradient-to-br from-orange-50 to-red-50 p-4">
        <h2 className="text-lg font-semibold text-orange-900 mb-1">
          Annexe 5 - Spectacles de cirque
        </h2>
        <p className="text-sm text-orange-700">
          Producteurs ou diffuseurs de spectacles de cirque
        </p>
        <p className="text-xs text-orange-600 mt-2">
          En application du titre VI des clauses communes et des articles 3.4, 3.5 et 4.3 de l'annexe 5
        </p>
      </div>

      {/* Navigation */}
      <div className="flex gap-3 border-b pb-2 flex-wrap">
        <button
          onClick={() => setActiveSection('artistes')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'artistes'
              ? 'bg-gradient-to-r from-orange-500 to-red-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          🎪 Artistes-interprètes
        </button>
        <button
          onClick={() => setActiveSection('techniciens')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'techniciens'
              ? 'bg-gradient-to-r from-orange-500 to-red-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          🔧 Personnel technique
        </button>
      </div>

      {/* Section Artistes-interprètes */}
      {activeSection === 'artistes' && (
        <div className="space-y-6">
          {/* Exploitation des spectacles */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-orange-900 mb-4 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-orange-500"></span>
              Artistes-interprètes du cirque et musiciens(nnes) - Exploitation des spectacles
            </h3>
            
            <div className="mb-4 text-sm text-slate-700 bg-orange-50 border border-orange-200 rounded-lg p-3">
              La grille des salaires concerne l'ensemble des contrats de travail : <span className="font-bold">CDI, CDD, CDDU</span>
            </div>

            <div className="space-y-6">
              {/* En situation d'itinérance */}
              <div>
                <h4 className="text-sm font-semibold text-orange-700 mb-3 px-3 py-2 bg-orange-50 rounded-lg inline-block">
                  🚐 En situation d'itinérance (spectacles sous chapiteau)
                </h4>
                <div className="overflow-x-auto">
                  <table className="w-full text-xs border-collapse">
                    <thead>
                      <tr className="bg-orange-50">
                        <th className="text-left p-3 text-orange-900 font-bold border border-orange-200">Type</th>
                        <th className="text-center p-3 text-orange-900 font-bold border border-orange-200">Cachet</th>
                        <th className="text-center p-3 text-orange-900 font-bold border border-orange-200">1/2 cachet<br/>(demi-représentation)</th>
                        <th className="text-center p-3 text-orange-900 font-bold border border-orange-200 bg-orange-100">Mensuel</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="hover:bg-orange-50/30">
                        <td className="p-3 border border-orange-200 font-semibold">Rémunération</td>
                        <td className="text-center p-3 font-semibold border border-orange-200">{euro(117.23)}</td>
                        <td className="text-center p-3 font-semibold border border-orange-200">{euro(106.75)}</td>
                        <td className="text-center p-3 font-bold text-orange-900 border border-orange-200 bg-orange-50">{euro(1915.29)}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              {/* En tournée (hors chapiteau) */}
              <div>
                <h4 className="text-sm font-semibold text-red-700 mb-3 px-3 py-2 bg-red-50 rounded-lg inline-block">
                  🎭 En tournée (hors chapiteau)
                </h4>
                <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">Type</th>
                        <th className="text-center p-3 text-red-900 font-bold border border-red-200">Cachet</th>
                        <th className="text-center p-3 text-red-900 font-bold border border-red-200">1/2 cachet<br/>(demi-représentation)</th>
                        <th className="text-center p-3 text-red-900 font-bold border border-red-200 bg-red-100">Mensuel</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="hover:bg-red-50/30">
                        <td className="p-3 border border-red-200 font-semibold">Rémunération</td>
                        <td className="text-center p-3 font-semibold border border-red-200">{euro(128.59)}</td>
                        <td className="text-center p-3 font-semibold border border-red-200">{euro(114.42)}</td>
                        <td className="text-center p-3 font-bold text-red-900 border border-red-200 bg-red-50">{euro(1992.04)}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

          {/* Répétitions / Création */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-amber-900 mb-4 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-amber-500"></span>
              Répétitions - Création
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-amber-50">
                    <th className="text-left p-3 text-amber-900 font-bold border border-amber-200">Type de cachet</th>
                    <th className="text-center p-3 text-amber-900 font-bold border border-amber-200">Montant</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-amber-50/30">
                    <td className="p-3 border border-amber-200">Cachet de base par jour</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(106.75)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td className="p-3 border border-amber-200">Cachet de répétition en cas de service isolé pour les artistes de cirque</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(62.42)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td className="p-3 border border-amber-200 font-semibold">Salaire mensuel</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200 bg-amber-50">{euro(1775.78)}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div className="mt-4 text-xs text-slate-600 bg-amber-50 border border-amber-200 rounded-lg p-3">
              <span className="font-semibold">Note :</span> La rémunération mensuelle est entendue pour <span className="font-bold">151,67 heures</span>, pour un contrat d'une durée minimale d'un mois de date à date, sur une durée de 5 jours par semaine.
            </div>
          </div>

          {/* Note informative */}
          <div className="rounded-xl border bg-gradient-to-br from-blue-50 to-cyan-50 p-4">
            <h4 className="text-sm font-bold text-blue-900 mb-2 flex items-center gap-2">
              💡 Informations importantes
            </h4>
            <div className="text-sm text-blue-800 space-y-2">
              <p>
                Les minima salariaux présentés s'appliquent aux artistes-interprètes du cirque et aux musiciens(nnes) engagés dans le cadre de spectacles de cirque.
              </p>
              <p className="text-xs text-blue-700">
                Ces tarifs sont applicables que l'artiste soit en situation d'itinérance sous chapiteau ou en tournée dans des lieux fixes.
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Section Personnel technique */}
      {activeSection === 'techniciens' && (
        <div className="space-y-6">
          <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>
              Grille de salaires minimaux - Personnel technique
            </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">Classification</th>
                    <th className="text-center p-3 text-slate-900 font-bold border border-slate-200">Mensuel</th>
                    <th className="text-center p-3 text-slate-900 font-bold border border-slate-200 bg-slate-100">Taux horaire</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="bg-indigo-100/30">
                    <td colSpan={3} className="p-2 pl-3 font-bold text-indigo-900 border border-slate-200">
                      CADRES
                    </td>
                  </tr>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-slate-200">Cadres Groupe 1</td>
                    <td className="text-center p-3 font-bold text-indigo-900 border border-slate-200">{euro(3547.66)}</td>
                    <td className="text-center p-3 font-semibold border border-slate-200 bg-indigo-50">{euro(23.39)}</td>
                  </tr>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-slate-200">Cadres Groupe 2</td>
                    <td className="text-center p-3 font-bold text-indigo-900 border border-slate-200">{euro(2923.27)}</td>
                    <td className="text-center p-3 font-semibold border border-slate-200 bg-indigo-50">{euro(19.27)}</td>
                  </tr>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-slate-200">Cadres Groupe 3</td>
                    <td className="text-center p-3 font-bold text-indigo-900 border border-slate-200">{euro(2287.32)}</td>
                    <td className="text-center p-3 font-semibold border border-slate-200 bg-indigo-50">{euro(15.08)}</td>
                  </tr>

                  <tr className="bg-cyan-100/30">
                    <td colSpan={3} className="p-2 pl-3 font-bold text-cyan-900 border border-slate-200">
                      AGENTS DE MAÎTRISE
                    </td>
                  </tr>
                  <tr className="hover:bg-cyan-50/30">
                    <td className="p-3 border border-slate-200">Agents de maîtrise</td>
                    <td className="text-center p-3 font-bold text-cyan-900 border border-slate-200">{euro(2142.14)}</td>
                    <td className="text-center p-3 font-semibold border border-slate-200 bg-cyan-50">{euro(14.12)}</td>
                  </tr>

                  <tr className="bg-blue-100/30">
                    <td colSpan={3} className="p-2 pl-3 font-bold text-blue-900 border border-slate-200">
                      EMPLOYÉS QUALIFIÉS
                    </td>
                  </tr>
                  <tr className="hover:bg-blue-50/30">
                    <td className="p-3 border border-slate-200">Employés qualifiés Groupe 1</td>
                    <td className="text-center p-3 font-bold text-blue-900 border border-slate-200">{euro(1911.36)}</td>
                    <td className="text-center p-3 font-semibold border border-slate-200 bg-blue-50">{euro(12.60)}</td>
                  </tr>
                  <tr className="hover:bg-blue-50/30">
                    <td className="p-3 border border-slate-200">Employés qualifiés Groupe 2</td>
                    <td className="text-center p-3 font-bold text-blue-900 border border-slate-200">{euro(1812.13)}</td>
                    <td className="text-center p-3 font-semibold border border-slate-200 bg-blue-50">{euro(11.94)}</td>
                  </tr>

                  <tr className="bg-slate-100/50">
                    <td colSpan={3} className="p-2 pl-3 font-bold text-slate-900 border border-slate-200">
                      EMPLOYÉS
                    </td>
                  </tr>
                  <tr className="hover:bg-slate-50/30">
                    <td className="p-3 border border-slate-200">Employés</td>
                    <td className="text-center p-3 font-bold text-slate-900 border border-slate-200">{euro(1777.90)}</td>
                    <td className="text-center p-3 font-semibold border border-slate-200 bg-slate-100">{euro(11.72)}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div className="mt-4 text-xs text-slate-600 bg-slate-50 border border-slate-200 rounded-lg p-3">
              <p className="font-semibold mb-2">Note importante :</p>
              <p>
                Les salaires mensuels sont calculés sur la base de <span className="font-bold">151,67 heures</span> pour un contrat d'une durée minimale d'un mois de date à date, sur une durée de 5 jours par semaine.
              </p>
            </div>
          </div>

          {/* Détails des fonctions par catégorie */}
          <div className="rounded-xl border bg-gradient-to-br from-purple-50 to-pink-50 p-4">
            <h4 className="text-sm font-bold text-purple-900 mb-3">
              📋 Exemples de fonctions par catégorie
            </h4>
            <div className="space-y-3 text-xs">
              <div className="bg-white rounded-lg p-3 border border-purple-200">
                <div className="font-semibold text-purple-900 mb-1">Cadres Groupe 1</div>
                <div className="text-slate-700">Directeur(trice) technique, régisseur(euse) général(e), directeur(trice) de production</div>
              </div>
              <div className="bg-white rounded-lg p-3 border border-purple-200">
                <div className="font-semibold text-purple-900 mb-1">Cadres Groupe 2</div>
                <div className="text-slate-700">Concepteur(trice) lumière, concepteur(trice) du son, scénographe</div>
              </div>
              <div className="bg-white rounded-lg p-3 border border-purple-200">
                <div className="font-semibold text-purple-900 mb-1">Agents de maîtrise</div>
                <div className="text-slate-700">Régisseur(euse), chef électricien(ne), chef machiniste, opérateur(trice) son</div>
              </div>
              <div className="bg-white rounded-lg p-3 border border-purple-200">
                <div className="font-semibold text-purple-900 mb-1">Employés qualifiés</div>
                <div className="text-slate-700">Technicien(ne) son, technicien(ne) lumière, électricien(ne), machiniste, constructeur(trice)</div>
              </div>
            </div>
            <div className="mt-3 text-xs text-purple-700">
              <span className="font-semibold">💡 Remarque :</span> Pour la liste exhaustive des fonctions, se référer au titre VI des clauses communes de la convention collective.
            </div>
          </div>
        </div>
      )}
    </div>
  );
}