function SocialProof() {
  const { t } = useLang();

  return (
    <Section id="proof" toneNav="05 Proof"
             eyebrow={t.proof.eyebrow}
             title={t.proof.title}
             sub={t.proof.sub}>

      <div className="grid md:grid-cols-4 gap-4">
        {t.proof.items.map((it, i) => (
          <Card key={i} className="p-6">
            <div className="flex items-baseline gap-1">
              <div className="text-[44px] font-extrabold text-hanyang-700 leading-none tabular-nums">{it.v}</div>
              <div className="text-[15px] font-bold text-ink-400">{it.u}</div>
            </div>
            <div className="mt-2 text-[14px] font-bold text-ink-900">{it.k}</div>
            <div className="mt-1 text-[12px] text-ink-500 leading-snug">{it.note}</div>
          </Card>
        ))}
      </div>

      <div className="mt-8 grid md:grid-cols-3 gap-5">
        {t.proof.testi.map((q, i) => (
          <Card key={i} className="p-6 flex flex-col">
            <div className="text-hanyang-600 text-[28px] leading-none font-serif">“</div>
            <blockquote className="mt-2 text-[14.5px] leading-relaxed text-ink-700">
              {q.body}
            </blockquote>
            <div className="mt-auto pt-5 flex items-center gap-3 border-t border-ink-100 mt-5">
              <div className="h-9 w-9 rounded-full bg-gradient-to-br from-hanyang-600 to-hanyang-800 text-white grid place-items-center text-[11px] font-bold">
                {q.who[0]}
              </div>
              <div className="text-[12.5px] font-semibold text-ink-700">{q.who}</div>
            </div>
          </Card>
        ))}
      </div>
    </Section>
  );
}

Object.assign(window, { SocialProof });