"use client";

import React from 'react';
import { Mic, Info } from 'lucide-react';

function euro(n: number) {
  return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(n);
}

const InfoRow: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div className="flex items-start gap-2">
    <div className="mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center">
      <Info className="w-3.5 h-3.5 text-slate-600" aria-hidden="true" />
    </div>
    <p className="text-sm text-slate-600">{children}</p>
  </div>
);

export default function ArtistesInterpretes() {
  return (
    <div className="space-y-6">
      {/* En-tête */}
      <section className="rounded-2xl border bg-white p-6">
        <div className="flex items-start gap-3">
          <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center">
            <Mic className="w-6 h-6 text-white" />
          </div>
          <div className="flex-1 min-w-0">
            <h2 className="text-xl font-semibold text-slate-900">Artistes Interprètes</h2>
            <p className="text-sm text-slate-600">Salaires minima applicables au 1er janvier 2025 (Avenant n°20 du 29 novembre 2024, non étendu)</p>
            <p className="text-xs text-slate-500 mt-1">Rémunération au cachet</p>
          </div>
        </div>
      </section>

      {/* Émissions dramatiques */}
      <section className="rounded-2xl border overflow-hidden">
        <div className="bg-indigo-600 text-white px-4 py-3 text-sm font-semibold">Émissions dramatiques (article 5.14.1)</div>
        <div className="grid grid-cols-2 text-sm font-semibold text-white">
          <div className="bg-indigo-600/90 px-4 py-2.5">Définition</div>
          <div className="bg-indigo-600/90 px-4 py-2.5">Cachet</div>
        </div>
        {[{def:"Journée de répétition ou d'enregistrement",val:289.23},{def:'Journée unique',val:304.99},{def:"Prestation de lecture d'une durée inférieure à 4 heures",val:152.49}].map((r,idx)=> (
          <div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
            <div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
            <div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
          </div>
        ))}
      </section>

      {/* Émissions de variétés */}
      <section className="rounded-2xl border overflow-hidden">
        <div className="bg-indigo-600 text-white px-4 py-3 text-sm font-semibold">Émissions de variétés (article 5.14.2)</div>
        <div className="px-4 py-2 bg-slate-50 text-sm font-semibold text-slate-800">Répétitions effectuées en dehors de la journée d'enregistrement</div>
        <div className="grid grid-cols-2 text-sm font-semibold text-white">
          <div className="bg-indigo-600/90 px-4 py-2.5">Définition</div>
          <div className="bg-indigo-600/90 px-4 py-2.5">Cachet</div>
        </div>
        {[{def:"Répétition d'une durée inférieure ou égale à 4 heures",val:184.90},{def:"Répétition d'une durée supérieure à 4 heures",val:289.23}].map((r,idx)=> (
          <div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
            <div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
            <div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
          </div>
        ))}
        <div className="grid grid-cols-2 text-sm">
          <div className="border-t px-4 py-3 text-slate-900">Enregistrement</div>
          <div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(419.31)}</div>
        </div>
      </section>

      {/* Émissions lyriques */}
      <section className="rounded-2xl border overflow-hidden">
        <div className="bg-indigo-600 text-white px-4 py-3 text-sm font-semibold">Émissions lyriques (article 5.14.3)</div>
        <div className="px-4 py-2 bg-slate-50 text-sm font-semibold text-slate-800">Répétition ou enregistrement</div>
        <div className="grid grid-cols-2 text-sm font-semibold text-white">
          <div className="bg-indigo-600/90 px-4 py-2.5">Définition</div>
          <div className="bg-indigo-600/90 px-4 py-2.5">Cachet</div>
        </div>
        {[{def:'Soliste',val:432.86},{def:'Artistes des chœurs',val:289.23}].map((r,idx)=> (
          <div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
            <div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
            <div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
          </div>
        ))}
        <div className="px-4 py-2 bg-slate-50 text-sm font-semibold text-slate-800">Préparation ou déchiffrage (3 heures maximum)</div>
        {[{def:'Soliste',val:165.96},{def:"Artistes des chœurs",val:110.89}].map((r,idx)=> (
          <div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
            <div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
            <div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
          </div>
        ))}
      </section>

      {/* Émissions chorégraphiques */}
      <section className="rounded-2xl border overflow-hidden">
        <div className="bg-indigo-600 text-white px-4 py-3 text-sm font-semibold">Émissions chorégraphiques (article 5.14.4)</div>
        <div className="px-4 py-2 bg-slate-50 text-sm font-semibold text-slate-800">Répétition ou enregistrement (6h de travail effectif au maximum)</div>
        {[{def:'Soliste',val:432.86},{def:'Corps de ballet',val:289.23}].map((r,idx)=> (
          <div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
            <div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
            <div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
          </div>
        ))}
      </section>

      {/* Reportages / Actualité */}
      <section className="rounded-2xl border overflow-hidden">
        <div className="bg-indigo-600 text-white px-4 py-3 text-sm font-semibold">Reportages / Actualité</div>
        <div className="grid grid-cols-2 text-sm font-semibold text-white">
          <div className="bg-indigo-600/90 px-4 py-2.5">Définition</div>
          <div className="bg-indigo-600/90 px-4 py-2.5">Cachet</div>
        </div>
        <div className="grid grid-cols-2 text-sm">
          <div className="border-t px-4 py-3 text-slate-900">Reportage (art. 6.2.1.b, pas de gré à gré)</div>
          <div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(73.64)}</div>
        </div>
        <div className="grid grid-cols-2 text-sm">
          <div className="border-t px-4 py-3 text-slate-900">Prestation d'actualité (art. 6.3.1, pas de gré à gré)</div>
          <div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(170.16)}</div>
        </div>
      </section>

      {/* Indemnités de costumes */}
      <section className="rounded-2xl border overflow-hidden">
        <div className="bg-indigo-600 text-white px-4 py-3 text-sm font-semibold">Indemnités de costumes (article 5.13)</div>
        <div className="px-4 py-2 bg-slate-50 text-sm font-semibold text-slate-800">Indemnités visées à l'article 5.13.1</div>
        <div className="grid grid-cols-2 text-sm font-semibold text-white">
          <div className="bg-indigo-600/90 px-4 py-2.5">Définition</div>
          <div className="bg-indigo-600/90 px-4 py-2.5">Montant</div>
        </div>
        {[{def:'Engagement pour une journée unique — Tenue de ville',val:18.34},{def:'Engagement pour une journée unique — Tenue de soirée',val:30.10},{def:'Engagement pour plusieurs jours — Tenue de ville',val:14.67},{def:'Engagement pour plusieurs jours — Tenue de soirée',val:24.77}].map((r,idx)=> (
          <div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
            <div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
            <div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
          </div>
        ))}
        <div className="px-4 py-2 bg-slate-50 text-sm font-semibold text-slate-800">Indemnités visées à l'article 5.13.2</div>
        {[{def:'Homme — pourpoint',val:14.56},{def:'Femme — Tutu court',val:14.56},{def:'Femme — Tutu romantique',val:24.77},{def:'Chaussons',val:5.60}].map((r,idx)=> (
          <div key={idx} className={`grid grid-cols-2 text-sm ${idx%2? 'bg-slate-50':'bg-white'}`}>
            <div className="border-t px-4 py-3 text-slate-900">{r.def}</div>
            <div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(r.val)}</div>
          </div>
        ))}
      </section>

      {/* Notes et définitions */}
      <section className="rounded-2xl border bg-white p-6 space-y-3">
        <InfoRow>
          La durée du travail journalière est de <strong>9 heures</strong> (6 heures pour les mineurs de moins de 16 ans), y compris le temps passé à l'habillage et au maquillage, dans la limite d'une heure. La durée du travail hebdomadaire est de <strong>45 heures</strong> (5 × 9 heures) pour les adultes.
        </InfoRow>
        <InfoRow>
          <strong>Émissions dramatiques</strong> : artistes engagés pour la réalisation télévisuelle d'œuvres ou extraits d'œuvres dramatiques (...), y compris artistes sans texte à respecter (voix hors champ, lectures de commentaires). 
        </InfoRow>
        <InfoRow>
          <strong>Émissions chorégraphiques</strong> : réalisations télévisuelles d'œuvres chorégraphiques (suite de pas/enchaînements réglés), à l'exclusion des artistes d'interprétation d'un texte parlé/chanté ou d'un numéro de variétés.
        </InfoRow>
        <InfoRow>
          <strong>Émissions lyriques</strong> : réalisations télévisuelles d'œuvres lyriques ou émissions avec extraits lyriques ; inclut artistes des chœurs à l'image si intégrés à l'action dramatique. À l'exclusion des artistes d'interprétation d'un texte parlé/numéro de variétés ou de danse (ces derniers relèvent des dispositions des émissions dramatiques).
        </InfoRow>
        <InfoRow>
          <strong>Émissions de variétés</strong> : prestations dans des conditions autres que celles prévues pour les émissions dramatiques, lyriques ou chorégraphiques, à l'exclusion des artistes chorégraphiques.
        </InfoRow>
      </section>
    </div>
  );
}
