/* global React */
/* ============================================================
   CaseStudyPage — "Precision Soil Management vs. Blanket Application"
   Faithful re-presentation of the Word doc:
   Precision_ROI_Report_Marketing_v5.docx
   8 farms · 301 ha · 954 zone samples · 9.1× ROI
   Uses ONLY the 9 figures extracted from the docx (assets/case-study/docx-figNN.png).
   ============================================================ */

(function () {
  const { useState, useEffect, useRef } = React;

  // --- Big number block ----------------------------------------------
  function BigStat({ num, label, sub, accent }) {
    return (
      <div className={'cs-bigstat' + (accent ? ' is-accent' : '')}>
        <div className="cs-bigstat-num">{num}</div>
        <div className="cs-bigstat-label">{label}</div>
        {sub && <div className="cs-bigstat-sub">{sub}</div>}
      </div>
    );
  }

  // --- Figure block (renders one of the docx figures) ----------------
  function DocFigure({ src, alt, caption, num, eyebrow }) {
    return (
      <figure className="cs-figure cs-doc-figure" data-img-file={src}>
        {eyebrow && <div className="cs-figure-eyebrow">{eyebrow}</div>}
        <div className="cs-figure-frame">
          <img src={src} alt={alt} />
        </div>
        {caption && (
          <figcaption>
            {num && <span className="cs-figure-num">Figure {num}.</span>}
            <span>{caption}</span>
          </figcaption>
        )}
      </figure>
    );
  }

  // --- Block-example panel: figure + commentary + zone table ---------
  function BlockExample({ id, n, title, sub, fig, alt, body, pull, table, footnote }) {
    return (
      <section className="cs-block-example" id={id}>
        <div className="container-wide">
          <div className="cs-block-head">
            <div className="cs-block-num">{String(n).padStart(2, '0')}</div>
            <div className="cs-block-titles">
              <h3 className="cs-block-title">{title}</h3>
              <div className="cs-block-sub">{sub}</div>
            </div>
          </div>

          <DocFigure
            src={fig}
            alt={alt}
            num={n}
            caption="Zone-level prescriptions for K₂SO₄, gypsum, and MgO."
          />

          <div className="cs-block-grid">
            <div className="cs-block-body">
              <p>{body}</p>
              {pull && <div className="cs-block-pull">{pull}</div>}
            </div>
            <div className="cs-block-tablewrap">
              <table className="cs-zone-table">
                <thead>
                  <tr>
                    <th>Zone</th>
                    <th>Area (ha)</th>
                    <th>K%</th>
                    <th>Na%</th>
                    <th>K₂SO₄</th>
                    <th>Gypsum</th>
                    <th>MgO</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  {table.map((row, i) => (
                    <tr key={i} className={row.area === '—' ? 'is-nodata' : ''}>
                      <td className="cs-zone-cell">{row.zone}</td>
                      <td>{row.area}</td>
                      <td>{row.k}</td>
                      <td>{row.na}</td>
                      <td>{row.k2so4}</td>
                      <td>{row.gypsum}</td>
                      <td>{row.mgo}</td>
                      <td className="cs-zone-status">{row.status}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              {footnote && <div className="cs-zone-footnote">{footnote}</div>}
            </div>
          </div>
        </div>
      </section>
    );
  }

  // ===================================================================
  window.CaseStudyPage = function CaseStudyPage({ setRoute }) {
    return (
      <>
        {/* HERO ============================================== */}
        <header className="cs-hero cs-hero-doc">
          <div className="container-wide cs-hero-inner">
            <div className="crumbs cs-hero-crumbs">
              <a href="#" onClick={e => { e.preventDefault(); setRoute('home'); }}>Home</a>
              <span>/</span>
              <a href="#" onClick={e => { e.preventDefault(); setRoute('optimize'); }}>Optimize</a>
              <span>/</span>
              <span>Case study</span>
            </div>

            <div className="cs-hero-eyebrow">Case study · April 2026</div>
            <h1 className="cs-hero-h1 cs-hero-h1-doc">
              <span className="cs-hero-amount">R5.0 Million</span>
              <span className="cs-hero-amount-sub">in Misallocated Inputs Avoided</span>
            </h1>
            <p className="cs-hero-tag">Precision Soil Management vs. Blanket Application</p>

            <div className="cs-hero-bigstats">
              <BigStat num="301 ha"  label="Eight Farms" />
              <BigStat num="954"     label="Zone Samples" />
              <BigStat num="9.1×"    label="Return on Investment" accent />
              <BigStat num="66%"     label="Blanket Spend Wasted" />
            </div>

            <p className="cs-hero-lede">
              Eight table grape farms. 301 hectares of Orange River alluvial soils. 954 zone-level soil chemistry samples across three correction cycles. Over five years, precision zonal soil management avoided R5.0&nbsp;million in misallocated amendments — returning R9.10 for every R1 invested in EMI scanning and targeted sampling.
            </p>

            <div className="cs-hero-byline">
              <strong>Revolute Systems (Pty) Ltd</strong>
              <span>Technopark, Stellenbosch · April 2026 · revolutesystems.com</span>
            </div>
          </div>
        </header>

        {/* THE NUMBERS AT A GLANCE ========================== */}
        <section className="section cs-glance">
          <div className="container-wide">
            <div className="section-eyebrow">The numbers at a glance</div>
            <h2 className="section-title">
              The investment side, the avoidance side, and the gap between them.
            </h2>

            <div className="cs-glance-grid">
              <BigStat num="R5.0M"  label="Misallocation Avoided" sub="5 years, 301 ha" />
              <BigStat num="R552K"  label="Total Precision Investment" sub="EMI + zonal sampling, 5 years" />
              <BigStat num="9.1×"   label="Return on Investment" accent />
              <BigStat num="66%"    label="of Blanket Spend Misallocated" />
              <BigStat num="R3,344" label="Avoided per Hectare per Year" />
              <BigStat num="R367"   label="Extra Cost per Hectare per Year" sub="vs. blanket application" />
            </div>

            <div className="cs-glance-body">
              <p>
                K₂SO₄ accounts for <strong>51%</strong> of total misallocation (R2.6M), reflecting extreme potassium variability across alluvial soils. MgO follows at <strong>30%</strong> (R1.5M) — these two products alone represent 81% of wasted spend. Gypsum for sodium correction makes up the remaining <strong>19%</strong> (R1.0M).
              </p>
              <div className="cs-glance-pull">
                Every rand spent on the wrong product in the wrong zone is a rand that actively works against you.
              </div>
              <p>
                Misallocation grew from R0.8M in 2021 to R4.0M in 2026 — not because management got worse, but because more targeted prescriptions revealed how much variability blanket averages were hiding all along. <em>The more precisely you sample, the more waste you find.</em>
              </p>
            </div>
          </div>
        </section>

        {/* HOW WE MEASURED IT =============================== */}
        <section className="section warm cs-method">
          <div className="container-wide">
            <div className="section-eyebrow">How we measured it</div>
            <h2 className="section-title">
              Precision <em>(actual)</em> vs. blanket <em>(counterfactual)</em>.
            </h2>
            <p className="section-lede">
              This analysis compared two approaches to soil amendment: precision zonal management (what actually happened) versus blanket application (the counterfactual). Each block's zones were delineated using electromagnetic induction (EMI) conductivity surveys, confirmed by NDVI satellite imagery.
            </p>
            <p>
              For each zone, soil chemistry results prescribed specific correction rates for potassium sulphate (K₂SO₄), gypsum (for calcium and sodium), and magnesium oxide (MgO). CEC norms: Ca 65–70%, Mg 15–24%, K 4–8%, Na &lt;2% to 60 cm depth.
            </p>
            <p>
              The blanket counterfactual is simple: take the unweighted average of all zone rates in a block and apply it everywhere. Misallocation equals the sum of absolute differences between what each zone actually needs and what blanket would deliver, multiplied by area and product price.
            </p>

            <dl className="cs-method-defs">
              <div><dt>Samples</dt><dd>954 zone-level analyses across three cycles (2021, 2024, 2026)</dd></div>
              <div><dt>Area</dt><dd>301 hectares across eight farms</dd></div>
              <div><dt>Delineation</dt><dd>EMI conductivity + NDVI satellite imagery</dd></div>
              <div><dt>Gypsum</dt><dd>R1,500 / tonne</dd></div>
              <div><dt>MgO</dt><dd>R9,500 / tonne</dd></div>
              <div><dt>K₂SO₄</dt><dd>R18,000 / tonne</dd></div>
              <div><dt>DSP</dt><dd>R12,000 / tonne</dd></div>
              <div><dt>Investment</dt><dd>R367/ha/yr (EMI R176/ha amortised 5 yr + sampling R458/ha/yr − blanket R140/ha/yr)</dd></div>
              <div className="is-wide"><dt>Scope</dt><dd>Measures input efficiency only. Does not quantify yield, quality, or vine health gains.</dd></div>
            </dl>
          </div>
        </section>

        {/* SECTION HEADER — BLOCK EXAMPLES ================== */}
        <section className="section cs-blocks-intro">
          <div className="container-wide">
            <div className="section-eyebrow">Five blocks that tell the story</div>
            <h2 className="section-title">
              Numbers make the case. <em>Maps make it real.</em>
            </h2>
            <p className="section-lede">
              The following five blocks — drawn from across the programme — show why no composite sample can substitute for zone-level chemistry. Each map renders the same block through three product lenses: K₂SO₄, gypsum, and MgO. Every zone is shown, including those within norms and those not yet sampled.
            </p>
          </div>
        </section>

        {/* BLOCK 2 ========================================== */}
        <BlockExample
          id="block-2"
          n={1}
          title="Opposite Needs, Same Block"
          sub="4 zones · 5.1 hectares"
          fig="assets/case-study/docx-fig02.png"
          alt="Block 2 prescription maps"
          body="Adjacent zones in alluvial soils can have completely opposite requirements. Zones A, B, and C are K-deficient (1.6–2.7%) and need heavy K₂SO₄ and MgO. Zone D (3.18 ha — the largest zone) has adequate K at 4.1% but Na% = 2.4% puts it above the danger threshold, needing 2,868 kg/ha gypsum instead. Blanket application gives all four zones the average of everything: neither side gets what it actually needs."
          pull="Misallocation on K₂SO₄ alone: R59,999."
          table={[
            { zone: 'A', area: '0.60', k: '2.3', na: '1.2', k2so4: '3,475', gypsum: '355',   mgo: '4,150', status: 'K deficient · Na/Ca · Mg deficient' },
            { zone: 'B', area: '0.55', k: '1.6', na: '0.7', k2so4: '4,514', gypsum: '0',     mgo: '5,196', status: 'K deficient · Mg deficient' },
            { zone: 'C', area: '0.77', k: '2.7', na: '1.2', k2so4: '1,902', gypsum: '185',   mgo: '1,892', status: 'K deficient · Na/Ca · Mg deficient' },
            { zone: 'D', area: '3.18', k: '4.1', na: '2.4', k2so4: '0',     gypsum: '2,868', mgo: '0',     status: 'Na/Ca correction' },
          ]}
        />

        {/* BLOCK 3 ========================================== */}
        <BlockExample
          id="block-3"
          n={2}
          title="Seven Zones, Seven Prescriptions"
          sub="7 zones · 5.4 hectares"
          fig="assets/case-study/docx-fig03.png"
          alt="Block 3 prescription maps"
          body="The most complex block in the programme: 5.4 hectares divided into seven zones. K₂SO₄ needs range from 0 to 5,481 kg/ha. Five zones need heavy K₂SO₄; Zone G needs none. Zone F (the largest at 2.88 ha) is the only zone needing gypsum for sodium correction. Blanket gives all seven zones 2,852 kg/ha K₂SO₄: deficient zones are under-dosed by up to 48%, while Zone G receives nearly three tonnes of waste product per hectare."
          pull="One block, seven prescriptions. No composite sample can capture this."
          table={[
            { zone: 'A', area: '0.44', k: '1.9', na: '0.8', k2so4: '4,360', gypsum: '0',   mgo: '4,225', status: 'K deficient · Mg deficient' },
            { zone: 'B', area: '0.38', k: '1.3', na: '0.9', k2so4: '4,523', gypsum: '0',   mgo: '4,328', status: 'K deficient · Mg deficient' },
            { zone: 'C', area: '0.33', k: '2.5', na: '0.9', k2so4: '3,226', gypsum: '0',   mgo: '3,289', status: 'K deficient · Mg deficient' },
            { zone: 'D', area: '0.23', k: '1.1', na: '0.7', k2so4: '5,481', gypsum: '0',   mgo: '4,102', status: 'K deficient · Mg deficient' },
            { zone: 'E', area: '0.80', k: '3.6', na: '1.0', k2so4: '1,687', gypsum: '0',   mgo: '2,058', status: 'K deficient · Mg deficient' },
            { zone: 'F', area: '2.88', k: '3.2', na: '1.9', k2so4: '688',   gypsum: '949', mgo: '0',     status: 'K deficient · Na/Ca correction' },
            { zone: 'G', area: '0.33', k: '4.8', na: '1.7', k2so4: '0',     gypsum: '320', mgo: '0',     status: 'Na/Ca correction' },
          ]}
        />

        {/* BLOCK 4 ========================================== */}
        <BlockExample
          id="block-4"
          n={3}
          title="Gypsum — Five Zones, One Problem, Five Doses"
          sub="5 zones · 3.8 hectares"
          fig="assets/case-study/docx-fig04.png"
          alt="Block 4 prescription maps"
          body="All five zones need gypsum, but the dose ranges from 1,263 to 3,516 kg/ha — almost 3× variation. Zone A needs the most at 3,516 kg/ha. Zone E needs barely a third of that. A blanket average of 2,123 kg/ha under-corrects Zone A — whose soil structure continues to deteriorate — while over-correcting Zone E. No zone needs K₂SO₄: blanket would correctly skip it here, but only precision tells you that."
          pull="Under-dosing sodic zones causes poor infiltration, crusting, and potentially vine death."
          table={[
            { zone: 'A', area: '0.29', k: '6.3', na: '1.7', k2so4: '0', gypsum: '3,516', mgo: '0',   status: 'Na/Ca correction' },
            { zone: 'B', area: '1.10', k: '5.3', na: '2.6', k2so4: '0', gypsum: '1,839', mgo: '71',  status: 'Na/Ca correction · Mg deficient' },
            { zone: 'C', area: '1.83', k: '5.2', na: '2.4', k2so4: '0', gypsum: '2,692', mgo: '0',   status: 'Na/Ca correction' },
            { zone: 'D', area: '0.35', k: '5.4', na: '1.9', k2so4: '0', gypsum: '1,306', mgo: '0',   status: 'Na/Ca correction' },
            { zone: 'E', area: '0.18', k: '4.5', na: '2.2', k2so4: '0', gypsum: '1,263', mgo: '714', status: 'Na/Ca correction · Mg deficient' },
          ]}
        />

        {/* BLOCK 5 ========================================== */}
        <BlockExample
          id="block-5"
          n={4}
          title="Every Zone Needs Something Different"
          sub="3 zones · 5.2 hectares"
          fig="assets/case-study/docx-fig05.png"
          alt="Block 5 prescription maps"
          body="Three nearly equal-sized zones, each needing a different combination. Zone A and B both need K₂SO₄ and gypsum but at different rates. Zone C needs three times more K₂SO₄ than Zone B, plus 3,028 kg/ha MgO. A composite sample would under-dose Zone C on potassium and magnesium while over-applying to Zone B."
          pull="Total block misallocation: R191,310 per cycle."
          table={[
            { zone: 'A', area: '1.79', k: '3.6', na: '2.1', k2so4: '984',   gypsum: '1,001', mgo: '1,114', status: 'K deficient · Na/Ca · Mg deficient' },
            { zone: 'B', area: '1.72', k: '3.8', na: '2.1', k2so4: '180',   gypsum: '1,493', mgo: '0',     status: 'K deficient · Na/Ca correction' },
            { zone: 'C', area: '1.71', k: '2.0', na: '1.5', k2so4: '3,863', gypsum: '774',   mgo: '3,028', status: 'K deficient · Na/Ca · Mg deficient' },
          ]}
        />

        {/* BLOCK (moved last) — Three Worlds ========================================== */}
        <BlockExample
          id="block-1"
          n={5}
          title="Three Worlds in One Vineyard"
          sub="6 zones · 3.8 hectares"
          fig="assets/case-study/docx-fig01.png"
          alt="Block 1 prescription maps for K₂SO₄, gypsum, and MgO"
          body="This block covers just 3.8 hectares but contains six EMI zones — three sampled, three delineated for future sampling. Zone A is severely K-deficient (1.7%) and needs 3,640 kg/ha K₂SO₄. Zone C has extreme K excess (10.9%) and needs zero potassium — but Na% = 3.1% means it urgently needs 5,683 kg/ha gypsum instead. A composite sample would prescribe 1,213 kg/ha K₂SO₄ everywhere: Zone A gets a third of what it needs while Zone C receives product it cannot use."
          pull="Blanket sends potassium where gypsum is needed."
          table={[
            { zone: 'A', area: '1.31', k: '1.7',  na: '0.8', k2so4: '3,640', gypsum: '0',     mgo: '3,339', status: 'K deficient · Mg deficient' },
            { zone: 'B', area: '1.96', k: '4.2',  na: '2.2', k2so4: '0',     gypsum: '668',   mgo: '0',     status: 'Na/Ca correction' },
            { zone: 'C', area: '0.57', k: '10.9', na: '3.1', k2so4: '0',     gypsum: '5,683', mgo: '0',     status: 'Na/Ca correction' },
            { zone: 'D', area: '—',    k: '—',    na: '—',   k2so4: '—',     gypsum: '—',     mgo: '—',     status: 'No soil data for this zone' },
            { zone: 'E', area: '—',    k: '—',    na: '—',   k2so4: '—',     gypsum: '—',     mgo: '—',     status: 'No soil data for this zone' },
            { zone: 'F', area: '—',    k: '—',    na: '—',   k2so4: '—',     gypsum: '—',     mgo: '—',     status: 'No soil data for this zone' },
          ]}
        />

        {/* PROGRAMME-WIDE RESULTS ============================ */}
        <section className="section cs-results">
          <div className="container-wide">
            <div className="section-eyebrow">Programme-wide results</div>
            <h2 className="section-title">
              Across all eight farms, <em>R5.0 million in misallocation, R552K invested, R9.10 returned for every rand.</em>
            </h2>
            <p className="section-lede">
              Across all eight farms, precision zonal management identified R5.0 million in misallocated inputs over five years. The programme invested R552K — returning R9.10 for every rand spent. Every single farm returned at least 2.1× on its precision investment.
            </p>

            <DocFigure
              src="assets/case-study/docx-fig06.png"
              alt="Donut chart of misallocation by product — K2SO4 51%, MgO 30%, Gypsum 19%"
              caption="Misallocation by product: K₂SO₄ dominates at 51%."
            />

            <p className="cs-results-body">
              Potassium variability is the single biggest driver of waste. In alluvial soils, K% can swing from 1.1% to 10.9% within a single block — a range no composite sample can represent. MgO misallocation runs almost as high at 30%, driven by localised magnesium depletion that blanket averaging dilutes beyond effectiveness.
            </p>

            <DocFigure
              src="assets/case-study/docx-fig07.png"
              alt="Horizontal bar chart of misallocation avoided per farm"
              caption="Misallocation avoided per farm (R thousands). All eight farms positive."
            />

            <h3 className="cs-results-h3">Farm-Level Scorecard</h3>
            <div className="cs-table-wrap">
              <table className="cs-farm-table">
                <thead>
                  <tr>
                    <th>Farm</th>
                    <th>Area</th>
                    <th>Prec (R'000)</th>
                    <th>Blank (R'000)</th>
                    <th>Saved (R'000)</th>
                    <th>Invest (R'000)</th>
                    <th>R/ha/cycle</th>
                    <th>Ratio</th>
                  </tr>
                </thead>
                <tbody>
                  <tr><td>Farm A</td><td>53</td><td>2,433</td><td>2,559</td><td>1,916</td><td>97</td><td>R12,143</td><td className="cs-ratio">19.9×</td></tr>
                  <tr><td>Farm B</td><td>50</td><td>1,972</td><td>2,144</td><td>1,708</td><td>92</td><td>R11,336</td><td className="cs-ratio">18.5×</td></tr>
                  <tr><td>Farm C</td><td>36</td><td>927</td><td>992</td><td>485</td><td>66</td><td>R4,515</td><td className="cs-ratio">7.4×</td></tr>
                  <tr><td>Farm D</td><td>32</td><td>393</td><td>425</td><td>340</td><td>58</td><td>R3,587</td><td className="cs-ratio">5.9×</td></tr>
                  <tr><td>Farm E</td><td>42</td><td>297</td><td>292</td><td>183</td><td>78</td><td>R1,443</td><td className="cs-ratio">2.4×</td></tr>
                  <tr><td>Farm F</td><td>31</td><td>534</td><td>529</td><td>159</td><td>57</td><td>R1,704</td><td className="cs-ratio">2.8×</td></tr>
                  <tr><td>Farm G</td><td>40</td><td>371</td><td>376</td><td>159</td><td>74</td><td>R1,313</td><td className="cs-ratio">2.1×</td></tr>
                  <tr><td>Farm H</td><td>17</td><td>271</td><td>262</td><td>78</td><td>31</td><td>R1,552</td><td className="cs-ratio">2.5×</td></tr>
                  <tr className="cs-farm-total">
                    <td>GROUP</td><td>301</td><td>7,198</td><td>7,577</td><td>5,027</td><td>552</td><td>R3,344</td><td className="cs-ratio">9.1×</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <p className="cs-results-body">
              Farm A leads with R1.9M in misallocation avoided and a 19.9× return — the highest variability soils produced the highest precision premium. Even Farm H, the smallest return at 2.5×, still more than doubled the investment. <strong>No farm lost money on precision.</strong>
            </p>

            <DocFigure
              src="assets/case-study/docx-fig08.png"
              alt="Grouped bar chart of misallocation by farm and correction cycle (2021, 2024, 2026)"
              caption="Misallocation detected per cycle — growing as prescriptions become more targeted."
            />

            <p className="cs-results-body">
              Cycle 1 (2021) identified R0.8M in misallocation. By Cycle 3 (2026), that figure had grown to R4.0M. This is not regression — it reflects increasingly refined prescriptions that expose variability blanket sampling never could. <em>The more you look, the more you find.</em>
            </p>
          </div>
        </section>

        {/* WHAT THIS MEANS ================================== */}
        <section className="section warm cs-meaning">
          <div className="container-wide">
            <div className="section-eyebrow">What this means for your farm</div>
            <h2 className="section-title">
              R367 in. R3,344 out. <em>Per hectare. Every year.</em>
            </h2>
            <p className="section-lede">
              The investment case is straightforward: an extra R367 per hectare per year buys EMI-guided zone delineation and targeted soil sampling. In return, every hectare avoids R3,344 in misallocated amendments — a 9:1 return measuring only input efficiency. Yield, quality, and vine health gains are additional and uncounted.
            </p>

            <DocFigure
              src="assets/case-study/docx-fig09.png"
              alt="Bar comparison: precision investment R0.6M vs misallocation avoided R5.0M, 9.1× ROI"
              caption="R367/ha invested vs. R3,344/ha in misallocation avoided."
            />

            <div className="cs-table-wrap">
              <table className="cs-compare-table">
                <thead>
                  <tr>
                    <th></th>
                    <th>Blanket</th>
                    <th>Precision</th>
                  </tr>
                </thead>
                <tbody>
                  <tr><td>Sampling / ha / yr</td><td>R140</td><td>R458</td></tr>
                  <tr><td>EMI / ha (5 yr)</td><td>R0</td><td>R176</td></tr>
                  <tr><td>Extra cost / ha / yr</td><td>—</td><td>R367/ha/yr</td></tr>
                  <tr className="cs-compare-highlight"><td>Misallocation avoided</td><td>—</td><td>R3,344/ha/yr</td></tr>
                </tbody>
              </table>
            </div>

            <div className="cs-meaning-pull">
              As input costs rise, farmers who know where every kilogram goes will outcompete those who spread and hope.
            </div>

            <p className="cs-results-body">
              The block examples tell what numbers cannot. When a sodic zone gets a third of the gypsum it needs, soil structure deteriorates for years. When K-deficient vines miss their K₂SO₄ window, berries are smaller, colour is worse, and cartons hit lower pack-out grades. These downstream losses — not captured in this analysis — multiply the true cost of blanket application far beyond the R5.0M measured here.
            </p>

            <p className="cs-results-body cs-results-italic">
              This study measured only one dimension: whether the right product reached the right zone at the right rate. It did not measure yield response, fruit quality improvement, or long-term soil health. The real ROI of precision is almost certainly higher than 9:1.
            </p>
          </div>
        </section>

        {/* OUTRO ============================================ */}
        <section className="cs-outro">
          <div className="container-wide cs-outro-inner">
            <div className="cs-outro-tag">Making precision practical</div>
            <div className="cs-outro-co">Revolute Systems (Pty) Ltd  ·  Technopark, Stellenbosch</div>
            <a className="cs-outro-link" href="https://www.revolutesystems.com" target="_blank" rel="noreferrer">www.revolutesystems.com</a>
          </div>
        </section>

        {/* CTA BANNER ====================================== */}
        <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 }}>Run this analysis on <em style={{ fontFamily: "'Instrument Serif', serif", color: '#B8DC73' }}>your farm.</em></h2>
              <p style={{ marginTop: 12, maxWidth: 620 }}>EMI scanning + zonal sampling, with a per-block ROI report at the end of each correction cycle.</p>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn btn-primary btn-lg" href="#" onClick={e => { e.preventDefault(); setRoute('contact'); }}>Book a soil scan →</a>
              <a className="btn btn-ghost btn-lg" href="#" onClick={e => { e.preventDefault(); setRoute('optimize'); }}>How precision works</a>
            </div>
          </div>
        </section>
      </>
    );
  };
})();