"use client";

import React from 'react';
import { FileText, 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 ArtistesDramatiquesContent() {
  return (
    <div className="space-y-6">
      {/* En-tête */}
      <div className="rounded-xl border bg-gradient-to-br from-indigo-50 to-purple-50 p-4">
        <h2 className="text-lg font-semibold text-indigo-900 mb-1">
          Artistes dramatiques et chorégraphiques
        </h2>
        <p className="text-sm text-indigo-700">
          Minima conventionnels pour les artistes dramatiques et chorégraphiques engagés par les entreprises artistiques et culturelles
        </p>
        <p className="text-xs text-indigo-600 mt-2">
          Grille de salaires applicable au 1er juin 2024
        </p>
      </div>

      {/* CDI et CDD > 4 mois */}
      <div className="rounded-xl border bg-white p-5">
        <h3 className="text-base font-bold text-indigo-900 mb-4 flex items-center gap-2">
          <span className="inline-block w-2 h-2 rounded-full bg-indigo-500"></span>
          <FileText className="w-5 h-5" />
          CDI et CDD de plus de 4 mois
        </h3>
        
        <div className="overflow-x-auto">
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-indigo-50">
                <th className="text-left p-3 text-indigo-900 font-bold border border-indigo-200">Type de contrat</th>
                <th className="text-center p-3 text-indigo-900 font-bold border border-indigo-200 bg-indigo-100">Minimum brut mensuel</th>
              </tr>
            </thead>
            <tbody>
              <tr className="hover:bg-indigo-50/30">
                <td className="p-3 border border-indigo-200 font-semibold">Artiste confirmé</td>
                <td className="text-center p-3 font-bold text-indigo-900 border border-indigo-200 bg-indigo-50">{euro(2143.56)}</td>
              </tr>
              <tr className="hover:bg-indigo-50/30">
                <td className="p-3 border border-indigo-200">Stagiaire 1ère année (-30%)</td>
                <td className="text-center p-3 font-semibold border border-indigo-200">{euro(1500.49)}</td>
              </tr>
              <tr className="hover:bg-indigo-50/30">
                <td className="p-3 border border-indigo-200">Stagiaire 2ème année (-15%)</td>
                <td className="text-center p-3 font-semibold border border-indigo-200">{euro(1822.03)}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* CDD < 4 mois */}
      <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>
          <Calendar className="w-5 h-5" />
          CDD de moins de 4 mois
        </h3>
        
        <div className="space-y-6">
          {/* Minimum mensuel */}
          <div>
            <h4 className="text-sm font-semibold text-purple-700 mb-3 px-3 py-2 bg-purple-50 rounded-lg inline-block">
              Minimum brut mensuel
            </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">Type</th>
                    <th className="text-center p-3 text-purple-900 font-bold border border-purple-200 bg-purple-100">Montant</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200 font-semibold">Artiste confirmé</td>
                    <td className="text-center p-3 font-bold text-purple-900 border border-purple-200 bg-purple-50">{euro(2252.37)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">Stagiaire 1ère année (-30%)</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(1576.66)}</td>
                  </tr>
                  <tr className="hover:bg-purple-50/30">
                    <td className="p-3 border border-purple-200">Stagiaire 2ème année (-15%)</td>
                    <td className="text-center p-3 font-semibold border border-purple-200">{euro(1914.51)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          {/* Minimum mensuel en cas de fractionnement */}
          <div>
            <h4 className="text-sm font-semibold text-fuchsia-700 mb-3 px-3 py-2 bg-fuchsia-50 rounded-lg inline-block">
              Minimum brut mensuel en cas de fractionnement
            </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">Type</th>
                    <th className="text-center p-3 text-fuchsia-900 font-bold border border-fuchsia-200 bg-fuchsia-100">Montant</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200 font-semibold">Artiste confirmé</td>
                    <td className="text-center p-3 font-bold text-fuchsia-900 border border-fuchsia-200 bg-fuchsia-50">{euro(2469.98)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Stagiaire 1ère année (-30%)</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(1728.99)}</td>
                  </tr>
                  <tr className="hover:bg-fuchsia-50/30">
                    <td className="p-3 border border-fuchsia-200">Stagiaire 2ème année (-15%)</td>
                    <td className="text-center p-3 font-semibold border border-fuchsia-200">{euro(2099.48)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      {/* CDD < 1 mois */}
      <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>
          CDD de moins d'1 mois
        </h3>
        
        <div className="space-y-6">
          {/* Service répétition */}
          <div>
            <h4 className="text-sm font-semibold text-pink-700 mb-3 px-3 py-2 bg-pink-50 rounded-lg inline-block">
              Service de répétition
            </h4>
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-pink-50">
                    <th className="text-left p-3 text-pink-900 font-bold border border-pink-200">Type</th>
                    <th className="text-center p-3 text-pink-900 font-bold border border-pink-200 bg-pink-100">Montant</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200 font-semibold">Artiste confirmé</td>
                    <td className="text-center p-3 font-bold text-pink-900 border border-pink-200 bg-pink-50">{euro(61.05)}</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">Stagiaire 1ère année (-30%)</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(42.74)}</td>
                  </tr>
                  <tr className="hover:bg-pink-50/30">
                    <td className="p-3 border border-pink-200">Stagiaire 2ème année (-15%)</td>
                    <td className="text-center p-3 font-semibold border border-pink-200">{euro(51.89)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          {/* Cachet forfaitaire jour */}
          <div>
            <h4 className="text-sm font-semibold text-rose-700 mb-3 px-3 py-2 bg-rose-50 rounded-lg inline-block">
              Cachet forfaitaire jour
            </h4>
            <div className="overflow-x-auto">
              <table className="w-full text-xs border-collapse">
                <thead>
                  <tr className="bg-rose-50">
                    <th className="text-left p-3 text-rose-900 font-bold border border-rose-200">Type</th>
                    <th className="text-center p-3 text-rose-900 font-bold border border-rose-200">1 ou 2 cachets/mois</th>
                    <th className="text-center p-3 text-rose-900 font-bold border border-rose-200 bg-rose-100">&gt; 2 cachets/mois</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200 font-semibold">Artiste confirmé</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200">{euro(159.56)}</td>
                    <td className="text-center p-3 font-bold text-rose-900 border border-rose-200 bg-rose-50">{euro(138.85)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Stagiaire 1ère année (-30%)</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(111.69)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(97.20)}</td>
                  </tr>
                  <tr className="hover:bg-rose-50/30">
                    <td className="p-3 border border-rose-200">Stagiaire 2ème année (-15%)</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(135.63)}</td>
                    <td className="text-center p-3 font-semibold border border-rose-200">{euro(118.02)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
