"use client";

import React, { useState } from 'react';
import { Users, Mic2, Wrench, Music, UtensilsCrossed } from 'lucide-react';

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

interface Annexe3ContentProps {}

export default function Annexe3Content({}: Annexe3ContentProps) {
  const [activeSection, setActiveSection] = useState<'troupe' | 'hors-troupe' | 'techniciens' | 'salle-cuisine'>('troupe');

  return (
    <div className="space-y-6">
      {/* En-tête */}
      <div className="rounded-xl border bg-gradient-to-br from-rose-50 to-pink-50 p-4">
        <h2 className="text-lg font-semibold text-rose-900 mb-1">
          Annexe 3 - Cabarets
        </h2>
        <p className="text-sm text-rose-700">
          Exploitants de lieux, producteurs ou diffuseurs de spectacles de cabarets
        </p>
        <p className="text-xs text-rose-600 mt-2">
          En application du titre VI des clauses communes et de l'article 4.7 de l'annexe 3
        </p>
      </div>

      {/* Navigation */}
      <div className="flex gap-3 border-b pb-2 flex-wrap">
        <button
          onClick={() => setActiveSection('troupe')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'troupe'
              ? 'bg-gradient-to-r from-rose-500 to-pink-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <Users className="w-4 h-4 inline-block mr-1" />
          Troupe constituée
        </button>
        <button
          onClick={() => setActiveSection('hors-troupe')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'hors-troupe'
              ? 'bg-gradient-to-r from-rose-500 to-pink-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" />
          Hors troupe constituée
        </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-rose-500 to-pink-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <Wrench className="w-4 h-4 inline-block mr-1" />
          Techniciens
        </button>
        <button
          onClick={() => setActiveSection('salle-cuisine')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'salle-cuisine'
              ? 'bg-gradient-to-r from-rose-500 to-pink-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <UtensilsCrossed className="w-4 h-4 inline-block mr-1" />
          Salle/Cuisine/Plonge
        </button>
      </div>

      {/* Section Troupe constituée */}
      {activeSection === 'troupe' && (
        <div className="space-y-6">
          {/* Salles ≤ 300 places */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-rose-900 mb-3 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-rose-500"></span>
              Salles avoisinant 300 places au maximum
            </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"></th>
                    <th colSpan={2} className="text-center p-2 text-rose-900 font-bold border border-rose-200">Cachet minimum isolé<br/>jusqu'à 7 cachets dans le mois</th>
                    <th colSpan={2} className="text-center p-2 text-rose-900 font-bold border border-rose-200">Plus de 7 cachets<br/>dans le mois hors<br/>mensualisation</th>
                    <th colSpan={3} className="text-center p-2 text-rose-900 font-bold border border-rose-200 bg-rose-100">Salaire mensuel</th>
                  </tr>
                  <tr className="bg-rose-50">
                    <th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 text-[10px] leading-tight">Pour une<br/>soirée ou<br/>matinée<br/>de une<br/>représentation</th>
                    <th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 text-[10px] leading-tight">Pour une soirée<br/>ou matinée<br/>de deux<br/>représentations<br/>consécutives</th>
                    <th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 text-[10px] leading-tight">Pour une<br/>soirée ou<br/>matinée<br/>de une<br/>représentation</th>
                    <th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 text-[10px] leading-tight">Pour une soirée<br/>ou matinée<br/>de deux<br/>représentations<br/>consécutives</th>
                    <th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 bg-rose-100 text-[10px] leading-tight">Pour 26 à 30<br/>représentations<br/>mois non<br/>consécutives</th>
                    <th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 bg-rose-100 text-[10px] leading-tight">Pour 52 à 56<br/>représentations<br/>mois<br/>consécutives<br/>mini 2 à 2</th>
                    <th className="text-center p-2 text-rose-900 font-semibold border border-rose-200 bg-rose-100 text-[10px] leading-tight">Pour 26 soirées<br/>dont 13 à deux<br/>représentations<br/>consécutives</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Capitaine niveau 1</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(111.02)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(172.10)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(108.16)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(151.41)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2739.74)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3835.63)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3287.69)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Capitaine niveau 2</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(101.77)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(157.77)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(99.13)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(138.79)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2511.43)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3516.00)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3013.71)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Danseurs solistes et autres artistes solistes</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(92.98)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(144.11)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(90.56)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(126.79)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2294.27)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3211.99)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2753.12)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Danseurs de revue</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(86.76)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(134.46)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(84.15)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(118.30)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2144.06)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3001.70)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2572.88)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Autres artistes de revue</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(84.28)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(130.63)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(82.10)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(114.93)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2082.09)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2914.94)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2498.53)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Chanteur</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(112.95)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(175.07)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(110.02)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(154.01)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2787.81)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3902.93)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3345.37)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Musicien avant spectacle sur scène</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(112.95)}</td>
                    <td className="text-center p-3 border border-rose-200">—</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(110.02)}</td>
                    <td className="text-center p-3 border border-rose-200">—</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2787.81)}</td>
                    <td className="text-center p-3 border border-rose-200 bg-rose-50">—</td>
                    <td className="text-center p-3 border border-rose-200 bg-rose-50">—</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Musicien accompagnant tout le show</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(112.95)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(175.07)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(110.02)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(154.01)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2787.81)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3902.93)}</td>
                    <td className="text-center p-3 border border-rose-200 bg-rose-50">—</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Musicien dîner + 1er Show</td>
                    <td className="text-center p-3 border border-rose-200">—</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(175.07)}</td>
                    <td className="text-center p-3 border border-rose-200">—</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(154.01)}</td>
                    <td className="text-center p-3 border border-rose-200 bg-rose-50">—</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3902.93)}</td>
                    <td className="text-center p-3 border border-rose-200 bg-rose-50">—</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Musicien dîner + 2 Shows</td>
                    <td className="text-center p-3 border border-rose-200">—</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(236.36)}</td>
                    <td className="text-center p-3 border border-rose-200">—</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(208.00)}</td>
                    <td className="text-center p-3 border border-rose-200 bg-rose-50">—</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(5275.20)}</td>
                    <td className="text-center p-3 border border-rose-200 bg-rose-50">—</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Attraction/artiste de variété</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(112.95)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(175.07)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(110.02)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(154.01)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(2787.81)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3902.93)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(3345.37)}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div className="mt-4 space-y-2 text-xs text-slate-600">
              <div className="font-semibold">Prime de capitaine remplaçant :</div>
              <div>• Niveau 1 : une représentation {euro(17.94)} ; deux représentations {euro(25.10)}</div>
              <div>• Niveau 2 : une représentation {euro(8.98)} ; deux représentations {euro(12.55)}</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>

          {/* Salles > 300 places */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-pink-900 mb-3 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-pink-500"></span>
              Salles supérieures à 300 places
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-pink-50">
                    <th rowSpan={2} className="text-left p-3 text-pink-900 font-bold border border-pink-200"></th>
                    <th colSpan={2} className="text-center p-2 text-pink-900 font-bold border border-pink-200">Cachet minimum isolé<br/>jusqu'à 7 cachets dans le mois</th>
                    <th colSpan={2} className="text-center p-2 text-pink-900 font-bold border border-pink-200">Plus de 7 cachets<br/>dans le mois hors<br/>mensualisation</th>
                    <th colSpan={3} className="text-center p-2 text-pink-900 font-bold border border-pink-200 bg-pink-100">Salaire mensuel</th>
                  </tr>
                  <tr className="bg-pink-50">
                    <th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 text-[10px] leading-tight">Pour une<br/>soirée ou<br/>matinée<br/>de une<br/>représentation</th>
                    <th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 text-[10px] leading-tight">Pour une soirée<br/>ou matinée<br/>de deux<br/>représentations<br/>consécutives</th>
                    <th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 text-[10px] leading-tight">Pour une<br/>soirée ou<br/>matinée<br/>de une<br/>représentation</th>
                    <th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 text-[10px] leading-tight">Pour une soirée<br/>ou matinée<br/>de deux<br/>représentations<br/>consécutives</th>
                    <th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 bg-pink-100 text-[10px] leading-tight">Pour 26 à 30<br/>représentations<br/>mois non<br/>consécutives</th>
                    <th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 bg-pink-100 text-[10px] leading-tight">Pour 52 à 56<br/>représentations<br/>mois<br/>consécutives<br/>mini 2 à 2</th>
                    <th className="text-center p-2 text-pink-900 font-semibold border border-pink-200 bg-pink-100 text-[10px] leading-tight">Pour 26 soirées<br/>dont 13 à deux<br/>représentations<br/>consécutives</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">Capitaine niveau 1</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(118.96)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(184.39)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(115.88)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(162.22)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2935.24)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(4109.38)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3522.31)}</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">Capitaine niveau 2</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(109.35)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(169.50)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(106.50)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(149.12)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2698.06)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3777.35)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3237.71)}</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">Danseurs solistes et autres artistes solistes</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(99.61)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(154.41)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(97.04)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(135.84)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2458.02)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3441.31)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2949.66)}</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">Danseurs de revue</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(90.56)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(140.38)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(88.20)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(123.50)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2234.50)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3128.30)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2681.40)}</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">Autres artistes de revue</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(88.15)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(136.64)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(85.85)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(120.19)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2174.97)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3044.97)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2609.98)}</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">Chanteur</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(120.18)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(186.28)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(117.05)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(163.87)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2965.12)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(4151.17)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3558.16)}</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">Musicien avant spectacle sur scène</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(122.56)}</td>
                    <td className="text-center p-3 border border-pink-200">—</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(119.36)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(167.12)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3023.90)}</td>
                    <td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
                    <td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">Musicien accompagnant tout le show</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(122.56)}</td>
                    <td className="text-center p-3 border border-pink-200">—</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(119.36)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(167.12)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3023.90)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(4233.53)}</td>
                    <td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">Musicien dîner + 1er Show</td>
                    <td className="text-center p-3 border border-pink-200">—</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(186.28)}</td>
                    <td className="text-center p-3 border border-pink-200">—</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(167.12)}</td>
                    <td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(4233.53)}</td>
                    <td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">Musicien dîner + 2 Shows</td>
                    <td className="text-center p-3 border border-pink-200">—</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(250.43)}</td>
                    <td className="text-center p-3 border border-pink-200">—</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(225.39)}</td>
                    <td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(5709.55)}</td>
                    <td className="text-center p-3 border border-pink-200 bg-pink-50">—</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">Attraction/artiste de variété</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(122.56)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(189.96)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(119.36)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(167.12)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3023.90)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(4233.53)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(3628.73)}</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> : deux shows dont le temps de pause entre les deux est au minimum de 35 minutes et au maximum de 60 minutes</div>
              <div>💡 Pour les artistes polycompétents, la rémunération ci-dessus ne correspond qu'à la prestation en présence du public</div>
              <div className="font-semibold mt-3">Prime de capitaine remplaçant :</div>
              <div>• Niveau 1 : une représentation {euro(18.82)} ; deux représentations {euro(26.37)}</div>
              <div>• Niveau 2 : une représentation {euro(9.40)} ; deux représentations {euro(13.19)}</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>
        </div>
      )}

      {/* Section Hors troupe constituée */}
      {activeSection === 'hors-troupe' && (
        <div className="space-y-6">
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-rose-900 mb-3">
              Artistes hors troupe constituée
            </h3>
            
            <div className="space-y-4">
              {/* Salles ≤ 300 places */}
              <div>
                <h4 className="text-sm font-semibold text-rose-700 mb-2">📍 Salles avoisinant 300 places au maximum</h4>
                <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"></th>
                        <th colSpan={3} className="text-center p-2 text-rose-900 font-bold border border-rose-200">Nombre de représentations par mois</th>
                      </tr>
                      <tr className="bg-rose-50">
                        <th className="text-center p-3 text-rose-900 font-semibold border border-rose-200">1 à 7</th>
                        <th className="text-center p-3 text-rose-900 font-semibold border border-rose-200">8 à 15</th>
                        <th className="text-center p-3 text-rose-900 font-semibold border border-rose-200">16 à 24</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="hover:bg-rose-50/30">
                        <td className="p-3 border border-rose-200">Danseurs solistes et autre artiste de cabaret soliste</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(92.98)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(90.04)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(88.22)}</td>
                      </tr>
                      <tr className="hover:bg-rose-50/30">
                        <td className="p-3 border border-rose-200">Danseurs et autres artistes de cabaret</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(86.94)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(85.08)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(83.38)}</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</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(96.61)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(88.38)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(86.60)}</td>
                      </tr>
                      <tr className="hover:bg-rose-50/30">
                        <td className="p-3 pl-6 border border-rose-200">Pour 60 min</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(120.17)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(109.95)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(107.74)}</td>
                      </tr>
                      <tr className="hover:bg-rose-50/30">
                        <td className="p-3 pl-6 border border-rose-200">Pour 80 min</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(142.77)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(130.64)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(128.01)}</td>
                      </tr>
                      <tr className="hover:bg-rose-50/30">
                        <td className="p-3 border border-rose-200">Chanteur soliste ou groupe de chanteurs solistes</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(108.16)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(98.97)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(96.98)}</td>
                      </tr>
                      <tr className="hover:bg-rose-50/30">
                        <td className="p-3 border border-rose-200">Musicien</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(108.16)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(98.97)}</td>
                        <td className="text-center p-3 font-semibold border border-rose-200">{euro(96.98)}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              {/* Salles > 300 places */}
              <div>
                <h4 className="text-sm font-semibold text-pink-700 mb-2">📍 Salles supérieures à 300 places</h4>
                <div className="overflow-x-auto">
                  <table className="w-full text-xs border-collapse">
                    <thead>
                      <tr className="bg-pink-50">
                        <th rowSpan={2} className="text-left p-3 text-pink-900 font-bold border border-pink-200"></th>
                        <th colSpan={3} className="text-center p-2 text-pink-900 font-bold border border-pink-200">Nombre de représentations par mois</th>
                      </tr>
                      <tr className="bg-pink-50">
                        <th className="text-center p-3 text-pink-900 font-semibold border border-pink-200">1 à 7</th>
                        <th className="text-center p-3 text-pink-900 font-semibold border border-pink-200">8 à 15</th>
                        <th className="text-center p-3 text-pink-900 font-semibold border border-pink-200">16 à 24</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="hover:bg-pink-50/30">
                        <td className="p-3 border border-pink-200">Danseurs solistes</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(118.49)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(108.40)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(106.23)}</td>
                      </tr>
                      <tr className="hover:bg-pink-50/30">
                        <td className="p-3 border border-pink-200">Danseurs et autres artistes de cabaret</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(107.33)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(98.20)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(96.22)}</td>
                      </tr>
                      <tr className="bg-pink-100/50">
                        <td colSpan={4} className="p-2 pl-3 font-semibold text-pink-900 border border-pink-200">Artiste de variété/attraction</td>
                      </tr>
                      <tr className="hover:bg-pink-50/30">
                        <td className="p-3 pl-6 border border-pink-200">Pour 40 min</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(149.76)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(137.02)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(134.28)}</td>
                      </tr>
                      <tr className="hover:bg-pink-50/30">
                        <td className="p-3 pl-6 border border-pink-200">Pour 60 min</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(202.89)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(185.65)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(181.93)}</td>
                      </tr>
                      <tr className="hover:bg-pink-50/30">
                        <td className="p-3 pl-6 border border-pink-200">Pour 80 min</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(234.63)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(214.68)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(210.38)}</td>
                      </tr>
                      <tr className="hover:bg-pink-50/30">
                        <td className="p-3 border border-pink-200">Chanteur soliste ou groupe de chanteurs solistes</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(129.74)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(118.72)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(116.33)}</td>
                      </tr>
                      <tr className="hover:bg-pink-50/30">
                        <td className="p-3 border border-pink-200">Musicien</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(129.74)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(118.72)}</td>
                        <td className="text-center p-3 font-semibold border border-pink-200">{euro(116.33)}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <div className="mt-4 text-xs text-slate-600">
              💡 Temps de travail effectué sur scène
            </div>
          </div>
        </div>
      )}

      {/* Section Techniciens */}
      {activeSection === 'techniciens' && (
        <div className="space-y-6">
          {/* Techniciens du spectacle */}
          <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>
              Techniciens du spectacle
            </h3>
            
            <div className="space-y-6">
              {/* Salles ≤ 300 places */}
              <div>
                <h4 className="text-sm font-semibold text-blue-700 mb-3 px-3 py-2 bg-blue-50 rounded-lg inline-block">
                  📍 Salles avoisinant 300 places au maximum
                </h4>
                <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">Fonction</th>
                        <th className="text-center p-3 text-blue-900 font-bold border border-blue-200">Niveau de<br/>qualification</th>
                        <th className="text-center p-3 text-blue-900 font-bold border border-blue-200 bg-blue-100">Heures</th>
                        <th className="text-center p-3 text-blue-900 font-bold border border-blue-200 bg-blue-100">Heures de<br/>0 à 2 heures</th>
                        <th className="text-center p-3 text-blue-900 font-bold border border-blue-200">Mois</th>
                        <th className="text-center p-3 text-blue-900 font-bold border border-blue-200">Mois de travail<br/>de 0 à 2 heures</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="hover:bg-blue-50/30">
                        <td className="p-3 border border-blue-200">
                          <div className="font-semibold text-blue-900">Directeur technique</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-blue-200">Cadre<br/>groupe 2</td>
                        <td className="text-center p-3 border border-blue-200 bg-blue-50 text-slate-400">—</td>
                        <td className="text-center p-3 border border-blue-200 bg-blue-50 text-slate-400">—</td>
                        <td className="text-center p-3 border border-blue-200 text-slate-400">—</td>
                        <td className="text-center p-3 border border-blue-200 text-slate-400">—</td>
                      </tr>
                      <tr className="hover:bg-blue-50/30">
                        <td className="p-3 border border-blue-200">
                          <div className="font-semibold text-blue-900">Régisseur général</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-blue-200">Cadre<br/>groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(17.67)}</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(19.44)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2680.01)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2756.63)}</td>
                      </tr>
                      <tr className="hover:bg-blue-50/30">
                        <td className="p-3 border border-blue-200">
                          <div className="font-semibold text-blue-900">Régisseur de scène</div>
                          <div className="text-slate-600 text-xs mt-1">Connaît les 3 domaines avec une spécialisation particulière son, lumière ou plateau</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-blue-200">Agent de<br/>maîtrise</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(16.97)}</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(18.68)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2573.84)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2647.43)}</td>
                      </tr>
                      <tr className="hover:bg-blue-50/30">
                        <td className="p-3 border border-blue-200">
                          <div className="font-semibold text-blue-900">Chef machiniste</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-blue-200">Agent de<br/>maîtrise</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(17.09)}</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(18.79)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2592.04)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2666.15)}</td>
                      </tr>
                      <tr className="hover:bg-blue-50/30">
                        <td className="p-3 border border-blue-200">
                          <div className="font-semibold text-blue-900">Régisseur son, lumière, plateau</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-blue-200">Agent de<br/>maîtrise</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(15.31)}</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(16.85)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2322.07)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2388.46)}</td>
                      </tr>
                      <tr className="hover:bg-blue-50/30">
                        <td className="p-3 border border-blue-200">
                          <div className="font-semibold text-blue-900">Régisseur (cabaret jusqu'à 300 places)</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-blue-200">Agent de<br/>maîtrise</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(13.55)}</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(14.90)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2055.13)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(2113.89)}</td>
                      </tr>
                      <tr className="hover:bg-blue-50/30">
                        <td className="p-3 border border-blue-200">
                          <div className="font-semibold text-blue-900">Régisseur adjoint, sous-chef machiniste, électricien spectacle, électricien site, accessoiriste, machiniste</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-blue-200">Employés<br/>qualifiés<br/>groupe 1</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(12.72)}</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(13.93)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1929.24)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1984.40)}</td>
                      </tr>
                      <tr className="hover:bg-blue-50/30">
                        <td className="p-3 border border-blue-200">
                          <div className="font-semibold text-blue-900">Brigadier</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-blue-200">Employés<br/>qualifiés<br/>groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(12.50)}</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(13.74)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1895.88)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1950.08)}</td>
                      </tr>
                      <tr className="hover:bg-blue-50/30">
                        <td className="p-3 border border-blue-200">
                          <div className="font-semibold text-blue-900">Manutentionnaire Personnel entretien</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-blue-200">Employés</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(12.38)}</td>
                        <td className="text-center p-3 font-semibold border border-blue-200 bg-blue-50">{euro(13.63)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1877.67)}</td>
                        <td className="text-center p-3 font-bold text-blue-900 border border-blue-200">{euro(1931.35)}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              {/* Salles 300-600 places */}
              <div>
                <h4 className="text-sm font-semibold text-cyan-700 mb-3 px-3 py-2 bg-cyan-50 rounded-lg inline-block">
                  📍 Salles de 300 à 700 places
                </h4>
                <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">Fonction</th>
                        <th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">Niveau de<br/>qualification</th>
                        <th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200 bg-cyan-100">Heures</th>
                        <th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200 bg-cyan-100">Heures de<br/>0 à 2 heures</th>
                        <th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">Mois</th>
                        <th className="text-center p-3 text-cyan-900 font-bold border border-cyan-200">Mois de travail<br/>de 0 à 2 heures</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="hover:bg-cyan-50/30">
                        <td className="p-3 border border-cyan-200">
                          <div className="font-semibold text-cyan-900">Directeur technique</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-cyan-200">Cadre<br/>groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(23.45)}</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(25.79)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3556.96)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3658.65)}</td>
                      </tr>
                      <tr className="hover:bg-cyan-50/30">
                        <td className="p-3 border border-cyan-200">
                          <div className="font-semibold text-cyan-900">Régisseur général</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-cyan-200">Cadre<br/>groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(22.28)}</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(24.50)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3378.72)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(3475.32)}</td>
                      </tr>
                      <tr className="hover:bg-cyan-50/30">
                        <td className="p-3 border border-cyan-200">
                          <div className="font-semibold text-cyan-900">Régisseur de scène</div>
                          <div className="text-slate-600 text-xs mt-1">Connaît les 3 domaines avec une spécialisation particulière son, lumière ou plateau</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-cyan-200">Agent de<br/>maîtrise</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(18.86)}</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(20.74)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2859.77)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2941.53)}</td>
                      </tr>
                      <tr className="hover:bg-cyan-50/30">
                        <td className="p-3 border border-cyan-200">
                          <div className="font-semibold text-cyan-900">Chef machiniste</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-cyan-200">Agent de<br/>maîtrise</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(18.70)}</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(20.66)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2848.73)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2930.18)}</td>
                      </tr>
                      <tr className="hover:bg-cyan-50/30">
                        <td className="p-3 border border-cyan-200">
                          <div className="font-semibold text-cyan-900">Régisseur son, lumière, plateau</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-cyan-200">Agent de<br/>maîtrise</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(16.85)}</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(18.53)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2555.34)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2628.40)}</td>
                      </tr>
                      <tr className="hover:bg-cyan-50/30">
                        <td className="p-3 border border-cyan-200">
                          <div className="font-semibold text-cyan-900">Régisseur adjoint, sous-chef machiniste, électricien spectacle, électricien site, accessoiriste, machiniste</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-cyan-200">Employés<br/>qualifiés<br/>groupe 1</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(13.94)}</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(15.33)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2113.67)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2174.10)}</td>
                      </tr>
                      <tr className="hover:bg-cyan-50/30">
                        <td className="p-3 border border-cyan-200">
                          <div className="font-semibold text-cyan-900">Brigadier</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-cyan-200">Employés<br/>qualifiés<br/>groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(13.84)}</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(15.23)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2099.48)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2159.50)}</td>
                      </tr>
                      <tr className="hover:bg-cyan-50/30">
                        <td className="p-3 border border-cyan-200">
                          <div className="font-semibold text-cyan-900">Manutentionnaire Personnel entretien</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-cyan-200">Employés</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(13.61)}</td>
                        <td className="text-center p-3 font-semibold border border-cyan-200 bg-cyan-50">{euro(14.98)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2064.77)}</td>
                        <td className="text-center p-3 font-bold text-cyan-900 border border-cyan-200">{euro(2123.80)}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              {/* Salles > 700 places */}
              <div>
                <h4 className="text-sm font-semibold text-teal-700 mb-3 px-3 py-2 bg-teal-50 rounded-lg inline-block">
                  📍 Salles supérieures à 700 places
                </h4>
                <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">Fonction</th>
                        <th className="text-center p-3 text-teal-900 font-bold border border-teal-200">Niveau de<br/>qualification</th>
                        <th className="text-center p-3 text-teal-900 font-bold border border-teal-200 bg-teal-100">Heures</th>
                        <th className="text-center p-3 text-teal-900 font-bold border border-teal-200 bg-teal-100">Heures de<br/>0 à 2 heures</th>
                        <th className="text-center p-3 text-teal-900 font-bold border border-teal-200">Mois</th>
                        <th className="text-center p-3 text-teal-900 font-bold border border-teal-200">Mois de travail<br/>de 0 à 2 heures</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="hover:bg-teal-50/30">
                        <td className="p-3 border border-teal-200">
                          <div className="font-semibold text-teal-900">Directeur technique</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-teal-200">Cadre<br/>groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(24.39)}</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(26.82)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3698.93)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3804.68)}</td>
                      </tr>
                      <tr className="hover:bg-teal-50/30">
                        <td className="p-3 border border-teal-200">
                          <div className="font-semibold text-teal-900">Régisseur général</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-teal-200">Cadre<br/>groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(23.16)}</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(25.48)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3512.80)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3613.23)}</td>
                      </tr>
                      <tr className="hover:bg-teal-50/30">
                        <td className="p-3 border border-teal-200">
                          <div className="font-semibold text-teal-900">Régisseur de scène</div>
                          <div className="text-slate-600 text-xs mt-1">Connaît les 3 domaines avec une spécialisation particulière son, lumière ou plateau</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-teal-200">Agent de<br/>maîtrise</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(19.60)}</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(21.56)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2973.34)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3058.35)}</td>
                      </tr>
                      <tr className="hover:bg-teal-50/30">
                        <td className="p-3 border border-teal-200">
                          <div className="font-semibold text-teal-900">Chef machiniste</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-teal-200">Agent de<br/>maîtrise</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(19.54)}</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(21.50)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2963.87)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(3048.61)}</td>
                      </tr>
                      <tr className="hover:bg-teal-50/30">
                        <td className="p-3 border border-teal-200">
                          <div className="font-semibold text-teal-900">Régisseur son, lumière, plateau</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-teal-200">Agent de<br/>maîtrise</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(17.51)}</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(19.27)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2656.29)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2732.23)}</td>
                      </tr>
                      <tr className="hover:bg-teal-50/30">
                        <td className="p-3 border border-teal-200">
                          <div className="font-semibold text-teal-900">Régisseur adjoint, sous-chef machiniste, électricien spectacle, électricien site, accessoiriste, machiniste</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-teal-200">Employés<br/>qualifiés<br/>groupe 1</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(14.50)}</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(15.94)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2198.85)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2261.72)}</td>
                      </tr>
                      <tr className="hover:bg-teal-50/30">
                        <td className="p-3 border border-teal-200">
                          <div className="font-semibold text-teal-900">Brigadier</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-teal-200">Employés<br/>qualifiés<br/>groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(14.40)}</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(15.85)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2184.65)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2247.11)}</td>
                      </tr>
                      <tr className="hover:bg-teal-50/30">
                        <td className="p-3 border border-teal-200">
                          <div className="font-semibold text-teal-900">Manutentionnaire Personnel entretien</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-teal-200">Employés</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(14.15)}</td>
                        <td className="text-center p-3 font-semibold border border-teal-200 bg-teal-50">{euro(15.57)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2146.80)}</td>
                        <td className="text-center p-3 font-bold text-teal-900 border border-teal-200">{euro(2208.16)}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <div className="mt-4 text-xs text-slate-600 space-y-1">
              <div>💡 <span className="font-semibold">Majoration 0h-2h :</span> +10% du taux horaire pour les heures effectuées entre 0h et 2h du matin</div>
            </div>
          </div>

          {/* Personnel costumes */}
          <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>
              Personnel des costumes
            </h3>
            
            <div className="space-y-6">
              {/* Salles ≤ 300 places */}
              <div>
                <h4 className="text-sm font-semibold text-purple-700 mb-3 px-3 py-2 bg-purple-50 rounded-lg inline-block">
                  📍 Salles avoisinant 300 places au maximum
                </h4>
                <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">Niveau de<br/>qualification</th>
                        <th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Heures</th>
                        <th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Heures de<br/>0 à 2 heures</th>
                        <th className="text-center p-3 text-purple-900 font-bold border border-purple-200">Mois</th>
                        <th className="text-center p-3 text-purple-900 font-bold border border-purple-200">Mois de travail<br/>de 0 à 2 heures</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="hover:bg-purple-50/30">
                        <td className="p-3 border border-purple-200">
                          <div className="font-semibold text-purple-900">Costumier(ère)</div>
                          <div className="text-slate-600 text-xs mt-1">[1] Costumière : responsable création des costumes</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-purple-200">Cadre<br/>groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(17.32)}</td>
                        <td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(19.05)}</td>
                        <td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(2626.92)}</td>
                        <td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(2702.03)}</td>
                      </tr>
                      <tr className="hover:bg-purple-50/30">
                        <td className="p-3 border border-purple-200">
                          <div className="font-semibold text-purple-900">Chef habilleur(euse) Chef couturier</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-purple-200">Agent de<br/>maîtrise</td>
                        <td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(13.78)}</td>
                        <td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(15.16)}</td>
                        <td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(2090.01)}</td>
                        <td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(2149.77)}</td>
                      </tr>
                      <tr className="hover:bg-purple-50/30">
                        <td className="p-3 border border-purple-200">
                          <div className="font-semibold text-purple-900">Couturier(ère) senior (G1)</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-purple-200">Employé<br/>Groupe 1</td>
                        <td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(12.45)}</td>
                        <td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(13.70)}</td>
                        <td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1888.29)}</td>
                        <td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1942.28)}</td>
                      </tr>
                      <tr className="hover:bg-purple-50/30">
                        <td className="p-3 border border-purple-200">
                          <div className="font-semibold text-purple-900">Couturier(ère)</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-purple-200">Employé<br/>Groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(12.13)}</td>
                        <td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(13.34)}</td>
                        <td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1839.76)}</td>
                        <td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1892.36)}</td>
                      </tr>
                      <tr className="hover:bg-purple-50/30">
                        <td className="p-3 border border-purple-200">
                          <div className="font-semibold text-purple-900">Habilleur(euse)</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-purple-200">Employé</td>
                        <td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(11.72)}</td>
                        <td className="text-center p-3 font-semibold border border-purple-200 bg-purple-50">{euro(12.90)}</td>
                        <td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1777.57)}</td>
                        <td className="text-center p-3 font-bold text-purple-900 border border-purple-200">{euro(1828.39)}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              {/* Salles 300-700 places */}
              <div>
                <h4 className="text-sm font-semibold text-fuchsia-700 mb-3 px-3 py-2 bg-fuchsia-50 rounded-lg inline-block">
                  📍 Salles de 300 à 700 places
                </h4>
                <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">Fonction</th>
                        <th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Niveau de<br/>qualification</th>
                        <th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Heures</th>
                        <th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Heures de<br/>0 à 2 heures</th>
                        <th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Mois</th>
                        <th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200">Mois de travail<br/>de 0 à 2 heures</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="hover:bg-fuchsia-50/30">
                        <td className="p-3 border border-fuchsia-200">
                          <div className="font-semibold text-fuchsia-900">Costumier(ère)</div>
                          <div className="text-slate-600 text-xs mt-1">[1] Costumière : responsable création des costumes</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-fuchsia-200">Cadre<br/>groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(19.25)}</td>
                        <td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(21.17)}</td>
                        <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2919.65)}</td>
                        <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(3003.12)}</td>
                      </tr>
                      <tr className="hover:bg-fuchsia-50/30">
                        <td className="p-3 border border-fuchsia-200">
                          <div className="font-semibold text-fuchsia-900">Chef habilleur(euse) Chef couturier</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-fuchsia-200">Agent de<br/>maîtrise</td>
                        <td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(15.31)}</td>
                        <td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(16.85)}</td>
                        <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2322.07)}</td>
                        <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2388.46)}</td>
                      </tr>
                      <tr className="hover:bg-fuchsia-50/30">
                        <td className="p-3 border border-fuchsia-200">
                          <div className="font-semibold text-fuchsia-900">Couturier(ère) senior (G1)</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-fuchsia-200">Employé<br/>Groupe 1</td>
                        <td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(13.76)}</td>
                        <td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(15.13)}</td>
                        <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2086.98)}</td>
                        <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2146.65)}</td>
                      </tr>
                      <tr className="hover:bg-fuchsia-50/30">
                        <td className="p-3 border border-fuchsia-200">
                          <div className="font-semibold text-fuchsia-900">Couturier(ère)</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-fuchsia-200">Employé<br/>Groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(12.83)}</td>
                        <td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(14.11)}</td>
                        <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(1945.93)}</td>
                        <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(2001.56)}</td>
                      </tr>
                      <tr className="hover:bg-fuchsia-50/30">
                        <td className="p-3 border border-fuchsia-200">
                          <div className="font-semibold text-fuchsia-900">Habilleur(euse)</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-fuchsia-200">Employé</td>
                        <td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(12.71)}</td>
                        <td className="text-center p-3 font-semibold border border-fuchsia-200 bg-fuchsia-50">{euro(13.98)}</td>
                        <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(1927.73)}</td>
                        <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200">{euro(1982.84)}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              {/* Salles > 700 places */}
              <div>
                <h4 className="text-sm font-semibold text-violet-700 mb-3 px-3 py-2 bg-violet-50 rounded-lg inline-block">
                  📍 Salles supérieures à 700 places
                </h4>
                <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">Fonction</th>
                        <th className="text-center p-3 text-violet-900 font-bold border border-violet-200">Niveau de<br/>qualification</th>
                        <th className="text-center p-3 text-violet-900 font-bold border border-violet-200 bg-violet-100">Heures</th>
                        <th className="text-center p-3 text-violet-900 font-bold border border-violet-200 bg-violet-100">Heures de<br/>0 à 2 heures</th>
                        <th className="text-center p-3 text-violet-900 font-bold border border-violet-200">Mois</th>
                        <th className="text-center p-3 text-violet-900 font-bold border border-violet-200">Mois de travail<br/>de 0 à 2 heures</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr className="hover:bg-violet-50/30">
                        <td className="p-3 border border-violet-200">
                          <div className="font-semibold text-violet-900">Costumier(ère)</div>
                          <div className="text-slate-600 text-xs mt-1">[1] Costumière : responsable création des costumes</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-violet-200">Cadre<br/>groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(20.02)}</td>
                        <td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(22.02)}</td>
                        <td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(3036.43)}</td>
                        <td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(3123.25)}</td>
                      </tr>
                      <tr className="hover:bg-violet-50/30">
                        <td className="p-3 border border-violet-200">
                          <div className="font-semibold text-violet-900">Chef habilleur(euse) Chef couturier</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-violet-200">Agent de<br/>maîtrise</td>
                        <td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(15.92)}</td>
                        <td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(17.51)}</td>
                        <td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2414.59)}</td>
                        <td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2483.62)}</td>
                      </tr>
                      <tr className="hover:bg-violet-50/30">
                        <td className="p-3 border border-violet-200">
                          <div className="font-semibold text-violet-900">Couturier(ère) senior (G1)</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-violet-200">Employé<br/>Groupe 1</td>
                        <td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(14.29)}</td>
                        <td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(15.71)}</td>
                        <td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2167.36)}</td>
                        <td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2229.33)}</td>
                      </tr>
                      <tr className="hover:bg-violet-50/30">
                        <td className="p-3 border border-violet-200">
                          <div className="font-semibold text-violet-900">Couturier(ère)</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-violet-200">Employé<br/>Groupe 2</td>
                        <td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(13.35)}</td>
                        <td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(14.68)}</td>
                        <td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2024.79)}</td>
                        <td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2082.68)}</td>
                      </tr>
                      <tr className="hover:bg-violet-50/30">
                        <td className="p-3 border border-violet-200">
                          <div className="font-semibold text-violet-900">Habilleur(euse)</div>
                        </td>
                        <td className="text-center p-3 text-xs border border-violet-200">Employé</td>
                        <td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(13.22)}</td>
                        <td className="text-center p-3 font-semibold border border-violet-200 bg-violet-50">{euro(14.54)}</td>
                        <td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2005.08)}</td>
                        <td className="text-center p-3 font-bold text-violet-900 border border-violet-200">{euro(2062.40)}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Section Salle/Cuisine/Plonge */}
      {activeSection === 'salle-cuisine' && (
        <div className="space-y-6">
          <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>
              Personnel de Salle, Cuisine et Plonge
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-amber-50">
                    <th rowSpan={2} className="text-left p-3 text-amber-900 font-bold border border-amber-200">Niveau de qualification</th>
                    <th rowSpan={2} className="text-center p-3 text-amber-900 font-bold border border-amber-200">Échelon</th>
                    <th colSpan={2} className="text-center p-3 text-amber-900 font-bold border border-amber-200 bg-amber-100">Salaire<br/>Contrats de plus de 6 heures semaine</th>
                    <th rowSpan={2} className="text-center p-3 text-amber-900 font-bold border border-amber-200">Salaire<br/>Contrat de 6 heures semaine<br/><br/>Taux horaire</th>
                  </tr>
                  <tr className="bg-amber-50">
                    <th className="text-center p-3 text-amber-900 font-bold border border-amber-200 bg-amber-100">Taux horaire</th>
                    <th className="text-center p-3 text-amber-900 font-bold border border-amber-200 bg-amber-100">Salaire mensuel<br/>base 151,67 heures</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-amber-50/30">
                    <td className="p-3 border border-amber-200">
                      <div className="font-semibold text-amber-900">Cadres groupe 1</div>
                    </td>
                    <td className="text-center p-3 border border-amber-200"></td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(20.52)}</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(3112.27)}</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(22.57)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td className="p-3 border border-amber-200">
                      <div className="font-semibold text-amber-900">Cadres groupe 2</div>
                    </td>
                    <td className="text-center p-3 border border-amber-200"></td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(16.90)}</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(2563.22)}</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(18.59)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td className="p-3 border border-amber-200">
                      <div className="font-semibold text-amber-900">Cadres groupes 3</div>
                    </td>
                    <td className="text-center p-3 border border-amber-200"></td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(14.51)}</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(2200.73)}</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(15.96)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td rowSpan={2} className="p-3 border border-amber-200">
                      <div className="font-semibold text-amber-900">Agents de maîtrise</div>
                    </td>
                    <td className="text-center p-3 border border-amber-200">1</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.45)}</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1888.29)}</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.70)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td className="text-center p-3 border border-amber-200">2</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.64)}</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1917.11)}</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.90)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td rowSpan={2} className="p-3 border border-amber-200">
                      <div className="font-semibold text-amber-900">Employés qualifiés groupe 1</div>
                    </td>
                    <td className="text-center p-3 border border-amber-200">1</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.22)}</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1853.41)}</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.44)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td className="text-center p-3 border border-amber-200">2</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.32)}</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1868.57)}</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.55)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td rowSpan={2} className="p-3 border border-amber-200">
                      <div className="font-semibold text-amber-900">Employés qualifiés groupe 2</div>
                    </td>
                    <td className="text-center p-3 border border-amber-200">1</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(11.90)}</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1804.87)}</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.09)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td className="text-center p-3 border border-amber-200">2</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.06)}</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1829.14)}</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.27)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td rowSpan={2} className="p-3 border border-amber-200">
                      <div className="font-semibold text-amber-900">Employés</div>
                    </td>
                    <td className="text-center p-3 border border-amber-200">1</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(11.71)}</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1776.06)}</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(12.88)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td className="text-center p-3 border border-amber-200">2</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(11.82)}</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200">{euro(1792.74)}</td>
                    <td className="text-center p-3 font-semibold border border-amber-200 bg-amber-50">{euro(13.00)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
