function Compare() {
  const { t } = useLang();
  const c = t.compare;

  // renders a single cell value: true -> check, false -> dash, string -> muted text
  const Cell = ({ v, highlight = false }) => {
    if (v === true) {
      return (
        <span className={cx(
          'inline-grid place-items-center h-7 w-7 rounded-full',
          highlight ? 'bg-hanyang-600 text-white' : 'bg-hanyang-50 text-hanyang-700'
        )} role="img" aria-label={c.yes}>
          <IconCheck size={16}/>
        </span>
      );
    }
    if (v === false) {
      return (
        <span className="inline-grid place-items-center h-7 w-7 rounded-full bg-ink-100 text-ink-300"
              role="img" aria-label={c.no}>
          <IconClose size={14}/>
        </span>
      );
    }
    return <span className="text-[12.5px] leading-snug text-ink-400 font-medium">{v}</span>;
  };

  return (
    <Section id="compare" toneNav="03 Compare"
             eyebrow={c.eyebrow}
             title={c.title}
             sub={c.sub}>
      <Card className="overflow-hidden p-0">
        <div className="overflow-x-auto no-scrollbar">
          <table className="w-full min-w-[640px] border-collapse text-left">
            <thead>
              <tr className="border-b border-ink-100">
                <th className="py-4 px-5 w-[34%] text-[12px] font-bold uppercase tracking-[0.12em] text-ink-400"></th>
                {/* Hanyang Bot — highlighted column */}
                <th className="py-4 px-4 w-[24%] bg-hanyang-50/70">
                  <div className="flex flex-col gap-1.5">
                    <span className="text-[15px] font-extrabold text-hanyang-700">{c.cols.hy}</span>
                    <span className="self-start inline-flex items-center px-2 py-0.5 rounded-full bg-hanyang-600 text-white text-[10px] font-bold tracking-wide">
                      {c.cols.hy_badge}
                    </span>
                  </div>
                </th>
                <th className="py-4 px-4 w-[21%] text-[15px] font-bold text-ink-600 align-top">{c.cols.et}</th>
                <th className="py-4 px-4 w-[21%] text-[15px] font-bold text-ink-600 align-top">{c.cols.gpt}</th>
              </tr>
            </thead>
            <tbody>
              {c.rows.map((r, i) => (
                <tr key={i} className={cx('border-b border-ink-100', i === c.rows.length - 1 && 'border-b-0')}>
                  <td className="py-3.5 px-5 text-[13.5px] font-semibold text-ink-800">{r.label}</td>
                  <td className="py-3.5 px-4 bg-hanyang-50/40"><Cell v={r.hy} highlight/></td>
                  <td className="py-3.5 px-4"><Cell v={r.et}/></td>
                  <td className="py-3.5 px-4"><Cell v={r.gpt}/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

      <p className="mt-6 max-w-2xl text-[14.5px] leading-relaxed text-ink-500">
        {c.close}
      </p>
    </Section>
  );
}

Object.assign(window, { Compare });