function GetApp() {
  const { t } = useLang();
  const g = t.getapp;

  const ICONS = {
    WEB:     { comp: IconGlobe,  tint: 'bg-hanyang-50 text-hanyang-700' },
    ANDROID: { comp: IconHome,   tint: 'bg-gold-50 text-gold-700' },
    IOS:     { comp: IconBell,   tint: 'bg-ink-900 text-white' },
  };

  return (
    <Section id="getapp" toneNav="08 Get app"
             eyebrow={g.eyebrow}
             title={g.title}
             sub={g.sub}>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {g.cards.map((card, i) => {
          const ic = ICONS[card.tag] || ICONS.WEB;
          const live = !!card.href;
          const Inner = (
            <Card className={cx(
              'p-6 h-full flex flex-col gap-5 transition-all duration-200',
              live && 'hover:shadow-card-lg hover:border-hanyang-200 group-hover:-translate-y-0.5'
            )}>
              <div className="flex items-center justify-between">
                <div className={cx('h-11 w-11 rounded-xl grid place-items-center', ic.tint)}>
                  {React.createElement(ic.comp, { size: 22 })}
                </div>
                <span className={cx(
                  'inline-flex items-center px-2.5 py-1 rounded-full text-[10.5px] font-bold tracking-wide uppercase border',
                  live
                    ? 'bg-hanyang-50 text-hanyang-700 border-hanyang-100'
                    : 'bg-ink-100 text-ink-500 border-ink-200'
                )}>
                  {card.badge}
                </span>
              </div>
              <div>
                <h3 className="text-[20px] font-extrabold text-ink-900 tracking-tight">{card.title}</h3>
                <p className="mt-2 text-[14.5px] leading-relaxed text-ink-500">{card.body}</p>
              </div>
              <div className="mt-auto pt-4 border-t border-ink-100">
                {live ? (
                  <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">
                    {card.cta}
                    <IconArrow size={14}/>
                  </span>
                ) : (
                  <span className="inline-flex items-center gap-1.5 text-[13px] font-semibold text-ink-400">
                    {card.badge}
                  </span>
                )}
              </div>
            </Card>
          );

          return live ? (
            <a key={i} href={card.href} target="_blank" rel="noopener" className="group focus-ring rounded-2xl">
              {Inner}
            </a>
          ) : (
            <div key={i} className="rounded-2xl">{Inner}</div>
          );
        })}
      </div>
    </Section>
  );
}

Object.assign(window, { GetApp });