espace-paie-odentas/app/(app)/simulateur/page.tsx

"use client";

import React from 'react';
import { usePageTitle } from '@/hooks/usePageTitle';
import { Calculator } from 'lucide-react';

export default function SimulateurPage() {
  usePageTitle("Simulateur de paie");

  return (
    <div className="max-w-[1600px] mx-auto">
      <style jsx global>{`
        .simulateur-iframe {
          width: 100%;
          min-height: 1200px;
          border: none;
          border-radius: 12px;
          box-shadow: 0 1px 3px rgba(0,0,0,.06);
          background: white;
        }
      `}</style>

      {/* En-tête */}
      <div className="mb-6">
        <div className="flex items-center gap-3 mb-2">
          <Calculator className="w-8 h-8 text-indigo-600" />
          <h1 className="text-3xl font-bold text-slate-900">Simulateur de paie intermittent</h1>
        </div>
        <p className="text-slate-600">
          Calculez le coût de recrutement d&apos;un intermittent du spectacle (CDDU)
        </p>
      </div>

      {/* Layout 2 colonnes : simulateur à gauche, cards info à droite */}
      <div className="grid grid-cols-1 lg:grid-cols-[1fr_380px] gap-6">
        
        {/* Colonne principale : Simulateur en iframe */}
        <div>
          <iframe 
            src="/simulateur-embed.html" 
            className="simulateur-iframe"
            title="Simulateur de paie intermittent"
            loading="lazy"
          />
        </div>

        {/* Colonne droite : Cards d'information modernes */}
        <aside className="space-y-4 lg:sticky lg:top-24 lg:self-start" aria-label="Aide et explications">
          
          {/* Card : Mode d'emploi */}
          <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 hover:shadow-md transition-shadow">
            <div className="flex items-start gap-3 mb-4">
              <div className="flex-shrink-0 w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
                <svg className="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <div className="flex-1">
                <h3 className="text-lg font-semibold text-slate-900 mb-2">Mode d&apos;emploi</h3>
                <p className="text-sm text-slate-600 mb-3">
                  Calculez le coût de recrutement d&apos;un intermittent du spectacle en CDDU.
                </p>
              </div>
            </div>
            
            <ul className="space-y-2 text-sm text-slate-700">
              <li className="flex items-start gap-2">
                <span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-semibold mt-0.5">1</span>
                <span>Choisissez la Convention Collective et le statut</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-semibold mt-0.5">2</span>
                <span>Indiquez les cachets/heures et dates travaillées</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-semibold mt-0.5">3</span>
                <span>Saisissez le montant (Brut, Net ou Coût employeur)</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="flex-shrink-0 w-5 h-5 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center text-xs font-semibold mt-0.5">4</span>
                <span>Consultez les résultats avec le détail des cotisations</span>
              </li>
            </ul>
            
            <div className="mt-4 pt-4 border-t border-slate-100">
              <p className="text-xs text-slate-500">
                <span className="font-medium text-slate-700">Taux 2025</span> • Contrats multi-mois : nous contacter
              </p>
            </div>
          </div>

          {/* Card : Disclaimer */}
          <div className="bg-amber-50 border border-amber-200 rounded-xl shadow-sm p-6">
            <div className="flex items-start gap-3">
              <div className="flex-shrink-0">
                <svg className="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
              </div>
              <div className="flex-1">
                <h3 className="text-sm font-semibold text-amber-900 mb-2">Limitations & mentions</h3>
                <p className="text-xs text-amber-800 leading-relaxed">
                  Le simulateur ne prévoit pas les cas particuliers : mineurs de moins de 16 ans, 
                  cumul annuel, taxe sur les salaires, taxe d&apos;apprentissage, non-résidents fiscaux, 
                  contrats multi-mois.
                </p>
                <p className="text-xs text-amber-700 mt-2 italic">
                  Résultats donnés à titre indicatif, sans valeur contractuelle.
                </p>
              </div>
            </div>
          </div>

        </aside>
      </div>
    </div>
  );
}