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

export function Gamification() {
  return (
    <section>
      <div className="max-w-[1180px] mx-auto px-5 sm:px-8 py-20 lg:py-24">
        <div className="bg-gradient-to-br from-rubis to-rubis-deep text-cream rounded-card p-8 sm:p-14 text-center shadow-card">
          <div className="inline-flex">
            <Eyebrow tone="ink" className="!text-rubis-glow">
              La devise du temps gagné
            </Eyebrow>
          </div>
          <h2 className="mt-5 font-display font-bold leading-[1.1] tracking-[-0.025em] text-[34px] sm:text-[44px] lg:text-[52px]">
            1 rubis = 10 minutes de votre vie.
          </h2>
          <p className="mt-5 max-w-[680px] mx-auto text-[17px] text-cream/85 leading-relaxed">
            À chaque relance que Rubis envoie à votre place, vous gagnez un rubis. À la fin du
            mois, vous voyez exactement combien d'heures vous avez récupérées. Pas un graphique
            de DSO. Pas un PDF abscons. Du temps. Concret.
          </p>

          <div className="mt-10 flex flex-col items-center gap-3">
            <div className="flex items-baseline gap-3">
              <Gem size={56} className="!text-cream" />
              <span className="font-display font-extrabold text-[88px] sm:text-[120px] leading-none tracking-[-0.04em]">
                124
              </span>
              <span className="font-display font-medium text-[28px] sm:text-[36px] tracking-[-0.02em] text-cream/80">
                rubis
              </span>
            </div>
            <span className="text-[16px] text-cream/85">
              ≈ <b className="text-cream">24 h 48</b> de votre mois
            </span>
          </div>

          <p className="mt-10 max-w-[460px] mx-auto text-[14px] text-cream/70">
            Et oui, on garde un classement amical. Les meilleurs utilisateurs libèrent{" "}
            <b className="text-cream">30 heures par mois</b>. Plus de quoi prendre un long
            week-end. Toutes les 4 semaines.
          </p>
        </div>
      </div>
    </section>
  );
}
