function WhatWeDo({ lang = 'EN' }) {
  const T = {
    EN: {
      eyebrow: 'What we do',
      title: ['Tailored IT solutions that', 'actually', 'move the needle.'],
      intro: 'Enabling your businesses to thrive in a digital-first world — streamlining processes through automation, optimized IT infrastructure, and proactive system management to reduce downtime and improve productivity.',
      blocks: [
        { label: 'Mission', body: 'To empower your businesses by delivering efficient, cost-effective, and high-impact IT solutions that drive measurable results.' },
        { label: 'Vision', body: 'To be your trusted technology partner worldwide, enabling digital transformation through innovative, scalable, and reliable solutions.' },
        { label: 'Global Operations', body: 'Headquartered in Germany with international delivery hubs serving clients across the USA, Europe, UAE, India, and Pakistan.' },
        { label: 'Service Coverage & Delivery', body: 'Always-on global support model with dedicated Native-speaking escalation teams and data governance.' },
      ],
      stats: [
        { v: '24/7', l: 'Global support' },
        { v: '4', l: 'Delivery regions' },
        { v: '99.98%', l: 'Uptime delivered' },
        { v: '3+', l: 'Years operating' },
      ],
    },
    DE: {
      eyebrow: 'Was wir tun',
      title: ['Ma\u00dfgeschneiderte IT-L\u00f6sungen, die', 'wirklich', 'etwas bewegen.'],
      intro: 'Wir helfen Unternehmen, in einer digital-first Welt erfolgreich zu sein \u2014 durch Automatisierung, optimierte IT-Infrastruktur und proaktives Systemmanagement reduzieren wir Ausfallzeiten und steigern die Produktivit\u00e4t.',
      blocks: [
        { label: 'Mission', body: 'Ihre Unternehmen durch effiziente, kosteng\u00fcnstige und wirkungsvolle IT-L\u00f6sungen zu st\u00e4rken \u2014 mit messbaren Ergebnissen.' },
        { label: 'Vision', body: 'Ihr vertrauensw\u00fcrdiger Technologiepartner weltweit zu sein – digitale Transformation durch innovative, skalierbare und zuverl\u00e4ssige L\u00f6sungen erm\u00f6glichen.' },
        { label: 'Globaler Betrieb', body: 'Hauptsitz in Deutschland mit internationalen Delivery-Hubs f\u00fcr Kunden in den USA, Europa, den VAE, Indien und Pakistan.' },
        { label: 'Service-Abdeckung & Lieferung', body: 'Always-on-Supportmodell mit dedizierten muttersprachlichen Eskalationsteams und Daten-Governance.' },
      ],
      stats: [
        { v: '24/7', l: 'Globaler Support' },
        { v: '4', l: 'Delivery-Regionen' },
        { v: '99.98%', l: 'Verf\u00fcgbarkeit' },
        { v: '3+', l: 'Jahre am Markt' },
      ],
    },
  };
  const t = T[lang] || T.EN;
  return (
    <section style={{
      maxWidth: 1440, margin: '0 auto', padding: 'clamp(24px,5vw,80px) var(--page-px,40px)',
    }}>
      <div className="gs-whatwedo-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 'clamp(32px,6vw,96px)', alignItems: 'start',
      }}>
        <div style={{position: 'sticky', top: 120}} className="gs-whatwedo-sticky">
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 13,
            letterSpacing: '0.14em', color: 'var(--fg-muted)',
            textTransform: 'uppercase', marginBottom: 24,
            display: 'inline-flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)'}}/>
            {t.eyebrow}
          </div>
          <h2 style={{
            fontSize: 64, lineHeight: 1.05, letterSpacing: '-0.03em',
            fontWeight: 500, margin: 0, maxWidth: 540, color: 'var(--gs-900)',
          }}>
            {t.title[0]}{' '}
            <span style={{fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--gs-500)'}}>{t.title[1]}</span>{' '}
            {t.title[2]}
          </h2>
        </div>
        <div>
          <p style={{
            fontSize: 22, lineHeight: 1.5, color: 'var(--gs-700)',
            margin: 0, letterSpacing: '-0.005em', maxWidth: 600,
          }}>
            <span dangerouslySetInnerHTML={{__html: t.intro}} />
          </p>
          <div style={{
            marginTop: 56,
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
            borderTop: '1px solid var(--border)',
            borderLeft: '1px solid var(--border)',
          }}>
            {t.blocks.map((b) => (
              <div key={b.label} style={{
                padding: '28px 28px 32px',
                borderRight: '1px solid var(--border)',
                borderBottom: '1px solid var(--border)',
              }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  letterSpacing: '0.14em', color: 'var(--gs-700)',
                  textTransform: 'uppercase', marginBottom: 12,
                  fontWeight: 700,
                }}>{b.label}</div>
                <div
                  style={{fontSize: 15, lineHeight: 1.55, color: 'var(--gs-700)'}}
                  dangerouslySetInnerHTML={{__html: b.body}}
                />
              </div>
            ))}
          </div>

          {/* Stats strip */}
          <div style={{
            marginTop: 0,
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            borderLeft: '1px solid var(--border)',
            borderBottom: '1px solid var(--border)',
          }}>
            {t.stats.map((s) => (
              <div key={s.l} style={{
                padding: '20px 24px',
                borderRight: '1px solid var(--border)',
              }}>
                <div style={{
                  fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em',
                  color: 'var(--gs-900)', lineHeight: 1,
                }}>{s.v}</div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  letterSpacing: '0.14em', color: 'var(--gs-400)',
                  textTransform: 'uppercase', marginTop: 8,
                }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.WhatWeDo = WhatWeDo;