function Services() {
  const { t } = useLang();
  const items = [
    {
      num: '01',
      title: t('svc.1.title'),
      cn: t('svc.1.cn'),
      desc: t('svc.1.desc'),
      bullets: [t('svc.1.b.1'), t('svc.1.b.2'), t('svc.1.b.3'), t('svc.1.b.4'), t('svc.1.b.5')],
      tag: t('svc.1.tag'),
      icon: <Icon.globe style={{width:28,height:28}}/>,
      href: 'services-websites.html',
    },
    {
      num: '02',
      title: t('svc.2.title'),
      cn: t('svc.2.cn'),
      desc: t('svc.2.desc'),
      bullets: [t('svc.2.b.1'), t('svc.2.b.2'), t('svc.2.b.3'), t('svc.2.b.4')],
      tag: t('svc.2.tag'),
      icon: <Icon.layers style={{width:28,height:28}}/>,
      href: 'services-web-apps.html',
    },
    {
      num: '03',
      title: t('svc.3.title'),
      cn: t('svc.3.cn'),
      desc: t('svc.3.desc'),
      bullets: [t('svc.3.b.1'), t('svc.3.b.2'), t('svc.3.b.3'), t('svc.3.b.4')],
      tag: t('svc.3.tag'),
      icon: <Icon.cloud style={{width:28,height:28}}/>,
      href: 'services-saas.html',
    },
  ];
  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="section-head">
          <div className="reveal">
            <div className="kicker"><span className="dot"></span><span>{t('svc.kicker')}</span><span className="bar"></span><span>{t('svc.kicker.right')}</span></div>
            <h2 className="section-title" style={{marginTop:20}} dangerouslySetInnerHTML={tHtml('svc.title.html')}/>
          </div>
          <div className="reveal d1">
            <p className="lead">{t('svc.lead')}</p>
          </div>
        </div>

        <div className="services-grid">
          {items.map((s,i) => {
            const Tag = s.href ? 'a' : 'article';
            const extraProps = s.href ? { href: s.href } : {};
            return (
              <Tag key={s.num} className={'svc-card reveal d'+(i+1) + (s.href ? ' is-link' : '')} {...extraProps}>
                <div className="num">{s.num} / 03</div>
                <div className="svc-icon">{s.icon}</div>
                <h3>{s.title}</h3>
                <div className="cn-sub">{s.cn}</div>
                <p>{s.desc}</p>
                <ul>
                  {s.bullets.map(b => (
                    <li key={b}><Icon.check style={{width:14,height:14}}/>{b}</li>
                  ))}
                </ul>
                <div className="foot">
                  <span>{s.tag}</span>
                  <span className="arr"><Icon.arrowUR style={{width:14,height:14}}/></span>
                </div>
              </Tag>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.Services = Services;