/* ============================================================
   RevField — the mobile field-scouting app.
   Pest & disease scouting first; GPS-pinned observations that
   plot and filter inside RevToolbox. Also captures yield
   ground-truth counts. (No fruit-sizing role.)
   ============================================================ */

(function () {

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

    return (
      <>
        <header className="page-head hero-bg" data-img-file="assets/revfield-inspection-points.png" style={{ '--page-head-bg': "url('assets/revfield-inspection-points.png')" }}>
          <div className="container-wide">
            <div className="crumbs">
              <a href="#revfield" onClick={(e) => { e.preventDefault(); setRoute('home'); }}>Home</a>
              <span>/</span>
              <a href="#revscout-s" onClick={(e) => { e.preventDefault(); setRoute('revscout-s'); }}>Tools</a>
              <span>/</span>
              <span>RevField</span>
            </div>
            <h1>Scout the whole farm, <em>pin every problem.</em></h1>
            <p className="lede">RevField is the field-scouting app behind RevToolbox. Walk your blocks offline — your farm borders are already on the map — drop a GPS pin wherever you find something, and log it from a guided pest, disease, deficiency or quality menu. Every observation syncs to RevToolbox, where it plots on the block map and filters by type, intensity and date.</p>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 'var(--space-3)' }}>
              <span className="tools-availability" style={{ background: 'var(--paper-warm)', padding: '6px 14px', borderRadius: 999 }}>Public beta · June 2026</span>
              <a className="btn btn-ghost" href="#contact" onClick={(e) => { e.preventDefault(); setRoute('contact'); }}>Join the early-access list →</a>
            </div>
          </div>
        </header>

        {/* RevField ======================================== */}
        <section id="revfield" className="section">
          <div className="container-wide">
            <div className="revfield-row">
              <div className="tools-text">
                <div className="section-eyebrow">The field-scouting app</div>
                <h2 className="section-title">RevField <em>mobile app</em></h2>
                <p className="section-lede">Built for scouts. Open the app in the orchard — no signal needed — see your farm and block borders, and drop a GPS-tagged pin on anything worth recording. A guided menu steps Category → Issue Type → Subcategory → Type, you set an intensity, add a photo and a note, and it's logged.</p>
                <ul className="tools-points">
                  <li>Works offline — farm and block borders cached on the device</li>
                  <li>Drop a GPS pin on the exact spot; live device-GPS accuracy shown</li>
                  <li>Guided observation menu: Category → Issue Type → Subcategory → Type</li>
                  <li>Rate intensity — Healthy · Monitor · Action · Critical (0–100)</li>
                  <li>Attach photos and notes; auto-syncs to RevToolbox in signal</li>
                </ul>
                <span className="tools-availability">Public beta · June 2026</span>
              </div>
              <div className="revfield-video-wrap">
                <div className="revfield-video">
                  <video
                    src="assets/revfield-app.mp4"
                    autoPlay muted loop playsInline
                    aria-label="RevField mobile app — drop a GPS-tagged scouting pin and log a pest or disease observation"
                    ref={(el) => {
                      if (!el) return;
                      el.muted = true; el.defaultMuted = true; el.volume = 0;
                      if (el.__io) {el.__io.disconnect();el.__io = null;}
                      const io = new IntersectionObserver((entries) => {
                        entries.forEach((en) => {if (en.isIntersecting) el.play().catch(() => {});else el.pause();});
                      }, { threshold: 0.1 });
                      io.observe(el);
                      el.__io = io;
                    }}
                    style={{ width: '100%', height: 'auto', display: 'block' }} />
                </div>
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 'var(--space-3)', marginTop: 'var(--space-4)' }}>
              {[
                { src: 'assets/revfield-app-map.jpg', cap: 'Offline farm map — block borders cached on the device, your live GPS, and a coloured pin for every observation.' },
                { src: 'assets/revfield-app-observation.jpg', cap: 'New observation — guided Category → Issue Type → Subcategory → Type, with a Healthy · Monitor · Action · Critical intensity.' },
                { src: 'assets/revfield-app-dashboard.jpg', cap: 'Field-scouting dashboard — farm overview and recent activity at a glance.' },
              ].map((p, i) => (
                <figure key={i} style={{ margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <img src={p.src} alt={p.cap} loading="lazy" decoding="async" width="738" height="1600"
                    style={{ width: '100%', height: 'auto', borderRadius: 16, border: '1px solid var(--line)', boxShadow: '0 20px 56px -30px rgba(28,65,0,0.4)', backgroundColor: '#e7ecdf' }} />
                  <figcaption style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11.5, color: 'var(--muted)', lineHeight: 1.5 }}>{p.cap}</figcaption>
                </figure>
              ))}
            </div>
          </div>
        </section>


        {/* Scouting · plotted and filtered in RevToolbox ===== */}
        <section className="section warm">
          <div className="container-wide">
            <div className="section-head">
              <div>
                <div className="section-eyebrow">Pest &amp; disease scouting · the core job</div>
                <h2 className="section-title">Every observation, <em>pinned, categorised and filterable.</em></h2>
              </div>
            </div>
            <p className="section-lede" style={{ maxWidth: 880, marginBottom: 'var(--space-4)' }}>
              RevField is built first for pest and disease scouting. Each sighting is a GPS-tagged pin with a category, a subcategory drilled down to the specific pest or pathogen, an intensity score and notes. In RevToolbox the pins plot straight onto the block map and filter by type, intensity and date range — so the agronomist sees exactly what was found, where, and when pressure is building.
            </p>

            <figure style={{ margin: 0 }}>
              <div
                data-img-file="assets/revtoolbox-inspection-points.png"
                role="img"
                aria-label="RevToolbox Inspection Points — GPS-tagged scouting pins plotted on the farm map, with a filterable table and date-range, intensity and type filters"
                style={{
                  width: '100%',
                  aspectRatio: '1920 / 921',
                  backgroundImage: "url('assets/revtoolbox-inspection-points.png')",
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  borderRadius: 'var(--radius-lg)',
                  border: '1px solid var(--line)',
                  boxShadow: '0 18px 60px -28px rgba(28,65,0,0.25)',
                  backgroundColor: '#fff',
                }}
              />
              <figcaption style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'var(--muted)',
                marginTop: 12, lineHeight: 1.5,
              }}>
                Inspection Points in RevToolbox · every scouting pin plotted on the farm map and listed in a table you filter by block, date, category, issue type, subcategory, type, intensity and date range — then export to KML, CSV, GPKG or GeoJSON.
              </figcaption>
            </figure>

            <div className="grid-4" style={{ marginTop: 'var(--space-4)' }}>
              {[
                { tag: 'PESTS', body: 'Insects and mites — thrips, mealybug, fruit fly — logged down to the species, with an intensity score.' },
                { tag: 'DISEASES', body: 'Viral, fungal and bacterial pressure — like grapevine leafroll — flagged at the vine before it spreads.' },
                { tag: 'DEFICIENCIES', body: 'Nutrient deficiencies — nitrogen, potassium, magnesium and more — pinned where the symptom shows.' },
                { tag: 'IRRIGATION & QUALITY', body: 'Waterlogging and water stress, plus crop-quality and harvest-readiness checks, tagged per block.' },
              ].map((c) => (
                <div key={c.tag} style={{
                  background: 'var(--paper)', border: '1px solid var(--line)',
                  borderRadius: 12, padding: 'var(--space-3)',
                  display: 'flex', flexDirection: 'column', gap: 10,
                }}>
                  <span style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.12em',
                    color: 'var(--accent)', textTransform: 'uppercase',
                  }}>{c.tag}</span>
                  <p style={{ margin: 0, color: 'var(--muted)', fontSize: 13.5, lineHeight: 1.5 }}>{c.body}</p>
                </div>
              ))}
            </div>
          </div>
        </section>


        {/* What it powers ===================================== */}
        <section className="section">
          <div className="container-wide">
            <div className="section-head">
              <div>
                <div className="section-eyebrow">What RevField powers</div>
                <h2 className="section-title">From a pin in the orchard <em>to a decision on the map.</em></h2>
              </div>
            </div>
            <div className="grid-3" style={{ marginTop: 'var(--space-4)' }}>
              {[
                {
                  code: '01',
                  title: 'Pest & disease pressure maps',
                  body: 'Every scouted pin plots on RevToolbox. Filter by type, intensity and date range to watch a hotspot build across the season and target the spray to the block, not the calendar.',
                  cta: { label: 'See RevToolbox →', route: 'revtoolbox' }
                },
                {
                  code: '02',
                  title: 'EMI zone-sample placement',
                  body: 'Once EMI delineates zones, RevField guides scouts to 6–12 sample pins placed inside each zone — never on the border between two soils. Walk to those, not a grid.',
                  cta: { label: 'See EMI →', route: 'emi' }
                },
                {
                  code: '03',
                  title: 'RevScout S yield calibration',
                  body: 'Field counts dropped in RevField double as yield ground-truth — the same GPS pins anchor the RevScout S camera-to-tonnage regression inside RevToolbox.',
                  cta: { label: 'See RevScout S →', route: 'revscout-s' }
                }
              ].map(card => (
                <div key={card.code} style={{
                  background: 'var(--paper)',
                  border: '1px solid var(--line)',
                  borderRadius: 14,
                  padding: 'var(--space-3)',
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 12
                }}>
                  <span style={{
                    fontFamily: 'JetBrains Mono, monospace',
                    fontSize: 11,
                    letterSpacing: '0.14em',
                    color: 'var(--accent)',
                    textTransform: 'uppercase'
                  }}>{card.code}</span>
                  <h4 style={{ margin: 0, fontSize: 20, lineHeight: 1.2 }}>{card.title}</h4>
                  <p style={{ margin: 0, color: 'var(--muted)', lineHeight: 1.55 }}>{card.body}</p>
                  <a className="btn btn-ghost" href={`#${card.cta.route}`} onClick={(e) => { e.preventDefault(); setRoute(card.cta.route); }} style={{ marginTop: 'auto', alignSelf: 'flex-start' }}>{card.cta.label}</a>
                </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 }}>Get on the <em style={{ fontFamily: "'Instrument Serif', serif", color: '#B8DC73' }}>early-access list.</em></h2>
              <p style={{ marginTop: 12 }}>RevField goes public in June 2026. Beta seats are open now for growers scouting pests and disease, or running RevScout S and EMI surveys this season.</p>
            </div>
            <a className="btn btn-primary btn-lg" href="#contact" onClick={(e) => { e.preventDefault(); setRoute('contact'); }}>Join early access →</a>
          </div>
        </section>
      </>
    );
  };
})();

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