function Pricing() {
  const { t } = useLang();
  const tiers = [
    {
      name: t('price.1.name'),
      cn: t('price.1.cn'),
      desc: t('price.1.desc'),
      currency: 'RM',
      num: '2,800',
      per: t('price.1.per'),
      feat: [t('price.1.f.1'), t('price.1.f.2'), t('price.1.f.3'), t('price.1.f.4'), t('price.1.f.5'), t('price.1.f.6'), t('price.1.f.7'), t('price.1.f.8')],
      cta: t('price.1.cta'),
    },
    {
      name: t('price.2.name'),
      cn: t('price.2.cn'),
      featured: true,
      ribbon: t('price.2.ribbon'),
      desc: t('price.2.desc'),
      currency: 'RM',
      num: '6,800',
      per: t('price.2.per'),
      feat: [t('price.2.f.1'), t('price.2.f.2'), t('price.2.f.3'), t('price.2.f.4'), t('price.2.f.5'), t('price.2.f.6'), t('price.2.f.7'), t('price.2.f.8'), t('price.2.f.9')],
      cta: t('price.2.cta'),
    },
    {
      name: t('price.3.name'),
      cn: t('price.3.cn'),
      desc: t('price.3.desc'),
      currency: t('price.3.cur'),
      num: '12k',
      per: t('price.3.per'),
      feat: [t('price.3.f.1'), t('price.3.f.2'), t('price.3.f.3'), t('price.3.f.4'), t('price.3.f.5'), t('price.3.f.6'), t('price.3.f.7')],
      cta: t('price.3.cta'),
    },
  ];
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="section-head">
          <div className="reveal">
            <div className="kicker"><span className="dot"></span><span>{t('price.kicker')}</span><span className="bar"></span><span>{t('price.kicker.right')}</span></div>
            <h2 className="section-title" style={{marginTop:20}} dangerouslySetInnerHTML={tHtml('price.title.html')}/>
          </div>
          <div className="reveal d1">
            <p className="lead">{t('price.lead')}</p>
          </div>
        </div>

        <div className="price-grid">
          {tiers.map((tier,i) => (
            <div key={i} className={'price-card reveal d'+(i+1) + (tier.featured?' featured':'')}>
              {tier.ribbon && <div className="ribbon">{tier.ribbon}</div>}
              <div className="name">{tier.name}</div>
              <div className="cn">{tier.cn}</div>
              <div className="amt">
                <span className="cur">{tier.currency}</span>
                <span className="num">{tier.num}</span>
                <span className="per">{tier.per}</span>
              </div>
              <div className="desc">{tier.desc}</div>
              <ul>
                {tier.feat.map((f, fi) => <li key={fi}><Icon.check style={{width:14,height:14}}/>{f}</li>)}
              </ul>
              <a href="/start-project/" className={'btn ' + (tier.featured?'btn-primary':'btn-ghost') + ' pbtn'} style={{justifyContent:'center'}}>
                {tier.cta}
                <Icon.arrow className="ico"/>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Pricing = Pricing;