// Longworth Seeds — Heritage page · Francis Longworth, the comb machine, four generations

function HeritagePage({ onNav }) {
  return (
    <div className="route">
      <div className="h-page-top" />

      {/* INTRO */}
      <section className="section paper" style={{ paddingBottom: 56 }} data-screen-label="01 Heritage intro">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: 'end' }}>
            <div style={{ gridColumn: 'span 9' }}>
              <span className="eyebrow no-rule">
                <span style={{ width: 28, height: 1, background: 'currentColor', opacity: 0.6 }}></span>
                Heritage · 1934 → today
              </span>
              <h1 className="display" style={{ marginTop: 20 }}>
                One family, <em>one paddock,</em> four generations <em>and a&nbsp;patent.</em>
              </h1>
            </div>
          </div>
        </div>
      </section>

      {/* THE PATENT MOMENT */}
      <section className="section paper" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <Photo
            src="assets/photo-heritage-1948-truck.jpg"
            alt="Black-and-white archive photograph, 1948 — Longworth comb-harvester truck rig in the paddock"
            ratio="21/9"
            pos="40% 50%"
            className="heritage"
            coord="Archive · 1948"
          />

          <div className="grid-12" style={{ alignItems: 'start', gap: 64, marginTop: 64 }}>
            <div style={{ gridColumn: '2 / span 4' }}>
              <span className="label">§ 1934</span>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 30, fontWeight: 400, letterSpacing: '-0.01em', margin: '12px 0 18px' }}>
                The first comb machine
              </h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', margin: 0 }}>
                <em style={{ fontFamily: 'var(--serif)', fontStyle: 'italic' }}>Francis Longworth (1885 – 1978)</em> invented and patented the first comb machine for harvesting grass seed — at that time, Paspalum dilatatum. The existing harvesters didn't suit it. So Francis built one that did.
              </p>
            </div>
            <div style={{ gridColumn: 'span 4' }}>
              <span className="label">§ 1935 onwards</span>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 30, fontWeight: 400, letterSpacing: '-0.01em', margin: '12px 0 18px' }}>
                Father and sons
              </h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', margin: 0 }}>
                Together with his sons, Frank designed and built grading machines specific to Paspalum and Carpet Grass seed. The shed, the paddocks, the export ledger — all of it grew from there.
              </p>
            </div>
            <div style={{ gridColumn: 'span 4' }}>
              <span className="label">§ today</span>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 30, fontWeight: 400, letterSpacing: '-0.01em', margin: '12px 0 18px' }}>
                Same name on the gate
              </h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', margin: 0 }}>
                Four generations on, the Longworths still build the machines, work the paddocks and answer the phone. Research into design and manufacturing of harvesters and graders specific to our seeds has never stopped.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* TIMELINE — dark, with key milestones */}
      <section className="section dark" data-screen-label="02 Timeline">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: 'end', marginBottom: 16 }}>
            <div style={{ gridColumn: 'span 8' }}>
              <span className="eyebrow on-dark">§ Timeline</span>
              <h2 className="h2 on-dark" style={{ marginTop: 20 }}>
                Ninety years on the <em>same patch of dirt.</em>
              </h2>
            </div>
          </div>

          <div className="timeline on-dark">
            <div className="timeline-step">
              <div className="timeline-year"><em>1934</em></div>
              <div className="timeline-label">Patent</div>
              <p className="timeline-body">
                Francis Longworth patents the first comb machine for harvesting grass seed. The Paspalum dilatatum problem, solved.
              </p>
            </div>
            <div className="timeline-step">
              <div className="timeline-year">1935</div>
              <div className="timeline-label">Business begins</div>
              <p className="timeline-body">
                Longworth Seeds opens its doors. Francis and his sons produce, harvest and clean Paspalum dilatatum and Carpet Grass seed.
              </p>
            </div>
            <div className="timeline-step">
              <div className="timeline-year">1948</div>
              <div className="timeline-label">Built-for-purpose</div>
              <p className="timeline-body">
                Father-and-sons graders built from scratch for Paspalum and Carpet Grass. Research never stops.
              </p>
            </div>
            <div className="timeline-step">
              <div className="timeline-year">1970s →</div>
              <div className="timeline-label">Export</div>
              <p className="timeline-body">
                The vast majority of our seed goes overseas — to North and South America, and South East Asia. Still does.
              </p>
            </div>
            <div className="timeline-step">
              <div className="timeline-year"><em>2012</em></div>
              <div className="timeline-label">New line</div>
              <p className="timeline-body">
                Approached by a leading Australian seed company to grade Premier Digitaria to a coatable standard. We design and build a line that keeps the seed aerated through cleaning — minimal viable loss.
              </p>
            </div>
            <div className="timeline-step">
              <div className="timeline-year">2018</div>
              <div className="timeline-label">More varieties</div>
              <p className="timeline-body">
                The new line goes into use on Gatton, Bambatsi and Green Panic. Seed arrives from Western and Northern NSW and Queensland.
              </p>
            </div>
            <div className="timeline-step">
              <div className="timeline-year">Today</div>
              <div className="timeline-label">Fourth generation</div>
              <p className="timeline-body">
                David runs seed sales and grading. Peter runs the Limousin stud and the hay. Same Longworth family. Same paddocks.
              </p>
            </div>
            <div className="timeline-step">
              <div className="timeline-year"><em>Next</em></div>
              <div className="timeline-label">Whatever you bring</div>
              <p className="timeline-body">
                We're still in the business of building the machine that fits the seed. If you've got something tricky, talk to us about it.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ETHOS QUOTE */}
      <section className="section paper" data-screen-label="03 Ethos">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: 'center', gap: 64 }}>
            <div style={{ gridColumn: 'span 5' }}>
              <Photo
                src="assets/photo-heritage-1948-jeep.jpg"
                alt="Black-and-white archive photograph from 1948 — front view of a Longworth comb-harvester jeep rig"
                ratio="4/5"
                pos="50% 45%"
                className="heritage"
                coord="1948 · UL-104"
              />
            </div>
            <div style={{ gridColumn: '7 / span 6' }}>
              <span className="eyebrow">§ Ethos · in their words</span>
              <blockquote style={{
                fontFamily: 'var(--serif)', fontSize: 'clamp(30px, 4vw, 50px)',
                lineHeight: 1.18, letterSpacing: '-0.015em', margin: '24px 0 32px',
                fontWeight: 400,
              }}>
                <em style={{ fontStyle: 'italic', color: 'var(--leaf-dark)', fontWeight: 300 }}>"Integrity and honesty in business</em> is the underlying ethos of our business."
              </blockquote>
              <div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 20 }}>The Longworth family</div>
                <div className="label" style={{ marginTop: 4 }}>Fourth generation · Kundle Kundle, NSW</div>
              </div>
              <p style={{ marginTop: 36, fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: '52ch' }}>
                It's on the wall in Francis's old hand. Eighty-some years later it's the only thing we still won't update.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* THE FAMILY TODAY */}
      <section className="section stone" data-screen-label="04 Family today">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: 'end', marginBottom: 56 }}>
            <div style={{ gridColumn: 'span 7' }}>
              <span className="eyebrow">§ The Longworths today</span>
              <h2 className="h2" style={{ marginTop: 20 }}>
                Two brothers, <em>two parts of the business.</em>
              </h2>
            </div>
            <p className="lede" style={{ gridColumn: '9 / span 4' }}>
              We answer the phone ourselves. Same family on the gate, in the shed, on the tractor.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
            <div style={{ background: 'var(--paper)', padding: 36, borderRadius: 4, border: '1px solid var(--line)' }}>
              <span className="label">Generation IV · Seed</span>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 38, letterSpacing: '-0.02em', margin: '12px 0 18px', fontWeight: 400 }}>
                David <em style={{ fontStyle: 'italic', color: 'var(--leaf-dark)', fontWeight: 300 }}>Longworth</em>
              </h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', margin: '0 0 28px' }}>
                Runs seed sales and grading. Spends most of the season on the floor watching the new line, the rest of it on the phone to growers and seed companies.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <a href={window.PHONE_SEED_HREF} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: 'var(--leaf-dark)', fontWeight: 600 }}>
                  <Icon.phone style={{ width: 18, height: 18 }} /> {window.PHONE_SEED}
                </a>
                <a href={`mailto:${window.EMAIL_SEED}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: 'var(--ink-soft)' }}>
                  <Icon.mail style={{ width: 18, height: 18 }} /> {window.EMAIL_SEED}
                </a>
              </div>
            </div>
            <div style={{ background: 'var(--paper)', padding: 36, borderRadius: 4, border: '1px solid var(--line)' }}>
              <span className="label">Generation IV · Cattle &amp; Hay</span>
              <h3 style={{ fontFamily: 'var(--serif)', fontSize: 38, letterSpacing: '-0.02em', margin: '12px 0 18px', fontWeight: 400 }}>
                Peter <em style={{ fontStyle: 'italic', color: 'var(--leaf-dark)', fontWeight: 300 }}>Longworth</em>
              </h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', margin: '0 0 28px' }}>
                Runs the Kundle Park Limousin stud, the commercial beef herd, and the hay and silage operation. Lives in the saddle of the tractor in summer.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <a href={window.PHONE_CATTLE_HREF} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: 'var(--leaf-dark)', fontWeight: 600 }}>
                  <Icon.phone style={{ width: 18, height: 18 }} /> {window.PHONE_CATTLE}
                </a>
                <a href={`mailto:${window.EMAIL_CATTLE}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: 'var(--ink-soft)' }}>
                  <Icon.mail style={{ width: 18, height: 18 }} /> {window.EMAIL_CATTLE}
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <window.SharedCTA onNav={onNav} />
    </div>
  );
}

window.HeritagePage = HeritagePage;
