/* global React */
/* ============================================================
   FAQ Page — accordion-style Q&A.
   Replace placeholder questions with your real content.
   ============================================================ */

(function () {
  const { useState } = React;

  const SECTIONS = [
    {
      title: 'EMI Soil Scanning',
      items: [
        { q: 'What does an EMI scan actually measure?', a: 'Electromagnetic induction measures soil electrical conductivity (EC) at three depths — 25 cm, 50 cm, and 90 cm. EC correlates with clay content, salinity, moisture-holding capacity, and depth-to-impediment. It does not replace soil chemistry; it tells you where to put the chemistry sample.' },
        { q: 'How long does a scan take?', a: 'A typical 40-hectare block takes one day. The sensor is towed behind an ATV at row width, recording a reading every half-second — roughly 16,000 data points per block at 5×5 m resolution.' },
        { q: 'Do I need to prepare the block beforehand?', a: 'The block should be accessible by vehicle — no standing water or recent heavy tillage. Winter/dormancy is the ideal window because the orchard is open and soil moisture is stable.' },
        { q: 'Why zonal sampling instead of grid sampling?', a: 'A grid drops a sample every 50×50 m whether the soil changes or not — so points land in uniform ground you didn’t need, and sometimes right on the boundary between two soils, where one sample represents neither. We stack the EMI scan with NDVI to find where the soil actually changes, draw those boundaries as management zones, and composite several sub-samples inside each one. The lab result then describes the real chemistry of the ground you’ll treat, and the spreader applies the correct rate right up to the edge of the soil boundary — not an interpolated average smeared across a grid.' },
      ],
    },
    {
      title: 'RevToolbox Portal',
      items: [
        { q: 'What satellite imagery do you use?', a: 'Two sources: Sentinel-2 at 10 m resolution (free, every 5 days) for monitoring, and commercial tasking at 0.5–0.8 m resolution (on-demand) for tree-level applications like variable-rate nitrogen.' },
        { q: 'Can I export prescription files for my spreader?', a: 'Yes — RevToolbox exports shapefiles and ISO-XML that work with Trimble, John Deere, AGCO, and most other precision-ag controllers. One click from the map to the file your spreader reads.' },
        { q: 'Is RevToolbox included with other services?', a: 'RevToolbox satellite access (10 m, 5-day) is included with any RevScout fruit mapping subscription. High-resolution 0.8 m imagery is billed per farm per image.' },
      ],
    },
    {
      title: 'RevScout S',
      items: [
        { q: 'What is RevScout S?', a: 'RevScout S is our AI field camera that counts AND sizes every fruit on every tree in a single drive. It mounts on an ATV or tractor and processes in real time as you drive between rows. Available today, in use across multiple co-ops.' },
        { q: 'How accurate is the fruit count?', a: 'The camera takes up to 10 photos per tree (5 per side) and the algorithm selects the two highest counts. Size accuracy is ±1 mm. With a 60-tree ground-truth calibration via the RevField app, yield estimates typically achieve R² = 0.94 against actual harvest.' },
        { q: 'Can I buy the unit or is it a service?', a: 'Both options. The mapping unit is available for purchase (R130,000) or you can book us to scan your farm as a service (R800/ha/year, RevToolbox subscription included).' },
      ],
    },
    {
      title: 'Rev-Sizer & RevSizing',
      items: [
        { q: 'What is the Rev-Sizer?', a: 'A digital fruit-sizing caliper with 0.5 mm accuracy and Wi-Fi sync. Banded-trigger design for one-handed use — measures fruit on the tree, no picking required. Pre-load your blocks on the platform; save measurements block-by-block. Water-resistant, full-day battery.' },
        { q: 'How does RevSizing predict harvest size?', a: 'Weekly caliper readings build a growth curve per block. The RevSizing module (inside RevToolbox V4) fits a regional cultivar model to your data and projects final fruit size by market class — typically reliable from week 12 post-bloom onwards.' },
        { q: 'How many fruit can one person measure per day?', a: 'Up to 3,000 fruit per day across multiple blocks — measured on the tree, no picking. Each block is pre-loaded; the picker saves measurements block-by-block and syncs to the cloud over Wi-Fi.' },
        { q: 'Do the camera and the caliper calibrate each other?', a: 'No. Both devices measure to mm-scale precision and their readings are shown on the same growth curve in RevToolbox — they complement each other but neither is used to calibrate the other.' },
      ],
    },
    {
      title: 'Pricing & Getting Started',
      items: [
        { q: 'What does precision agriculture cost per hectare?', a: 'EMI scanning is R1,295/ha (once-off). RevToolbox satellite is R200/ha/year. RevScout fruit mapping is R800/ha/year. Rev-Sizer hardware is R8,500 per unit. RevSizing portal is R150/ha/year. Multi-farm discounts are available.' },
        { q: 'Where do you operate?', a: 'We are based in Stellenbosch and operate across the Western Cape, Northern Cape (Orange River), and increasingly in Limpopo and Mpumalanga. EMI scanning requires a site visit; satellite and portal services work anywhere.' },
        { q: 'How do I get started?', a: 'The first conversation is free. We will walk your farm, listen to where you are, and suggest a starting layer once we understand what would help. An EMI scan is usually the best first step — it gives you the soil foundation everything else sits on.' },
      ],
    },
  ];

  function AccordionItem({ q, a }) {
    const [open, setOpen] = useState(false);
    return (
      <div className={`faq-item ${open ? 'is-open' : ''}`}>
        <button type="button" className="faq-q" onClick={() => setOpen(o => !o)}>
          <span>{q}</span>
          <span className="faq-toggle">{open ? '−' : '+'}</span>
        </button>
        {open && (
          <div className="faq-a">
            <p>{a}</p>
          </div>
        )}
      </div>
    );
  }

  window.FAQPage = function FAQPage({ setRoute }) {
    return (
      <>
        <header className="page-head">
          <div className="container-wide">
            <div className="crumbs">
              <a href="#" onClick={e => { e.preventDefault(); setRoute('home'); }}>Home</a>
              <span>/</span>
              <span>FAQ</span>
            </div>
            <h1>Frequently asked <em>questions.</em></h1>
            <p className="lede">
              Everything you need to know about our tools, services, and how to get started. Can't find what you're looking for? Get in touch — we're happy to help.
            </p>
          </div>
        </header>

        <section className="section">
          <div className="container-wide">
            <div className="faq-grid">
              {SECTIONS.map((sec, i) => (
                <div key={i} className="faq-section">
                  <div className="faq-section-head">
                    <div className="faq-section-num">{String(i + 1).padStart(2, '0')}</div>
                    <h2 className="faq-section-title">{sec.title}</h2>
                  </div>
                  <div className="faq-items">
                    {sec.items.map((item, j) => (
                      <AccordionItem key={j} q={item.q} a={item.a} />
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <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 }}>Still have <em style={{ fontFamily: "'Instrument Serif', serif", color: '#B8DC73' }}>questions?</em></h2>
              <p style={{ marginTop: 12 }}>We're happy to jump on a call or meet on the farm.</p>
            </div>
            <a className="btn btn-primary btn-lg" href="#" onClick={e => { e.preventDefault(); setRoute('contact'); }}>Get in touch →</a>
          </div>
        </section>
      </>
    );
  };
})();
