// home.jsx — Home page sections
const { useEffect: useEffectHome, useRef: useRefHome } = React;

function HomeIntro({ setPage }) {
  return (
    <section className="section" style={{ paddingTop: 'calc(var(--pad-y) * 0.5)' }}>
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>The work</div>
            <h2 style={{ marginTop: 20 }}>Two ways we work the land.</h2>
          </div>
          <p>
            Mamlakuwth is a Zimbabwean house with two trades that share one philosophy:
            see what others overlook, then make it useful, beautiful and lasting.
            Below ground, we recover minerals from tailings the industry walked past.
            Above ground, we farm heritage crops and welcome guests onto the estate.
          </p>
        </div>
      </div>
      <div className="pillars">
        <div className="pillar" onClick={() => setPage('minerals')}>
          <span className="badge">01  /  Below</span>
          <h3>Mamlakuwth Minerals</h3>
          <p style={{ color: 'var(--fg-mute)', maxWidth: '38ch', fontSize: 17 }}>
            Mineral processing and supply-chain consultancy for the energy transition.
            Feasibility, due diligence, optimisation, and re-mining of legacy waste —
            across Sub-Saharan Africa.
          </p>
          <Ph label="Photo: drill core / spectrometer" height={180} src={IMG.oreRocks} />
          <span className="arrow">Explore minerals &rarr;</span>
        </div>
        <div className="pillar" onClick={() => setPage('lands')}>
          <span className="badge">02  /  Above</span>
          <h3>Mamlakuwth Lands</h3>
          <p style={{ color: 'var(--fg-mute)', maxWidth: '38ch', fontSize: 17 }}>
            Rehoboth Farm — a 12.3-hectare integrated operation at Selous, Mashonaland West.
            Horticulture, greenhouses, broilers, Boer goats and five farm-stay chalets,
            run as one circular enterprise.
          </p>
          <Ph label="Photo: greenhouse interior" height={180} src={IMG.greenhouse} />
          <span className="arrow">Explore lands &rarr;</span>
        </div>
      </div>
    </section>
  );
}

function HomeStats() {
  const stats = [
    { n: '16+', l: 'years of metallurgical and processing practice in Zimbabwe, South Africa and Zambia' },
    { n: '14k oz', l: 'contained gold characterised across our Primrose & Tutonic tailings campaigns' },
    { n: '12.3 ha', l: 'integrated farm at Selous — horticulture, greenhouses, broilers, goats, chalets' },
    { n: '∞', l: 'co-products and tailings streams still waiting to be re-imagined' },
  ];
  return (
    <section className="section section-tight" style={{ background: 'var(--bg-elevated)' }}>
      <div className="container">
        <div className="grid grid-4">
          {stats.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>
  );
}

function HomeMinerals({ setPage }) {
  const services = [
    { n: '01', t: 'Feasibility studies', d: 'End-to-end technical and financial evaluation: sampling, laboratory testwork, grade-tonnage verification, bespoke flowsheets and integrated capex/opex models.' },
    { n: '02', t: 'Technical due diligence', d: 'Independent assessment of ore characteristics, plant performance, optimisation upside and the alignment between resource and processing strategy.' },
    { n: '03', t: 'Processing optimisation', d: 'Full-resource utilisation. We design for recoveries, waste reduction and mineral security across the full stream — not just the headline metal.' },
    { n: '04', t: 'Legacy re-mining', d: 'Turning historical liabilities into economic and environmental value. Tailings, dumps and abandoned co-products reborn as commercial resources.' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Minerals  /  What we do</div>
            <h2 style={{ marginTop: 20 }}>Smarter extraction.<br />Total resource utilisation.</h2>
          </div>
          <p>
            We deliver metallurgical, processing and supply-chain insights that
            improve project economics, reduce technical risk and unlock the
            material that traditional models leave behind.
          </p>
        </div>
        <div className="grid grid-4">
          {services.map(s => (
            <div className="card" key={s.n}>
              <span className="num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          <button className="btn" onClick={() => setPage('minerals')}>Full Minerals practice &rarr;</button>
          <button className="btn btn-ghost" onClick={() => setPage('projects')}>Read case studies</button>
        </div>
      </div>
    </section>
  );
}

function HomeFeature() {
  return (
    <section className="section" style={{ background: 'var(--forest)', color: 'var(--cream)' }}>
      <div className="container">
        <div className="split">
          <div>
            <div className="eyebrow" style={{ color: 'rgba(232,226,208,0.7)' }}>
              <span className="dot" style={{ background: 'var(--gold)' }}></span>Position
            </div>
            <p className="quote" style={{ marginTop: 24, color: 'var(--cream)' }}>
              Africa’s share of the energy transition will not be decided in
              boardrooms abroad. It will be decided in our tailings dams, our
              co-product streams, and the way we choose to value what is already
              under our feet.
            </p>
            <p style={{ marginTop: 32, color: 'rgba(232,226,208,0.75)', maxWidth: '46ch' }}>
              We believe the next decade of critical-mineral supply belongs to the
              operators willing to look twice — first at the orebody, then at
              everything around it.
            </p>
          </div>
          <Ph label="Photo: ore sample, magnified" height={420} src={IMG.mining} style={{ background: 'rgba(0,0,0,0.18)', border: '1px solid rgba(255,255,255,0.18)' }} />
        </div>
      </div>
    </section>
  );
}

function HomeLands({ setPage }) {
  const streams = [
    { n: '01', t: 'Open-field horticulture', d: 'Potato, carrot, peas, onion and cabbage across 4.2 ha of rotated beds. Timed against the Zimbabwean market for festive and dry-season premium windows.' },
    { n: '02', t: 'Greenhouse cropping', d: 'Four 500 m² tunnels growing tomato, English cucumber and coloured pepper year-round. Drip-fed from two boreholes, off-season pricing power.' },
    { n: '03', t: 'Broiler poultry', d: 'A 10,000-bird broiler house running seven cycles a year. Integrated maize cropping cuts feed costs; litter is composted back onto the fields.' },
    { n: '04', t: 'Boer & Kalahari goats', d: 'Meat-breed flock rotated across 1.7 ha of paddock. Chevon sold to Harare retail at USD 7–9/kg, slaughter timed to pre-Christmas premium.' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Lands  /  Above ground</div>
            <h2 style={{ marginTop: 20 }}>Five enterprises.<br />One circular farm.</h2>
          </div>
          <p>
            Rehoboth Farm sits on 12.3 hectares of black clay and red clay loam
            outside Selous, Mashonaland West &mdash; 80 km from Harare, 15 km from
            Chegutu. Five enterprises are run as one integrated, self-financing
            operation, with each waste stream feeding the next.
          </p>
        </div>
        <div className="grid grid-4">
          {streams.map(s => (
            <div className="card" key={s.n}>
              <span className="num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          <button className="btn" onClick={() => setPage('lands')}>Full Lands practice &rarr;</button>
          <button className="btn btn-ghost" onClick={() => setPage('visit')}>Plan a visit</button>
        </div>
      </div>
    </section>
  );
}

function HomeVisit({ setPage }) {
  return (
    <section className="section" style={{ background: 'var(--bg-deep)' }}>
      <div className="container">
        <div className="split">
          <Ph label="Photo: chalet exterior, dawn" height={520} src={IMG.chalet} />
          <div>
            <div className="eyebrow"><span className="dot"></span>Visit  /  Agritourism</div>
            <h2 style={{ marginTop: 20, fontSize: 'var(--h2)' }}>Stay a while.</h2>
            <p style={{ color: 'var(--fg-mute)', marginTop: 24, marginBottom: 16, maxWidth: '44ch' }}>
              Five thirty-square-metre farm-stay chalets in the southern homestead
              cluster. Off-grid solar, boma firepit, an open kitchen at the
              farmhouse, and the run of the fields between meals.
            </p>
            <p style={{ color: 'var(--fg-mute)', marginBottom: 32, maxWidth: '44ch' }}>
              Two-night minimum. Greenhouse tours, poultry day, goat walk, and
              dinner with whatever the kitchen pulled out of the ground that
              morning.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '32px 0', display: 'grid', gap: 12 }}>
              {[
                ['From', 'USD 35–65 per night  &middot;  full board option'],
                ['Capacity', '5 chalets  &middot;  10–12 guests'],
                ['Drive time', '80 km from Harare  &middot;  15 km from Chegutu'],
              ].map(([k, v], i) => (
                <li key={i} style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 16, paddingBottom: 12, borderBottom: '1px solid var(--line)' }}>
                  <span className="mono" style={{ color: 'var(--fg-faint)', textTransform: 'uppercase', fontSize: 12 }}>{k}</span>
                  <span dangerouslySetInnerHTML={{ __html: v }}></span>
                </li>
              ))}
            </ul>
            <button className="btn" onClick={() => setPage('visit')}>Plan a visit &rarr;</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeProjects({ setPage }) {
  const projects = [
    { n: '2010', t: 'Primrose Mine & Tutonic Dump', loc: 'Kwekwe & Filabusi, Zimbabwe', d: 'Full feasibility & technical due diligence on two gold tailings operations totalling 14,000+ oz contained gold. Bespoke metallurgical flowsheets and integrated financial model.' },
    { n: '2016', t: 'Eastern Highlands Diamond Operation', loc: 'Manicaland, Zimbabwe', d: 'Specialist mineral-processing input to investor-led due diligence. Ore characterisation, plant performance and alignment of resource attributes to processing strategy.' },
    { n: '2022', t: 'Copper Co-Product Strategy', loc: 'Zambian Copperbelt', d: 'Co-product-first recovery strategy for cobalt, nickel and rare-earth phases inside an active copper concentrator stream. (Engagement details NDA-bound.)' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Projects  /  Selected work</div>
            <h2 style={{ marginTop: 20 }}>Below the surface, on record.</h2>
          </div>
          <p>
            A short slate of representative engagements across Zimbabwe, Zambia
            and South Africa. Many more sit under non-disclosure.
          </p>
        </div>
        <div>
          {projects.map((p, i) => (
            <div className="list-row" key={i} onClick={() => setPage('projects')} style={{ cursor: 'pointer' }}>
              <span className="num">{p.n}</span>
              <div>
                <h3>{p.t}</h3>
                <p className="desc">{p.d}</p>
              </div>
              <span className="meta">{p.loc}</span>
              <span className="cta">Read &rarr;</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 48 }}>
          <button className="btn btn-ghost" onClick={() => setPage('projects')}>All projects &rarr;</button>
        </div>
      </div>
    </section>
  );
}

function HomeCTA({ setPage }) {
  return (
    <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>Begin the conversation</div>
        <h2 style={{ fontSize: 'clamp(40px, 5vw, 80px)', marginTop: 24, maxWidth: '20ch', marginLeft: 'auto', marginRight: 'auto' }}>
          We answer all serious enquiries within two working days.
        </h2>
        <div style={{ marginTop: 40, display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn" style={{ background: 'var(--forest)', color: 'var(--cream)' }} onClick={() => setPage('contact')}>Send a brief &rarr;</button>
          <button className="btn btn-ghost" onClick={() => setPage('insights')}>Read recent insights</button>
        </div>
      </div>
    </section>
  );
}

function Home({ hero, subBrand, setSubBrand, setPage, sectionOrder }) {
  const sections = {
    intro:    <HomeIntro setPage={setPage} key="intro" />,
    stats:    <HomeStats key="stats" />,
    minerals: <HomeMinerals setPage={setPage} key="minerals" />,
    feature:  <HomeFeature key="feature" />,
    lands:    <HomeLands setPage={setPage} key="lands" />,
    visit:    <HomeVisit setPage={setPage} key="visit" />,
    projects: <HomeProjects setPage={setPage} key="projects" />,
    cta:      <HomeCTA setPage={setPage} key="cta" />,
  };
  return (
    <div className="page-fade">
      <div style={{ padding: '14px var(--pad-x) 0', display: 'flex', justifyContent: 'flex-end', gap: 12, alignItems: 'center' }}>
        <span className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>View as</span>
        <SubBrandToggle value={subBrand} onChange={setSubBrand} />
      </div>
      <Hero layout={hero} subBrand={subBrand} setPage={setPage} />
      {sectionOrder.map(id => sections[id])}
    </div>
  );
}

window.Home = Home;