import { Eyebrow } from "@rubis/ui";

const SANCTIONED = [
  ["Fnac Darty", "3,9 M€"],
  ["Cdiscount", "2,1 M€"],
  ["Sanofi", "1,65 M€"],
  ["LCL", "1,5 M€"],
];

export function Legal() {
  return (
    <section className="bg-cream-2 border-y border-line">
      <div className="max-w-[1180px] mx-auto px-5 sm:px-8 py-20 lg:py-24 grid lg:grid-cols-[1.3fr_1fr] gap-12 lg:gap-16 items-start">
        <div>
          <Eyebrow>Vous êtes dans votre droit</Eyebrow>
          <h2 className="mt-4 font-display font-bold text-ink leading-[1.12] tracking-[-0.025em] text-[32px] sm:text-[42px]">
            La loi est de votre côté. On vous évite juste de la brandir.
          </h2>

          <div className="mt-6 space-y-5 text-[17px] leading-relaxed text-ink-2">
            <p>
              La{" "}
              <span className="inline-flex items-center px-2 py-0.5 bg-rubis-glow border border-rubis/15 rounded text-rubis-deep font-semibold text-[14px] tracking-tight">
                loi LME
              </span>{" "}
              plafonne les délais de paiement entre entreprises à <b className="text-ink">60 jours</b>{" "}
              (ou 45 jours fin de mois). Les sanctions peuvent atteindre{" "}
              <b className="text-ink">2 millions d'euros</b>. En 2025, le Sénat a voté à
              l'unanimité un durcissement supplémentaire des règles.
            </p>
            <p>
              Mais vous n'avez pas envie d'envoyer un commissaire de justice à votre meilleur
              client. Rubis fait le boulot intermédiaire — relances pro, courtoises, espacées
              dans le temps. Le ton monte progressivement, jamais d'un coup. Et vous gardez le
              contrôle total : la mise en demeure, c'est <b className="text-ink">vous</b> qui
              l'envoyez, sur validation manuelle.
            </p>
          </div>
        </div>

        {/* Clipping presse-style */}
        <aside className="bg-white border border-line rounded-card p-7 shadow-soft">
          <div className="flex items-center justify-between text-[11px] uppercase tracking-[0.14em] font-semibold text-ink-3 pb-3 mb-4 border-b border-line">
            <span>Sanctions DGCCRF</span>
            <span>2025</span>
          </div>

          <div className="font-display font-extrabold text-rubis text-[56px] sm:text-[68px] leading-none tracking-[-0.035em]">
            47 M€
          </div>
          <p className="mt-2 text-[15px] text-ink-2 leading-snug">
            de pénalités prononcées contre les mauvais payeurs français l'an dernier.
          </p>

          <ul className="mt-5 divide-y divide-line">
            {SANCTIONED.map(([name, amount]) => (
              <li key={name} className="flex items-center justify-between py-2.5 text-[14.5px]">
                <b className="text-ink font-semibold">{name}</b>
                <span className="text-rubis font-display font-bold tabular-nums">{amount}</span>
              </li>
            ))}
            <li className="py-2.5 text-[13px] italic text-ink-3">
              … et 405 autres entreprises contrôlées
            </li>
          </ul>

          <p className="mt-4 pt-4 border-t border-line text-[11.5px] text-ink-3">
            Source · DGCCRF, bilan annuel 2025 · economie.gouv.fr
          </p>
        </aside>
      </div>
    </section>
  );
}
