const SERVICES_I18N = {
  EN: {
    eyebrow: 'Services',
    title: ['Diverse Expertise,', 'Unified Excellence:', 'Your Single Point of Certainty.'],
    cta: 'All services',
    services: [
      { num: '01', name: 'Managed IT Services', blurb: 'Your IT infrastructure runs smoothly, securely, and efficiently — under one accountable team.', items: ['Azure cloud infrastructure', 'Microsoft 365 management', 'End-user & desktop support', 'Firewall & security ops', 'Active Directory', 'Exchange management'] },
      { num: '02', name: 'Database Management', blurb: 'Manage, optimize, and secure data systems — on-prem, cloud, or hybrid — with German-speaking L1\u2013L3 support.', items: ['SQL Server, Oracle, PostgreSQL', 'SAP HANA, MySQL, MongoDB', 'Backup & disaster recovery', 'Performance tuning', 'GDPR / DSGVO / BSI', 'Migration & warehousing'] },
      { num: '03', name: 'AI Solutions & Simulation', blurb: 'GPU-accelerated CFD, FEA, and multiphysics in the cloud — plus AI workflows tailored to your operations.', items: ['Cloud-native GPU compute', 'CFD / FEA / multiphysics', 'AI-validated simulation code', 'Real-time visualization', 'Custom business AI', 'Scalable enterprise platforms'] },
      { num: '04', name: 'Medical Device Integration', blurb: 'Seamless connection between laboratory instruments and healthcare systems — HL7-native, EMR/EHR ready.', items: ['Bidirectional connectivity', 'Automated order/result flow', 'HL7-based integration', 'EMR / EHR compatible', 'Reduced manual error', 'Streamlined lab workflow'] },
      { num: '05', name: 'ServiceNow', blurb: 'Implementation, customization, and managed operations across the Now Platform — from ITSM to HRSD and CSM.', items: ['Implementation & deployment', 'Integrations (SAP, Salesforce)', 'Custom apps & workflows', '24/7 managed services', 'Platform upgrades', 'AI & Virtual Agent'] },
      { num: '06', name: 'Digital Services', blurb: 'Build and grow your digital presence — from the site itself to the strategy that brings traffic to it.', items: ['Website design & dev', 'SEO & content strategy', 'Social media marketing', 'Domain & hosting', 'Marketing automation', 'Performance analytics'] },
    ],
  },
  DE: {
    eyebrow: 'Leistungen',
    title: ['Vielf\u00e4ltige Expertise,', 'vereinte Exzellenz:', 'Ihr einziger Ansprechpartner.'],
    cta: 'Alle Leistungen',
    services: [
      { num: '01', name: 'Managed IT Services', blurb: 'Ihre IT-Infrastruktur l\u00e4uft reibungslos, sicher und effizient \u2014 unter einem verantwortlichen Team.', items: ['Azure Cloud-Infrastruktur', 'Microsoft 365 Management', 'End-User- & Desktop-Support', 'Firewall & Security-Ops', 'Active Directory', 'Exchange-Management'] },
      { num: '02', name: 'Datenbankmanagement', blurb: 'Datenbanken verwalten, optimieren und sichern \u2014 on-prem, Cloud oder hybrid \u2014 mit deutschsprachigem L1\u2013L3-Support.', items: ['SQL Server, Oracle, PostgreSQL', 'SAP HANA, MySQL, MongoDB', 'Backup & Disaster Recovery', 'Performance-Tuning', 'DSGVO / BSI', 'Migration & Warehousing'] },
      { num: '03', name: 'KI-L\u00f6sungen & Simulation', blurb: 'GPU-beschleunigte CFD, FEA und Multiphysik in der Cloud \u2014 plus KI-Workflows nach Ma\u00df.', items: ['Cloud-native GPU-Compute', 'CFD / FEA / Multiphysik', 'KI-validierter Simulationscode', 'Echtzeit-Visualisierung', 'Individuelle Business-KI', 'Skalierbare Enterprise-Plattformen'] },
      { num: '04', name: 'Integration Medizintechnik', blurb: 'Nahtlose Verbindung zwischen Laborger\u00e4ten und Gesundheitssystemen \u2014 HL7-nativ, EMR/EHR-ready.', items: ['Bidirektionale Anbindung', 'Automatisierter Auftrags-/Ergebnisfluss', 'HL7-basierte Integration', 'EMR / EHR-kompatibel', 'Weniger manuelle Fehler', 'Optimierter Lab-Workflow'] },
      { num: '05', name: 'ServiceNow', blurb: 'Implementierung, Customizing und Managed Operations auf der Now Platform \u2014 von ITSM \u00fcber HRSD bis CSM.', items: ['Implementierung & Rollout', 'Integrationen (SAP, Salesforce)', 'Custom Apps & Workflows', '24/7 Managed Services', 'Plattform-Upgrades', 'KI & Virtual Agent'] },
      { num: '06', name: 'Digital Services', blurb: 'Digitale Pr\u00e4senz aufbauen und ausbauen \u2014 von der Website bis zur Strategie, die Traffic bringt.', items: ['Website-Design & -Entwicklung', 'SEO & Content-Strategie', 'Social-Media-Marketing', 'Domain & Hosting', 'Marketing-Automation', 'Performance-Analytics'] },
    ],
  },
};

function Services({ lang = 'EN' }) {
  const [active, setActive] = React.useState(0);
  const t = SERVICES_I18N[lang] || SERVICES_I18N.EN;
  return (
    <section style={{background: '#0A0A0B', color: '#fff', padding: 'clamp(48px,8vw,120px) 0'}}>
      <div style={{maxWidth: 1440, margin: '0 auto', padding: '0 var(--page-px,40px)'}}>
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 'clamp(32px,5vw,64px)', gap: 32, flexWrap: 'wrap'}}>
          <div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 13,
              letterSpacing: '0.14em', color: '#9B9B93',
              textTransform: 'uppercase', marginBottom: 20,
              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: 720, color: '#fff',
            }}>
              {t.title[0]}{' '}
              <span style={{fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: '#9B9B93'}}>{t.title[1]}</span>{' '}
              {t.title[2]}
            </h2>
          </div>
          <a href="services.html" style={{
            color: '#fff', fontSize: 14, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            paddingBottom: 6, borderBottom: '1px solid #2A2A2D',
          }}>{t.cta} <span>↗</span></a>
        </div>

        <div style={{display: 'grid', gridTemplateColumns: '1fr', gap: 0, border: '1px solid #1F1F22', borderRadius: 16, overflow: 'hidden'}}>
          {t.services.map((s, i) => {
            const isActive = active === i;
            return (
              <div
                key={s.num}
                onMouseEnter={() => setActive(i)}
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'clamp(60px,8vw,120px) 1fr clamp(0px,30vw,1.2fr) 50px',
                  alignItems: 'center',
                  gap: 'clamp(12px,2vw,32px)',
                  padding: 'clamp(16px,2vw,28px) clamp(16px,2.5vw,32px)',
                  borderBottom: i < t.services.length - 1 ? '1px solid #1F1F22' : 'none',
                  background: isActive ? '#111114' : 'transparent',
                  transition: 'background 220ms var(--ease-standard)',
                  cursor: 'pointer',
                }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11,
                  letterSpacing: '0.18em', color: isActive ? 'var(--accent)' : '#6C6C65',
                  transition: 'color 220ms',
                }}>{s.num}</div>
                <div style={{
                  fontSize: 28, fontWeight: 500, letterSpacing: '-0.015em',
                  color: '#fff',
                }}>{s.name}</div>
                <div style={{
                  fontSize: 15, color: '#9B9B93', lineHeight: 1.55,
                  maxHeight: isActive ? 200 : 0,
                  opacity: isActive ? 1 : 0,
                  overflow: 'hidden',
                  transition: 'max-height 320ms var(--ease-standard), opacity 220ms',
                }}>
                  <div dangerouslySetInnerHTML={{__html: s.blurb}}/>
                  <div style={{
                    marginTop: 14, display: 'flex', flexWrap: 'wrap', gap: 6,
                  }}>
                    {s.items.map((it) => (
                      <span key={it} style={{
                        fontFamily: 'var(--font-mono)', fontSize: 10,
                        letterSpacing: '0.08em', color: '#C5C6C8',
                        padding: '4px 10px', border: '1px solid #2A2A2D',
                        borderRadius: 999,
                      }}>{it}</span>
                    ))}
                  </div>
                </div>
                <div style={{
                  textAlign: 'right',
                  fontSize: 18,
                  color: isActive ? 'var(--accent)' : '#6C6C65',
                  transform: isActive ? 'translateX(0)' : 'translateX(-6px)',
                  transition: 'transform 220ms, color 220ms',
                }}>→</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;