espace-paie-odentas/app/(app)/minima-ccn/ccnpa/categorie-c.tsx

"use client";

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

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

const HN_ROLES = [
  "Animateur d’émission",
  "Artiste invité",
  "Intervenant spécialisé (suivi du nom de la spécialité)",
  "Invité / Intervenant",
];

const CACHETS = [
  { emploi: "Doublure lumière", journalier: 122.00 },
  { emploi: "Figurant - Ensemble de 30 personnes ou plus", journalier: 96.00 },
  { emploi: "Figurant - Ensemble de moins de 30 personnes", journalier: 98.00 },
];

const SUPPLEMENTS = [
  { label: "Fourniture de costumes spéciaux (jaquette, costume de service, barman, steward, garçon de café, agent de police, costume d'époque ancienne, costume de soirée, habit, de maître d'hôtel, spencer, smoking, robe du soir, toutes teintes pouvant être exigées)", montant: 47.05 },
  { label: "Silhouettes (artistes de complément dont le personnage doit ressortir dans le champ de la caméra, jusqu’à 2 répliques)", montant: 42.24 },
  { label: "Essayage", montant: 15.53 },
];


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 CategorieC() {
  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-fuchsia-500 to-pink-600 flex items-center justify-center">
            <Users className="w-6 h-6 text-white" />
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              <h2 className="text-xl font-semibold text-slate-900">Catégorie C</h2>
              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-gradient-to-r from-fuchsia-500 to-pink-600 text-white">
                Intervenants à l’image et artistes de complément
              </span>
            </div>
            <p className="text-sm text-slate-600">Salaires applicables au 1er janvier 2025 (Avenant n°20 du 29 novembre 2024, non étendu)</p>
          </div>
        </div>
      </section>

      {/* HN roles */}
      <section className="rounded-2xl border bg-white p-6">
        <h3 className="text-base font-semibold text-slate-900 mb-3 flex items-center gap-2">
          <Sparkles className="w-4 h-4 text-fuchsia-600" /> Emplois Hors Niveau (HN)
        </h3>
        <ul className="list-disc ml-5 space-y-1 text-sm text-slate-700">
          {HN_ROLES.map((r, i) => (
            <li key={i}>{r} — <span className="font-medium">HN</span></li>
          ))}
        </ul>
      </section>

      {/* Cachets */}
      <section className="rounded-2xl border overflow-hidden">
        <div className="grid grid-cols-3 text-sm font-semibold text-white">
          <div className="bg-fuchsia-600 px-4 py-3">Emploi</div>
          <div className="bg-fuchsia-600 px-4 py-3">Cachet minimum journalier</div>
          <div className="bg-fuchsia-600 px-4 py-3">Semaine civile (5 jours)</div>
        </div>
        {CACHETS.map((c, idx) => (
          <div key={idx} className={`grid grid-cols-3 text-sm ${idx % 2 === 1 ? 'bg-slate-50' : 'bg-white'}`}>
            <div className="border-t px-4 py-3 text-slate-900">{c.emploi}</div>
            <div className="border-t px-4 py-3 font-semibold text-slate-900">{euro(c.journalier)}</div>
            <div className="border-t px-4 py-3 text-slate-900">{euro(+(c.journalier * 4.5).toFixed(2))}</div>
          </div>
        ))}
        <div className="px-4 py-3 border-t bg-slate-50">
          <InfoRow>
            La demi-journée est rémunérée <strong>65%</strong> du tarif journalier. La semaine civile de 5 jours est rémunérée <strong>4,5 fois</strong> le tarif journalier.
          </InfoRow>
        </div>
      </section>

      {/* Définition et suppléments */}
      <section className="rounded-2xl border bg-white p-6 space-y-3">
        <h3 className="text-base font-semibold text-slate-900">Figurants — définitions</h3>
        <div className="space-y-2">
          <InfoRow>
            (1) Ensemble de 30 personnes ou plus, portant costumes tout venant, de correction ordinaire, élégant de ville, tailleur, robe d'après-midi, de cocktail ou de dîner, teinte claire ou foncée pouvant être exigée, d'époque actuelle, avec désignation ou pas de la saison.
          </InfoRow>
          <InfoRow>
            (2) Ensemble de moins de 30 personnes, mêmes conditions vestimentaires que ci-dessus.
          </InfoRow>
        </div>

        <h3 className="text-base font-semibold text-slate-900 mt-2">Suppléments</h3>
        <ul className="space-y-2">
          {SUPPLEMENTS.map((s, i) => (
            <li key={i} 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>
              <div className="text-sm text-slate-700 flex-1">
                {s.label} — <span className="font-semibold">{euro(s.montant)}</span>
              </div>
            </li>
          ))}
        </ul>
      </section>

    </div>
  );
}