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

export function Promise() {
  const t = copy.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>{t.eyebrow}</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]">
            {t.title_a}
            <em>{t.title_em}</em>
            {t.title_b}
          </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">{t.p1}</p>
            <p className="text-[17.5px] leading-relaxed text-ink-2">
              {t.p2_a}
              <b className="text-ink">{t.p2_bold1}</b>
              {t.p2_b}
              <b className="text-ink">{t.p2_bold2}</b>
              {t.p2_c}
            </p>
            <p className="text-[15px] leading-relaxed text-ink-3 italic">{t.p3}</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]">
              {t.box.title}
            </h4>
            <dl className="mt-4 divide-y divide-line">
              {[
                [t.box.row1Label, t.box.row1Value],
                [t.box.row2Label, t.box.row2Value],
                [t.box.row3Label, t.box.row3Value],
              ].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]">{t.box.totalLabel}</dt>
                <dd className="font-display font-extrabold text-rubis text-[20px] tabular-nums">
                  {t.box.totalValue}
                </dd>
              </div>
            </dl>
          </div>
        </div>
      </div>
    </section>
  );
}