function Pricing() {
  const { t } = useLang();
  const [annual, setAnnual] = useState(false);

  return (
    <Section id="pricing" toneNav="06 Pricing"
             eyebrow={t.pricing.eyebrow}
             title={t.pricing.title}
             sub={t.pricing.sub}
             align="center">

      <div className="mx-auto mb-4 inline-flex w-full justify-center">
        <div className="inline-flex p-1 rounded-full border border-ink-200 bg-white">
          {[{k:false,l:t.pricing.billing_month},{k:true,l:t.pricing.billing_year,soon:t.pricing.billing_year_soon}].map((o,i)=>(
            <button key={i} onClick={()=>setAnnual(o.k)}
              className={cx('px-4 h-9 rounded-full text-[13px] font-semibold transition-all inline-flex items-center gap-1.5',
                annual===o.k ? 'bg-hanyang-600 text-white shadow-sm' : 'text-ink-500 hover:text-ink-800')}>
              {o.l}
              {o.soon && (
                <span className={cx('px-1.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide border',
                  annual===o.k ? 'bg-white/15 text-white border-white/30' : 'bg-gold-50 text-gold-700 border-gold-200')}>
                  {o.soon}
                </span>
              )}
            </button>
          ))}
        </div>
      </div>

      <div className={cx('mb-10 text-center text-[12.5px] font-medium text-ink-400 transition-opacity',
        annual ? 'opacity-100' : 'opacity-0')} aria-hidden={!annual}>
        {t.pricing.annual_note}
      </div>

      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-4 items-stretch">
        {t.pricing.plans.map((p, i) => {
          const price = annual && p.price_y ? p.price_y : p.price;
          const per = annual && p.price_y ? p.per_y : p.per;
          return (
          <Card key={i} className={cx(
            'p-7 flex flex-col relative overflow-hidden transition-all',
            p.highlight
              ? 'border-hanyang-600 shadow-card-lg ring-1 ring-hanyang-600 lg:scale-[1.03]'
              : 'hover:border-ink-300'
          )}>
            {p.highlight && (
              <>
                <div aria-hidden className="absolute -right-14 -top-14 w-48 h-48 rounded-full blur-2xl opacity-40"
                     style={{background:'radial-gradient(circle, rgba(207,148,23,0.5), transparent 60%)'}}/>
                <div className="absolute top-5 right-5">
                  <Badge tone="gold" className="shimmer relative overflow-hidden">{p.badge}</Badge>
                </div>
              </>
            )}
            {p.soon && (
              <div className="absolute top-5 right-5">
                <Badge tone="outline">{p.soon}</Badge>
              </div>
            )}
            <div className={cx('text-[13px] font-bold uppercase tracking-[0.18em]',
              p.highlight ? 'text-hanyang-700' : 'text-ink-400')}>{p.name}</div>

            <div className="mt-4 flex items-baseline gap-1 flex-wrap">
              <div className="text-[32px] font-extrabold text-ink-900 tracking-tight">{price}</div>
              <div className="text-[13px] font-semibold text-ink-400">{per}</div>
            </div>
            <div className={cx('mt-1 text-[12px] font-semibold text-hanyang-700 min-h-[18px]',
              !(annual && p.note_y) && 'invisible')}>
              {p.note_y || ' '}
            </div>

            <p className="mt-2 text-[14px] text-ink-500 leading-relaxed">{p.desc}</p>

            <ul className="mt-6 space-y-2.5 flex-1">
              {p.features.map((f, j) => (
                <li key={j} className="flex items-start gap-2.5 text-[13.5px] text-ink-700">
                  <span className={cx('mt-0.5 h-5 w-5 shrink-0 rounded-full grid place-items-center',
                    p.highlight ? 'bg-hanyang-600 text-white' : 'bg-hanyang-50 text-hanyang-700')}>
                    <IconCheck size={12} stroke={2.6}/>
                  </span>
                  <span className="leading-snug">{f}</span>
                </li>
              ))}
            </ul>

            <div className="mt-7">
              <a href="https://hanyang-smart-auto-bot.vercel.app/" target="_blank" rel="noopener" className="block">
                <Button variant={p.highlight ? 'default' : 'outline'} className="w-full" size="lg">
                  {p.cta}
                  <IconArrow size={14}/>
                </Button>
              </a>
            </div>
          </Card>
          );
        })}
      </div>
    </Section>
  );
}

Object.assign(window, { Pricing });