/* The Snowberry website — Our Story (founder Lou) */
function OurStory() {
  const { Eyebrow, Quote } = window.TheSnowberryDesignSystem_ed783b;
  return (
    <section id="story" style={{ background: 'var(--parchment)', padding: '112px 40px' }}>
      <div className="sb-story-grid" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 72, alignItems: 'center' }}>
        {/* Founder portrait — placeholder for real photography of Lou */}
        <div className="sb-story-portrait" style={{
          position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden',
          aspectRatio: '4 / 5', border: '1px solid var(--border-strong)',
          background: 'repeating-linear-gradient(135deg, var(--green-50) 0 14px, var(--green-100) 14px 28px)',
          display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-start',
        }}>
          <img src="assets/logos/sprig-green.png" alt="" style={{ position: 'absolute', top: 20, right: 20, height: 44, opacity: 0.6 }} />
          <span style={{ margin: 18, fontFamily: 'var(--font-mono, ui-monospace, monospace)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--green-700)', background: 'rgba(253,251,248,0.82)', padding: '6px 10px', borderRadius: 4 }}>
            Founder portrait · Lou
          </span>
        </div>

        <div>
          <Eyebrow tone="brand">Our Story</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(30px, 4vw, 48px)', lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--green-700)', margin: '16px 0 0', textWrap: 'balance' }}>
            Why Lou built a home for twelve.
          </h2>

          <div style={{ marginTop: 26, display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 560 }}>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.65, color: 'var(--ink-700)', margin: 0 }}>
              The Snowberry began with a simple conviction of its founder, <strong style={{ fontWeight: 600, color: 'var(--ink-900)' }}>Lou</strong>: that care is most powerful when it’s genuinely personal, not personalized on a form, but personal in practice, where the people looking after your mother actually know your mother.
            </p>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.65, color: 'var(--ink-700)', margin: 0 }}>
              Lou holds real respect for the big communities. They do remarkable things at a scale a small home never could, and for many families they’re exactly the right choice. But Lou wanted to build the harder-to-scale thing: a single table, twelve chairs, and caregivers who learn a resident’s whole history, not just their chart.
            </p>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.65, color: 'var(--ink-700)', margin: 0 }}>
              So The Snowberry was made deliberately small. Twelve residents, a 1:5 ratio, one shared kitchen. Small enough that nothing about a person gets lost. And that, to Lou, is the whole point.
            </p>
          </div>

          <div style={{ marginTop: 40, paddingTop: 34, borderTop: '1px solid var(--border-strong)' }}>
            <Quote tone="light" size="md" cite="Lou" role="Founder, The Snowberry">
              I never set out to run a facility. I set out to lay one more place at a real table.
            </Quote>
          </div>
        </div>
      </div>
    </section>
  );
}
window.OurStory = OurStory;
