// pages-lands.jsx — Mamlakuwth Lands (Rehoboth Farm, Selous) + Visit page

function LandsPage({ setPage }) {
  return (
    <div className="page-fade">
      <PageHead
        crumbs="Mamlakuwth / Lands / Rehoboth Farm"
        title="An integrated 12.3-hectare farm at Selous, Mashonaland West."
        lede="Mamlakuwth Lands operates Rehoboth Farm — five enterprises (horticulture, greenhouses, broiler poultry, Boer goats and farm-stay chalets) run as one circular, self-financing operation."
      >
        <div style={{ display: 'flex', gap: 16, marginTop: 32, flexWrap: 'wrap' }}>
          <button className="btn" onClick={() => setPage('visit')}>Plan a visit &rarr;</button>
          <button className="btn btn-ghost" onClick={() => setPage('contact')}>Wholesale & trade enquiries</button>
        </div>
      </PageHead>

      {/* Place */}
      <section className="section">
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow"><span className="dot"></span>Place</div>
              <p className="quote" style={{ marginTop: 24 }}>
                Twelve-point-three hectares of black clay and red clay loam
                outside Selous, eighty kilometres from Harare, gently sloping
                north-west into the morning sun.
              </p>
              <p style={{ color: 'var(--fg-mute)', marginTop: 24, maxWidth: '46ch' }}>
                The farm was surveyed in April 2022 by Afrostain Farmtech &mdash;
                soil chemistry, groundwater, slope and aspect &mdash; and developed
                from a subsistence holding into a commercial, five-enterprise
                operation along the lines of that master plan.
              </p>
              <p style={{ color: 'var(--fg-mute)', marginTop: 16, maxWidth: '46ch' }}>
                Two boreholes sited on the HIGH-potential groundwater zones
                yield around 91,000 litres a day &mdash; enough to drip-irrigate
                the horticulture, run the greenhouses, water the livestock and
                supply the chalets.
              </p>
            </div>
            <Ph label="Photo: farm field at golden hour" height={520} src={IMG.farmField} />
          </div>
        </div>
      </section>

      {/* Headline numbers */}
      <section className="section section-tight" style={{ background: 'var(--bg-elevated)' }}>
        <div className="container">
          <div className="grid grid-4">
            {[
              { n: '12.3 ha', l: 'total farm footprint' },
              { n: '5', l: 'integrated enterprises' },
              { n: '91,000 L', l: 'daily borehole yield, two sites' },
              { n: '80 km', l: 'to Harare markets, 15 km to Chegutu' },
            ].map((s, i) => (
              <div className="stat" key={i}>
                <span className="num-lg">{s.n}</span>
                <span className="lbl">{s.l}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Land allocation */}
      <section className="section">
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>Land allocation</div>
              <h2 style={{ marginTop: 20 }}>How the hectares are spent.</h2>
            </div>
            <p>The northern two-thirds is intensive crop production; chalets and homestead sit in the southern cluster on the lower-potential groundwater zones, away from the productive fields.</p>
          </div>
          <div style={{ overflow: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-body)' }}>
              <thead>
                <tr style={{ borderBottom: '1px solid var(--line-strong)' }}>
                  <th style={{ textAlign: 'left', padding: '14px 12px', fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-mute)', fontWeight: 500 }}>Zone</th>
                  <th style={{ textAlign: 'right', padding: '14px 12px', fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-mute)', fontWeight: 500 }}>Area (ha)</th>
                  <th style={{ textAlign: 'left', padding: '14px 12px', fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-mute)', fontWeight: 500 }}>Key activities</th>
                </tr>
              </thead>
              <tbody>
                {[
                  ['Open field horticulture', '4.2', 'Potato, carrot, peas, onion, cabbage — seasonal rotation'],
                  ['Greenhouses (4 × 500 m²)', '0.4', 'Tomato, English cucumber, coloured pepper — year-round'],
                  ['Broiler poultry', '1.0', '10,000-bird broiler house, 7 cycles/year, grading shade'],
                  ['Goat paddocks + handling', '1.7', 'Two paddocks, kraal, Boer/Kalahari cross flock'],
                  ['Farm-stay chalets', '0.5', '5 × 30 m² chalets, boma, off-grid solar'],
                  ['Seedling nursery', '0.4', 'Propagation beds, seedling sales to neighbours'],
                  ['Homestead + admin', '0.3', 'Farm house, office, farm shop / grading'],
                  ['Worker residences', '0.23', 'Two worker housing units'],
                  ['Infrastructure', '1.57', 'Internal roads, yard, boreholes, tanks, contours'],
                ].map(([zone, area, act], i) => (
                  <tr key={zone} style={{ borderBottom: '1px solid var(--line)' }}>
                    <td style={{ padding: '20px 12px', fontFamily: 'var(--font-display)', fontSize: 18 }}>{zone}</td>
                    <td style={{ padding: '20px 12px', textAlign: 'right', fontFamily: 'var(--font-mono)', color: 'var(--accent)' }}>{area}</td>
                    <td style={{ padding: '20px 12px', color: 'var(--fg-mute)', fontSize: 15 }}>{act}</td>
                  </tr>
                ))}
                <tr style={{ borderTop: '2px solid var(--line-strong)' }}>
                  <td style={{ padding: '20px 12px', fontFamily: 'var(--font-display)', fontSize: 20 }}>Total</td>
                  <td style={{ padding: '20px 12px', textAlign: 'right', fontFamily: 'var(--font-mono)', fontSize: 18, color: 'var(--accent-2)' }}>12.3</td>
                  <td style={{ padding: '20px 12px' }}></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* Enterprise deep-dives */}
      <section className="section" style={{ background: 'var(--bg-elevated)' }}>
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>What grows here</div>
              <h2 style={{ marginTop: 20 }}>Five enterprises, in depth.</h2>
            </div>
            <p>Each enterprise is run as a small commercial line, with its own market window. Together they smooth cash flow across the year and feed each other through compost, feed, manure and irrigation.</p>
          </div>
          <div style={{ display: 'grid', gap: 0 }}>
            {[
              {
                n: '01', t: 'Open-field horticulture',
                k: '4.2 ha  /  Potato · Carrot · Peas · Onion · Cabbage',
                d: 'A rotation tuned to the Zimbabwean market calendar. Potatoes planted in August harvest into the December festive premium. Onions cure under the shade after May, sell August–September when supply is thin. Peas and fine beans run two cycles a year for export-grade contracts.',
                img: IMG.vegetables,
              },
              {
                n: '02', t: 'Greenhouse cropping',
                k: '0.4 ha  /  4 tunnels × 500 m²',
                d: 'Year-round tomato, English cucumber and coloured pepper under tunnel. Drip-fed from borehole, off-season positioning earns up to USD 0.80/kg for tomatoes against a $0.30 wet-season floor. Foliar trace elements every 4–8 weeks; phosphorus supplemented per cycle to compensate the soil.',
                img: IMG.greenhouse,
              },
              {
                n: '03', t: 'Broiler poultry',
                k: '1.0 ha  /  10,000-bird shed · 7 cycles a year',
                d: 'A modern broiler house with grading shade and integrated maize cropping that cuts feed cost by roughly USD 14,000 a year. December cycle is the most profitable. Litter is composted with crop waste through vermicomposting beds and returned to the fields.',
                img: IMG.poultry,
              },
              {
                n: '04', t: 'Boer & Kalahari goats',
                k: '1.7 ha  /  Two paddocks + kraal',
                d: 'Meat-breed flock rotated across two paddocks (0.8 ha + 0.9 ha) and a 0.4 ha handling area. Chevon at USD 7–9/kg into Harare retail (Pick ‘n Pay). Slaughter timed to September–October for pre-Christmas premium. Five does will be transitioned to dual-purpose for a goat-milk yoghurt and soap line.',
                img: IMG.boerGoat,
              },
              {
                n: '05', t: 'Farm-stay chalets',
                k: '0.5 ha  /  5 × 30 m² chalets, off-grid solar',
                d: 'Highest-margin enterprise on the farm at 60–70% gross margin. Five chalets in the southern homestead cluster on the LOW groundwater zones, away from the productive fields but within walking distance for greenhouse tours, mill day, the goat walk and the morning poultry check.',
                img: IMG.chalet,
              },
            ].map((s, i) => (
              <div key={s.n} style={{
                display: 'grid',
                gridTemplateColumns: i % 2 === 0 ? '1.1fr 1fr' : '1fr 1.1fr',
                gap: 'var(--gap-lg)',
                padding: '64px 0',
                borderTop: '1px solid var(--line)',
                alignItems: 'center',
              }}>
                {i % 2 === 0 ? (
                  <React.Fragment>
                    <div>
                      <span className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.16em' }}>{s.n}</span>
                      <h3 style={{ fontSize: 'clamp(32px, 3.4vw, 48px)', margin: '16px 0 12px' }}>{s.t}</h3>
                      <div className="mono" style={{ color: 'var(--gold-deep)', fontSize: 13, letterSpacing: '0.06em', marginBottom: 20 }}>{s.k}</div>
                      <p style={{ color: 'var(--fg-mute)', maxWidth: '54ch' }}>{s.d}</p>
                    </div>
                    <Ph label={s.t} height={360} src={s.img} />
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    <Ph label={s.t} height={360} src={s.img} />
                    <div>
                      <span className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.16em' }}>{s.n}</span>
                      <h3 style={{ fontSize: 'clamp(32px, 3.4vw, 48px)', margin: '16px 0 12px' }}>{s.t}</h3>
                      <div className="mono" style={{ color: 'var(--gold-deep)', fontSize: 13, letterSpacing: '0.06em', marginBottom: 20 }}>{s.k}</div>
                      <p style={{ color: 'var(--fg-mute)', maxWidth: '54ch' }}>{s.d}</p>
                    </div>
                  </React.Fragment>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Cropping calendar */}
      <section className="section" style={{ background: 'var(--bg-deep)' }}>
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>Seasonality</div>
              <h2 style={{ marginTop: 20 }}>The year, in months.</h2>
            </div>
            <p>Zimbabwe runs a wet season (Oct–Apr) and a dry winter (May–Sept). Boreholes and drip irrigation let us crop year-round; the calendar below times us against the market.</p>
          </div>
          <div className="grid grid-4">
            {[
              { m: 'Oct–Nov', t: 'Plant potato', d: 'Open-field potato planted for the December festive harvest.' },
              { m: 'Dec', t: 'Festive harvest', d: 'Potato into market at USD 0.60–0.90/kg. Broiler cycle 6–7.' },
              { m: 'Jan–Mar', t: 'Wet-season hold', d: 'Tomato/cucumber under tunnel only; outdoor beds rest.' },
              { m: 'Apr–May', t: 'Dry-season plant', d: 'Carrot and peas in. Onion bulbed and cured under shade.' },
              { m: 'Jun–Jul', t: 'Cool crops', d: 'Carrot harvest at dry-season premium. Goat condition peaks.' },
              { m: 'Aug–Sep', t: 'Onion premium', d: 'Stored onion to market when supply is thin. Goat slaughter window.' },
              { m: 'Sep–Oct', t: 'Pre-festive', d: 'Greenhouse tomato peak. Chevon into retail for Christmas.' },
              { m: 'Year-round', t: 'Tunnels & broilers', d: 'Greenhouse cropping and seven-cycle broiler programme steady all year.' },
            ].map((m, i) => (
              <div key={i} style={{ borderTop: '1px solid var(--line)', paddingTop: 20 }}>
                <span className="mono" style={{ color: 'var(--gold-deep)', fontSize: 12, letterSpacing: '0.12em' }}>{m.m}</span>
                <h4 style={{ fontSize: 22, margin: '12px 0 8px', fontFamily: 'var(--font-display)', fontWeight: 400 }}>{m.t}</h4>
                <p style={{ color: 'var(--fg-mute)', fontSize: 14 }}>{m.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Soil & water */}
      <section className="section">
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>Soil & water</div>
              <h2 style={{ marginTop: 20 }}>What the survey said.</h2>
            </div>
            <p>Findings from the April 2022 Afrostain Farmtech survey. The farm is built around them, not against them.</p>
          </div>
          <div className="grid grid-3">
            {[
              { k: 'pH', v: '5.5 – 5.8', l: 'Within optimum range — no lime required across either soil type.' },
              { k: 'Available phosphorus', v: '11 – 17 ppm', l: 'Below target — supplemented every crop cycle via Compound L (5-18-10).' },
              { k: 'Calcium / Magnesium', v: 'Good', l: 'Both above target. Strong base for legumes and brassicas in rotation.' },
              { k: 'Soil texture', v: 'Black clay / Clay loam', l: 'Heavy textures — first-time beds dug to 30–45 cm and amended with farmyard manure.' },
              { k: 'Slope', v: '0 – 3.5 %', l: 'Very gentle. Contour drains discharge wet-season excess and protect lower beds.' },
              { k: 'Groundwater', v: '2 HIGH + 28 V-HIGH', l: 'Two HIGH-potential and 28 VERY-HIGH points identified across the parcel.' },
            ].map((s, i) => (
              <div key={i} style={{ borderTop: '1px solid var(--line)', paddingTop: 24 }}>
                <span className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>{s.k}</span>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, marginTop: 12, color: 'var(--accent)' }}>{s.v}</div>
                <p style={{ color: 'var(--fg-mute)', fontSize: 14, marginTop: 12 }}>{s.l}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--accent-2)', color: 'var(--ink)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="eyebrow"><span className="dot" style={{ background: 'var(--forest)' }}></span>Come see it</div>
          <h2 style={{ fontSize: 'clamp(40px, 5vw, 72px)', marginTop: 24, maxWidth: '20ch', marginLeft: 'auto', marginRight: 'auto' }}>
            You will eat better if you have walked the field first.
          </h2>
          <div style={{ marginTop: 32 }}>
            <button className="btn" style={{ background: 'var(--forest)', color: 'var(--cream)' }} onClick={() => setPage('visit')}>Plan a visit &rarr;</button>
          </div>
        </div>
      </section>
    </div>
  );
}

function VisitPage({ setPage }) {
  const [guests, setGuests] = React.useState(4);
  const [nights, setNights] = React.useState(2);
  const [pkg, setPkg] = React.useState('full');
  const packages = {
    full:    { rate: 65, name: 'Full board' },
    bb:      { rate: 50, name: 'Bed & breakfast' },
    room:    { rate: 35, name: 'Room only' },
  };
  const total = packages[pkg].rate * guests * nights;

  const chaletImgs = [IMG.chalet, IMG.cabinExt, IMG.cabinInt, IMG.veranda, IMG.outdoorTable];

  return (
    <div className="page-fade">
      <PageHead
        crumbs="Mamlakuwth / Lands / Visit"
        title="Stay a while at Rehoboth Farm."
        lede="Five thirty-square-metre farm-stay chalets in the southern homestead cluster, off-grid solar, boma firepit, and an open kitchen at the farmhouse. Two-night minimum."
      />

      {/* Chalets */}
      <section className="section">
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>The chalets</div>
              <h2 style={{ marginTop: 20 }}>Five chalets, thirty square metres each.</h2>
            </div>
            <p>Built simply, dressed warmly. Solar-powered, gas-heated water, deep verandas. Two-night minimum, families and small groups welcome.</p>
          </div>
          <div className="grid grid-3">
            {[
              { n: 'Mukamba', s: 'Queen bed, fireplace, west-facing veranda. Sleeps 2.', img: chaletImgs[0] },
              { n: 'Mukwa', s: 'Queen bed, garden bath, view to the greenhouses. Sleeps 2.', img: chaletImgs[1] },
              { n: 'Mubvee', s: 'Twin beds, longest veranda, study desk. Sleeps 2.', img: chaletImgs[2] },
              { n: 'Muunze', s: 'Family chalet, queen + bunk, central living. Sleeps 4.', img: chaletImgs[3] },
              { n: 'Mufuti', s: 'Family chalet, twin + bunk, garden boma. Sleeps 4.', img: chaletImgs[4] },
            ].map((c, i) => (
              <div className="card" key={c.n}>
                <Ph label={`Photo: ${c.n} chalet`} height={220} src={c.img} style={{ marginBottom: 8 }} />
                <h3 style={{ fontSize: 26 }}>{c.n}</h3>
                <p>{c.s}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Experiences */}
      <section className="section" style={{ background: 'var(--bg-elevated)' }}>
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>Days on the farm</div>
              <h2 style={{ marginTop: 20 }}>What a stay looks like.</h2>
            </div>
            <p>Programming is light and farm-led. None of it is compulsory; all of it is included in the full-board rate.</p>
          </div>
          <div style={{ display: 'grid', gap: 0 }}>
            {[
              { t: 'Greenhouse tour', d: 'Walk the four tunnels at the cool hour. Pick the tomato for dinner.' },
              { t: 'Poultry morning', d: 'The grading shade at the broiler house. Counts, weights, the discipline of a cycle.' },
              { t: 'Goat walk', d: 'Move with the flock from kraal to paddock. The slowest, kindest hour of the day.' },
              { t: 'Seedling nursery', d: 'Propagation beds, transplant trays, the start of every crop on the farm.' },
              { t: 'Kitchen evening', d: 'Cook one course of dinner with the team. Three things you didn’t know about a tomato.' },
              { t: 'Boma night', d: 'Open fire, single long table, whatever the kitchen pulled out of the ground that morning.' },
              { t: 'Quiet day', d: 'Nothing scheduled. Hammock. Veranda. A book. Sleep.' },
            ].map((e, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '60px 1fr 2fr', gap: 'var(--gap-md)',
                padding: '28px 0', borderTop: '1px solid var(--line)', alignItems: 'baseline',
              }}>
                <span className="mono" style={{ color: 'var(--fg-faint)' }}>{String(i + 1).padStart(2, '0')}</span>
                <h3 style={{ fontSize: 24 }}>{e.t}</h3>
                <p style={{ color: 'var(--fg-mute)' }}>{e.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Booking estimator */}
      <section className="section">
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>Plan your stay</div>
              <h2 style={{ marginTop: 20 }}>Rough cost estimator.</h2>
            </div>
            <p>An indicative number, USD per person per night. We confirm a fixed price by email after you send us your dates.</p>
          </div>
          <div className="split" style={{ alignItems: 'stretch' }}>
            <div className="card" style={{ padding: 40 }}>
              <div className="form-row">
                <label>Guests</label>
                <input type="range" min="2" max="12" value={guests} onChange={e => setGuests(+e.target.value)} />
                <span className="mono" style={{ color: 'var(--fg-mute)' }}>{guests} guest{guests === 1 ? '' : 's'}</span>
              </div>
              <div className="form-row">
                <label>Nights</label>
                <input type="range" min="2" max="14" value={nights} onChange={e => setNights(+e.target.value)} />
                <span className="mono" style={{ color: 'var(--fg-mute)' }}>{nights} nights</span>
              </div>
              <div className="form-row">
                <label>Package</label>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8 }}>
                  {Object.entries(packages).map(([k, v]) => (
                    <button key={k}
                            onClick={() => setPkg(k)}
                            style={{
                              padding: '8px 14px', borderRadius: 999,
                              border: '1px solid', borderColor: pkg === k ? 'var(--accent)' : 'var(--line)',
                              background: pkg === k ? 'var(--accent)' : 'transparent',
                              color: pkg === k ? 'var(--bg)' : 'var(--fg-mute)',
                              fontFamily: 'var(--font-ui)', fontSize: 13,
                            }}>
                      {v.name}  &middot;  ${v.rate}
                    </button>
                  ))}
                </div>
              </div>
            </div>
            <div style={{ background: 'var(--forest)', color: 'var(--cream)', padding: 40, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <span className="mono" style={{ color: 'rgba(232,226,208,0.7)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>Indicative total</span>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(56px, 6vw, 96px)', lineHeight: 1, marginTop: 16, color: 'var(--gold)' }}>
                  ${total.toLocaleString()}
                </div>
                <p style={{ marginTop: 16, color: 'rgba(232,226,208,0.75)', fontSize: 14 }}>
                  USD &middot; {guests} guests &middot; {nights} nights &middot; {packages[pkg].name.toLowerCase()}
                </p>
              </div>
              <button className="btn" style={{ background: 'var(--gold)', color: 'var(--ink)', marginTop: 32 }} onClick={() => setPage('contact')}>
                Enquire about these dates &rarr;
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Getting there */}
      <section className="section" style={{ background: 'var(--bg-elevated)' }}>
        <div className="container">
          <div className="grid grid-3">
            {[
              { k: 'From Harare', v: 'Roughly 1h 30m by road, west on the A5 to Selous.' },
              { k: 'From Chegutu', v: '15 km. About 20 minutes via the Selous turn-off.' },
              { k: 'By air', v: 'Robert Mugabe International, then road. Farm transfer can be arranged.' },
            ].map((m, i) => (
              <div key={i}>
                <span className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>{m.k}</span>
                <p style={{ marginTop: 12, fontFamily: 'var(--font-display)', fontSize: 24 }}>{m.v}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { LandsPage, VisitPage });