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

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

export function Legal() {
  const t = copy.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>{t.eyebrow}</Eyebrow>
          <h2 className="mt-4 font-display font-bold text-ink leading-[1.12] tracking-[-0.025em] text-[32px] sm:text-[42px]">
            {t.title}
          </h2>

          <div className="mt-6 space-y-5 text-[17px] leading-relaxed text-ink-2">
            <p>
              {t.p1_a}
              <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">
                {t.p1_lme}
              </span>
              {t.p1_b}
              <b className="text-ink">{t.p1_bold1}</b>
              {t.p1_c}
              <b className="text-ink">{t.p1_bold2}</b>
              {t.p1_d}
            </p>
            <p>
              {t.p2_a}
              <b className="text-ink">{t.p2_bold}</b>
              {t.p2_b}
            </p>
          </div>
        </div>

        <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>{t.clipHeader}</span>
            <span>{t.clipYear}</span>
          </div>

          <div className="font-display font-extrabold text-rubis text-[56px] sm:text-[68px] leading-none tracking-[-0.035em]">
            {t.clipBigNum}
          </div>
          <p className="mt-2 text-[15px] text-ink-2 leading-snug">{t.clipCaption}</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">{t.clipMore}</li>
          </ul>

          <p className="mt-4 pt-4 border-t border-line text-[11.5px] text-ink-3">{t.clipSource}</p>
        </aside>
      </div>
    </section>
  );
}