/* global React */
/* ============================================================
   Flowering — Blossom mapping + VRA flower-thinning spray maps.
   RevScout S drives at full bloom to map flower density in 5 zones.
   Exported to Google Earth for field calibration.
   VRA spray maps generated for targeted flower thinning.
   ============================================================ */

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

  const zones = [
    { num: 1, range: '15.66 – 83.4',    color: '#FFF0F5', textColor: '#888', desc: 'Very low density' },
    { num: 2, range: '83.4 – 151.13',   color: '#FFCCE0', textColor: '#666', desc: 'Low density' },
    { num: 3, range: '151.13 – 218.87', color: '#E8619A', textColor: '#fff', desc: 'Medium density' },
    { num: 4, range: '218.87 – 286.6',  color: '#C0166C', textColor: '#fff', desc: 'High density' },
    { num: 5, range: '286.6 – 354.34',  color: '#6B0636', textColor: '#fff', desc: 'Peak density' },
  ];

  const vraRates = [
    { zone: 'Zone 1', rate: '0,0',   color: '#FFF0F5', border: '#FFCCE0', note: 'Skip — preserve fruitset' },
    { zone: 'Zone 2', rate: '25,0',  color: '#FFCCE0', border: '#E8619A', note: 'Light thinning' },
    { zone: 'Zone 3', rate: '50,0',  color: '#E8619A', border: '#C0166C', note: 'Standard rate' },
    { zone: 'Zone 4', rate: '75,0',  color: '#C0166C', border: '#6B0636', note: 'Elevated rate' },
    { zone: 'Zone 5', rate: '100,0', color: '#6B0636', border: '#3D0020', note: 'Full rate' },
  ];

  const steps = [
    {
      n: '01', tag: 'SURVEY',
      t: 'Drive the rows at full bloom',
      d: 'Same RevScout S camera, same row-drive workflow. Blossom counts per tree logged to GPS — both sides in a single pass.',
      file: 'assets/blossom-density-map.png',
    },
    {
      n: '02', tag: 'MAP',
      t: '5-zone density raster',
      d: 'Flower counts interpolate into a continuous block raster. Auto-classified into 5 bands — near-white at low density, deep magenta at peak blossom load.',
      file: 'assets/blossom-density-map.png',
    },
    {
      n: '03', tag: 'CALIBRATE',
      t: 'Google Earth — field verification',
      d: 'Export as KML. The agronomist opens it on any phone, walks the block with the density overlay live, and calibrates prescription dosages against what they see on the ground.',
      file: 'assets/blossom-googleearth-phone.jpg',
    },
    {
      n: '04', tag: 'PRESCRIBE',
      t: 'VRA spray map — targeted thinning',
      d: 'Assign a thinning rate per zone. High-density zones get more; sparse zones get less or zero. Export to sprayer in one click — Standard, RedAnt, Trimble, John Deere or AGCO.',
      file: 'assets/blossom-vra-map.png',
    },
  ];

  return (
    <>
      {/* ── Hero ────────────────────────────────────────────── */}
      <section className="hero" style={{ minHeight: 600 }}>
        <div className="hero-map" style={{ overflow: 'hidden', position: 'absolute', inset: 0 }}>
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: "url('assets/blossom-density-map.png')",
            backgroundSize: 'cover', backgroundPosition: 'center',
            filter: 'brightness(0.38) saturate(1.6)',
          }} />
        </div>
        <div className="hero-overlay" style={{
          background: 'linear-gradient(180deg, rgba(15,20,16,0.60) 0%, rgba(15,20,16,0.20) 45%, rgba(15,20,16,0.94) 100%)',
        }} />
        <div className="container-wide hero-content" style={{
          gridTemplateColumns: '1fr', minHeight: 600, alignItems: 'center',
        }}>
          <div style={{ maxWidth: 880 }}>
            <div className="hero-eyebrow">
              <span className="dot" />
              RevScout S · Flowering · Blossom Mapping + VRA Spray
            </div>
            <h1 className="hero-title">
              Map every blossom.<br />
              <em>Thin with precision.</em>
            </h1>
            <p className="hero-sub" style={{ maxWidth: 700 }}>
              The same RevScout S camera that counts fruit counts flowers at full bloom. A 5-zone blossom-density raster lands in{' '}
              <em style={{ fontFamily: "'Instrument Serif', serif", color: '#B8DC73', fontStyle: 'italic' }}>RevToolbox</em>,
              exports to Google Earth for field calibration, and generates a VRA spray map for targeted flower thinning — one hardware platform, one workflow.
            </p>
            <div className="hero-actions">
              <a className="btn btn-primary btn-lg" href="#" onClick={e => { e.preventDefault(); setRoute('contact'); }}>Talk to us →</a>
              <a className="btn btn-light btn-lg" href="http://revtoolbox.co.za" target="_blank" rel="noreferrer">Open RevToolbox ↗</a>
            </div>
          </div>
        </div>
      </section>

      {/* ── 01 · Blossom Mapping ────────────────────────────── */}
      <section className="section warm">
        <div className="container-wide">
          <div className="section-eyebrow">01 · Blossom mapping</div>
          <h2 className="section-title">Drive the rows at full bloom. <em>Watch the density map appear.</em></h2>
          <p className="section-lede" style={{ maxWidth: 760, marginBottom: 'var(--space-4)' }}>
            RevScout S counts blossoms as it moves — same ATV-mounted camera, same row-drive workflow as the fruit count. Flower density per tree is interpolated into a continuous block raster, auto-classified into 5 zones from near-white to deep magenta, and ready in RevToolbox within the day.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-5)', alignItems: 'start' }}>

            {/* RevToolbox map */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{
                fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--muted)',
                letterSpacing: '0.08em', textTransform: 'uppercase',
              }}>
                RevToolbox · Block E2 · Blossom density · 5 zones · 2023-10-13
              </div>
              <div
                data-img-file="assets/blossom-density-map.png"
                role="img"
                aria-label="Blossom density map in RevToolbox — 5 zones from white (sparse) to deep magenta (peak)"
                style={{
                  width: '100%', aspectRatio: '16 / 9',
                  backgroundImage: "url('assets/blossom-density-map.png')",
                  backgroundSize: 'cover', backgroundPosition: 'center',
                  borderRadius: 'var(--radius-lg)', border: '1px solid var(--line)',
                }}
              />
              {/* Zone legend */}
              <div style={{
                background: 'var(--paper)', border: '1px solid var(--line)',
                borderRadius: 'var(--radius-lg)', padding: 'var(--space-3)',
                display: 'flex', flexDirection: 'column', gap: 8,
              }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em',
                  textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 2,
                }}>Zone Legend · flowers per tree</div>
                {zones.map(z => (
                  <div key={z.num} style={{ display: 'grid', gridTemplateColumns: '20px 64px 1fr auto', alignItems: 'center', gap: 10 }}>
                    <div style={{
                      width: 20, height: 16, borderRadius: 3,
                      background: z.color, border: '1px solid var(--line)',
                    }} />
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--charcoal)', fontWeight: 500 }}>Zone {z.num}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)' }}>{z.range}</span>
                    <span style={{ fontSize: 12, color: 'var(--muted)' }}>{z.desc}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Phone / Google Earth */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{
                fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--muted)',
                letterSpacing: '0.08em', textTransform: 'uppercase',
              }}>
                Google Earth · E2 – Blossom · field view on phone
              </div>
              <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'flex-start' }}>
                {/* Phone mockup */}
                <div style={{
                  flexShrink: 0,
                  width: 220,
                  borderRadius: 20,
                  overflow: 'hidden',
                  border: '2px solid var(--line-strong)',
                  boxShadow: '0 12px 40px rgba(0,0,0,0.18)',
                }}>
                  <div
                    data-img-file="assets/blossom-googleearth-phone.jpg"
                    role="img"
                    aria-label="Blossom density map overlaid on Google Earth — field calibration on phone"
                    style={{
                      width: '100%', aspectRatio: '9 / 16',
                      backgroundImage: "url('assets/blossom-googleearth-phone.jpg')",
                      backgroundSize: 'cover', backgroundPosition: 'center top',
                    }}
                  />
                </div>
                {/* Caption cards */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 4 }}>
                  {[
                    { tag: 'EXPORT', copy: 'One-click KML export from RevToolbox — same overlay shown in the portal, now on the phone.' },
                    { tag: 'CALIBRATE', copy: 'Walk the block. Cross-reference what the camera counted with what you see flowering on the tree. Adjust dosages before generating the spray map.' },
                    { tag: 'CONFIRM', copy: 'Zone boundaries are visible in context of real satellite imagery — not just abstract data.' },
                  ].map((c, i) => (
                    <div key={i} style={{
                      background: 'var(--paper)', border: '1px solid var(--line)',
                      borderRadius: 'var(--radius-lg)', padding: '12px 16px',
                    }}>
                      <div style={{
                        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.10em',
                        textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 5, fontWeight: 600,
                      }}>{c.tag}</div>
                      <p style={{ margin: 0, fontSize: 13, color: 'var(--muted)', lineHeight: 1.5 }}>{c.copy}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── 02 · VRA Spray Map ──────────────────────────────── */}
      <section className="section">
        <div className="container-wide">
          <div className="section-eyebrow">02 · VRA spray map — flower thinning</div>
          <h2 className="section-title">Blossom density becomes <em>spray rate.</em></h2>
          <p className="section-lede" style={{ maxWidth: 760, marginBottom: 'var(--space-4)' }}>
            The blossom-density raster is the source layer for a Variable Rate Application map. Assign a thinning agent rate per density zone — high-density patches get more, sparse zones get less or zero. The result is targeted flower thinning that preserves fruitset where load is already light and reduces chemical cost everywhere else.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 'var(--space-5)', alignItems: 'start' }}>

            {/* VRA map */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{
                fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--muted)',
                letterSpacing: '0.08em', textTransform: 'uppercase',
              }}>
                RevToolbox · VRA Mapping · flower-thinning prescription · Block E2
              </div>
              <div
                data-img-file="assets/blossom-vra-map.png"
                role="img"
                aria-label="VRA flower-thinning spray map — 5 spray zones generated from blossom density raster"
                style={{
                  width: '100%', aspectRatio: '16 / 9',
                  backgroundImage: "url('assets/blossom-vra-map.png')",
                  backgroundSize: 'cover', backgroundPosition: 'center top',
                  borderRadius: 'var(--radius-lg)', border: '1px solid var(--line)',
                }}
              />
              {/* Zone tooltip callout */}
              <div style={{
                background: 'var(--paper-warm)', border: '1px solid var(--line)',
                borderRadius: 'var(--radius-lg)', padding: '14px 18px',
                display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
              }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 4 }}>Example zone</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontStyle: 'italic', color: 'var(--accent)' }}>Zone 4</div>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 4 }}>Rate · Area</div>
                  <div style={{ fontWeight: 700, fontSize: 15 }}>75 kg/ha · 0.05 ha</div>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--muted)', marginBottom: 4 }}>Total product</div>
                  <div style={{ fontWeight: 700, fontSize: 15 }}>3.9 kg</div>
                </div>
              </div>
              <p style={{ margin: 0, fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.55 }}>
                Click any zone on the map to inspect Rate, Area and Total product for that patch before downloading. Zone boundaries honour the Block Boundary Buffer setting so the sprayer boom never over-applies at the headland.
              </p>
            </div>

            {/* Settings panel */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>

              {/* Zonal settings */}
              <div style={{
                background: 'var(--paper)', border: '1px solid var(--line)',
                borderRadius: 'var(--radius-lg)', padding: 'var(--space-3)',
              }}>
                <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 14 }}>Zonal Settings</div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)',
                  letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 10,
                }}>Number of VRA Zones</div>
                <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
                  {['2 Zones', '3 Zones', '5 Zones'].map((label, i) => (
                    <button key={label} style={{
                      padding: '8px 14px', borderRadius: 6, fontSize: 13, fontWeight: 500,
                      cursor: 'default', border: 'none',
                      background: i === 2 ? 'var(--accent)' : 'transparent',
                      color: i === 2 ? '#fff' : 'var(--charcoal)',
                      outline: i !== 2 ? '1px solid var(--line-strong)' : 'none',
                    }}>{label}</button>
                  ))}
                </div>
              </div>

              {/* Resolution */}
              <div style={{
                background: 'var(--paper)', border: '1px solid var(--line)',
                borderRadius: 'var(--radius-lg)', padding: 'var(--space-3)',
                display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14,
              }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>VRA Resolution Cap [m]</div>
                  <div style={{
                    border: '1px solid var(--line-strong)', borderRadius: 4,
                    padding: '8px 12px', fontFamily: 'var(--font-mono)', fontSize: 13,
                    background: 'var(--paper-warm)',
                  }}>1,5</div>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>Block Boundary Buffer [m]</div>
                  <div style={{
                    border: '1px solid var(--line-strong)', borderRadius: 4,
                    padding: '8px 12px', fontFamily: 'var(--font-mono)', fontSize: 13,
                    background: 'var(--paper-warm)',
                  }}>0</div>
                </div>
              </div>

              {/* Rate inputs */}
              <div style={{
                background: 'var(--paper)', border: '1px solid var(--line)',
                borderRadius: 'var(--radius-lg)', padding: 'var(--space-3)',
              }}>
                <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 4 }}>VRA Value Inputs</div>
                <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 16 }}>Ordered from low to high flower density</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
                  {vraRates.map((r, i) => (
                    <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                        <div style={{
                          width: 12, height: 12, borderRadius: 3,
                          background: r.color, border: `1px solid ${r.border}`, flexShrink: 0,
                        }} />
                        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--muted)' }}>{r.zone}</span>
                      </div>
                      <div style={{ fontSize: 10, color: 'var(--muted)' }}>kg/ha</div>
                      <div style={{
                        border: '1px solid var(--line-strong)', borderRadius: 4,
                        padding: '6px 8px', fontFamily: 'var(--font-mono)', fontSize: 13,
                        background: 'var(--paper-warm)', color: 'var(--charcoal)',
                      }}>{r.rate}</div>
                      <div style={{ fontSize: 10, color: 'var(--muted)', lineHeight: 1.3 }}>{r.note}</div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Action buttons */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                {[
                  { label: '✓  Submit',            bg: 'var(--accent)' },
                  { label: '✕  Delete VRA Map',    bg: '#B83232' },
                  { label: '↓  Download Standard', bg: '#3D6E22' },
                  { label: '↓  Download RedAnt',   bg: '#3D6E22' },
                ].map((btn, i) => (
                  <div key={i} style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    padding: '10px 12px', background: btn.bg, color: '#fff',
                    borderRadius: 6, fontSize: 12.5, fontWeight: 600, gap: 6, cursor: 'default',
                  }}>{btn.label}</div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── 03 · Workflow ───────────────────────────────────── */}
      <section className="section warm">
        <div className="container-wide">
          <div className="section-eyebrow">03 · End-to-end workflow</div>
          <h2 className="section-title">From full bloom to <em>spray file</em>, in four steps.</h2>
          <p className="section-lede" style={{ maxWidth: 760, marginBottom: 'var(--space-4)' }}>
            One camera platform covers the early-season blossom survey and the mid-season fruit count. Same row drive, same output format — flowering data and fruit data land in the same RevToolbox block, side by side, season after season.
          </p>
          <ol className="rsf-grid">
            {steps.map(s => (
              <li key={s.n} className="rsf-card">
                <div
                  className="rsf-img"
                  data-img-file={s.file}
                  style={{ backgroundImage: `url('${s.file}')` }}
                  role="img"
                  aria-label={s.t}
                />
                <div className="rsf-meta">
                  <span className="rsf-num">{s.n}</span>
                  <span className="rsf-tag">{s.tag}</span>
                </div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* ── Why it matters ──────────────────────────────────── */}
      <section className="section">
        <div className="container-wide">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-5)', alignItems: 'center' }}>
            <div>
              <div className="section-eyebrow">04 · Why it matters</div>
              <h2 className="section-title">Target the trees that need it. <em>Leave the rest.</em></h2>
              <p className="section-lede" style={{ marginBottom: 'var(--space-3)' }}>
                Blanket thinning applications waste product on lightly-loaded areas and under-apply on peak-density patches. Blossom-zone VRA delivers the right dose to the right tree, every time.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {[
                  { stat: '5 zones',     copy: 'Auto-classified from one row-drive scan — no manual mapping.' },
                  { stat: 'KML export',  copy: 'Google Earth overlay on any phone for instant field verification.' },
                  { stat: 'Same scan',   copy: 'Blossom count + fruit count share the same RevScout S hardware — no extra equipment.' },
                  { stat: '1-click export', copy: 'Standard · RedAnt · Trimble · John Deere · AGCO — all sprayer formats covered.' },
                ].map((item, i) => (
                  <div key={i} style={{
                    display: 'grid', gridTemplateColumns: '120px 1fr', gap: 'var(--space-2)',
                    alignItems: 'center', padding: 'var(--space-2) var(--space-3)',
                    background: 'var(--paper)', border: '1px solid var(--line)',
                    borderRadius: 'var(--radius-lg)',
                  }}>
                    <div style={{
                      fontFamily: "'Instrument Serif', serif", fontStyle: 'italic',
                      fontSize: 18, color: 'var(--accent)', lineHeight: 1.2,
                    }}>{item.stat}</div>
                    <p style={{ margin: 0, fontSize: 14, color: 'var(--muted)', lineHeight: 1.5 }}>{item.copy}</p>
                  </div>
                ))}
              </div>
            </div>
            {/* Blossom map close-up */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div
                data-img-file="assets/blossom-vra-map.png"
                role="img"
                aria-label="VRA flower-thinning spray map — zone-level spray rates across the block"
                style={{
                  width: '100%', aspectRatio: '4 / 3',
                  backgroundImage: "url('assets/blossom-vra-map.png')",
                  backgroundSize: 'cover', backgroundPosition: 'center top',
                  borderRadius: 'var(--radius-lg)', border: '1px solid var(--line)',
                }}
              />
              <div style={{
                background: 'var(--paper-warm)', border: '1px solid var(--line)',
                borderRadius: 'var(--radius-lg)', padding: '14px 18px',
                fontFamily: "'Roboto Slab', Georgia, serif", fontSize: 16, lineHeight: 1.5,
                fontStyle: 'italic', color: 'var(--charcoal)',
              }}>
                "A blossom map turns a blanket-spray decision into a tree-by-tree prescription."
              </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 }}>
              Target thinning where it{' '}
              <em style={{ fontFamily: "'Instrument Serif', serif", color: '#B8DC73', fontStyle: 'italic', fontWeight: 400 }}>matters most.</em>
            </h2>
            <p style={{ marginTop: 12 }}>
              Book a blossom-mapping survey or talk through the VRA spray workflow for your block.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <a className="btn btn-primary btn-lg" href="#" onClick={e => { e.preventDefault(); setRoute('contact'); }}>Get in touch →</a>
            <a className="btn btn-light btn-lg" href="http://revtoolbox.co.za" target="_blank" rel="noreferrer">Open RevToolbox ↗</a>
          </div>
        </div>
      </section>
    </>
  );
};

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