// Remaining sections + app shell for Farmatric
const { useState: useSt, useEffect: useEf, useRef: useRf } = React;

/* ---------- COLLECTIVE ---------- */
function Collective() {
  const cards = [
    { n: "i", t: "Pool your capacity",
      d: "Multiple farms, one coordinated supply offer. A 200kg tomato order isn't a problem when ten farms can fulfil it together." },
    { n: "ii", t: "Pre-sell before planting",
      d: "Hotels, restaurants and supermarkets commit to orders 3 months ahead. You plant against a contract, not a hunch." },
    { n: "iii", t: "Share technology",
      d: "Drones, soil sensors, cold storage, packaging. Shared costs, collective access. The economics of scale, without losing your farm." },
  ];
  return (
    <section className="collective" id="collective" data-screen-label="05 Collective">
      <div className="wrap">
        <div className="coll-head">
          <div>
            <Reveal><span className="eyebrow">The Gulf Farm Collective</span></Reveal>
            <Reveal delay={1}><h2 style={{ marginTop: 24 }}>You don't have to <em className="serif-italic" style={{color: "var(--amber-light)"}}>farm alone.</em></h2></Reveal>
          </div>
          <Reveal delay={2}>
            <p className="lead">A cooperative of Gulf farms pooling demand, coordinating supply,
              and sharing what one farm alone could never afford. Zero upfront cost — we earn only when you sell.</p>
          </Reveal>
        </div>

        <div className="coll-grid">
          {cards.map((c, i) => (
            <Reveal key={c.n} delay={i + 1} className="coll-card">
              <span className="cc-num">{c.n}</span>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
            </Reveal>
          ))}
        </div>

        <Reveal delay={4} className="coll-cta">
          <a href="#cta" className="btn btn-amber">Join the Collective <Icon.arrowRightSmall /></a>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- TRAINING ---------- */
function Training() {
  const items = [
    { icon: <Icon.phone />, t: "Daily WhatsApp tips", d: "Bite-size practical guidance, delivered where you already are.", meta: "Every morning · EN / AR" },
    { icon: <Icon.video />, t: "Monthly live masterclasses", d: "Senior agronomists on hydroponics, soil, pest control, post-harvest.", meta: "First Thursday · Zoom" },
    { icon: <Icon.tractor />, t: "Quarterly on-farm workshops", d: "Hands-on field days at member farms across the UAE.", meta: "Al Ain · Dubai · Abu Dhabi" },
    { icon: <Icon.book />, t: "Gulf farming guide library", d: "PDF guides for the crops, climate, and regulations that actually matter here.", meta: "60+ guides · downloadable" },
  ];
  return (
    <section className="training" id="training" data-screen-label="06 Training">
      <div className="wrap">
        <div className="training-head">
          <div>
            <Reveal><span className="eyebrow">Training & knowledge</span></Reveal>
            <Reveal delay={1}><h2 style={{ marginTop: 24 }}>We don't just give you a tool. We help you <em className="serif-italic">grow better.</em></h2></Reveal>
          </div>
          <Reveal delay={2}>
            <p className="lead">Software alone doesn't change yields. People do.
              Every collective member is supported by a real curriculum, real mentors, and real field time.</p>
          </Reveal>
        </div>

        <div className="training-grid">
          {items.map((t, i) => (
            <Reveal key={t.t} delay={i + 1} className="training-card">
              <span className="tc-icon">{t.icon}</span>
              <h4>{t.t}</h4>
              <p>{t.d}</p>
              <span className="tc-meta">{t.meta}</span>
            </Reveal>
          ))}
        </div>

        <Reveal delay={5} className="training-footer">
          <p>Every collective member gets a peer mentor <em className="serif-italic" style={{color: "var(--amber-light)"}}>+</em> GAP certification support.</p>
          <a href="#cta" className="btn btn-outline-light">See the curriculum <Icon.arrowRightSmall /></a>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- REVENUE MODEL ---------- */
function Revenue() {
  const steps = [
    { n: "01", t: "Join free", d: "Set up your farm on Farmatric in under 10 minutes. No card, no contract." },
    { n: "02", t: "Grow", d: "Track fields, schedule irrigation, log inputs, manage harvest — all through the platform." },
    { n: "03", t: "Sell", d: "Buyer pays through Farmatric. 5% platform fee is deducted automatically. You receive the rest." },
  ];
  return (
    <section className="revenue" id="model" data-screen-label="07 Revenue model">
      <div className="wrap">
        <div className="revenue-head">
          <Reveal><span className="eyebrow" style={{ justifyContent: "center" }}>How we make money</span></Reveal>
          <Reveal delay={1}><h2 style={{ marginTop: 24 }}>No subscription. No setup fee. <em className="serif-italic">We earn when you earn.</em></h2></Reveal>
          <Reveal delay={2}><p className="lead">A model that aligns us with your harvest, not your wallet.</p></Reveal>
        </div>

        <Reveal delay={2}>
          <div className="revenue-flow">
            {steps.map((s, i) => (
              <React.Fragment key={s.n}>
                <div className="revenue-step">
                  <span className="rs-num">{s.n}</span>
                  <h4>{s.t}</h4>
                  <p>{s.d}</p>
                </div>
                {i < steps.length - 1 && (
                  <div className="revenue-arrow"><Icon.arrow /></div>
                )}
              </React.Fragment>
            ))}
          </div>
        </Reveal>

        <Reveal delay={3}>
          <div className="revenue-callout">
            <span className="rc-icon"><Icon.check /></span>
            <p>Buyers pay <strong>zero</strong> fees. Only the farmer side pays — and only on completed sales.</p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- TESTIMONIALS ---------- */
function Testimonials() {
  const tests = [
    { q: "Finally I can see all 12 fields in one place. And my hotel buyer sees the harvest coming before it arrives.",
      n: "Ahmed Al Mansoori", m: "Date Farm · Abu Dhabi", c: "linear-gradient(135deg, #1A5C38, #2a7048)", in: "AM" },
    { q: "We used to rotate three notebooks between three managers. Now it's one app and one truth — across all of Sharjah.",
      n: "Fatima Al Rashid", m: "Greenhouse Estate · Sharjah", c: "linear-gradient(135deg, #C87820, #b46a18)", in: "FR" },
    { q: "The pre-order system changed my season. I planted 4 hectares of cucumber against a signed restaurant order. Zero waste at harvest.",
      n: "Rajesh Menon", m: "Hydroponic Farm · Dubai", c: "linear-gradient(135deg, #8B6B4A, #6b4f33)", in: "RM" },
  ];
  const buyers = [
    { i: "✦", t: "5-Star Hotels" },
    { i: "◇", t: "Supermarkets" },
    { i: "◉", t: "Restaurants" },
    { i: "❖", t: "Corporate Canteens" },
    { i: "◊", t: "Cloud Kitchens" },
  ];
  return (
    <section className="testimonials" id="testimonials" data-screen-label="08 Testimonials">
      <div className="wrap">
        <div className="test-head">
          <div>
            <Reveal><span className="eyebrow">Voices from the field</span></Reveal>
            <Reveal delay={1}><h2 style={{ marginTop: 24 }}>Farmers who <em className="serif-italic">farm smarter.</em></h2></Reveal>
          </div>
          <Reveal delay={2}>
            <p className="lead">Real operators across the Emirates running their season through Farmatric.</p>
          </Reveal>
        </div>

        <div className="test-grid">
          {tests.map((t, i) => (
            <Reveal key={t.n} delay={i + 1} className="test-card">
              <p className="quote">{t.q}</p>
              <div className="person">
                <span className="person-avatar" style={{ background: t.c }}>{t.in}</span>
                <div className="person-info">
                  <div className="nm">{t.n}</div>
                  <div className="mt">{t.m}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={4} className="buyer-strip">
          <span className="bs-label">Buyers we connect you to —</span>
          <div className="bs-items">
            {buyers.map(b => (
              <span key={b.t} className="bs-item">
                <span className="ic" style={{ color: "var(--amber)" }}>{b.i}</span> {b.t}
              </span>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- PRICING ---------- */
function Pricing() {
  return (
    <section className="pricing" id="pricing" data-screen-label="09 Pricing">
      <div className="wrap">
        <div className="pricing-head">
          <Reveal><span className="eyebrow" style={{ justifyContent: "center" }}>Pricing</span></Reveal>
          <Reveal delay={1}><h2 style={{ marginTop: 24 }}>Simple. Transparent. <em className="serif-italic">Tied to your success.</em></h2></Reveal>
        </div>

        <Reveal delay={2}>
          <div className="pricing-stat">5</div>
        </Reveal>

        <Reveal delay={3}>
          <p className="pricing-strap">on completed sales only — nothing else, nothing ever.</p>
        </Reveal>

        <Reveal delay={4}>
          <div className="pricing-zeros">
            <span>Zero monthly fees</span>
            <span>Zero setup cost</span>
            <span>Zero risk</span>
          </div>
        </Reveal>

        <Reveal delay={5}>
          <div className="pricing-ctas">
            <a href="#cta" className="btn btn-amber">Start Free <Icon.arrowRightSmall /></a>
            <a href="https://wa.me/971500000000?text=Hi%2C%20I%27m%20interested%20in%20Farmatric"
               target="_blank" rel="noopener" className="btn btn-whatsapp">
              <Icon.whatsapp /> Talk to us on WhatsApp
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const faqs = [
    { q: "Is Farmatric really free to join?",
      a: "Yes. No card, no setup fee, no monthly subscription. You only pay a 5% platform fee when produce sells through Farmatric to a buyer. If you never sell through us, you never pay us." },
    { q: "How does the 5% fee work?",
      a: "When a buyer pays for a completed order, the payment passes through Farmatric. We deduct 5% as the platform fee and forward 95% to your registered bank account or wallet — typically within 48 hours of buyer payment." },
    { q: "Can I use Farmatric even if I'm not in the collective?",
      a: "Absolutely. The platform — fields, crops, finance, irrigation, reports — is available standalone. The Gulf Farm Collective adds pre-orders, shared technology, and group buyer contracts on top, but it is fully opt-in." },
    { q: "Is the platform available in Arabic?",
      a: "Yes. Full RTL Arabic UI alongside English, with both languages selectable at any time. WhatsApp tips and training materials are delivered in both EN and AR." },
    { q: "What crops and farm types does Farmatric support?",
      a: "Date palms, vegetables, leafy greens, hydroponics, greenhouses, mixed estates and small holdings. The system is configured around UAE and wider Gulf growing conditions — climate zones, GAP standards, MOCCAE compliance and local certification flows." },
    { q: "How do I get my buyers to use the traceability portal?",
      a: "You share a single link with your hotel, supermarket or restaurant buyer. They open it in any browser — no account needed — and see live crop progress, harvest forecasts and certificates. Most buyers love it within the first week." },
  ];
  const [open, setOpen] = useSt(0);

  return (
    <section className="faq" id="faq" data-screen-label="10 FAQ">
      <div className="wrap">
        <div className="faq-grid">
          <div>
            <Reveal><span className="eyebrow">Common questions</span></Reveal>
            <Reveal delay={1}><h2 style={{ marginTop: 24 }}>Asked by Gulf farmers, <em className="serif-italic">answered straight.</em></h2></Reveal>
            <Reveal delay={2}>
              <p style={{ marginTop: 22, color: "var(--ink-2)", fontSize: 15, maxWidth: "32ch" }}>
                Can't find what you need? Message us on WhatsApp — we reply within an hour, 7 days a week.
              </p>
            </Reveal>
            <Reveal delay={3}>
              <a href="https://wa.me/971500000000" target="_blank" rel="noopener"
                 className="btn btn-whatsapp" style={{ marginTop: 22 }}>
                <Icon.whatsapp /> Message us
              </a>
            </Reveal>
          </div>

          <div className="faq-list">
            {faqs.map((f, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
                <button className="faq-question" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="fq-toggle"><Icon.plus /></span>
                </button>
                <div className="faq-answer"><p>{f.a}</p></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FINAL CTA ---------- */
function FinalCTA() {
  return (
    <section className="final-cta" id="cta" data-screen-label="11 Final CTA">
      <div className="wrap">
        <Reveal><span className="eyebrow" style={{ justifyContent: "center", color: "var(--amber-light)" }}>Start your season with certainty</span></Reveal>
        <Reveal delay={1}>
          <h2 style={{ marginTop: 28 }}>Your farm. Your buyers. <em className="serif-italic" style={{color: "var(--amber-light)"}}>Your data.</em></h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="lead">Join the Gulf Farm Collective and start farming with certainty.</p>
        </Reveal>
        <Reveal delay={3}>
          <div className="fc-ctas">
            <a href="#cta" className="btn btn-amber">Start Free Trial <Icon.arrowRightSmall /></a>
            <a href="https://wa.me/971500000000?text=Hi%2C%20I%27m%20interested%20in%20Farmatric"
               target="_blank" rel="noopener" className="btn btn-whatsapp">
              <Icon.whatsapp /> WhatsApp Us
            </a>
          </div>
        </Reveal>
        <Reveal delay={4}>
          <div className="fc-note">No credit card · No commitment · Setup in 10 minutes</div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer({ lang, setLang }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <Logo light />
            <p className="ft-tag" style={{ marginTop: 12 }}>Farm smarter. Sell before you plant. Built for Gulf agriculture.</p>
          </div>
          <div>
            <h5>Platform</h5>
            <ul>
              <li><a href="#features">Features</a></li>
              <li><a href="#collective">Collective</a></li>
              <li><a href="#training">Training</a></li>
              <li><a href="#pricing">Pricing</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Privacy</a></li>
              <li><a href="#">Terms</a></li>
              <li><a href="#">Press</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="https://wa.me/971500000000" target="_blank" rel="noopener">WhatsApp · +971 50 000 0000</a></li>
              <li><a href="mailto:salaam@farmatric.com">salaam@farmatric.com</a></li>
              <li>Dubai · Abu Dhabi · Al Ain</li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2025 Farmatric · Built for Gulf Agriculture</span>
          <LangToggle lang={lang} setLang={setLang} />
        </div>
      </div>
    </footer>
  );
}

/* ---------- DEMO MODAL ---------- */
function DemoModal({ open, onClose }) {
  useEf(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  return (
    <div className={`modal-overlay ${open ? "open" : ""}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <h3>Farmatric · 2 minute tour</h3>
          <button className="modal-close" onClick={onClose}><Icon.close /></button>
        </div>
        <div className="modal-body">
          <button className="modal-play"><Icon.play /></button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Collective, Training, Revenue, Testimonials, Pricing, FAQ, FinalCTA, Footer, DemoModal });