"use client";

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

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

export default function FictionRealisateur() {
  const lines = [
    { label: 'Journalier', duree: '9 heures', montant: 300.07 },
    { label: 'Hebdomadaire', duree: '45 heures', montant: 1500.96 },
    { label: 'Mensuel', duree: '45 heures / semaine', montant: 5250.04 },
  ];

  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>
  );

  return (
    <div className="space-y-6">
      {/* En-tête */}
      <div 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-orange-500 to-rose-600 flex items-center justify-center">
            <Clapperboard 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">Fiction - Réalisateur</h2>
              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-gradient-to-r from-orange-500 to-rose-600 text-white">
                Filière G — Hors niveau
              </span>
            </div>
            <p className="text-sm text-slate-600">
              Annexe A de l'accord du 15 septembre 2023 relatif aux réalisateurs — applicable au 1er novembre 2023 (non étendu)
            </p>
          </div>
        </div>
      </div>

      {/* Tableau */}
      <div className="rounded-2xl border overflow-hidden">
        <div className="grid grid-cols-4 text-sm font-semibold text-white">
          <div className="col-span-1 bg-sky-600 px-4 py-3">Salaire minimum</div>
          <div className="col-span-1 bg-sky-600 px-4 py-3">Durée du travail</div>
          <div className="col-span-1 bg-sky-600 px-4 py-3">Montant minimum garanti</div>
          <div className="col-span-1 bg-sky-600 px-4 py-3">Applicable si</div>
        </div>
        {lines.map((l, idx) => (
          <div key={idx} className={`grid grid-cols-4 text-sm ${idx % 2 === 1 ? 'bg-slate-50' : 'bg-white'}`}>
            <div className="col-span-1 border-t px-4 py-3 font-semibold text-slate-900">{l.label}</div>
            <div className="col-span-1 border-t px-4 py-3 text-slate-700">{l.duree}</div>
            <div className="col-span-1 border-t px-4 py-3 font-semibold text-slate-900">{euro(l.montant)}</div>
            <div className="col-span-1 border-t px-4 py-3 text-slate-700">
              {l.label === 'Journalier' && (<span>Engagement &lt; 5 jours sur une même semaine calendaire</span>)}
              {l.label === 'Hebdomadaire' && (<span>Engagement ≥ 5 jours sur la même semaine calendaire</span>)}
              {l.label === 'Mensuel' && (<span>Engagement ≥ 13 semaines réparties sur 4 mois consécutifs</span>)}
            </div>
          </div>
        ))}
      </div>

      {/* Notes */}
      <div className="rounded-2xl border bg-white p-4 space-y-3">
        <InfoRow>
          Depuis la loi du 7 juillet 2016, les réalisateurs relèvent du statut d’artistes du spectacle (art. L7121-2 du Code du travail) et de l’annexe X du règlement général d’assurance chômage.
        </InfoRow>
        <InfoRow>
          La rémunération peut être établie en cachets ou en heures. Les montants indiqués sont des minima garantis, même si la durée effective n’atteint pas 9h ou 45h.
        </InfoRow>
        <InfoRow>
          L’accord du 15 septembre 2023 précise la fonction et les conditions d’engagement des réalisateurs. L’annexe A fixe les minima spécifiques aux réalisateurs de fictions audiovisuelles. Application à compter du 1er novembre 2023 (non étendu).
        </InfoRow>
      </div>
    </div>
  );
}
