function Features() {
  const { t } = useLang();
  const cards = t.features.cards;

  const ICONS = {
    chat:      { comp: IconChat,      tint: 'bg-hanyang-50 text-hanyang-700' },
    professor: { comp: IconProfessor, tint: 'bg-gold-50 text-gold-700' },
    upload:    { comp: IconUpload,    tint: 'bg-hanyang-50 text-hanyang-700' },
    board:     { comp: IconBoard,     tint: 'bg-ink-900 text-white' },
    ppt:       { comp: IconSlides,    tint: 'bg-gold-50 text-gold-700' },
    guide:     { comp: IconCompass,   tint: 'bg-hanyang-50 text-hanyang-700' },
    mcp:       { comp: IconPlug,      tint: 'bg-hanyang-50 text-hanyang-700' },
    reward:    { comp: IconTrophy,    tint: 'bg-gold-50 text-gold-700' },
    community: { comp: IconUsers,     tint: 'bg-ink-900 text-white' },
  };

  const APP_URL = 'https://hanyang-smart-auto-bot.vercel.app';

  return (
    <Section id="features" toneNav="02 Features"
             eyebrow={t.features.eyebrow}
             title={t.features.title}
             sub={t.features.sub}>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {cards.map((c, i) => {
          const ic = ICONS[c.icon] || ICONS.chat;
          return (
            <a key={i} href={c.href || APP_URL} target="_blank" rel="noopener"
               className="group focus-ring rounded-2xl">
              <Card className="p-6 h-full flex flex-col gap-5 hover:shadow-card-lg hover:border-hanyang-200 transition-all duration-200 group-hover:-translate-y-0.5">
                <div className="flex items-start justify-between">
                  <div className={cx('h-11 w-11 rounded-xl grid place-items-center', ic.tint)}>
                    {React.createElement(ic.comp, { size: 22 })}
                  </div>
                  {i >= 6 && (
                    <span className="inline-flex items-center rounded-full bg-gold-50 px-2.5 py-1 text-[10.5px] font-bold uppercase tracking-[0.1em] text-gold-700 ring-1 ring-gold-200">
                      {t.features.ext_badge}
                    </span>
                  )}
                </div>
                <TriBadge ko={c.tag} zh={c.tag2} en={c.tag3}/>
                <div>
                  <h3 className="text-[20px] font-extrabold text-ink-900 tracking-tight">{c.title}</h3>
                  <p className="mt-2 text-[14.5px] leading-relaxed text-ink-500">{c.body}</p>
                </div>

                <div className="mt-auto pt-4 border-t border-ink-100">
                  <span className="inline-flex items-center gap-1.5 text-[13px] font-semibold text-hanyang-600 group-hover:text-hanyang-700 group-hover:gap-2.5 transition-all">
                    {t.features.cta}
                    <IconArrow size={14}/>
                  </span>
                </div>
              </Card>
            </a>
          );
        })}
      </div>
    </Section>
  );
}

Object.assign(window, { Features });