function BuiltBy() {
  return (
    <section style={{ paddingTop: 96, paddingBottom: 96, borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <header style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48, marginBottom: 48 }}>
          <div className="eyebrow">/11 &nbsp; Built by</div>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 700, letterSpacing: '-0.035em', maxWidth: 900, textWrap: 'balance' }}>
              Made for the 99% who will never hire McKinsey, and shouldn&rsquo;t have to.
            </h2>
          </div>
        </header>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr',
          border: '1px solid var(--line)',
          background: 'var(--paper)',
        }}>
          <div style={{ padding: '36px 36px', borderRight: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 }}>
              <span style={{
                width: 56, height: 56, borderRadius: 28,
                background: 'var(--paper-3)',
                border: '1px solid var(--line)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 700, fontSize: 18, letterSpacing: '-0.02em',
              }}>FG</span>
              <div>
                <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em' }}>Fatih Guner</div>
                <div style={{ fontSize: 13, color: 'var(--muted)' }}>Founder &middot; building Foreman in the open</div>
              </div>
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-2)', maxWidth: 540, textWrap: 'pretty' }}>
              I built Foreman after watching thousands of entrepreneurs &mdash; through Komunite, Türkiye&rsquo;s largest entrepreneurship community &mdash; struggle with the same strategic blind spots. The frameworks already exist. The gap is application.
            </p>
            <div style={{ marginTop: 24, display: 'flex', gap: 16 }}>
              <a href="https://x.com/fatihguner" className="mono" style={{ fontSize: 13, color: 'var(--ink-2)' }}>𝕏 @fatihguner &#x2197;</a>
              <a href="https://linkedin.com/in/fatihguner" className="mono" style={{ fontSize: 13, color: 'var(--ink-2)' }}>linkedin &#x2197;</a>
            </div>
          </div>
          <div style={{ padding: '36px 36px', display: 'grid', gap: 18 }}>
            <div>
              <div className="eyebrow">Komunite</div>
              <div style={{ fontSize: 17, marginTop: 6, lineHeight: 1.45, textWrap: 'pretty' }}>
                Türkiye&rsquo;s largest entrepreneurship community. Where the patterns this product solves were observed first.
              </div>
              <a href="https://komunite.com.tr" className="mono" style={{ fontSize: 12, color: 'var(--muted)', marginTop: 8, display: 'inline-block' }}>komunite.com.tr &#x2197;</a>
            </div>
            <div style={{ borderTop: '1px solid var(--line)' }} />
            <div>
              <div className="eyebrow">Lokomotif AI</div>
              <div style={{ fontSize: 17, marginTop: 6, lineHeight: 1.45, textWrap: 'pretty' }}>
                Corporate AI adoption practice. Where the orchestration patterns inside Foreman were stress-tested.
              </div>
              <a href="https://lokomotif.ai" className="mono" style={{ fontSize: 12, color: 'var(--muted)', marginTop: 8, display: 'inline-block' }}>lokomotif.ai &#x2197;</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.BuiltBy = BuiltBy;