function AboutPhilipp() {
  return (
    <section style={{ padding: '120px 0', background: '#fff' }}>
      <div className="container">
        {/* Top: full-width editorial headline */}
        <div style={{ marginBottom: 64, maxWidth: 1000 }}>
          <div className="section-eyebrow" style={{ marginBottom: 20 }}>
            <span className="kicker-line"></span>Wer ich bin
          </div>
          <h2 className="section-title" style={{ fontSize: 'clamp(40px, 5.2vw, 68px)', lineHeight: 1.05 }}>
            Ich bin <em style={{ color: 'var(--ap-blue)', fontWeight: 500 }}>Philipp Raasch</em>.<br/>
            Ich war einer von ihnen.
          </h2>
        </div>

        {/* Bottom: portrait left, bio + credentials right */}
        <div className="about-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.25fr', gap: 80, alignItems: 'start' }}>
          <div style={{ position: 'relative' }}>
            <div style={{ aspectRatio: '4/5', borderRadius: 16, overflow: 'hidden', background: 'var(--bg-subtle)' }}>
              <img src="assets/philipp.png" alt="Philipp Raasch" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div>
            <div className="card" style={{ position: 'absolute', right: -24, bottom: -24, padding: '14px 20px', boxShadow: 'var(--shadow-lg)' }}>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>15+ Jahre</div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, color: 'var(--fg-1)', fontWeight: 500 }}>Automotive Insider</div>
            </div>
          </div>

          <div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 19, lineHeight: 1.6, color: 'var(--fg-2)' }}>
              <p style={{ margin: 0 }}>
                15+ Jahre Automotive. 10 Jahre davon bei Mercedes-Benz, mehrere davon in der Strategieabteilung. Heute ordne ich die Branche ein. Im Newsletter, Podcast und auf YouTube.
              </p>
              <p style={{ margin: '20px 0 0', fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--fg-1)', lineHeight: 1.4 }}>
                Ich spreche ihre Sprache. Weil es meine ist.
              </p>
            </div>

            {/* Credentials list — substantive bullets instead of weak stat boxes */}
            <ul style={{ listStyle: 'none', padding: 0, margin: '40px 0 0', display: 'flex', flexDirection: 'column', gap: 0, borderTop: '1px solid var(--border-default)' }}>
              {[
                ['10 Jahre Mercedes-Benz', 'Strategie. Ich kenne die Realität hinter den Pressemitteilungen.'],
                ['Practitioner, kein Journalist', 'Haltung und Meinung aus Erfahrung. Kein Neutralitätszwang.'],
                ['Unabhängig seit 2020', 'Keine Konzern-Agenda. Keine PR-Sprache. Keine Interessenkonflikte.'],
              ].map(([title, body], i) => (
                <li key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 20, padding: '20px 0', borderBottom: '1px solid var(--border-default)' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ap-blue)', fontWeight: 500, paddingTop: 4 }}>{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.01em', lineHeight: 1.25 }}>{title}</div>
                    <div style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--fg-3)', marginTop: 6 }}>{body}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}
window.AboutPhilipp = AboutPhilipp;