// FounderSection: portrait + Lukas Göggel intro
const FounderSection = () => (
  <section style={{ padding: '96px 24px', background: '#fff' }}>
    <div style={{
      maxWidth: 1200, margin: '0 auto',
      display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'flex-start',
    }}>
      <div>
        <div style={{
          aspectRatio: '4/5', borderRadius: 16, overflow: 'hidden',
          background: '#0A0A0A',
          border: '1px solid #E5E5E5',
          position: 'relative',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {/* Portrait placeholder */}
          <div style={{
            width: 140, height: 140, borderRadius: '50%', background: '#FFD500',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            font: '700 64px Roboto, sans-serif', color: '#0A0A0A',
          }}>LG</div>
          <div style={{
            position: 'absolute', bottom: 16, left: 16,
            font: '500 11px Roboto, sans-serif', color: '#A3A3A3',
            letterSpacing: '0.04em', textTransform: 'uppercase',
          }}>
            Foto-Platzhalter
          </div>
        </div>
        <div style={{ marginTop: 20 }}>
          <div style={{ font: '600 18px Roboto, sans-serif', color: '#0A0A0A' }}>
            Lukas Göggel
          </div>
          <div style={{ font: '400 14px Roboto, sans-serif', color: '#737373', marginTop: 2 }}>
            Gründer · Goma-IT
          </div>
        </div>
      </div>
      <div>
        <div style={{
          font: '500 12px Roboto, sans-serif', letterSpacing: '0.08em',
          textTransform: 'uppercase', color: '#737373', marginBottom: 16,
        }}>
          Hinter Goma-IT
        </div>
        <h2 style={{
          font: '700 56px/1.05 Roboto, sans-serif', letterSpacing: '-0.02em',
          color: '#0A0A0A', margin: '0 0 32px',
        }}>
          Hinter Goma-IT steht eine Person.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <p style={{ font: '400 17px/1.65 Roboto, sans-serif', color: '#0A0A0A', margin: 0 }}>
            Goma-IT ist kein Großkonzern und keine Agentur mit 30 Junior-Beratern. Hinter dem Namen
            steht eine Person: <strong>Lukas Göggel</strong>.
          </p>
          <p style={{ font: '400 17px/1.65 Roboto, sans-serif', color: '#525252', margin: 0 }}>
            Aufgewachsen in Vorarlberg, mit Wurzeln im praktischen Mittelstand, wurde Goma-IT
            gegründet, weil zu viele Unternehmen mit den falschen Werkzeugen kämpfen — während die
            richtigen längst verfügbar sind.
          </p>
          <p style={{ font: '400 17px/1.65 Roboto, sans-serif', color: '#525252', margin: 0 }}>
            Sie haben einen direkten Ansprechpartner: vom ersten Gespräch über die technische
            Umsetzung bis zum laufenden Betrieb. Kein Vertriebsteam, das später an die "Umsetzung"
            weiterreicht. Sondern die Person, die das System auch baut.
          </p>
          <div style={{
            marginTop: 8, padding: '20px 24px',
            background: '#FAFAFA', border: '1px solid #E5E5E5', borderRadius: 8,
            borderLeft: '3px solid #FFD500',
          }}>
            <p style={{ font: '400 15px/1.6 Roboto, sans-serif', color: '#0A0A0A', margin: 0 }}>
              Unser Werkzeugkasten reicht von <strong>n8n</strong> und <strong>Anthropic Claude</strong>
              {' '}über Voice-AI mit <strong>Vapi</strong> und <strong>Deepgram</strong> bis zu eigener
              Server-Infrastruktur in Europa. Aber das ist nur das Wie. Das Was ist immer dasselbe:
              Ihr Problem so lösen, dass Sie nie wieder darüber nachdenken müssen.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

window.FounderSection = FounderSection;