// Longworth Seeds — Cattle & Hay page (Kundle Park Limousin + Paspalum hay/silage)

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

      {/* PAGE INTRO */}
      <section className="section paper" style={{ paddingBottom: 56 }} data-screen-label="01 Cattle intro">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: 'end' }}>
            <div style={{ gridColumn: 'span 8' }}>
              <span className="eyebrow no-rule">
                <span style={{ width: 28, height: 1, background: 'currentColor', opacity: 0.6 }}></span>
                Kundle Park · Cattle &amp; Hay
              </span>
              <h1 className="display" style={{ marginTop: 20 }}>
                The Limousin stud runs <em>where the Paspalum grows.</em>
              </h1>
            </div>
            <p className="lede" style={{ gridColumn: '9 / span 4', alignSelf: 'end' }}>
              Our main beef and seed operation is at <em>Kundle Kundle</em> near Taree on the NSW Mid North Coast. The cattle, the seed and the hay all come off the same paddocks — graded the same way.
            </p>
          </div>
        </div>
      </section>

      {/* HERO PHOTO STRIP */}
      <section className="section paper" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <Photo
            src="assets/photo-cattle.jpg"
            alt="Kundle Park Limousin cattle grazing on Paspalum pasture at Kundle Kundle"
            ratio="21/9"
            pos="50% 60%"
            pan="slow"
            coord="Kundle Park · Limousin Stud"
          />
          <div style={{
            display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr',
            gap: 28, marginTop: 28,
          }}>
            <Photo src="assets/photo-hay-paddock.jpg" alt="Paspalum hay drying in windrows" ratio="4/3" pos="50% 60%" coord="Windrows" />
            <Photo src="assets/photo-warehouse.jpg" alt="Wrapped seed pallets in dry storage" ratio="4/3" pos="50% 50%" coord="Dry storage" />
            <Photo src="assets/photo-tip-truck.jpg" alt="Tipper unloading at the Kundle Park yard" ratio="4/3" pos="50% 50%" coord="Despatch yard" />
          </div>
        </div>
      </section>

      {/* CATTLE */}
      <section className="section stone" data-screen-label="02 Limousin">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: 'center', gap: 64 }}>
            <div style={{ gridColumn: 'span 6' }}>
              <span className="eyebrow">§ The Stud</span>
              <h2 className="h2" style={{ marginTop: 20, marginBottom: 28 }}>
                Kundle Park <em>Limousin Stud.</em>
              </h2>
              <p className="lede" style={{ marginBottom: 24 }}>
                The Limousin stud runs in conjunction with our commercial beef herd at Kundle Kundle. We breed for the traits that matter when the cattle go up the chute at the butcher — temperament, frame, finish.
              </p>
              <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.6, margin: '0 0 36px', maxWidth: '52ch' }}>
                Turning off quality vealers for the local butcher market. Same paddocks that grow our Paspalum hay — pasture-finished, never grain-fed.
              </p>
              <div style={{ borderTop: '1px solid var(--line)' }}>
                {[
                  ['Breed',     'Limousin · pure-bred and commercial'],
                  ['Operation', 'Stud + commercial beef herd'],
                  ['Finishing', 'Pasture (Paspalum dilatatum)'],
                  ['Market',    'Vealers · butcher market'],
                  ['Enquiries', 'Peter Longworth · ' + window.PHONE_CATTLE],
                ].map(([k, v]) => (
                  <div key={k} style={{
                    display: 'grid', gridTemplateColumns: '1fr 1.5fr',
                    padding: '16px 0', borderBottom: '1px solid var(--line)',
                    gap: 24, alignItems: 'baseline',
                  }}>
                    <span className="label">{k}</span>
                    <span style={{ fontFamily: 'var(--serif)', fontSize: 20, letterSpacing: '-0.01em' }}>{v}</span>
                  </div>
                ))}
              </div>
              <a className="btn btn-primary" style={{ marginTop: 32 }} href={window.PHONE_CATTLE_HREF}>
                <Icon.phone /> Call Peter · {window.PHONE_CATTLE}
              </a>
            </div>
            <div style={{ gridColumn: 'span 6' }}>
              <Photo
                src="assets/photo-cattle.jpg"
                alt="Limousin cows and calves on green pasture"
                ratio="4/5"
                pos="50% 55%"
                pan="slow"
              />
            </div>
          </div>
        </div>
      </section>

      {/* HAY & SILAGE */}
      <section className="section paper" data-screen-label="03 Hay & Silage">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: 'center', gap: 64 }}>
            <div style={{ gridColumn: 'span 6' }}>
              <Photo
                src="assets/photo-hay-paddock.jpg"
                alt="Paspalum cut into windrows ready for baling on a Kundle Kundle paddock"
                ratio="4/5"
                pos="50% 50%"
                pan="slow"
                coord="Paddock 4 · January"
              />
            </div>
            <div style={{ gridColumn: 'span 6' }}>
              <span className="eyebrow">§ Hay &amp; Silage</span>
              <h2 className="h2" style={{ marginTop: 20, marginBottom: 28 }}>
                High-quality <em>Paspalum hay</em><br />and silage.
              </h2>
              <p className="lede" style={{ marginBottom: 24 }}>
                We make hay and silage off our own paddocks, both for our cattle and for sale. Same Paspalum we grow for seed — cut at peak, baled clean.
              </p>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1fr',
                gap: 1, background: 'var(--line)',
                border: '1px solid var(--line)',
                marginTop: 36, marginBottom: 36,
              }}>
                {[
                  { t: 'Large round bales', d: 'For grazing operations · cattle ration · pasture top-up.' },
                  { t: 'Small square bales', d: 'For horse, dairy and smaller-lot buyers.' },
                  { t: 'Silage',             d: 'Pit and baleage runs — paddock-cut Paspalum.' },
                  { t: 'Pickup or delivery', d: 'Direct from Kundle Kundle or arranged on truck.' },
                ].map(b => (
                  <div key={b.t} style={{ background: 'var(--paper)', padding: '24px 22px' }}>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 22, letterSpacing: '-0.01em', marginBottom: 6 }}>{b.t}</div>
                    <p style={{ margin: 0, fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.5 }}>{b.d}</p>
                  </div>
                ))}
              </div>
              <a className="btn btn-dark" href={window.PHONE_CATTLE_HREF}>
                <Icon.phone /> Peter Longworth · {window.PHONE_CATTLE}
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* LOCATION */}
      <section className="section dark" data-screen-label="04 Location">
        <div className="wrap">
          <div className="grid-12" style={{ alignItems: 'stretch', gap: 56 }}>
            <div style={{ gridColumn: 'span 5' }}>
              <span className="eyebrow on-dark">§ Find us</span>
              <h2 className="h2 on-dark" style={{ marginTop: 20, marginBottom: 28 }}>
                Mid North Coast <em>NSW.</em>
              </h2>
              <p className="lede" style={{ color: 'rgba(255,255,255,0.72)', marginBottom: 36 }}>
                Kundle Kundle, between Taree and Wingham. Hay, silage, cattle and seed all come off the same patch of NSW Mid North Coast pasture.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
                <div>
                  <span className="label on-dark">Address</span>
                  <p style={{ margin: '8px 0 0', fontSize: 20, fontFamily: 'var(--serif)', color: '#fff' }}>{window.ADDRESS_LINE1}<br />{window.ADDRESS_LINE2}</p>
                </div>
                <div>
                  <span className="label on-dark">Seed · David Longworth</span>
                  <p style={{ margin: '8px 0 0', fontSize: 20, fontFamily: 'var(--serif)', color: '#fff' }}>
                    <a href={window.PHONE_SEED_HREF}>{window.PHONE_SEED}</a>
                  </p>
                </div>
                <div>
                  <span className="label on-dark">Cattle &amp; Hay · Peter Longworth</span>
                  <p style={{ margin: '8px 0 0', fontSize: 20, fontFamily: 'var(--serif)', color: '#fff' }}>
                    <a href={window.PHONE_CATTLE_HREF}>{window.PHONE_CATTLE}</a>
                  </p>
                </div>
              </div>
            </div>
            <div style={{ gridColumn: 'span 7' }}>
              <PropertyMap />
            </div>
          </div>
        </div>
      </section>

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

function PropertyMap() {
  return (
    <div style={{
      position: 'relative',
      width: '100%', height: '100%', minHeight: 460,
      background: 'rgba(255,255,255,0.04)',
      border: '1px solid rgba(255,255,255,0.12)',
      borderRadius: 4, overflow: 'hidden',
    }}>
      <svg viewBox="0 0 600 460" preserveAspectRatio="xMidYMid slice"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {/* base */}
        <rect width="600" height="460" fill="#0c1832" />
        {/* contour lines */}
        {Array.from({ length: 14 }).map((_, i) => (
          <path key={i}
            d={`M -50 ${40 + i * 30} Q 150 ${20 + i * 30 + (i%2?12:-12)}, 300 ${40 + i*30} T 650 ${40 + i*30}`}
            stroke="rgba(255,255,255,0.05)" strokeWidth="1" fill="none" />
        ))}
        {/* river — Manning */}
        <path d="M -20 130 Q 150 180, 280 160 T 620 220"
          stroke="rgba(120,180,220,0.35)" strokeWidth="14" fill="none" strokeLinecap="round" />
        {/* coast */}
        <path d="M 600 0 Q 580 130, 600 280 T 620 460"
          stroke="rgba(120,180,220,0.2)" strokeWidth="60" fill="none" strokeLinecap="round" />
        {/* highway */}
        <path d="M 80 460 L 280 250 L 470 80" stroke="rgba(201,167,110,0.5)" strokeWidth="2.5" fill="none" />
        {/* paddocks */}
        {[
          { x: 200, y: 220, w: 110, h: 80, c: 'rgba(142,196,73,0.18)' },
          { x: 320, y: 240, w: 90, h: 90, c: 'rgba(201,167,110,0.18)' },
          { x: 180, y: 320, w: 130, h: 60, c: 'rgba(142,196,73,0.14)' },
          { x: 320, y: 340, w: 100, h: 60, c: 'rgba(201,167,110,0.15)' },
        ].map((f, i) => (
          <rect key={i} x={f.x} y={f.y} width={f.w} height={f.h} fill={f.c}
            stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        ))}
        {/* pin — Kundle Kundle */}
        <g transform="translate(290, 270)">
          <circle r="42" fill="var(--wheat)" opacity="0.15" />
          <circle r="22" fill="var(--wheat)" opacity="0.3" />
          <circle r="10" fill="var(--wheat)" />
          <circle r="4" fill="#fff" />
        </g>
        {/* text */}
        <text x="308" y="252" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="#fff" fontWeight="600" letterSpacing="2">
          KUNDLE PARK
        </text>
        <text x="308" y="238" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.6)" letterSpacing="2">
          31.86°S · 152.36°E
        </text>
        <text x="460" y="60" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(120,180,220,0.7)" letterSpacing="2" textAnchor="end">
          ◐ TASMAN SEA
        </text>
        <text x="100" y="140" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(120,180,220,0.6)" letterSpacing="2">
          MANNING R.
        </text>
        <text x="80" y="430" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.45)" letterSpacing="2">
          → TAREE
        </text>
        <text x="490" y="80" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.45)" letterSpacing="2">
          HARRINGTON →
        </text>
      </svg>
      <div style={{
        position: 'absolute', bottom: 16, left: 16,
        fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em',
        color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase',
        background: 'rgba(7,17,42,0.7)', padding: '6px 10px',
        borderRadius: 3,
      }}>
        ◐ schematic · not to scale
      </div>
    </div>
  );
}

window.CattlePage = CattlePage;