espace-paie-odentas/app/(app)/minima-ccn/ccneac/artistes-cirque-data.tsx

"use client";

import React, { useState } from 'react';
import { Sparkles, Users, Lightbulb, Calendar } from 'lucide-react';

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

export default function ArtistesCirqueContent() {
  const [activeSection, setActiveSection] = useState<'spectacles' | 'creation'>('spectacles');

  return (
    <div className="space-y-6">
      {/* En-tête */}
      <div className="rounded-xl border bg-gradient-to-br from-pink-50 to-rose-50 p-4">
        <h2 className="text-lg font-semibold text-pink-900 mb-1">
          Artistes de cirque
        </h2>
        <p className="text-sm text-pink-700">
          Minima conventionnels pour les artistes de cirque (exploitation et création)
        </p>
        <p className="text-xs text-pink-600 mt-2">
          Grille de salaires applicable au 1er juin 2024
        </p>
      </div>

      {/* Navigation */}
      <div className="flex gap-3 border-b pb-2 flex-wrap">
        <button
          onClick={() => setActiveSection('spectacles')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'spectacles'
              ? 'bg-gradient-to-r from-pink-500 to-rose-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <Sparkles className="w-4 h-4 inline-block mr-1" />
          Exploitation des spectacles
        </button>
        <button
          onClick={() => setActiveSection('creation')}
          className={`px-4 py-2 rounded-lg font-semibold text-sm transition-all ${
            activeSection === 'creation'
              ? 'bg-gradient-to-r from-pink-500 to-rose-600 text-white shadow-md'
              : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
          }`}
        >
          <Lightbulb className="w-4 h-4 inline-block mr-1" />
          Répétitions / Création
        </button>
      </div>

      {/* Section Exploitation des spectacles */}
      {activeSection === 'spectacles' && (
        <div className="space-y-6">
          {/* Cachets par représentation */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-pink-900 mb-4 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-pink-500"></span>
              Cachets par représentation
            </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">Nombre de cachet par mois</th>
                    <th colSpan={2} className="text-center p-2 text-[10px] leading-tight text-pink-900 font-bold border border-pink-200">Nombre de cachet par mois</th>
                    <th rowSpan={2} className="text-center p-3 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-[10px] leading-tight text-pink-900 font-bold border border-pink-200">1 à 2</th>
                    <th className="text-center p-2 text-[10px] leading-tight text-pink-900 font-bold border border-pink-200">+ de 2</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200 font-semibold">Plateau inférieur ou égal à 5 artistes</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(159.56)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(138.85)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2252.37)}</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200 font-semibold">Plateau sup. à 5 artistes</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(138.85)}</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(138.85)}</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(2252.37)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}

      {/* Section Répétitions/Création */}
      {activeSection === 'creation' && (
        <div className="space-y-6">
          {/* Cachets répétitions et création */}
          <div className="rounded-xl border bg-white p-5">
            <h3 className="text-base font-bold text-amber-900 mb-4 flex items-center gap-2">
              <span className="inline-block w-2 h-2 rounded-full bg-amber-500"></span>
              Cachets répétitions et création
            </h3>
            
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-amber-50">
                    <th className="text-left p-3 text-amber-900 font-bold border border-amber-200">Type de prestation</th>
                    <th className="text-center p-3 text-amber-900 font-bold border border-amber-200 bg-amber-100">Montant</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-amber-50/30">
                    <td className="p-3 border border-amber-200 font-semibold">Cachet de base par jour</td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200 bg-amber-50">{euro(122.10)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td className="p-3 border border-amber-200">
                      Service isolé de répétition (cachet)
                    </td>
                    <td className="text-center p-3 font-semibold border border-amber-200">{euro(61.05)}</td>
                  </tr>
                  <tr className="hover:bg-amber-50/30">
                    <td className="p-3 border border-amber-200 font-semibold">
                      Salaire mensuel
                    </td>
                    <td className="text-center p-3 font-bold text-amber-900 border border-amber-200 bg-amber-50">{euro(2252.37)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}