// Leonard's Farm Our Story section
const LFSectionHeading = SectionHeading;
const LFBadge = Badge;

// Local farm photo. Swap images/story.jpg with your own file of the same name to change it.
const STORY_IMG = 'images/story.jpg';

function Story() {
  return (
    <section id="story" style={{ padding: 'var(--section-y) 0', background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 'var(--space-8)', alignItems: 'center' }}>
        <div>
          <LFSectionHeading eyebrow="Our story" title="Turning dry ground green" />
          <p style={{ marginTop: 'var(--space-5)', fontSize: 'var(--fs-lead)', color: 'var(--text-body)', lineHeight: 'var(--lh-body)' }}>
            Makueni is dry land. For most of the year the soil bakes hard and the rains
            come late, if they come at all. Leonard started small (one pump and a
            length of pipe up from the Athi River) and got the first rows drinking.
          </p>
          <p style={{ marginTop: 'var(--space-4)', color: 'var(--text-muted)', lineHeight: 'var(--lh-body)' }}>
            Green pushed up out of the dust, and row by row the farm grew: mango and
            orange trees, beds of watermelon, onions and tomatoes, leafy greens between the
            rows. Now neighbours come to learn how, and leave able to turn their own dry
            plots green.
          </p>
          <div style={{ marginTop: 'var(--space-5)', display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
            <LFBadge tone="green" dot>Dryland growing</LFBadge>
            <LFBadge tone="lime">Eight crops</LFBadge>
            <LFBadge tone="water">Teaching new farmers</LFBadge>
          </div>
        </div>

        {/* Real photo: replace images/story.jpg to change it */}
        <div style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', minHeight: 380 }}>
          <div className="lf-story-photo" style={{ position: 'absolute', inset: 0, background: `#176334 center/cover no-repeat url("${STORY_IMG}")` }} />
          <div style={{ position: 'absolute', left: 20, bottom: 20, background: 'rgba(255,255,255,0.94)', borderRadius: 'var(--radius-md)', padding: '12px 16px', maxWidth: 260, boxShadow: 'var(--shadow-md)' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--green-700)', fontSize: '1.05rem' }}>From one pump</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>to fields that feed the county.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Story = Story;