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

export function Promise() {
  return (
    <section>
      <div className="max-w-[1180px] mx-auto px-5 sm:px-8 py-20 lg:py-28">
        <div className="text-center max-w-[820px] mx-auto">
          <Eyebrow>Notre conviction</Eyebrow>
          <blockquote className="mt-6 font-display font-bold text-ink leading-[1.05] tracking-[-0.03em] text-[40px] sm:text-[56px] lg:text-[64px]">
            Votre temps vaut <em>plus que ça</em>.
          </blockquote>
        </div>

        <div className="mt-14 grid lg:grid-cols-[1.4fr_1fr] gap-10 lg:gap-16 items-start max-w-[1080px] mx-auto">
          <div className="space-y-5 md:text-justify hyphens-auto">
            <p className="text-[17.5px] leading-relaxed text-ink-2">
              Vous n'avez pas créé votre boîte pour passer vos lundis soirs à rédiger des
              relances polies. Pendant que vous écrivez "je me permets un petit rappel
              concernant…", vous ne facturez pas, vous ne vendez pas, vous ne créez pas.
            </p>
            <p className="text-[17.5px] leading-relaxed text-ink-2">
              Les PME qui automatisent leurs relances passent de{" "}
              <b className="text-ink">8 heures par semaine</b> à{" "}
              <b className="text-ink">moins de 3</b>. Soit 5 heures de votre vie récupérées.
              Toutes les semaines. Pour toujours.
            </p>
          </div>

          <div className="bg-cream-2 border border-line rounded-card p-7">
            <h4 className="font-display font-bold text-[15px] text-ink uppercase tracking-[0.06em]">
              Votre temps en chiffres
            </h4>
            <dl className="mt-4 divide-y divide-line">
              {[
                ["Heures perdues / semaine", "5 h"],
                ["Sur un mois", "~ 21 h"],
                ["À 50 €/h facturés", "1 050 €"],
              ].map(([label, val]) => (
                <div key={label} className="flex items-center justify-between py-3 text-[14px]">
                  <dt className="text-ink-2">{label}</dt>
                  <dd className="font-display font-bold text-ink tabular-nums">{val}</dd>
                </div>
              ))}
              <div className="flex items-center justify-between pt-4 mt-1 border-t-2 border-ink">
                <dt className="text-ink font-semibold text-[14px]">
                  Coût annuel d'une relance manuelle
                </dt>
                <dd className="font-display font-extrabold text-rubis text-[20px] tabular-nums">
                  12 600 €
                </dd>
              </div>
            </dl>
          </div>
        </div>
      </div>
    </section>
  );
}