const Founder = () => (
  <section id="founder">
    <Container>
      <div className="founder">
        <div>
          <span className="eyebrow">Founder</span>
          <h2>A Canadian who actually moved to Vietnam.</h2>
          <p className="founder__quote">I got tired of watching good products die because the founder couldn't get a straight answer out of their factory. So I moved. Now I walk the floor every week.</p>
          <p className="lead" style={{ marginBottom: 28 }}>Paul Bassoo has been designing and manufacturing soft goods in Ho Chi Minh City since 2018. Before XL Ovation, he led product development for outdoor and tactical brands across North America, and watched too many of them get burned by third-party agencies in Asia.</p>
          <p className="lead" style={{ marginBottom: 32 }}>He wrote the book on it, literally. <em>Product Development Mistake</em> is a field guide for founders about to make the same errors he's seen a hundred times.</p>

          <div className="founder__byline">
            <div className="av">PB</div>
            <div>
              <div className="nm">Paul Bassoo</div>
              <div className="role">Founder · XL Ovation · Ho Chi Minh City</div>
            </div>
          </div>
        </div>

        <div className="founder__media">
          <div className="book-glow" />
          <img src="assets/book.png" alt="Product Development Mistake, a book by Paul Bassoo" />
          <div className="book-chip glass-strong">
            <div className="k">Free chapter</div>
            <div className="v">Download "The Five Fatal Factory Contracts"</div>
          </div>
        </div>
      </div>
    </Container>
  </section>
);

window.Founder = Founder;