// About the Architect — deep indigo, gold name, strict typography + portrait slot.
function About() {
  const paras = [
    'With decades of experience spanning regulated financial systems, enterprise Java, COBOL/Mainframe modernization, and AI governance, I serve as a strategic advisor to CIOs, CTOs, and Private Equity Operating Partners.',
    'I specialize in the hardest problems in enterprise IT: post-merger system gridlock, failing digital transformations, and the safe modernization of deeply embedded legacy logic.',
    'Operating at the intersection of board-level business strategy and deep technical engineering, my mandate is simple: protect the investment, eliminate architectural debt, and build systems that scale safely.',
  ];
  return (
    <section id="about" className="site-hero section" style={{ position: 'relative' }}>
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <div className="grid-2up" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.8fr) minmax(0, 1.2fr)', gap: 64, alignItems: 'center' }}>
          {/* portrait — gold-framed, forensic ticks; user can drop a desaturated photo */}
          <Reveal>
            <div style={{ position: 'relative' }}>
              <div style={{ position: 'absolute', inset: -1, border: '1px solid rgba(212,175,55,0.45)', borderRadius: 'var(--fs-radius-md)', transform: 'translate(14px, 14px)', pointerEvents: 'none' }} />
              <div style={{ position: 'relative', border: '1px solid rgba(212,175,55,0.6)', borderRadius: 'var(--fs-radius-md)', overflow: 'hidden', background: 'var(--fs-indigo-dark)' }}>
                <img
                  src="assets/franz-schoning.jpg"
                  alt="Franz Schöning, Principal Enterprise Architect"
                  style={{ display: 'block', width: '100%', aspectRatio: '4 / 5', objectFit: 'cover', objectPosition: '50% 16%', filter: 'grayscale(1) contrast(1.05) brightness(1.02)' }}
                />
                {/* indigo grade wash + bottom scrim for the data tag */}
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(45,36,90,0.10) 0%, transparent 30%, transparent 62%, rgba(18,15,38,0.78) 100%)', mixBlendMode: 'multiply', pointerEvents: 'none' }} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(120deg, rgba(45,36,90,0.22), transparent 55%)', mixBlendMode: 'screen', pointerEvents: 'none' }} />
                <div style={{ position: 'absolute', left: 16, bottom: 14, zIndex: 3 }}>
                  <DataTag style={{ color: 'var(--fs-gold)' }}>PRINCIPAL &middot; ENTERPRISE ARCHITECT</DataTag>
                </div>
              </div>
            </div>
          </Reveal>

          {/* narrative */}
          <Reveal delay={120}>
            <Eyebrow dark>About the Architect</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--fs-font-display)', fontWeight: 700, fontSize: 'var(--fs-step-h1)',
              lineHeight: 1.12, letterSpacing: '-0.015em', color: 'var(--fs-gold)', margin: '18px 0 0',
            }}>
              Franz Schöning
            </h2>
            <p style={{
              fontFamily: 'var(--fs-font-body)', fontSize: 'var(--fs-step-body-lg)', fontWeight: 600,
              letterSpacing: '0.01em', color: 'var(--fs-pearl)', margin: '12px 0 0',
            }}>
              Principal Enterprise Architect & Turnaround Advisor
            </p>
            <hr className="fs-rule--gold" style={{ margin: '28px 0 0' }} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20, marginTop: 28 }}>
              {paras.map((p, i) => (
                <p key={i} style={{
                  fontFamily: 'var(--fs-font-body)', fontSize: 'var(--fs-step-body-lg)', lineHeight: 1.75,
                  color: 'var(--fs-indigo-200)', margin: 0, textWrap: 'pretty',
                }}>{p}</p>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { About });