// Longworth Seeds — Seed services page

function SeedPage({ onNav }) {
  const services = [
    {
      n: '01',
      t: 'Comb harvesting',
      em: 'harvesting',
      d: "Direct off the paddock with our own comb-harvesters — the direct descendant of Francis Longworth's 1934 patent. We've kept refining the design ever since.",
      specs: [
        ['Crops',   'Paspalum dilatatum · Carpet Grass'],
        ['Method',  'Comb-style header — gentle on fragile seed'],
        ['Heritage','First-patented in 1934 by Francis Longworth'],
      ],
      img: 'assets/photo-utes-harvest.jpg',
      pos: '50% 55%',
    },
    {
      n: '02',
      t: 'Aerated cleaning',
      em: 'cleaning',
      d: 'In 2012 a major Australian seed company asked if we could clean Premier Digitaria to a coatable standard with minimal loss of viable seed. We built the machines to do it. We still run them.',
      specs: [
        ['Coatable standard', 'Yes — minimal viable seed loss'],
        ['Process',           'Aerated throughout the cleaning stage'],
        ['Built',             'Designed and assembled on-site'],
      ],
      img: 'assets/photo-seed-2.jpg',
      pos: '50% 50%',
    },
    {
      n: '03',
      t: 'Grading & sorting',
      em: 'sorting',
      d: 'Grading machines designed specifically for the seeds we deal with — refined across four generations. Together with our cleaning line they bring seed to the standard buyers expect.',
      specs: [
        ['Crops',     'Premier Digitaria · Gatton · Bambatsi · Green Panic · Paspalum · Carpet Grass'],
        ['Customers', 'Australian seed companies · direct growers'],
        ['Seed in',   'Western & Northern NSW · Western & Northern QLD'],
      ],
      img: 'assets/photo-seed-3.jpg',
      pos: '50% 50%',
    },
    {
      n: '04',
      t: 'Storage & despatch',
      em: 'despatch',
      d: 'Under-cover pallet storage in fully-wrapped, keep-dry lots. We despatch on B-double curtainsiders bound for seed-company yards across the country — and on to the export wharf.',
      specs: [
        ['Lots',     'Tagged, traceable, kept dry'],
        ['Despatch', 'Curtainsider B-double · regular runs'],
        ['Markets',  'Domestic + export (N · S America · SE Asia)'],
      ],
      img: 'assets/photo-warehouse.jpg',
      pos: '50% 50%',
    },
  ];

  return (
    <div className="route">
      <div className="h-page-top" />

      {/* PAGE INTRO */}
      <section className="section paper" style={{ paddingBottom: 56 }} data-screen-label="01 Seed intro">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: 'end' }}>
            <div style={{ gridColumn: 'span 7' }}>
              <span className="eyebrow no-rule" style={{ marginBottom: 28, display: 'inline-flex' }}>
                <span style={{ width: 28, height: 1, background: 'currentColor', opacity: 0.6 }}></span>
                Seed services
              </span>
              <h1 className="display" style={{ marginTop: 20 }}>
                Harvest, clean, grade. <em>The same family. For ninety years.</em>
              </h1>
            </div>
            <p className="lede" style={{ gridColumn: '9 / span 4' }}>
              We work direct with growers across NSW and Queensland, and direct with Australia's leading seed companies. The seed that leaves our shed is mostly bound overseas — to North and South America, and South East Asia.
            </p>
          </div>
        </div>
      </section>

      {/* SERVICE ROWS — alternating */}
      <section className="section paper" style={{ paddingTop: 0, paddingBottom: 0 }}>
        {services.map((s, i) => (
          <ServiceRow key={s.n} s={s} flip={i % 2 === 1} bg={i % 2 === 1 ? 'stone' : 'paper'} />
        ))}
      </section>

      {/* VARIETY GALLERY */}
      <section className="section paper" data-screen-label="02 Varieties">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: 'end', marginBottom: 56 }}>
            <div style={{ gridColumn: 'span 7' }}>
              <span className="eyebrow">§ The seeds we grade</span>
              <h2 className="h2" style={{ marginTop: 20 }}>
                Six pasture seed varieties. <em>One disciplined process.</em>
              </h2>
            </div>
            <p className="lede" style={{ gridColumn: '9 / span 4' }}>
              Paspalum and Carpet Grass since 1935. Premier Digitaria, Gatton, Bambatsi and Green Panic since the new line went in.
            </p>
          </div>

          <div className="varieties">
            {[
              { t: 'Paspalum',  em: 'dilatatum', latin: 'Paspalum dilatatum', d: 'The original Longworth crop. Comb-harvested in our own paddocks. Vigorous and drought-tolerant — the backbone of warm-season Australian pasture.', img: 'assets/photo-seed-2.jpg', tags: ['Since 1935', 'Comb-harvested', 'Coatable', 'Export'] },
              { t: 'Carpet',     em: 'Grass',     latin: 'Axonopus affinis',    d: 'Low-growing perennial with a tight sward — popular for high-traffic pasture and turf applications. Cleaned on machines we built for it.', img: 'assets/photo-seed-1.jpg', tags: ['Original lineup', 'Export'] },
              { t: 'Premier',    em: 'Digitaria', latin: 'Digitaria eriantha',  d: 'The crop that pushed us to engineer the aerated-cleaning line in 2012. Kept viable through the process so the seed coats properly afterwards.', img: 'assets/photo-seed-3.jpg', tags: ['Added 2012', 'Aerated process', 'Coatable'] },
              { t: 'Gatton',     em: '',           latin: 'Panicum maximum cv. Gatton', d: 'Leafy, productive selection of Green Panic — strong yields in warm-temperate to sub-tropical climates. Cleaned to seed-company spec.', img: 'assets/photo-seed-1.jpg', tags: ['Domestic', 'Export'] },
              { t: 'Bambatsi',   em: '',           latin: 'Panicum coloratum',   d: 'Tough, persistent and clay-tolerant. A popular choice for sub-tropical pasture renovation — cleaned to a high purity standard.', img: 'assets/photo-seed-2.jpg', tags: ['NSW · QLD', 'Seed-co spec'] },
              { t: 'Green',      em: 'Panic',      latin: 'Megathyrsus maximus', d: 'Highly palatable and productive for sub-tropical grazing systems. Grower-to-grader-to-seed-company. No middlemen.', img: 'assets/photo-seed-3.jpg', tags: ['Sub-tropical', 'Direct'] },
            ].map(v => (
              <div className="variety" key={v.t + v.em}>
                <Photo src={v.img} alt={v.latin} ratio="1/1" pos="50% 50%" />
                <h3>{v.t} {v.em && <em>{v.em}</em>}</h3>
                <div className="latin">{v.latin}</div>
                <p>{v.d}</p>
                <div className="meta">
                  {v.tags.map(t => <span className="tag" key={t}>{t}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PROCESS DIAGRAM */}
      <section className="section dark" data-screen-label="03 Workflow">
        <div className="wrap">
          <span className="eyebrow on-dark">§ Workflow</span>
          <h2 className="h2 on-dark" style={{ marginTop: 20, maxWidth: '20ch' }}>
            Paddock to pallet, <em>under the Longworth name.</em>
          </h2>

          <div style={{
            marginTop: 64,
            display: 'grid',
            gridTemplateColumns: 'repeat(5, 1fr)',
            gap: 0,
            position: 'relative',
          }}>
            {[
              { n: '00', t: 'Harvest',  d: 'Comb-harvested off the paddock by our team or off-farm by the grower.' },
              { n: '01', t: 'Intake',   d: 'Weighed in. Sample drawn. Lot ID assigned. Kept dry.' },
              { n: '02', t: 'Cleaning', d: 'Aerated cleaning line — purpose-built. Minimum viable-seed loss.' },
              { n: '03', t: 'Grading',  d: 'Indent, size, and density grading on Longworth-built machines.' },
              { n: '04', t: 'Despatch', d: 'Wrapped, tagged, loaded. To seed company yard or export wharf.' },
            ].map((step, idx, arr) => (
              <div key={step.n} style={{
                borderLeft: '1px solid rgba(255,255,255,0.1)',
                borderRight: idx === arr.length - 1 ? '1px solid rgba(255,255,255,0.1)' : 'none',
                padding: '28px 20px 36px',
                display: 'flex', flexDirection: 'column', gap: 12,
                position: 'relative',
              }}>
                <span style={{
                  fontFamily: 'var(--mono)', fontSize: 11,
                  letterSpacing: '0.16em', color: 'rgba(255,255,255,0.5)'
                }}>{step.n}</span>
                <div style={{
                  fontFamily: 'var(--serif)', fontSize: 28, lineHeight: 1.05,
                  letterSpacing: '-0.01em',
                }}>{step.t}</div>
                <p style={{ margin: 0, fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.5 }}>{step.d}</p>
                <span style={{
                  position: 'absolute', top: 28, right: -7,
                  width: 14, height: 14, borderRadius: 999,
                  background: 'var(--wheat)',
                  display: idx === arr.length - 1 ? 'none' : 'block',
                  boxShadow: '0 0 0 4px var(--navy)',
                }}></span>
              </div>
            ))}
          </div>
        </div>
      </section>

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

function ServiceRow({ s, flip, bg }) {
  return (
    <div style={{
      background: bg === 'stone' ? 'var(--stone)' : 'var(--paper)',
      padding: 'clamp(64px, 7vw, 112px) 0',
    }}>
      <div className="wrap">
        <div className="grid-12" style={{
          alignItems: 'center',
          gap: 64,
          direction: flip ? 'rtl' : 'ltr',
        }}>
          <div style={{ gridColumn: 'span 6', direction: 'ltr' }}>
            <Photo src={s.img} alt={s.t} pos={s.pos} ratio="4/3" pan="slow" />
          </div>
          <div style={{ gridColumn: 'span 5', direction: 'ltr' }}>
            <span className="label" style={{ marginBottom: 16, display: 'block' }}>SERVICE {s.n}</span>
            <h3 style={{
              fontFamily: 'var(--serif)', fontSize: 'clamp(34px, 4vw, 56px)',
              fontWeight: 400, letterSpacing: '-0.02em', margin: '0 0 24px',
              lineHeight: 1.02,
            }}>
              {s.em ? (
                <>
                  {s.t.split(s.em)[0]}
                  <em style={{ fontStyle: 'italic', color: 'var(--leaf-dark)', fontWeight: 300 }}>{s.em}</em>
                  {s.t.split(s.em)[1]}
                </>
              ) : s.t}
            </h3>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-soft)', marginTop: 0, marginBottom: 32, maxWidth: '52ch' }}>{s.d}</p>

            <div style={{ borderTop: '1px solid var(--line)' }}>
              {s.specs.map(([k, v]) => (
                <div key={k} style={{
                  display: 'grid', gridTemplateColumns: '1fr 1.6fr',
                  padding: '14px 0', borderBottom: '1px solid var(--line)',
                  gap: 24, alignItems: 'baseline',
                }}>
                  <span className="label">{k}</span>
                  <span style={{ fontFamily: 'var(--serif)', fontSize: 19, letterSpacing: '-0.01em' }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SharedCTA({ onNav }) {
  return (
    <section className="section paper">
      <div className="wrap">
        <div style={{
          background: 'var(--navy)', color: '#fff',
          padding: 'clamp(48px, 6vw, 96px)',
          borderRadius: 6,
          display: 'grid', gridTemplateColumns: '1.4fr 1fr',
          gap: 56, alignItems: 'center',
        }}>
          <div>
            <span className="eyebrow on-dark">§ Talk to David</span>
            <h2 className="h2 on-dark" style={{ marginTop: 20 }}>
              Got Paspalum, Carpet Grass or sub-tropical pasture seed <em>this season?</em>
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
            <a className="btn btn-primary" href={window.PHONE_SEED_HREF}><Icon.phone /> Call {window.PHONE_SEED}</a>
            <a className="btn btn-ghost on-dark" href="#contact" onClick={(e)=>{e.preventDefault(); onNav('contact');}}>
              Or send a message <Icon.arrow />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.SeedPage = SeedPage;
window.SharedCTA = SharedCTA;