// Sections for Farmatric landing
const { useState: useS, useEffect: useE, useRef: useR } = React;

/* ---------- NAV ---------- */
function Nav({ lang, setLang, onMenuOpen }) {
  const [scrolled, setScrolled] = useS(false);
  useE(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner">
        <Logo />
        <nav className="nav-links">
          <a href="#features">Features</a>
          <a href="#collective">Collective</a>
          <a href="#training">Training</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">Contact</a>
        </nav>
        <div className="nav-right">
          <LangToggle lang={lang} setLang={setLang} />
          <a href="#cta" className="btn btn-amber">Get Started Free <Icon.arrowRightSmall /></a>
          <button className="hamburger" onClick={onMenuOpen} aria-label="Open menu"><Icon.menu /></button>
        </div>
      </div>
    </header>
  );
}

/* ---------- MOBILE MENU ---------- */
function MobileMenu({ open, onClose, lang, setLang }) {
  return (
    <div className={`mobile-menu ${open ? "open" : ""}`}>
      <div className="mm-header">
        <Logo light />
        <button className="mm-close" onClick={onClose} aria-label="Close"><Icon.close /></button>
      </div>
      <nav>
        <a onClick={onClose} href="#features">Features</a>
        <a onClick={onClose} href="#collective">Collective</a>
        <a onClick={onClose} href="#training">Training</a>
        <a onClick={onClose} href="#pricing">Pricing</a>
        <a onClick={onClose} href="#faq">Contact</a>
      </nav>
      <div className="mm-cta">
        <LangToggle lang={lang} setLang={setLang} />
        <a href="#cta" onClick={onClose} className="btn btn-amber">Start Free Trial <Icon.arrowRightSmall /></a>
      </div>
    </div>
  );
}

/* ---------- HERO ---------- */
function Hero({ onOpenDemo }) {
  const words = ["Farm", "smarter.", "Sell", "before", "you", "plant."];
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">Farmatric · UAE & Gulf</span>
            <h1 style={{ marginTop: 28 }}>
              {words.map((w, i) => (
                <span key={i} className="word" style={{ animationDelay: `${0.15 + i * 0.1}s`, marginRight: "0.22em" }}>
                  {i === 1 || i === 5 ? <em className="serif-italic">{w}</em> : w}
                </span>
              ))}
            </h1>
            <p className="hero-sub">
              The farm management platform built for UAE and Gulf agriculture.
              Track every field, coordinate your collective, and deliver to buyers —
              all from one dashboard.
            </p>
            <div className="hero-ctas">
              <a href="#cta" className="btn btn-amber">Start Free Trial <Icon.arrowRightSmall /></a>
              <button onClick={onOpenDemo} className="btn btn-outline"><Icon.play /> Watch Demo</button>
            </div>
            <div className="hero-meta">
              <span className="dot"></span>
              <span>Trusted by farms across UAE · India · Gulf</span>
            </div>
          </div>

          <div className="hero-visual">
            <div className="hero-photo">
              <span className="hero-photo-label">[ aerial · al ain date farm ]</span>
            </div>
            <div className="hero-dashboard">
              <h4>Season Overview · Field 4</h4>
              <div className="hd-row">
                <span className="hd-big">2.4t</span>
                <span className="hd-pill">+18% vs forecast</span>
              </div>
              <div className="hd-bars">
                {[34, 52, 41, 68, 55, 78, 72].map((h, i) =>
                  <span key={i} style={{ height: `${h}%` }}></span>
                )}
              </div>
            </div>
          </div>
        </div>

        <div className="trust-strip">
          <div className="ts-inner">
            <div className="ts-label">Trusted across the region —</div>
            <div className="ts-stat"><div className="v"><Counter to={30} suffix="+" /></div><div className="l">farms managed</div></div>
            <div className="ts-stat"><div className="v"><Counter to={6} /></div><div className="l">platform modules</div></div>
            <div className="ts-stat"><div className="v"><Counter to={0} /></div><div className="l">AED upfront cost</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- PROBLEMS ---------- */
function Problems() {
  const problems = [
    { n: "01", icon: <Icon.noBuyer />, t: "No guaranteed buyers before harvest",
      d: "Most Gulf farms still grow first and find buyers second. Surplus rots. Prices crash at peak season." },
    { n: "02", icon: <Icon.notebook />, t: "Records scattered across notebooks and WhatsApp",
      d: "Spray logs in one place. Yields in another. Costs nowhere. Decisions become guesses." },
    { n: "03", icon: <Icon.water />, t: "Water and input costs spiralling untracked",
      d: "Diesel, fertiliser, labour — climbing every quarter. Without per-field tracking, you can't see what's bleeding you." },
  ];
  return (
    <section className="problems" id="problems" data-screen-label="02 Problems">
      <div className="wrap">
        <Reveal><span className="eyebrow">The hidden cost</span></Reveal>
        <Reveal delay={1}><h2 style={{ marginTop: 24 }}>Gulf farms are losing money on problems that are <em className="serif-italic" style={{color: "var(--amber-light)"}}>already solved</em>.</h2></Reveal>

        <div className="problems-grid">
          {problems.map((p, i) => (
            <Reveal key={p.n} delay={i + 1} className="problem-card">
              <span className="pc-num">{p.n} / 03</span>
              <span className="pc-icon">{p.icon}</span>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </Reveal>
          ))}
        </div>

        <Reveal delay={4} className="problems-footer">
          <span>Farmatric solves all three — and connects you to buyers <em style={{color: "var(--amber-light)", fontStyle: "italic"}}>before</em> you plant.</span>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- FEATURES ---------- */
function Features() {
  const items = [
    { icon: <Icon.field />, t: "Field & Crop Tracking",
      d: "Log every field, crop, task, and input. Know your farm's status in real time." },
    { icon: <Icon.handshake />, t: "Pre-Order Management",
      d: "Connect to buyers before you plant. Track commitments vs crop forecasts." },
    { icon: <Icon.chart />, t: "Harvest & Yield Reports",
      d: "Forecast your harvest. Compare to collective benchmarks. Get paid accurately." },
    { icon: <Icon.drop />, t: "Irrigation & Water Logs",
      d: "Schedule irrigation by crop type. Track water usage across all fields." },
    { icon: <Icon.coin />, t: "Finance & Cost Tracking",
      d: "Input costs, revenue, and profit per field. Know what each crop actually earns." },
    { icon: <Icon.link />, t: "Buyer Traceability Portal",
      d: "Share a live crop-progress link with your hotel or supermarket buyer." },
  ];
  return (
    <section className="features" id="features" data-screen-label="03 Features">
      <div className="wrap">
        <div className="features-head">
          <div>
            <Reveal><span className="eyebrow">The platform</span></Reveal>
            <Reveal delay={1}><h2 style={{ marginTop: 24 }}>Everything your farm needs. <em className="serif-italic">One platform.</em></h2></Reveal>
          </div>
          <Reveal delay={2}>
            <p className="lead">Six modules built around how Gulf farms actually operate —
              from a single date palm field to a 12-greenhouse hydroponic estate.</p>
          </Reveal>
        </div>

        <div className="features-grid">
          {items.map((f, i) => (
            <Reveal key={f.t} delay={Math.min(6, i + 1)} className="feature-card">
              <span className="fc-icon">{f.icon}</span>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
              <a className="fc-more" href="#features">Learn more <Icon.arrowRightSmall /></a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- DASHBOARD PREVIEW ---------- */
function DashPreview() {
  const yields = [
    { l: "F-01", h: 62 }, { l: "F-02", h: 88 }, { l: "F-03", h: 45 },
    { l: "F-04", h: 78 }, { l: "F-05", h: 95 }, { l: "F-06", h: 54 },
    { l: "F-07", h: 70 }, { l: "F-08", h: 82 },
  ];
  return (
    <section className="dash-preview" data-screen-label="04 Dashboard">
      <div className="wrap">
        <div className="preview-head">
          <Reveal><span className="eyebrow" style={{ justifyContent: "center" }}>Inside the app</span></Reveal>
          <Reveal delay={1}><h2 style={{ marginTop: 24 }}>The whole farm, <em className="serif-italic">one screen.</em></h2></Reveal>
          <Reveal delay={2}><p className="lead">Designed for farm managers, not analysts. Open it on your phone after Fajr. Close it before Maghrib.</p></Reveal>
        </div>

        <Reveal delay={2}>
          <div className="browser">
            <div className="browser-bar">
              <span className="dot bd-1"></span>
              <span className="dot bd-2"></span>
              <span className="dot bd-3"></span>
              <span className="url">app.farmatric.com/al-mansoori-farms</span>
            </div>
            <div className="dash">
              <aside className="dash-sidebar">
                <div className="ds-logo"><span className="lm"></span>Farmatric</div>
                <nav>
                  <a className="active"><Icon.layout /> Fields</a>
                  <a><Icon.leaf /> Crops</a>
                  <a><Icon.check /> Tasks</a>
                  <a><Icon.basket /> Harvest</a>
                  <a><Icon.wallet /> Finance</a>
                  <a><Icon.report /> Reports</a>
                </nav>
              </aside>
              <main className="dash-main">
                <div className="dash-top">
                  <div className="dt-farm">
                    <span className="small">Active farm</span>
                    <strong>Al Mansoori Farms · Al Ain</strong>
                  </div>
                  <div className="dt-right">
                    <span className="dt-bell"><Icon.bell /></span>
                    <span className="dt-avatar">AM</span>
                  </div>
                </div>

                <h3 className="dash-section-title">Season Overview</h3>

                <div className="dash-stats">
                  <div className="dash-stat">
                    <div className="ds-label">Fields active</div>
                    <div className="ds-value">12 / 14</div>
                    <div className="ds-trend"><Icon.trend /> 2 in fallow rotation</div>
                  </div>
                  <div className="dash-stat">
                    <div className="ds-label">Harvest forecast</div>
                    <div className="ds-value">38.4t</div>
                    <div className="ds-trend"><Icon.trend /> +12% on last season</div>
                  </div>
                  <div className="dash-stat">
                    <div className="ds-label">Pre-orders committed</div>
                    <div className="ds-value">29.0t</div>
                    <div className="ds-trend"><Icon.trend /> 75% of forecast sold</div>
                  </div>
                </div>

                <div className="dash-chart">
                  <div className="dc-head">
                    <h4>Crop yield by field — September</h4>
                    <span>tonnes / field</span>
                  </div>
                  <div className="dc-bars">
                    {yields.map((y) => (
                      <div className="dc-bar" key={y.l}>
                        <span className="bar" style={{ height: `${y.h}%` }}></span>
                        <span className="bl">{y.l}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </main>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, MobileMenu, Hero, Problems, Features, DashPreview });