// D · Hybrid (Final) — Fully fleshed bilingual home page.

function HomeHybridFinal({ initialLang = 'de' }) {
  const [lang, setLang] = React.useState(initialLang);
  const t = T_HYBRID[lang];
  const services = t.services;

  return (
    <div className="csg-root" style={{ background: '#fff' }}>
      <NavBar lang={lang} onLang={setLang} />

      {/* HERO — split, with pull-quote */}
      <section style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', minHeight: 720, alignItems: 'stretch' }}>
        <div style={{ padding: '96px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative' }}>
          <div className="csg-eyebrow">{t.eyebrowHero}</div>
          <h1 style={{ fontSize: 'clamp(60px,6.5vw,104px)', fontWeight: 500, lineHeight: 0.96, marginTop: 28, color: CSG.blau, letterSpacing: '-0.025em' }}>
            {t.h1a}<br/><span style={{ color: CSG.cyan, fontStyle: 'italic', fontWeight: 300 }}>{t.h1b}</span>
          </h1>
          <p style={{ fontSize: 21, marginTop: 36, lineHeight: 1.5, color: CSG.schiefergrau, maxWidth: 540 }}>{t.heroLede}</p>
          <div style={{ display: 'flex', gap: 12, marginTop: 44 }}>
            <button className="csg-btn csg-btn--primary">{t.btnPrimary} →</button>
            <button className="csg-btn csg-btn--ghost">{t.btnGhost}</button>
          </div>
          <SignatureCurveAnimated color={CSG.cyan} stroke={1.5} style={{ position: 'absolute', left: 0, right: 0, bottom: 48, height: 80, opacity: 0.45 }} variant="rise" />
        </div>
        <div style={{ position: 'relative' }}>
          <ImgPH label="Hero · scientist at microscope, warm tone" style={{ height: '100%', minHeight: 720 }} />
          <div style={{ position: 'absolute', left: -40, bottom: 96, background: '#fff', padding: 32, maxWidth: 380, boxShadow: '0 30px 60px rgba(0,30,80,0.18)', borderTop: `2px solid ${CSG.cyan}` }}>
            <div className="csg-mono" style={{ fontSize: 11, color: CSG.cyan, letterSpacing: '0.14em' }}>{t.pullRole}</div>
            <p style={{ fontSize: 17, color: CSG.anthrazit, marginTop: 14, lineHeight: 1.55 }}>{t.pull}</p>
            <div style={{ marginTop: 16, fontSize: 13, color: CSG.schiefergrau }}>{t.pullName}</div>
          </div>
        </div>
      </section>

      {/* KPI band — chapter 01 anchor */}
      <section style={{ padding: '0 72px' }}>
        <div style={{ borderTop: `1px solid ${CSG.steingrau}`, borderBottom: `1px solid ${CSG.steingrau}`, padding: '36px 0', display: 'grid', gridTemplateColumns: '120px repeat(5,1fr)', gap: 32, alignItems: 'center' }}>
          <div className="csg-mono" style={{ fontSize: 40, color: CSG.cyan, fontWeight: 300, lineHeight: 1 }}>01</div>
          {t.kpis.map(([n, l]) => (
            <div key={l}>
              <div style={{ fontSize: 52, fontWeight: 500, color: CSG.blau, letterSpacing: '-0.02em', lineHeight: 1 }}>{n}</div>
              <div className="csg-mono" style={{ fontSize: 11, color: CSG.schiefergrau, letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 8 }}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* 02 — Services editorial list */}
      <Chapter num="02" head={t.ch02} bg={CSG.lichtgrau}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: `1px solid ${CSG.steingrau}` }}>
          {services.map((s, i) => (
            <div key={s.key} style={{
              padding: '40px 0',
              borderBottom: `1px solid ${CSG.steingrau}`,
              borderRight: i % 2 === 0 ? `1px solid ${CSG.steingrau}` : 'none',
              paddingLeft: i % 2 === 0 ? 0 : 48,
              paddingRight: i % 2 === 0 ? 48 : 0,
              display: 'grid', gridTemplateColumns: '40px 1fr', gap: 24,
              cursor: 'pointer', transition: 'background .15s',
            }}
              onMouseEnter={e => e.currentTarget.style.background = '#fff'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
              <div className="csg-mono" style={{ fontSize: 12, color: CSG.cyan, letterSpacing: '0.1em' }}>0{i + 1}</div>
              <div>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16 }}>
                  <h3 style={{ fontSize: 26, fontWeight: 500, color: CSG.blau, letterSpacing: '-0.01em' }}>{s.name}</h3>
                  <span style={{ fontSize: 22, color: CSG.cyan }}>{s.icon}</span>
                </div>
                <p style={{ marginTop: 12, fontSize: 15, color: CSG.schiefergrau, lineHeight: 1.55, maxWidth: 480 }}>{s.desc}</p>
                <div className="csg-link" style={{ marginTop: 20 }}>{lang === 'de' ? 'Mehr erfahren' : 'Read more'}</div>
              </div>
            </div>
          ))}
        </div>
      </Chapter>

      {/* 03 — Studies timeline */}
      <Chapter num="03" head={t.ch03}>
        <div style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', top: 28, left: 24, right: 24, height: 1, background: CSG.steingrau }}></div>
          <SignatureCurve color={CSG.cyan} stroke={1.5} style={{ position: 'absolute', top: -48, left: 0, width: '100%', height: 140, opacity: 0.35 }} />
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${STUDIES.length}, 1fr)`, position: 'relative' }}>
            {STUDIES.map((s, i) => (
              <div key={s.key} style={{ paddingRight: 24 }}>
                <div style={{ width: 14, height: 14, borderRadius: '50%', background: CSG.cyan, border: `4px solid #fff`, boxShadow: `0 0 0 1px ${CSG.cyan}`, marginLeft: 20, marginBottom: 32 }}></div>
                <div className="csg-mono" style={{ fontSize: 11, color: CSG.schiefergrau, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{s.sub}</div>
                <h3 style={{ fontSize: 22, fontWeight: 600, color: CSG.blau, marginTop: 8 }}>{s.name}</h3>
                <p style={{ marginTop: 12, fontSize: 13, color: CSG.schiefergrau, lineHeight: 1.55 }}>{s.desc}</p>
                <div style={{ marginTop: 16, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {s.phases.map(p => (
                    <span key={p} className="csg-mono" style={{ fontSize: 10, padding: '4px 8px', border: `1px solid ${CSG.steingrau}`, color: CSG.blau, letterSpacing: '0.05em' }}>{p}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </Chapter>

      {/* 04 — Sectors on dark */}
      <section style={{ background: CSG.anthrazit, color: '#fff' }}>
        <Chapter num="04" head={t.ch04} dark transparent>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
            {SECTORS.map((s, i) => (
              <div key={s.key} style={{ borderTop: `1px solid rgba(255,255,255,0.15)`, paddingTop: 24, cursor: 'pointer' }}
                onMouseEnter={e => e.currentTarget.style.borderTopColor = CSG.cyan}
                onMouseLeave={e => e.currentTarget.style.borderTopColor = 'rgba(255,255,255,0.15)'}>
                <ImgPH label={`Sector · ${s.name}`} dark style={{ height: 200, marginBottom: 24 }} />
                <div className="csg-mono" style={{ fontSize: 11, color: CSG.cyan, letterSpacing: '0.1em' }}>{s.kpi}</div>
                <h3 style={{ fontSize: 24, fontWeight: 600, marginTop: 8 }}>{s.name}</h3>
                <p style={{ marginTop: 12, fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.55 }}>{t.sectorsLoc[i]}</p>
              </div>
            ))}
          </div>
        </Chapter>
      </section>

      {/* 05 — Process */}
      <Chapter num="05" head={t.ch05}>
        <div style={{ position: 'relative', marginTop: 16 }}>
          <div style={{ position: 'absolute', top: 28, left: 0, right: 0, height: 1, background: CSG.steingrau }}></div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {t.process.map(([n, w, d], i) => (
              <div key={n}>
                <div style={{ width: 14, height: 14, borderRadius: '50%', background: i === 0 ? CSG.cyan : '#fff', border: `2px solid ${CSG.cyan}`, marginBottom: 28 }}></div>
                <div className="csg-mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: CSG.schiefergrau, textTransform: 'uppercase' }}>{`Step ${w}`}</div>
                <div style={{ marginTop: 6, fontSize: 22, fontWeight: 600, color: CSG.blau, letterSpacing: '-0.01em' }}>{n}</div>
                <p style={{ marginTop: 10, fontSize: 14, color: CSG.schiefergrau, lineHeight: 1.55 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </Chapter>

      {/* 06 — Case studies */}
      <Chapter num="06" head={t.ch06} bg={CSG.lichtgrau}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {t.cases.map(([title, kpi, desc], i) => (
            <article key={title} style={{ background: '#fff', cursor: 'pointer', transition: 'transform .15s' }}
              onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-4px)'}
              onMouseLeave={e => e.currentTarget.style.transform = ''}>
              <ImgPH label={['med-tech device','clinical visit','digital app screen'][i]} style={{ aspectRatio: '5/3' }} />
              <div style={{ padding: 28 }}>
                <div className="csg-mono" style={{ fontSize: 11, color: CSG.cyan, letterSpacing: '0.12em' }}>CASE 0{i+1}</div>
                <h3 style={{ fontSize: 20, fontWeight: 600, marginTop: 12, color: CSG.blau, letterSpacing: '-0.01em' }}>{title}</h3>
                <p style={{ marginTop: 12, fontSize: 14, color: CSG.schiefergrau, lineHeight: 1.55 }}>{desc}</p>
                <div style={{ marginTop: 18, paddingTop: 16, borderTop: `1px solid ${CSG.steingrau}`, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: CSG.blau, letterSpacing: '0.04em' }}>{kpi}</div>
              </div>
            </article>
          ))}
        </div>
      </Chapter>

      {/* 07 — Differentiator */}
      <Chapter num="07" head={t.ch07}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
          <div>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: CSG.anthrazit, marginBottom: 24 }}>{t.differentiator1}</p>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: CSG.schiefergrau }}>{t.differentiator2}</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 24 }}>
            {t.diffPoints.map(([tt, dd]) => (
              <div key={tt} style={{ borderLeft: `2px solid ${CSG.cyan}`, paddingLeft: 18 }}>
                <div style={{ fontWeight: 600, color: CSG.blau, fontSize: 16 }}>{tt}</div>
                <div style={{ fontSize: 13, color: CSG.schiefergrau, marginTop: 6, lineHeight: 1.5 }}>{dd}</div>
              </div>
            ))}
          </div>
        </div>
      </Chapter>

      {/* 08 — Multidisciplinary team roles */}
      <Chapter num="08" head={t.ch08} bg="#fff">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, borderTop: `1px solid ${CSG.steingrau}` }}>
          {t.teamRoles.map(([role, code, desc], i) => (
            <div key={code} style={{ paddingTop: 28, paddingRight: 12, borderRight: i < 4 ? `1px solid ${CSG.steingrau}` : 'none' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16 }}>
                <div className="csg-mono" style={{ fontSize: 28, fontWeight: 300, color: CSG.cyan, letterSpacing: '0.04em' }}>{code}</div>
                <div className="csg-mono" style={{ fontSize: 10, color: CSG.schiefergrau, letterSpacing: '0.12em' }}>0{i+1}</div>
              </div>
              <h3 style={{ fontSize: 18, fontWeight: 600, color: CSG.blau, letterSpacing: '-0.01em' }}>{role}</h3>
              <p style={{ marginTop: 12, fontSize: 13, color: CSG.schiefergrau, lineHeight: 1.55 }}>{desc}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56, padding: 32, background: CSG.lichtgrau, borderLeft: `3px solid ${CSG.cyan}` }}>
          <div className="csg-mono" style={{ fontSize: 11, color: CSG.cyan, letterSpacing: '0.14em', textTransform: 'uppercase' }}>CEO</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 20, marginTop: 10, flexWrap: 'wrap' }}>
            <div style={{ fontSize: 24, fontWeight: 600, color: CSG.blau, letterSpacing: '-0.01em' }}>Dr. Marc Kurepkat</div>
            <div style={{ fontSize: 14, color: CSG.schiefergrau }}>{lang === 'de' ? 'Allgemeinmediziner · 30+ Jahre · IGES Group seit 2001' : 'General Practitioner · 30+ years · IGES Group since 2001'}</div>
          </div>
          <div style={{ marginTop: 8, fontSize: 13, color: CSG.schiefergrau }}>{lang === 'de' ? 'Schwerpunkt: Real-World Data · Innovation im Gesundheitswesen · Digital Health · Chronic Diseases' : 'Focus: Real-World Data · Innovation in Health Care · Digital Health · Chronic Diseases'}</div>
        </div>
      </Chapter>

      {/* 09 — Insights */}
      <Chapter num="09" head={t.ch09} bg={CSG.lichtgrau}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {t.insights.map(([cat, title, meta], i) => (
            <article key={title} style={{ background: '#fff', padding: 32, cursor: 'pointer', minHeight: 240, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', borderTop: `2px solid ${CSG.cyan}` }}>
              <div>
                <div className="csg-mono" style={{ fontSize: 11, color: CSG.cyan, letterSpacing: '0.12em' }}>{cat.toUpperCase()}</div>
                <h3 style={{ fontSize: 22, fontWeight: 600, marginTop: 18, color: CSG.blau, letterSpacing: '-0.01em', lineHeight: 1.25 }}>{title}</h3>
                <p style={{ marginTop: 14, fontSize: 14, color: CSG.schiefergrau, lineHeight: 1.55 }}>{meta}</p>
              </div>
              <div style={{ marginTop: 24, paddingTop: 16, borderTop: `1px solid ${CSG.steingrau}`, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: CSG.schiefergrau, display: 'flex', justifyContent: 'space-between' }}>
                <span>{lang === 'de' ? 'Mehr erfahren' : 'Read more'}</span>
                <span style={{ color: CSG.cyan }}>→</span>
              </div>
            </article>
          ))}
        </div>
        <div style={{ marginTop: 40 }}><a className="csg-link">{t.insightsCta}</a></div>
      </Chapter>

      {/* Locations + certs band */}
      <section style={{ padding: '80px 72px', background: '#fff', borderTop: `1px solid ${CSG.steingrau}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64, alignItems: 'start' }}>
          <div>
            <div className="csg-eyebrow">{lang === 'de' ? 'Standorte' : 'Locations'}</div>
            <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
              {t.locations.map(([city, role, addr]) => (
                <div key={city}>
                  <div style={{ fontSize: 22, fontWeight: 600, color: CSG.blau }}>{city}</div>
                  <div className="csg-mono" style={{ fontSize: 11, color: CSG.cyan, marginTop: 4, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{role}</div>
                  <div style={{ marginTop: 12, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: CSG.schiefergrau, lineHeight: 1.6, whiteSpace: 'pre-line' }}>{addr}</div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="csg-eyebrow">{lang === 'de' ? 'Zertifizierungen' : 'Certifications'}</div>
            <div style={{ marginTop: 24, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {t.certs.map(c => (
                <span key={c} className="csg-mono" style={{ fontSize: 11, padding: '8px 14px', border: `1px solid ${CSG.steingrau}`, color: CSG.blau, letterSpacing: '0.08em' }}>{c}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 10 — CTA */}
      <section style={{ padding: '120px 72px', background: CSG.blau, color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <SignatureCurveAnimated color={CSG.cyan} stroke={1.5} style={{ position: 'absolute', right: 0, bottom: 0, width: '60%', height: 320, opacity: 0.4 }} />
        <DotGrid rows={8} cols={24} gap={16} color="rgba(0,180,199,0.28)" style={{ position: 'absolute', left: 72, top: 64 }} />
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '120px 1fr 1fr', gap: 40, alignItems: 'center' }}>
          <div className="csg-mono" style={{ fontSize: 60, color: CSG.cyan, fontWeight: 300, lineHeight: 1 }}>10</div>
          <div>
            <div className="csg-eyebrow">{t.ch10.eyebrow}</div>
            <h2 style={{ fontSize: 64, fontWeight: 500, lineHeight: 1.0, marginTop: 24, letterSpacing: '-0.02em' }}>
              {t.ch10.title} <span style={{ color: CSG.cyan, fontStyle: 'italic', fontWeight: 300 }}>{t.ctaItalic}</span>.
            </h2>
            <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.78)', marginTop: 24, maxWidth: 520, lineHeight: 1.55 }}>{t.ctaLede}</p>
            <div style={{ marginTop: 40, display: 'flex', gap: 12 }}>
              <button className="csg-btn csg-btn--cyan">{t.ctaBtn} →</button>
              <button className="csg-btn csg-btn--ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}>+49 30 123 456-7</button>
            </div>
          </div>
          <div style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.12)', padding: 28 }}>
            <div className="csg-mono" style={{ fontSize: 11, color: CSG.cyan, letterSpacing: '0.14em', marginBottom: 16 }}>{lang === 'de' ? 'KURZE ANFRAGE' : 'QUICK REQUEST'}</div>
            <form style={{ display: 'flex', flexDirection: 'column', gap: 10 }} onSubmit={e => e.preventDefault()}>
              <input placeholder={lang === 'de' ? 'Name' : 'Name'} style={inputStyleDark} />
              <input placeholder={lang === 'de' ? 'E-Mail' : 'Email'} style={inputStyleDark} />
              <input placeholder={lang === 'de' ? 'Unternehmen' : 'Company'} style={inputStyleDark} />
              <textarea rows={3} placeholder={lang === 'de' ? 'Kurz zu Ihrer Studie' : 'Briefly about your study'} style={{ ...inputStyleDark, resize: 'none' }}></textarea>
              <button className="csg-btn csg-btn--cyan" style={{ justifyContent: 'center', marginTop: 4 }}>{lang === 'de' ? 'Senden' : 'Send'} →</button>
            </form>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}

const inputStyleDark = {
  padding: 12, background: 'rgba(0,0,0,0.2)', border: '1px solid rgba(255,255,255,0.15)',
  color: '#fff', fontFamily: 'inherit', fontSize: 14, outline: 'none',
};

// Re-usable numbered chapter container
function Chapter({ num, head, children, bg, dark, transparent }) {
  return (
    <section style={{ padding: '120px 72px', background: transparent ? 'transparent' : (bg || '#fff'), color: dark ? '#fff' : CSG.anthrazit }}>
      <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 40, alignItems: 'start', marginBottom: 64 }}>
        <div className="csg-mono" style={{ fontSize: 60, color: CSG.cyan, fontWeight: 300, lineHeight: 1 }}>{num}</div>
        <div>
          <SectionHead eyebrow={head.eyebrow} title={head.title} kicker={head.kicker} dark={dark} />
        </div>
      </div>
      <div style={{ marginLeft: 160 }}>{children}</div>
    </section>
  );
}

window.HomeHybridFinal = HomeHybridFinal;