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

"use client";

import React from 'react';
import { Music, Users, Palette, Music2, Lightbulb } from 'lucide-react';

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

interface Annexe6ContentProps {}

export default function Annexe6Content({}: Annexe6ContentProps) {
  return (
    <div className="space-y-6">
      {/* En-tête */}
      <div className="rounded-xl border bg-gradient-to-br from-pink-50 to-fuchsia-50 p-4">
        <h2 className="text-lg font-semibold text-pink-900 mb-1">
          Annexe 6 - Bals avec ou sans orchestre
        </h2>
        <p className="text-sm text-pink-700">
          Producteurs, diffuseurs, organisateurs occasionnels (y compris les particuliers) de spectacles de bals avec ou sans orchestre
        </p>
        <p className="text-xs text-pink-600 mt-2">
          En application du titre VI des clauses communes et de l'article 3 de l'annexe 6
        </p>
      </div>

      {/* Artistes interprètes de la musique */}
      <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>
          <Music className="w-5 h-5" />
          Artistes interprètes de la musique
        </h3>
        
        <div className="mb-4 text-sm text-slate-700 bg-pink-50 border border-pink-200 rounded-lg p-3">
          Cachet de base pour un <span className="font-bold">service de 4h00 indivisible</span>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-pink-50">
                <th className="text-left p-3 text-pink-900 font-bold border border-pink-200">Type de prestation</th>
                <th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Cachet</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-pink-50/30">
                <td className="p-3 border border-pink-200 font-semibold">Cachet de base (4h00)</td>
                <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(159.05)}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Figuration chorégraphique */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-fuchsia-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-fuchsia-500"></span>
          <Users className="w-5 h-5" />
          Figuration chorégraphique
        </h3>
        
        <div className="mb-4 text-sm text-slate-700 bg-fuchsia-50 border border-fuchsia-200 rounded-lg p-3">
          Les figurants(es) sans formation initiale qui interprètent quelques chorégraphies basiques - Cachet de base pour un <span className="font-bold">service de 4h00 indivisible</span>
        </div>

        <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">Type de prestation</th>
                <th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Cachet</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-fuchsia-50/30">
                <td className="p-3 border border-fuchsia-200 font-semibold">Cachet de base (4h00)</td>
                <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(94.70)}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Création du spectacle */}
      <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>
          <Palette className="w-5 h-5" />
          Création du spectacle
        </h3>
        
        <div className="mb-4 text-sm text-slate-700 bg-purple-50 border border-purple-200 rounded-lg p-3">
          Au-delà de la rémunération du travail de création et des rémunérations liées aux droits d'auteurs qui leurs sont dus
        </div>

        <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">Type de prestation</th>
                <th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Salaire minimum</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-purple-50/30">
                <td className="p-3 border border-purple-200">
                  <div className="font-semibold mb-1">Association à la création</div>
                  <div className="text-xs text-slate-600">
                    Lorsque des artistes-interprètes sont associés à la création du spectacle : chorégraphie ou scénographie ou mise en scène
                  </div>
                </td>
                <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(235.62)}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div className="mt-4 text-xs text-slate-600 bg-purple-50 border border-purple-200 rounded-lg p-3">
          <span className="font-semibold">Note :</span> Ce salaire est versé <span className="font-bold">à l'occasion de la première représentation qui suit la création</span> et que les artistes seront amenés à diriger ou superviser.
        </div>
      </div>

      {/* Répétitions */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-violet-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-violet-500"></span>
          <Music2 className="w-5 h-5" />
          Cachets minimum de répétitions
        </h3>
        
        <div className="mb-4 text-sm text-slate-700 bg-violet-50 border border-violet-200 rounded-lg p-3">
          Cachets pour un <span className="font-bold">service de 3h00</span>
        </div>

        <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">Type d'artiste</th>
                <th className="text-center p-3 text-violet-900 font-bold border border-violet-200 bg-violet-100">Cachet (3h00)</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-violet-50/30">
                <td className="p-3 border border-violet-200 font-semibold">Artiste interprète de la musique et de la danse</td>
                <td className="text-center p-3 font-bold text-violet-900 border border-violet-200 bg-violet-50">{euro(106.03)}</td>
              </tr>
              <tr className="hover:bg-violet-50/30">
                <td className="p-3 border border-violet-200 font-semibold">Figuration chorégraphique</td>
                <td className="text-center p-3 font-bold text-violet-900 border border-violet-200 bg-violet-50">{euro(61.41)}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}