/* ============================================================
   RevToolbox — the data portal that reconciles every layer.
   Includes satellite canopy mapping as one of the data sources.
   ============================================================ */

(function () {

  window.RevToolboxPage = function RevToolboxPage({ setRoute }) {

    return (
      <>
        <header className="page-head hero-bg" data-img-file="assets/portal-farm-yield-paardekloof.png" style={{ '--page-head-bg': "url('assets/portal-farm-yield-paardekloof.png')" }}>
          <div className="container-wide">
            <div className="crumbs">
              <a href="#" onClick={(e) => {e.preventDefault();setRoute('home');}}>Home</a>
              <span>/</span>
              <a href="#" onClick={(e) => {e.preventDefault();setRoute('revscout-s');}}>Tools</a>
              <span>/</span>
              <span>RevToolbox</span>
            </div>
            <h1>The portal that <em>reconciles every layer.</em></h1>
            <p className="lede">RevToolbox is the centre of gravity. Soil scans, satellite vigour, fruit count, fruit size and field calibration all flow in — and prescription files flow back out. One source of truth your whole team works from. V4 ships with fruit-size rasters, caliper-camera matching and on-demand 50-80 cm satellite imagery.</p>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 'var(--space-3)' }}>
              <a className="btn btn-primary" href="http://revtoolbox.co.za" target="_blank" rel="noreferrer">Open RevToolbox ↗</a>
              <a className="btn btn-ghost" href="#" onClick={(e) => {e.preventDefault();setRoute('contact');}}>Book a walk-through →</a>
            </div>
          </div>
        </header>

        {/* RevToolbox =========================================== */}
        <section id="revtoolbox" className="section warm">
          <div className="container-wide">
            <div className="tools-row">
              <div className="tools-text">
                <div className="section-eyebrow">The portal · centre of gravity</div>
                <h2 className="section-title">RevToolbox <em>Data Portal</em></h2>
                <p className="section-lede">Every product we ship pushes data into one place. Yield data from RevScout S, EC from the EMI scan, soil chemistry from the lab, fruit size from the Rev-Sizer caliper portal — and now, with V4, fruit-size data from RevScout S surveys too. Use whichever measurement device fits the day; the platform reconciles them.</p>
                <ul className="tools-points">
                  <li>Two satellites — 10 m every 5 days, 0.5–0.8 m on demand</li>
                  <li>Phenological-period averages (fruitset, ripening, harvest)</li>
                  <li>Variable-rate exports — Trimble, John Deere, AGCO ready</li>
                  <li>Google Earth export for in-field inspection on phone</li>
                  <li>Yield calibration handled inside the portal (via RevField)</li>
                </ul>
                <a className="btn btn-primary" href="http://revtoolbox.co.za" target="_blank" rel="noreferrer">Open RevToolbox ↗</a>
              </div>
              <div className="tools-visuals">
                <div className="tools-viz-label" style={{ marginBottom: 8 }}>Same farm · Yield vs. VigourHR · one toggle apart</div>
                <div className="grid-img-pair">
                  {[
                  { label: 'YIELD', sub: 'RevScout S · T/ha', file: 'assets/portal-farm-yield-paardekloof.png' },
                  { label: 'VIGOURHR', sub: '0.47 → 0.71 · HR', file: 'assets/portal-farm-vigour-paardekloof.png' }].
                  map((d, i) =>
                  <figure key={i} style={{ margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                      <div
                      role="img"
                      aria-label={`Whole-farm ${d.label} map — Paardekloof`}
                      data-img-file={d.file}
                      style={{
                        aspectRatio: '4 / 3',
                        backgroundImage: `url('${d.file}')`,
                        backgroundSize: 'cover',
                        backgroundPosition: 'center',
                        borderRadius: 8,
                        border: '1px solid var(--line)'
                      }} />
                      <figcaption style={{
                      fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.08em',
                      color: 'var(--muted)', display: 'flex', justifyContent: 'space-between',
                      textTransform: 'uppercase'
                    }}>
                        <strong style={{ color: 'var(--charcoal)', fontWeight: 600 }}>{d.label}</strong>
                        <span>{d.sub}</span>
                      </figcaption>
                    </figure>
                  )}
                </div>
                <div className="tools-viz-sub">
                  <div className="tools-viz-label">4 years EVI vigour history per block</div>
                  <div data-img-file="assets/portal-evi-timeseries.png" style={{ height: 220, backgroundColor: '#fff', backgroundImage: "url('assets/portal-evi-timeseries.png')", backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundPosition: 'center' }} role="img" aria-label="Block EVI timeseries — 4 years of vigour with range, mean and standard deviation" />
                </div>
              </div>
            </div>

            {/* Data-flow diagram — Control-Unit treatment ==================== */}
            <div className="rtb-mech">
              <div className="rtb-mech-head">
                <div className="section-eyebrow">Data flow · one source of truth</div>
                <h3 className="rtb-mech-h">Six streams in. Five answers out.</h3>
                <p className="rtb-mech-p">Every device we ship pushes its readings into the same engine. The engine reconciles them, zones them, and writes back files your spreader can read.</p>
              </div>

              <div className="rtb-mech-grid">
                {/* SOURCES ================================== */}
                <aside className="rtb-mech-side rtb-mech-in" aria-label="Sources feeding RevToolbox">
                  <header className="rtb-mech-side-head">
                    <span className="rtb-mech-side-label">↳ Sources</span>
                    <span className="rtb-mech-side-count">06</span>
                  </header>
                  <ul className="rtb-mech-stream">
                    {[
                    { code: 'EC', title: 'EMI soil EC', sub: '25 / 50 / 90 cm depths' },
                    { code: 'SAT', title: 'Satellite', sub: '10 m monitor + 0.5–0.8 m HR' },
                    { code: 'RS', title: 'RevScout S', sub: 'Counts & sizes' },
                    { code: 'RSZ', title: 'Rev-Sizer', sub: 'Caliper, 0.5 mm' },
                    { code: 'LAB', title: 'Soil chemistry', sub: 'Targeted grid samples' },
                    { code: 'RF', title: 'RevField', sub: 'Pins, counts, notes' }].
                    map((s) =>
                    <li key={s.code} className="rtb-mech-chip">
                        <span className="rtb-mech-chip-code">{s.code}</span>
                        <div className="rtb-mech-chip-body">
                          <strong>{s.title}</strong>
                          <span>{s.sub}</span>
                        </div>
                        <span className="rtb-mech-chip-arrow" aria-hidden="true">→</span>
                      </li>
                    )}
                  </ul>
                </aside>

                {/* HUB — control unit ========================== */}
                <div className="rtb-mech-hub-wrap">
                  <div className="rtb-mech-rail rtb-mech-rail-in" aria-hidden="true">
                    {Array.from({ length: 6 }).map((_, i) =>
                    <span key={i} style={{ animationDelay: `${i * 0.18}s` }} />
                    )}
                  </div>

                  <article className="rtb-mech-hub" aria-label="RevToolbox control unit">
                    <div className="rtb-mech-bezel">
                      <span className="rtb-mech-led rtb-mech-led-power" />
                      <span className="rtb-mech-bezel-id">RT-V4 · 2026</span>
                      <span className="rtb-mech-led rtb-mech-led-net" />
                    </div>
                    <div className="rtb-mech-screen">
                      <div className="rtb-mech-screen-top">
                        <span className="rtb-mech-pulse"><i /> processing · live</span>
                        <span className="rtb-mech-screen-coord">−33.59 / 19.12</span>
                      </div>

                      <div className="rtb-mech-brand">
                        <span className="rtb-mech-brand-mark" aria-hidden="true">▣</span>
                        <span className="rtb-mech-brand-name">RevToolbox</span>
                      </div>
                      <div className="rtb-mech-brand-sub">The portal that reconciles every layer.</div>

                      <div className="rtb-mech-caps">
                        {[
                        { num: '01', verb: 'Reconciles', body: 'Caliper + camera + lab → one number' },
                        { num: '02', verb: 'Zones', body: '5 vigour bands per layer' },
                        { num: '03', verb: 'Compares', body: '4 yrs of EVI, side-by-side' },
                        { num: '04', verb: 'Predicts', body: 'Fruit size, yield, packhouse bin' }].
                        map((c) =>
                        <div key={c.num} className="rtb-mech-cap">
                            <span className="rtb-mech-cap-num">{c.num}</span>
                            <strong>{c.verb}</strong>
                            <p>{c.body}</p>
                          </div>
                        )}
                      </div>

                      <div className="rtb-mech-meters">
                        <div><strong>6</strong><span>streams in</span></div>
                        <div><strong>5</strong><span>outputs</span></div>
                        <div><strong>1</strong><span>portal</span></div>
                      </div>
                    </div>
                    <div className="rtb-mech-foot">
                      <span>revtoolbox.co.za</span>
                      <span className="rtb-mech-foot-dot" />
                      <span>encrypted · per-farm</span>
                    </div>
                  </article>

                  <div className="rtb-mech-rail rtb-mech-rail-out" aria-hidden="true">
                    {Array.from({ length: 5 }).map((_, i) =>
                    <span key={i} style={{ animationDelay: `${i * 0.22}s` }} />
                    )}
                  </div>
                </div>

                {/* OUTPUTS ================================== */}
                <aside className="rtb-mech-side rtb-mech-out" aria-label="Outputs from RevToolbox">
                  <header className="rtb-mech-side-head">
                    <span className="rtb-mech-side-label">Outputs ↲</span>
                    <span className="rtb-mech-side-count">05</span>
                  </header>
                  <ul className="rtb-mech-stream">
                    {[
                    { code: 'VRA', title: 'Prescription files', sub: 'Trimble · John Deere · AGCO' },
                    { code: '5Z', title: '5-zone block reports', sub: 'Mean / std / min / max' },
                    { code: 'SIZE', title: 'Fruit-size predict', sub: 'Per packhouse bin' },
                    { code: 'T/HA', title: 'Yield estimate', sub: 'Per block, calibrated' },
                    { code: 'KML', title: 'Google Earth', sub: 'Field inspection on phone' }].
                    map((o) =>
                    <li key={o.code} className="rtb-mech-chip rtb-mech-chip-out">
                        <span className="rtb-mech-chip-arrow" aria-hidden="true">→</span>
                        <div className="rtb-mech-chip-body">
                          <strong>{o.title}</strong>
                          <span>{o.sub}</span>
                        </div>
                        <span className="rtb-mech-chip-code">{o.code}</span>
                      </li>
                    )}
                  </ul>
                </aside>
              </div>
            </div>

          </div>
        </section>


        {/* Canopy =========================================== */}
        <section id="canopy" className="section">
          <div className="container-wide">
            <div className="tools-row flip">
              <div className="tools-text">
                <div className="section-eyebrow">Satellite · canopy mapping</div>
                <h2 className="section-title">Tree-Level Canopy Mapping</h2>
                <p className="section-lede">50–80 cm resolution satellite imagery on demand, plus four years of 10 m history. Single shot over an entire farm — no UAV, no flight conditions to worry about. Booked in two weeks, delivered straight to RevToolbox.</p>
                <ul className="tools-points">
                  <li>80 cm standard resolution; 50 cm available</li>
                  <li>Cultivar isolation — pollinator rows excluded</li>
                  <li>Tree-level Nitrogen prescription generation</li>
                  <li>Anywhere in the world — no flight permits</li>
                </ul>
                <a className="btn btn-ghost" href="#" onClick={(e) => {e.preventDefault();setRoute('pricing');}}>See pricing →</a>
              </div>
              <div className="tools-visuals">
                <div className="tools-viz" data-img-file="assets/vigour-hr-prescription.png" style={{ backgroundImage: "url('assets/vigour-hr-prescription.png')", backgroundSize: 'cover', backgroundPosition: 'center' }} role="img" aria-label="Block-level VigourHR canopy map at 50–80 cm resolution" />
                <div className="tools-viz-sub">
                  <div className="tools-viz-label">Row-level cultivar workflow — setup first, then isolation</div>
                  <div className="grid-img-pair">
                    <figure style={{ margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--muted)' }}><strong style={{ color: 'var(--charcoal)', fontWeight: 600 }}>01 · Setup</strong> — row config</div>
                      <div data-img-file="assets/row-cultivar-config.png" style={{ height: 210, backgroundImage: "url('assets/row-cultivar-config.png')", backgroundSize: 'cover', backgroundPosition: 'center top', borderRadius: 8, border: '1px solid var(--line)' }} role="img" aria-label="Row Config tab — two-point bearing, row spacing and per-row variety table assigning each row to a cultivar (RHZ / RLL)" />
                    </figure>
                    <figure style={{ margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--muted)' }}><strong style={{ color: 'var(--charcoal)', fontWeight: 600 }}>02 · Isolation</strong> — per cultivar</div>
                      <div data-img-file="assets/cultivar-zones-closeup.png" style={{ height: 210, backgroundImage: "url('assets/cultivar-zones-closeup.png')", backgroundSize: 'cover', backgroundPosition: 'center', borderRadius: 8, border: '1px solid var(--line)' }} role="img" aria-label="Close-up of a block with two cultivars, showing per-cultivar NDVI zones with the selected cultivar highlighted" />
                    </figure>
                  </div>
                  <p style={{ margin: '12px 0 0', fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.55 }}>First, pick two bearing points and set row spacing — the portal generates a row grid and each row is tagged with its cultivar (e.g. RHZ / RLL). Then the engine isolates them: vigour, VRA and yield zones are computed per cultivar, not blended across the block.</p>
                </div>
              </div>
            </div>
          </div>
        </section>


        {/* Vigour & moisture monitoring ===================== */}
        <section id="vigour-moisture" className="section warm">
          <div className="container-wide">
            <div className="tools-row">
              <div className="tools-text">
                <div className="section-eyebrow">Satellite · vigour & moisture</div>
                <h2 className="section-title">Track <em>vigour and moisture</em> from orbit.</h2>
                <p className="section-lede">The 10 m monitoring satellite refreshes every 5 days — so every block carries a living record of canopy vigour and crop water status right through the season. A stress signal shows up in the imagery days before it's visible on the ground, while there's still time to act.</p>
                <ul className="tools-points">
                  <li>NDVI / EVI vigour, refreshed every 5 days</li>
                  <li>Crop-moisture &amp; water-stress signal, block by block</li>
                  <li>4 years of history — this season vs. the last three</li>
                  <li>Phenological-period averages (fruitset, ripening, harvest)</li>
                </ul>
                <a className="btn btn-ghost" href="#" onClick={(e) => {e.preventDefault();setRoute('optimize');}}>See it in the season guide →</a>
              </div>
              <div className="tools-visuals">
                <div className="tools-viz-label" style={{ marginBottom: 8 }}>Whole-block vigour · 10 m monitoring satellite</div>
                <div className="tools-viz" data-img-file="assets/portal-vigour-mapping.png" style={{ aspectRatio: '4 / 3', backgroundImage: "url('assets/portal-vigour-mapping.png')", backgroundSize: 'cover', backgroundPosition: 'center', borderRadius: 8, border: '1px solid var(--line)' }} role="img" aria-label="Block-level canopy vigour map from the 10 m monitoring satellite" />
                <div className="tools-viz-sub">
                  <div className="tools-viz-label">Season-on-season — vigour & moisture change per block</div>
                  <div data-img-file="assets/budbreak-vigour-2024-vs-2025.png" style={{ height: 220, backgroundColor: '#fff', backgroundImage: "url('assets/budbreak-vigour-2024-vs-2025.png')", backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundPosition: 'center' }} role="img" aria-label="Two seasons of canopy vigour compared side by side for the same block" />
                </div>
              </div>
            </div>
          </div>
        </section>


        {/* Zonal Reporting ================================== */}
        <section id="zonal" className="section">
          <div className="container-wide">
            <div className="tools-row">
              <div className="tools-text">
                <div className="section-eyebrow">Zonal reporting · areas that grow together</div>
                <h2 className="section-title">Find the zones that <em>track together.</em></h2>
                <p className="section-lede">Select the season's satellite images from the list, layer the EC soil scan underneath, and RevToolbox classifies the block into zones of consistent growing behaviour — areas that perform the same, season after season. These become the management units for targeted leaf sampling, ripeness monitoring and zone-by-zone nutrition. Sample <em>inside</em> a zone, not on a grid: a grid point can fall on the border between two soils and mean nothing, while readings composited within a zone describe the ground you'll actually treat.</p>
                <ul className="tools-points">
                  <li>Combine multiple satellite dates into one zoning</li>
                  <li>Ground the zones in EC soil-scan physics, not just greenness</li>
                  <li>Sample inside the zone — never on the line between two soils</li>
                  <li>Re-run any time as more imagery comes in</li>
                </ul>
                <a className="btn btn-ghost" href="#" onClick={(e) => {e.preventDefault();setRoute('optimize');}}>See it in the season guide →</a>
              </div>
              <div className="tools-visuals">
                <div className="tools-viz-label" style={{ marginBottom: 8 }}>Satellite vigour stack + EC scan → consistent-behaviour zones</div>
                <div className="tools-viz" data-img-file="assets/celldiv-zonal-report.png" style={{ aspectRatio: '16 / 9', backgroundColor: '#fff', backgroundImage: "url('assets/celldiv-zonal-report.png')", backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundPosition: 'center', borderRadius: 8, border: '1px solid var(--line)' }} role="img" aria-label="Zonal report — first satellite vigour images of the season combined with the EC soil scan, classified into consistent growing zones" />
                <div className="tools-viz-sub">
                  <div className="tools-viz-label">Late-season application — ripeness zones for harvest</div>
                  <div data-img-file="assets/veraison-ripeness-zones.png" style={{ aspectRatio: '16 / 9', backgroundColor: '#fff', backgroundImage: "url('assets/veraison-ripeness-zones.png')", backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundPosition: 'center', borderRadius: 8, border: '1px solid var(--line)' }} role="img" aria-label="Zonal report combining the yield layer with late-season vigour images to map ripeness zones for harvest" />
                </div>
              </div>
            </div>
          </div>
        </section>


        {/* VRA prescriptions ================================== */}
        <section id="vra" className="section warm">
          <div className="container-wide">
            <div className="rtb-vra-head">
              <div>
                <div className="section-eyebrow">Prescriptions · variable rate</div>
                <h2 className="section-title">Variable-rate maps from <em>any layer.</em></h2>
                <p className="section-lede">Pick a layer — Vigour, EC, Yield, fruit size — and the engine zones it, lets you assign a rate per zone, and writes a prescription file your spreader can read. Because the rate is tied to real zones, it lands right up to the edge of the soil boundary — not an interpolated average smeared across a 50×50&nbsp;m grid. Combine two layers when one is a base rate and the other is a correction factor.</p>
              </div>
              <ul className="rtb-vra-points">
                <li>2, 3 or 5 zones — convertible on the fly</li>
                <li>Resolution cap down to 1.5 m</li>
                <li>Block-boundary buffer for spreader turn-in</li>
                <li>Two-raster combine — kg/ha × %</li>
                <li>Per-zone area &amp; total fertiliser auto-calculated</li>
                <li>Trimble · John Deere · AGCO · RedAnt exports</li>
              </ul>
            </div>

            <div className="rtb-vra-grid">

              {/* Single-layer workflow ============================ */}
              <article className="rtb-vra-card">
                <header className="rtb-vra-card-head">
                  <div>
                    <span className="rtb-vra-eyebrow">Workflow A · Single layer</span>
                    <h3 className="rtb-vra-card-title">Vigour <em>→</em> kg/ha</h3>
                  </div>
                  <div className="rtb-vra-formula">rate = f(vigour)</div>
                </header>

                <div className="rtb-vra-step">
                  <div className="rtb-vra-step-label"><span className="num">1</span> Source raster · Vigour (NDVI)</div>
                  <div className="rtb-vra-sources one">
                    <div className="rtb-vra-img src" data-img-file="assets/vra-vigour-source.png" style={{ backgroundImage: "url('assets/vra-vigour-source.png')" }} role="img" aria-label="Vigour NDVI raster — five-zone green palette, range 0.27 to 0.40">
                      <span className="rtb-vra-tag">Vigour · 0.27 → 0.40</span>
                    </div>
                  </div>
                </div>

                <div className="rtb-vra-arrow"><span>Configure</span></div>

                <div className="rtb-vra-step">
                  <div className="rtb-vra-step-label"><span className="num">2</span> Assign kg/ha per zone</div>
                  <div className="rtb-vra-img settings" data-img-file="assets/vra-settings-single.png" style={{ backgroundImage: "url('assets/vra-settings-single.png')" }} role="img" aria-label="VRA settings panel — 5 zones, Map Combine off, kg/ha inputs per zone" />
                </div>

                <div className="rtb-vra-arrow"><span>Generate</span></div>

                <div className="rtb-vra-step">
                  <div className="rtb-vra-step-label"><span className="num">3</span> Prescription raster · kg/ha</div>
                  <div className="rtb-vra-img result" data-img-file="assets/vra-single-result.png" style={{ backgroundImage: "url('assets/vra-single-result.png')" }} role="img" aria-label="Single-layer VRA prescription map, zoned by vigour, brown to green palette">
                    <span className="rtb-vra-tag">Prescription · 60 → 100 kg/ha</span>
                  </div>
                </div>
              </article>

              <div className="rtb-vra-split" aria-hidden="true">
                <span className="rtb-vra-split-line" />
                <span className="rtb-vra-split-chip">or</span>
                <span className="rtb-vra-split-line" />
              </div>

              {/* Combined workflow ================================ */}
              <article className="rtb-vra-card combined">
                <header className="rtb-vra-card-head">
                  <div>
                    <span className="rtb-vra-eyebrow">Workflow B · Two-raster combine</span>
                    <h3 className="rtb-vra-card-title">Vigour kg/ha <em>×</em> Yield %</h3>
                  </div>
                  <div className="rtb-vra-formula">rate = vigour(kg/ha) × yield(%)</div>
                </header>

                <div className="rtb-vra-step">
                  <div className="rtb-vra-step-label"><span className="num">1</span> Two source rasters · base × adjust</div>
                  <div className="rtb-vra-sources two">
                    <div className="rtb-vra-img src" data-img-file="assets/vra-vigour-source.png" style={{ backgroundImage: "url('assets/vra-vigour-source.png')" }} role="img" aria-label="Vigour NDVI raster — base rate source">
                      <span className="rtb-vra-tag">Base · Vigour</span>
                    </div>
                    <div className="rtb-vra-img src" data-img-file="assets/vra-yield-source.png" style={{ backgroundImage: "url('assets/vra-yield-source.png')" }} role="img" aria-label="Yield raster — used as percentage correction">
                      <span className="rtb-vra-tag">Adjust · Yield</span>
                    </div>
                  </div>
                </div>

                <div className="rtb-vra-arrow"><span>Configure · % adjust</span></div>

                <div className="rtb-vra-step">
                  <div className="rtb-vra-step-label"><span className="num">2</span> Left raster kg/ha · Right raster %</div>
                  <div className="rtb-vra-img settings" data-img-file="assets/vra-settings-combined.png" style={{ backgroundImage: "url('assets/vra-settings-combined.png')" }} role="img" aria-label="VRA settings panel — Percentage Adjust mode, Left raster kg/ha and Right raster percentage inputs" />
                </div>

                <div className="rtb-vra-arrow"><span>Generate</span></div>

                <div className="rtb-vra-step">
                  <div className="rtb-vra-step-label"><span className="num">3</span> Combined prescription · kg/ha</div>
                  <div className="rtb-vra-img result" data-img-file="assets/vra-combined-result.png" style={{ backgroundImage: "url('assets/vra-combined-result.png')" }} role="img" aria-label="Combined VRA prescription — vigour scaled by yield percentage, multi-zone palette">
                    <span className="rtb-vra-tag">Prescription · 56 → 284 kg/ha</span>
                  </div>
                </div>
              </article>

            </div>

          </div>
        </section>


        {/* Google Earth export & field GPS calibration ===== */}
        <section id="field" className="section">
          <div className="container-wide">
            <div className="tools-row flip">
              <div className="tools-text">
                <div className="section-eyebrow">In the field · export & calibrate</div>
                <h2 className="section-title">Take the layers <em>into the orchard.</em></h2>
                <p className="section-lede">Export any layer to Google Earth and open it on your phone — zones, sample pins and prescriptions travel with you down the row. Then calibrate on the spot: the phone's built-in GPS drops you onto the exact pixel, so a hand count or a soil observation is tied to the right zone the moment you record it.</p>
                <ul className="tools-points">
                  <li>One-click KML / KMZ export — any layer, any block</li>
                  <li>Opens in Google Earth on any phone — no signal needed</li>
                  <li>Phone-GPS positioning onto the live map, pixel-accurate</li>
                  <li>Field readings calibrate the model back in RevToolbox</li>
                </ul>
                <a className="btn btn-ghost" href="#" onClick={(e) => {e.preventDefault();setRoute('pricing');}}>See pricing →</a>
              </div>
              <div className="tools-visuals">
                <div className="tools-viz-label" style={{ marginBottom: 8 }}>NDVI exported to Google Earth — inspect in the row</div>
                <div className="tools-viz" data-img-file="assets/budbreak-ndvi-kmz-googleearth.jpg" style={{ aspectRatio: '16 / 10', backgroundImage: "url('assets/budbreak-ndvi-kmz-googleearth.jpg')", backgroundSize: 'cover', backgroundPosition: 'center', borderRadius: 8, border: '1px solid var(--line)' }} role="img" aria-label="NDVI layer exported as KMZ and viewed in Google Earth over the orchard" />
                <div className="tools-viz-sub">
                  <div className="tools-viz-label">Field calibration — phone GPS pins you to the exact zone</div>
                  <div data-img-file="assets/blossom-googleearth-phone.jpg" style={{ height: 240, backgroundImage: "url('assets/blossom-googleearth-phone.jpg')", backgroundSize: 'cover', backgroundPosition: 'center', borderRadius: 8, border: '1px solid var(--line)' }} role="img" aria-label="A phone in the field showing the exported map with the live GPS position over the block" />
                </div>
              </div>
            </div>
          </div>
        </section>


        {/* CTA ============================================== */}
        <section className="cta-banner">
          <div className="container-wide" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 'var(--space-3)' }}>
            <div>
              <h2 style={{ marginBottom: 0 }}>One portal. <em style={{ fontFamily: "'Instrument Serif', serif", color: '#B8DC73' }}>Every layer.</em></h2>
              <p style={{ marginTop: 12 }}>Open RevToolbox or talk to us about a guided tour for your farm.</p>
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <a className="btn btn-primary btn-lg" href="http://revtoolbox.co.za" target="_blank" rel="noreferrer">Open RevToolbox ↗</a>
              <a className="btn btn-light btn-lg" href="#" onClick={(e) => {e.preventDefault();setRoute('contact');}}>Book a call</a>
            </div>
          </div>
        </section>
      </>);

  };
})();

Object.assign(window, { RevToolboxPage: window.RevToolboxPage });