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

const STATS = [
  {
    num: "44 j",
    desc: "Le retard moyen de paiement pour une facture émise par une TPE en France.",
    source: "Source : Altares · Observatoire des délais de paiement, 2024",
  },
  {
    num: "15 Md€",
    desc: "De trésorerie bloquée chez les PME françaises à cause des retards de paiement.",
    source: "Source : Banque de France · Rapport annuel 2024",
  },
  {
    num: "−26 %",
    desc: "De chances d'être payé si vous attendez plus de 30 jours pour relancer.",
    source: "Source : AFDCC · Étude crédit management",
  },
];

export function Stats() {
  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">
        <div className="text-center max-w-[640px] mx-auto mb-12">
          <Eyebrow>L'état des paiements en France</Eyebrow>
          <h2 className="mt-4 font-display font-bold text-ink leading-[1.1] tracking-[-0.025em] text-[34px] sm:text-[44px]">
            Trois chiffres qui devraient vous fâcher.
          </h2>
          <p className="mt-4 text-[17px] text-ink-2 leading-relaxed">
            Si vous lisez ça, vous avez probablement une facture impayée à l'heure où on parle.
            Vous n'êtes pas un cas isolé.
          </p>
        </div>

        <div className="grid sm:grid-cols-3 gap-5 lg:gap-7">
          {STATS.map((s) => (
            <div
              key={s.num}
              className="bg-white border border-line rounded-card p-7 lg:p-8 shadow-soft"
            >
              <div className="font-display font-extrabold text-rubis text-[44px] sm:text-[52px] tracking-[-0.03em] leading-none">
                {s.num}
              </div>
              <p className="mt-4 text-[15.5px] text-ink leading-relaxed">{s.desc}</p>
              <p className="mt-4 pt-4 border-t border-line text-[12px] text-ink-3 italic">
                {s.source}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
