/* global React */

function Founder() {
  return (
    <section className="sec sec-sky" id="founder">
      <div className="container-narrow">
        <div data-reveal style={{ marginBottom: 40 }}>
          <span className="eyebrow">A note from the founder</span>
        </div>

        <h2 data-reveal data-reveal-delay="1" className="headline" style={{ marginBottom: 40, fontFamily: 'var(--font-serif-literary)', fontStyle: 'italic', fontWeight: 400 }}>
          If I build it, will they come?
        </h2>

        <div data-reveal data-reveal-delay="2" style={{ font: '400 19px/1.7 var(--font-serif)', color: 'var(--ink)', letterSpacing: '-0.005em' }}>
          <p style={{ margin: '0 0 24px' }}>
            For 25 years I’ve built software on macOS and iOS, including Google Maps for iPhone.
            I’ve been writing stories for even longer.
            Science fiction, mostly, but also magical fantasy, and even a math book about large numbers.
            I may not be a best-selling author, but I’ve put in the hours where it matters:
            writing, revision, critique, submission, and handling rejection.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            As a writer, I believe that <em>human beings</em> should be writing novels, painting portraits, and composing symphonies.
            And as an engineer, I know exactly how machines can help without taking over.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            The advent of products like ChatGPT and Claude opened a world of new possibilities for writers’ tools.
            In a writing group meeting we started brainstorming, and the more ideas we came up with, the more excited I got.
            “Wouldn’t it be nice if an app could...?”
            I decided to build that app in late 2025.
            It has since taken over my life and become something that I always wished existed.
          </p>
          <p style={{ margin: '0 0 40px', fontFamily: 'var(--font-serif-literary)', fontStyle: 'italic', color: 'var(--ink-2)' }}>
            Built with love in New York.
          </p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'linear-gradient(135deg, #1F6F6A, #3D8A85)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '500 16px/1 var(--font-serif-classical)' }}>YW</div>
            <div>
              <div style={{ font: '500 14px/1.2 var(--font-sans)', color: 'var(--ink)' }}>Yuna Wang</div>
              <div style={{ font: '400 13px/1.2 var(--font-sans)', color: 'var(--ink-3)', fontStyle: 'italic', fontFamily: 'var(--font-serif-literary)' }}>Founder · Yunacaba Inc. · Former Google Staff Engineer</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Founder = Founder;