"use client";

import React, { useState } from 'react';
import { Mic2, Drama, Coins, Music } from 'lucide-react';

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

interface Annexe4ContentProps {}

export default function Annexe4Content({}: Annexe4ContentProps) {
  const [activeSection, setActiveSection] = useState<'dramatique' | 'varietes' | 'musiciens' | 'cabarets' | 'techniciens'>('dramatique');

  return (
    <div className="space-y-6">
      {/* En-tête */}
      <div className="rounded-xl border bg-gradient-to-br from-indigo-50 to-purple-50 p-4">
        <h2 className="text-lg font-semibold text-indigo-900 mb-1">
          Annexe 4 - Spectacles en tournée
        </h2>
        <p className="text-sm text-indigo-700">
          Producteurs ou diffuseurs de spectacles en tournée (spectacles dramatiques, lyriques, chorégraphiques, de musique classique, chanson, variétés, jazz, musiques actuelles, spectacles de cabarets avec ou sans revue, à l'exception des cirques et des bals)
        </p>
        <p className="text-xs text-indigo-600 mt-2">
          En application du titre VI des clauses communes et du titre V de l'annexe 4
        </p>
      </div>

      {/* Navigation */}
      <div className="flex gap-3 border-b pb-2 flex-wrap">
        <button
          onClick={() => setActiveSection('dramatique')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'dramatique'
              ? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <Drama className="w-4 h-4 inline-block mr-1" />
          Dramatique/Lyrique/Chorégraphique
        </button>
        <button
          onClick={() => setActiveSection('varietes')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'varietes'
              ? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <Mic2 className="w-4 h-4 inline-block mr-1" />
          Variétés/Concerts
        </button>
        <button
          onClick={() => setActiveSection('musiciens')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'musiciens'
              ? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <Music className="w-4 h-4 inline-block mr-1" />
          Musiciens
        </button>
        <button
          onClick={() => setActiveSection('cabarets')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'cabarets'
              ? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          🎪 Cabarets et revues
        </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-indigo-500 to-purple-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          🔧 Techniciens
        </button>
      </div>

      {/* Section Spectacles d'art dramatique, lyrique, chorégraphique */}
      {activeSection === 'dramatique' && (
        <div className="space-y-6">
          <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>
              Spectacles d'art dramatique, lyrique, chorégraphique, de marionnettes, de music-hall
            </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">Fonction</th>
                    <th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">1-7<br/>cachets</th>
                    <th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">8-15<br/>cachets</th>
                    <th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">16-23<br/>cachets</th>
                    <th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200">24+<br/>cachets</th>
                    <th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200 bg-indigo-100">Mensuel<br/>[1]</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="bg-indigo-100/30">
                    <td colSpan={6} className="p-2 pl-3 font-bold text-indigo-900 border border-indigo-200">
                      ARTISTE DRAMATIQUE
                    </td>
                  </tr>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-indigo-200">Rôle principal [4]</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(195.56)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(177.40)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(159.01)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(137.76)}</td>
                    <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(2940.22)}</td>
                  </tr>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-indigo-200">Rôle de plus de 100 lignes [2]</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(174.66)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(155.02)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(139.57)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(108.60)}</td>
                    <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(2374.44)}</td>
                  </tr>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-indigo-200">Rôle de 1 à 100 lignes [2]</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(131.15)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(116.71)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(106.37)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(95.60)}</td>
                    <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(2031.87)}</td>
                  </tr>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-indigo-200">Figurant(e)</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(108.68)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(102.63)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(97.07)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(89.66)}</td>
                    <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(1875.44)}</td>
                  </tr>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-indigo-200">Diseur(euse), conteur(euse)</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(174.66)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(155.02)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(139.57)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(108.60)}</td>
                    <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(2374.44)}</td>
                  </tr>

                  <tr className="bg-purple-100/30">
                    <td colSpan={6} className="p-2 pl-3 font-bold text-purple-900 border border-indigo-200">
                      ARTISTE LYRIQUE
                    </td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-indigo-200">1er rôle</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(217.38)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(199.86)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(181.16)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(152.36)}</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-indigo-200 bg-purple-50">{euro(3247.84)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-indigo-200">Second rôle</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(174.66)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(155.02)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(139.57)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(108.60)}</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-indigo-200 bg-purple-50">{euro(2374.44)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-indigo-200">Artiste des chœurs</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(120.45)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(108.68)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(98.54)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(87.62)}</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-indigo-200 bg-purple-50">{euro(1871.72)}</td>
                  </tr>

                  <tr className="bg-pink-100/30">
                    <td colSpan={6} className="p-2 pl-3 font-bold text-pink-900 border border-indigo-200">
                      ARTISTE CHORÉGRAPHIQUE
                    </td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-indigo-200">Danseur(euse) soliste</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(195.56)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(177.40)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(159.01)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(137.76)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-indigo-200 bg-pink-50">{euro(2940.22)}</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-indigo-200">Danseur(euse) du ballet</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(144.27)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(128.36)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(116.96)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(104.70)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-indigo-200 bg-pink-50">{euro(2230.70)}</td>
                  </tr>

                  <tr className="bg-amber-100/30">
                    <td colSpan={6} className="p-2 pl-3 font-bold text-amber-900 border border-indigo-200">
                      ARTISTE MARIONNETTISTE
                    </td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td className="p-3 border border-indigo-200">Marionnettiste</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(133.93)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(119.24)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(108.62)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(97.53)}</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-indigo-200 bg-amber-50">{euro(2069.33)}</td>
                  </tr>

                  <tr className="bg-rose-100/30">
                    <td colSpan={6} className="p-2 pl-3 font-bold text-rose-900 border border-indigo-200">
                      ARTISTE DE MUSIC-HALL
                    </td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-indigo-200">Artiste de music-hall, illusionniste, numéro visuel</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(217.38)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(199.86)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(181.16)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(152.36)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-indigo-200 bg-rose-50">{euro(3254.26)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-indigo-200">1er assistant(e) des attractions</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(120.45)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(108.68)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(98.54)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(95.49)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-indigo-200 bg-rose-50">{euro(1875.44)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-indigo-200">Autre assistant(e)</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(108.38)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(95.66)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(92.53)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(90.63)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-indigo-200 bg-rose-50">{euro(1816.04)}</td>
                  </tr>

                  <tr className="bg-teal-100/30">
                    <td colSpan={6} className="p-2 pl-3 font-bold text-teal-900 border border-indigo-200">
                      ARTISTE DU CIRQUE [3]
                    </td>
                  </tr>
                  <tr className="hover:bg-teal-50/30">
                    <td className="p-3 border border-indigo-200">Artiste de cirque</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(128.59)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(117.34)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(106.37)}</td>
                    <td className="text-center p-3 font-semibold border border-indigo-200">{euro(95.60)}</td>
                    <td className="text-center p-3 font-bold text-teal-900 border border-indigo-200 bg-teal-50">{euro(1992.04)}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div className="mt-4 space-y-2 text-xs text-slate-600">
              <div><span className="font-semibold">[1]</span> Pour 24 représentations ou journées de répétition par mois (art. 2.3.1 de l'annexe 4)</div>
              <div><span className="font-semibold">[2]</span> La ligne s'entend de 32 lettres</div>
              <div><span className="font-semibold">[3]</span> Engagé(e) dans un spectacle d'art dramatique, lyrique, chorégraphique ou de variétés</div>
              <div><span className="font-semibold">[4]</span> Le rôle principal est décidé de gré à gré. Le ou les rôles principaux doivent être mentionnés comme tels au contrat</div>
            </div>
          </div>

          {/* Orchestres symphoniques */}
          <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>
              Orchestres symphoniques et lyriques de droit privé (à partir de 10 musiciens et plus)
            </h3>
            
            <div className="space-y-4">
              <div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
                <div className="text-sm text-blue-900 space-y-2">
                  <div>
                    <span className="font-bold">Cachet minimum de représentation :</span> {euro(108.38)}
                  </div>
                  <div className="text-xs text-blue-700">
                    (incluant un raccord d'une heure avant le concert)
                  </div>
                </div>
              </div>

              <div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
                <div className="text-sm text-blue-900 space-y-2">
                  <div>
                    <span className="font-bold">Journée de répétitions (2 services) :</span> {euro(93.65)}
                  </div>
                </div>
              </div>

              <div className="bg-blue-50 rounded-lg p-4 border border-blue-200">
                <div className="text-sm text-blue-900 space-y-2">
                  <div>
                    <span className="font-bold">Salaire minimum mensuel :</span> {euro(2591.77)}
                  </div>
                  <div className="text-xs text-blue-700">
                    À partir de 22 services jusqu'à 30, au-delà il sera versé une rémunération supplémentaire au pro rata temporis
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Comédies musicales */}
          <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>
              Comédies musicales/spectacles de variétés (en tournée)
            </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">Fonction</th>
                    <th className="text-center p-3 text-purple-900 font-bold border border-purple-200">1-7<br/>cachets</th>
                    <th className="text-center p-3 text-purple-900 font-bold border border-purple-200">8-15<br/>cachets</th>
                    <th className="text-center p-3 text-purple-900 font-bold border border-purple-200">16+<br/>cachets</th>
                    <th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Mensuel [1]</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">1er chanteur(euse) soliste/1er rôle</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(212.64)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(190.27)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(171.41)}</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(3423.49)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">Chanteur(euse) soliste/2nd rôle</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(170.82)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(150.80)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(134.89)}</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(2698.99)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">Choriste</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(119.56)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(105.36)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(94.56)}</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(1888.97)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">1er danseur(euse) soliste/1er rôle</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(212.65)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(190.27)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(171.41)}</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(3423.49)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">Danseur(euse) soliste/2nd rôle</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(198.50)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(173.77)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(152.56)}</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(3054.76)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">Artiste chorégraphique d'ensemble</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(170.82)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(150.80)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(134.89)}</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(2698.99)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">Artiste de music-hall, illusionniste</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(212.65)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(190.27)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(171.41)}</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(3423.49)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">1er assistant(e) des attractions</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(116.01)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(104.17)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(93.98)}</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(1879.45)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">Autre assistant(e)</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(104.70)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(93.79)}</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(87.01)}</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(1777.90)}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div className="mt-4 text-xs text-slate-600">
              <span className="font-semibold">[1]</span> Pour 24 représentations ou journées de répétition par mois (art. 2.3.1 de l'annexe 4)
            </div>
          </div>
        </div>
      )}

      {/* Section Spectacles de variétés/concerts */}
      {activeSection === 'varietes' && (
        <div className="space-y-6">
          <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>
              Spectacles de variétés/concerts - En tournée
            </h3>
            
            <div className="space-y-6">
              {/* Salles < 300 places */}
              <div>
                <h4 className="text-sm font-semibold text-rose-700 mb-3 px-3 py-2 bg-rose-50 rounded-lg inline-block">
                  📍 Salles de moins de 300 places (ou premières parties de spectacles ou plateaux découvertes ou spectacles promotionnels)
                </h4>
                <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">Fonction</th>
                        <th className="text-center p-3 text-rose-900 font-bold border border-rose-200">1-7<br/>cachets</th>
                        <th className="text-center p-3 text-rose-900 font-bold border border-rose-200">8-11<br/>cachets</th>
                        <th className="text-center p-3 text-rose-900 font-bold border border-rose-200">12-15<br/>cachets</th>
                        <th className="text-center p-3 text-rose-900 font-bold border border-rose-200">16+<br/>cachets</th>
                        <th className="text-center p-3 text-rose-900 font-bold border border-rose-200 bg-rose-100">Mensuel [1]</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="hover:bg-rose-50/30">
                        <td className="p-3 border border-rose-200">Chanteur(euse) soliste</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(119.01)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(108.36)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(98.26)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(90.00)}</td>
                        <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(1953.76)}</td>
                      </tr>
                      <tr className="hover:bg-rose-50/30">
                        <td className="p-3 border border-rose-200">Groupe constitué d'artistes solistes</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(119.01)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(108.36)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(98.26)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(90.00)}</td>
                        <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(1953.76)}</td>
                      </tr>
                      <tr className="hover:bg-rose-50/30">
                        <td className="p-3 border border-rose-200">Choriste</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(119.01)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(108.36)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(98.26)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(90.00)}</td>
                        <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(1953.76)}</td>
                      </tr>
                      <tr className="hover:bg-rose-50/30">
                        <td className="p-3 border border-rose-200">Danseur(euse)</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(119.01)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(108.36)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(98.26)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(90.00)}</td>
                        <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(1953.76)}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              {/* Autres salles */}
              <div>
                <h4 className="text-sm font-semibold text-pink-700 mb-3 px-3 py-2 bg-pink-50 rounded-lg inline-block">
                  📍 Autres salles
                </h4>
                <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">Fonction</th>
                        <th className="text-center p-3 text-pink-900 font-bold border border-pink-200">1-7<br/>cachets</th>
                        <th className="text-center p-3 text-pink-900 font-bold border border-pink-200">8-11<br/>cachets</th>
                        <th className="text-center p-3 text-pink-900 font-bold border border-pink-200">12-15<br/>cachets</th>
                        <th className="text-center p-3 text-pink-900 font-bold border border-pink-200">16+<br/>cachets</th>
                        <th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Mensuel [1]</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="hover:bg-pink-50/30">
                        <td className="p-3 border border-pink-200">Chanteur(euse) soliste</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(174.66)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(155.02)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(139.56)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(124.43)}</td>
                        <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2927.05)}</td>
                      </tr>
                      <tr className="hover:bg-pink-50/30">
                        <td className="p-3 border border-pink-200">Groupe constitué d'artistes solistes</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(155.02)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(138.06)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(124.81)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(114.64)}</td>
                        <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2436.83)}</td>
                      </tr>
                      <tr className="hover:bg-pink-50/30">
                        <td className="p-3 border border-pink-200">Choriste dont la partie est intégrée au score</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(151.11)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(134.45)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(122.55)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(119.59)}</td>
                        <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2391.62)}</td>
                      </tr>
                      <tr className="hover:bg-pink-50/30">
                        <td className="p-3 border border-pink-200">Choriste</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(122.59)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(109.06)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(100.05)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(92.28)}</td>
                        <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(1907.86)}</td>
                      </tr>
                      <tr className="hover:bg-pink-50/30">
                        <td className="p-3 border border-pink-200">Danseur(euse)</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(122.59)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(109.06)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(100.05)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(92.28)}</td>
                        <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(1907.86)}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <div className="mt-4 space-y-2 text-xs text-slate-600">
              <div><span className="font-semibold">[1]</span> Pour 24 représentations ou journées de répétition par mois (art. 2.3.1 de l'annexe 4)</div>
              <div>💡 En cas de spectacle promotionnel tel que défini au II.3, article 4.3, titre II de l'annexe musique : {euro(119.01)}</div>
            </div>
          </div>

          {/* Cachet de répétition */}
          <div className="rounded-xl border bg-gradient-to-br from-amber-50 to-orange-50 p-4">
            <h4 className="text-sm font-bold text-amber-900 mb-2">Cachet de répétition</h4>
            <p className="text-sm text-amber-800">
              Le cachet de répétition est fixé à <span className="font-bold">{euro(93.22)}</span> (pour un ou deux services de répétitions de quatre heures dans la même journée)
            </p>
          </div>
        </div>
      )}

      {/* Section Musiciens */}
      {activeSection === 'musiciens' && (
        <div className="space-y-6">
          {/* Autres musiciens */}
          <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>
              Musiciens - En tournée
            </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">Catégorie</th>
                    <th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">Moins de 8<br/>cachets</th>
                    <th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">8-15<br/>cachets</th>
                    <th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">16+<br/>cachets</th>
                    <th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200 bg-cyan-100">Mensuel [1]</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="bg-cyan-100/30">
                    <td colSpan={5} className="p-2 pl-3 font-bold text-cyan-900 border border-cyan-200">
                      PETITES SALLES [2] OU PREMIÈRES PARTIES DE SPECTACLE [3]
                    </td>
                  </tr>
                  <tr className="hover:bg-cyan-50/30">
                    <td className="p-3 border border-cyan-200">Musicien(ne)</td>
                    <td className="text-center p-3 font-semibold border border-cyan-200">{euro(121.34)}</td>
                    <td className="text-center p-3 font-semibold border border-cyan-200">{euro(106.03)}</td>
                    <td className="text-center p-3 border border-cyan-200 text-slate-400">—</td>
                    <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200 bg-cyan-50">{euro(2002.74)}</td>
                  </tr>

                  <tr className="bg-teal-100/30">
                    <td colSpan={5} className="p-2 pl-3 font-bold text-teal-900 border border-cyan-200">
                      AUTRES SALLES
                    </td>
                  </tr>
                  <tr className="hover:bg-teal-50/30">
                    <td className="p-3 border border-cyan-200">Musicien(ne)</td>
                    <td className="text-center p-3 font-semibold border border-cyan-200">{euro(176.09)}</td>
                    <td className="text-center p-3 font-semibold border border-cyan-200">{euro(154.80)}</td>
                    <td className="text-center p-3 font-semibold border border-cyan-200">{euro(136.25)}</td>
                    <td className="text-center p-3 font-bold text-teal-900 border border-cyan-200 bg-teal-50">{euro(2998.16)}</td>
                  </tr>

                  <tr className="bg-indigo-100/30">
                    <td colSpan={5} className="p-2 pl-3 font-bold text-indigo-900 border border-cyan-200">
                      COMÉDIES MUSICALES ET ORCHESTRES DE PLUS DE 10 MUSICIENS(NNES)
                    </td>
                  </tr>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-cyan-200">Engagement &lt; 1 mois</td>
                    <td className="text-center p-3 font-semibold border border-cyan-200">{euro(131.19)}</td>
                    <td className="text-center p-3 font-semibold border border-cyan-200">{euro(131.19)}</td>
                    <td className="text-center p-3 font-semibold border border-cyan-200">{euro(131.19)}</td>
                    <td className="text-center p-3 border border-cyan-200 text-slate-400">—</td>
                  </tr>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-cyan-200">Engagement &gt; 1 mois</td>
                    <td className="text-center p-3 border border-cyan-200 text-slate-400">—</td>
                    <td className="text-center p-3 border border-cyan-200 text-slate-400">—</td>
                    <td className="text-center p-3 border border-cyan-200 text-slate-400">—</td>
                    <td className="text-center p-3 font-bold text-indigo-900 border border-cyan-200 bg-indigo-50">{euro(2604.62)}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div className="mt-4 space-y-2 text-xs text-slate-600">
              <div><span className="font-semibold">[1]</span> Pour 24 représentations ou journées de répétition par mois (art. 2.3.1 de l'annexe 4)</div>
              <div><span className="font-semibold">[2]</span> Les petites salles sont réputées être des salles avoisinant 300 places. Elles sont agréées par la commission paritaire mise en place par les signataires de la convention</div>
              <div><span className="font-semibold">[3]</span> Ces tarifs sont applicables aux premières parties de spectacle ne dépassant pas 45 minutes</div>
              <div className="mt-3">💡 <span className="font-semibold">En cas d'instruments multiples</span> (hors instruments de même famille), le salaire du (de la) musicien(ne) ne peut être inférieur à 110 % du minimum conventionnel applicable</div>
              <div>💡 <span className="font-semibold">Spectacles promotionnels</span> (en tournée) : taux applicable {euro(121.34)}</div>
              <div>💡 <span className="font-semibold">Jours de répétition</span> : rémunérés comme salaires sur la base définie en annexe</div>
            </div>
          </div>
        </div>
      )}

      {/* Section Cabarets */}
      {activeSection === 'cabarets' && (
        <div className="space-y-6">
          {/* Troupe constituée */}
          <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>
              Spectacles de cabarets et de revues - Troupe constituée
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-fuchsia-50">
                    <th rowSpan={2} className="text-left p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Fonction</th>
                    <th colSpan={2} className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200">Cachet minimum isolé jusqu'à 7 cachets</th>
                    <th colSpan={2} className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200">Plus de 7 cachets</th>
                    <th colSpan={2} className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Salaire mensuel</th>
                  </tr>
                  <tr className="bg-fuchsia-50">
                    <th className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200">Pour une soirée ou matinée de une représentation</th>
                    <th className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200">Pour une soirée ou matinée de deux représentations consécutives</th>
                    <th className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200">Pour une soirée ou matinée de une représentation</th>
                    <th className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200">Pour une soirée ou matinée de deux représentations consécutives</th>
                    <th className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Pour 26 à 30 représentation mois non consécutives</th>
                    <th className="text-center p-2 text-[10px] leading-tight text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Pour 52 à 56 représentations mois consécutives mini 2 à 2</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Capitaine niveau 1</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(128.04)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(198.48)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(124.72)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(174.61)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(3159.24)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(4422.94)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Capitaine niveau 2</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(117.71)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(182.44)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(114.63)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(160.50)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(2903.92)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(4065.59)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Danseurs(euses) solistes et autres artistes solistes</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(106.93)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(165.70)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(104.15)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(145.81)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(2753.41)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(3693.11)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Danseurs(euses) de revue</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(97.68)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(151.17)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(95.14)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(132.54)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(2398.04)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(3357.24)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Autres artistes de revue</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(95.07)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(146.65)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(92.59)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(128.99)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(2334.16)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(3267.85)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Chanteur(euse)</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(130.62)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(202.48)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(127.22)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(178.11)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(3222.99)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(4512.16)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Musicien(ne) avant spectacle sur scène</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(133.22)}</td>
                    <td className="text-center p-3 border border-fuchsia-200 text-slate-400">—</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(129.75)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(181.66)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(3286.88)}</td>
                    <td className="text-center p-3 border border-fuchsia-200 bg-fuchsia-50 text-slate-400">—</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Musicien(ne) accompagnant tout le show</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(133.22)}</td>
                    <td className="text-center p-3 border border-fuchsia-200 text-slate-400">—</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(129.75)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(181.66)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(3286.88)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(4601.67)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Attraction/artiste de variété</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(133.22)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(206.49)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(129.75)}</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(181.66)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(3286.88)}</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(4601.67)}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div className="mt-4 space-y-2 text-xs text-slate-600">
              <div>💡 <span className="font-semibold">Shows consécutifs</span> : sont considérés comme shows consécutifs deux shows dont le temps de pause entre les deux shows sera au minimum de 35 minutes et au maximum de 60 minutes</div>
              <div className="mt-3 font-semibold">Prime de capitaine remplaçant(e) :</div>
              <div>• Niveau 1 : une représentation {euro(18.49)} ; deux représentations {euro(25.89)}</div>
              <div>• Niveau 2 : une représentation {euro(9.24)} ; deux représentations {euro(12.92)}</div>
              <div className="mt-2 font-semibold">Répétition d'entretien :</div>
              <div>Pour un service de 3 heures 30 minutes échauffement compris : {euro(46.65)}</div>
            </div>
          </div>

          {/* Hors troupe constituée */}
          <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>
              Spectacles de cabarets et de revues - Hors troupe constituée
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-rose-50">
                    <th rowSpan={2} className="text-left p-3 text-rose-900 font-bold border border-rose-200">Fonction</th>
                    <th colSpan={3} className="text-center p-2 text-[10px] leading-tight text-rose-900 font-bold border border-rose-200">Nombre de cachets</th>
                  </tr>
                  <tr className="bg-rose-50">
                    <th className="text-center p-2 text-[10px] leading-tight text-rose-900 font-bold border border-rose-200">De 1 à 7</th>
                    <th className="text-center p-2 text-[10px] leading-tight text-rose-900 font-bold border border-rose-200">De 8 à 15</th>
                    <th className="text-center p-2 text-[10px] leading-tight text-rose-900 font-bold border border-rose-200">De 16 à 24</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Danseurs(euses) solistes</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(127.82)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(116.92)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(114.55)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Danseurs(euses) et autres artistes de cabaret</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(115.76)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(105.90)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(103.78)}</td>
                  </tr>
                  <tr className="bg-rose-100/50">
                    <td colSpan={4} className="p-2 pl-3 font-semibold text-rose-900 border border-rose-200">Artiste de variété/attraction :</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 pl-6 border border-rose-200">Pour 40 min [1]</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(163.11)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(149.24)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(146.24)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 pl-6 border border-rose-200">Pour 60 min [1]</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(220.98)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(202.19)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(198.13)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 pl-6 border border-rose-200">Pour 80 min [1]</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(255.56)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(233.82)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(229.13)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Chanteur(euses) soliste ou groupe de chanteurs(euses) solistes</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(141.30)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(129.30)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(126.71)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Musicien(ne)</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(141.30)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(129.30)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(126.71)}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div className="mt-4 text-xs text-slate-600">
              <span className="font-semibold">[1]</span> Temps de travail effectué sur scène
            </div>
          </div>
        </div>
      )}

      {/* Section Techniciens */}
      {activeSection === 'techniciens' && (
        <div className="space-y-6">
          <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>
              Grille de salaires minimaux techniciens(nnes) en tournée
            </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">Classification</th>
                    <th className="text-left p-3 text-teal-900 font-bold border border-teal-200">Fonctions</th>
                    <th className="text-center p-3 text-teal-900 font-bold border border-teal-200 bg-teal-100">Taux horaire</th>
                    <th className="text-center p-3 text-teal-900 font-bold border border-teal-200">Salaire mensuel (35 heures hebdo)</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="bg-teal-100/30">
                    <td colSpan={4} className="p-2 pl-3 font-bold text-teal-900 border border-teal-200">
                      CADRES (GROUPE 2)
                    </td>
                  </tr>
                  <tr className="hover:bg-teal-50/30">
                    <td className="p-3 border border-teal-200 font-semibold">Cadres (Gr 2)</td>
                    <td className="p-3 border border-teal-200 text-xs">
                      Directeur(trice) technique, régisseur(euse) général, concepteur(trice) du son, ingénieur(e) du son, 
                      concepteur(trice) lumière/éclairagiste, réalisateur(trice) lumière, décorateur(trice), 
                      architecte-décorateur(trice), scénographe, costumier(ière)-ensemblier(ière), chef costumier(ière), 
                      concepteur(trice) costumes, concepteur(trice) coiffure, perruques, concepteur(trice) maquillage, masques, 
                      réalisateur(trice) pour diffusion intégrée au spectacle, ingénieur(e) du son-vidéo, chef opérateur(trice), 
                      directeur(trice) de production
                    </td>
                    <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(20.03)}</td>
                    <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3037.55)}</td>
                  </tr>

                  <tr className="bg-cyan-100/30">
                    <td colSpan={4} className="p-2 pl-3 font-bold text-cyan-900 border border-teal-200">
                      AGENT DE MAÎTRISE
                    </td>
                  </tr>
                  <tr className="hover:bg-cyan-50/30">
                    <td className="p-3 border border-teal-200 font-semibold">Agent de maîtrise</td>
                    <td className="p-3 border border-teal-200 text-xs">
                      Régisseur(euse), régisseur(euse) d'orchestre, régisseur(euse) de production, conseiller(ière) technique effets spéciaux, 
                      concepteur(trice) artificier(ière), régisseur(euse) plateau, régisseur(euse) son, régisseur(euse) lumière, 
                      régisseur(euse) de scène, régisseur(euse) de chœur, opérateur(trice) son, preneur(euse) de son, technicien(ne) console, 
                      sonorisateur(trice), réalisateur(trice) son, monteur(euse) son, régisseur(euse) lumière, chef électricien(ne), 
                      pupitreur(euse), technicien(ne) CAO-PAO, chef machiniste, chef constructeur(trice), chef accessoiriste, 
                      accrocheur(euse)-rigger-chef, cintrier(ière)-chef, chef peintre, chef coiffeur(euse)-perruquier(ière), 
                      chef habilleur(euse), régisseur(euse) vidéo, chef opérateur(trice) vidéo, monteur(euse) vidéo, assistant(e) metteur(euse) en scène, 
                      assistant(e) décorateur(trice), assistant(e) costumier(ière), assistant(e) maquilleur(euse)-coiffeur(euse), chef maquilleur(euse), 
                      régisseur(euse) accessoires
                    </td>
                    <td className="text-center p-3 font-semibold border border-teal-200 bg-cyan-50">{euro(17.08)}</td>
                    <td className="text-center p-3 font-bold text-cyan-900 border border-teal-200">{euro(2590.85)}</td>
                  </tr>

                  <tr className="bg-blue-100/30">
                    <td colSpan={4} className="p-2 pl-3 font-bold text-blue-900 border border-teal-200">
                      EMPLOYÉS QUALIFIÉS (GROUPE 1)
                    </td>
                  </tr>
                  <tr className="hover:bg-blue-50/30">
                    <td className="p-3 border border-teal-200 font-semibold">Employés qualifiés (Gr 1)</td>
                    <td className="p-3 border border-teal-200 text-xs">
                      Régisseur(euse) adjoint, technicien(ne) de maintenance en tournée et festival, technicien(ne) de pyrotechnie, 
                      technicien(ne) effets spéciaux, artificier(ière), technicien(ne) groupe électrogène, technicien(ne) son, 
                      technicien(ne) instruments, accordeur(euse), électricien(ne), technicien(ne) lumière, accessoiriste, 
                      accessoiriste-constructeur(trice), accrocheur(euse)-rigger, assistant(e) décorateur(trice), cintrier(ière), 
                      constructeur(trice) décors structures, menuisier(ière) de spectacle, peintre décorateur(trice), sculpteur(trice), 
                      serrurier(ière), soudeur(euse), tapissier(ière), couturier(ière), perruquier(ière), maquilleur(euse)-coiffeur(euse), 
                      habilleur(euse), monteur(euse), machiniste, technicien(ne) vidéo, opérateur(trice) vidéo, assistant(e) son, 
                      assistant(e) lumière, assistant(e) de production
                    </td>
                    <td className="text-center p-3 font-semibold border border-teal-200 bg-blue-50">{euro(14.73)}</td>
                    <td className="text-center p-3 font-bold text-blue-900 border border-teal-200">{euro(2233.48)}</td>
                  </tr>

                  <tr className="bg-indigo-100/30">
                    <td colSpan={4} className="p-2 pl-3 font-bold text-indigo-900 border border-teal-200">
                      EMPLOYÉS QUALIFIÉS (GROUPE 2)
                    </td>
                  </tr>
                  <tr className="hover:bg-indigo-50/30">
                    <td className="p-3 border border-teal-200 font-semibold">Employés qualifiés (Gr 2)</td>
                    <td className="p-3 border border-teal-200 text-xs">
                      Technicien(ne) de plateau ou brigadier(ière), prompteur(euse), souffleur(euse), poursuiteur(euse), peintre, 
                      cariste de spectacles, habilleur(euse)-couturier(ière), habilleur(euse)-perruquier(ière), couturier(ière), 
                      agent(e) de sécurité, peintre site, cariste site, chauffeur(euse), électricien(ne) d'entretien
                    </td>
                    <td className="text-center p-3 font-semibold border border-teal-200 bg-indigo-50">{euro(13.55)}</td>
                    <td className="text-center p-3 font-bold text-indigo-900 border border-teal-200">{euro(2054.82)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          {/* Note importante */}
          <div className="rounded-xl border bg-gradient-to-br from-amber-50 to-orange-50 p-4">
            <h4 className="text-sm font-bold text-amber-900 mb-2 flex items-center gap-2">
              ⚠️ Amplitude journalière
            </h4>
            <p className="text-sm text-amber-800">
              En cas d'amplitude journalière excédant une durée de 10 heures, les heures de travail effectif au-delà de 8 heures 
              effectuées au cours d'une même journée feront l'objet d'un paiement majoré de <span className="font-bold">25 %</span>.
            </p>
            <p className="text-xs text-amber-700 mt-2">
              Cette majoration sera déduite de l'éventuelle majoration pour heures supplémentaires que le salarié pourrait être 
              amené à percevoir dans les conditions prévues par la présente annexe.
            </p>
          </div>
        </div>
      )}
    </div>
  );
}
