// FoundersNote.jsx — serif italic, brass accent (the one warm moment)
const PlumbFoundersNote = () => (
  <section id="founders" className="section fn reveal-fx" data-screen-label="founders-note">
    <div className="section-corner">
      <span>05 · founders' note</span>
      <span>5 people · not 500</span>
    </div>
    <div className="page">
      <p className="eyebrow">05 · founders' note</p>

      <div className="fn-card">
        <div className="fn-corner">
          <span className="brass-dot" />
          <span className="readout">memo · plumb team · 2026</span>
        </div>
        <div className="fn-q">
          <p>We built Plumb because one of us watched a $40,000 motor mount get scrapped on a Thursday afternoon. The bracket had been in CAD for six weeks. The shop could not run a 2.5mm wall on 6061. Nobody on the design team knew, because nobody on the design team could see.</p>
          <p>We are not the first people to notice this gap. We are the first people stubborn enough to build the thing that closes it without trying to replace everything else in the room.</p>
          <p>If this is a problem you have lived with, we'd like to hear from you.</p>
        </div>
        <div className="fn-sig readout">— the plumb team · five people, not five hundred</div>
      </div>
    </div>

    <style>{`
      .fn { background: #f0eadb; }
      .fn-card {
        max-width: 760px;
        margin: 32px 0 0;
        padding: 48px 8px 32px;
        position: relative;
        border-top: 1px solid var(--border-default);
        border-bottom: 1px solid var(--border-default);
      }
      .fn-corner {
        position: absolute; top: -12px; left: 0;
        background: #f0eadb;
        padding-right: 16px;
        display: flex; align-items: center; gap: 10px;
        font-size: 10px; color: rgba(26,26,26,0.5); letter-spacing: 0.08em;
      }
      .brass-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--color-brass);
        box-shadow: 0 0 0 3px rgba(201,169,97,0.18);
      }
      .fn-q {
        display: block;
        margin: 0 0 56px;
      }
      .fn-q p {
        font-family: var(--font-serif);
        font-style: italic;
        font-weight: 400;
        font-size: clamp(22px, 2.6vw, 30px);
        line-height: 1.55;
        color: var(--color-graphite);
        text-wrap: pretty;
        margin: 0 0 48px;
      }
      .fn-q p:last-child { margin-bottom: 0; }
      .fn-sig {
        display: block;
        clear: both;
        padding-top: 24px;
        border-top: 1px solid var(--border-default);
        font-size: 11px;
        color: rgba(26,26,26,0.55);
        letter-spacing: 0.06em;
      }
    `}</style>
  </section>
);

window.PlumbFoundersNote = PlumbFoundersNote;