// pages-misc.jsx — About, Insights, Careers, Contact

function AboutPage({ setPage }) {
  return (
    <div className="page-fade">
      <PageHead
        crumbs="Mamlakuwth / About"
        title="A Zimbabwean house, two trades, one philosophy."
        lede="Mamlakuwth Consultancy was formed in 2010 as a mineral-processing practice for Sub-Saharan Africa. Mamlakuwth Lands grew from a family-held farm at Selous, developed under the Rehoboth master plan into a five-enterprise commercial operation."
      />

      <section className="section">
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow"><span className="dot"></span>Origin</div>
              <h2 style={{ marginTop: 20, fontSize: 'var(--h2)' }}>How the two halves meet.</h2>
              <p style={{ color: 'var(--fg-mute)', marginTop: 24 }}>
                We began as Global Mining and Processing Consultancy, working
                feasibility and due-diligence mandates across Zimbabwean gold,
                Zambian copper and South African PGM operations. The work was
                technical, the geography hard, and the discipline relentless:
                see the resource for everything it contains, not only what the
                buyer of the day is paying for.
              </p>
              <p style={{ color: 'var(--fg-mute)', marginTop: 16 }}>
                That same discipline shaped how the family farm at Selous came
                to be developed. A 2022 land-use survey by Afrostain Farmtech
                turned a subsistence holding into a fully-planned, five-enterprise
                operation — horticulture, greenhouses, broilers, goats, chalets —
                with each waste stream feeding the next.
              </p>
              <p style={{ color: 'var(--fg-mute)', marginTop: 16 }}>
                In 2024 we rebranded as Mamlakuwth and made the two practices
                public sides of one house.
              </p>
            </div>
            <Ph label="Photo: founder & geologist, 2010" height={520} src={IMG.portraitA} />
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-elevated)' }}>
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>Principles</div>
              <h2 style={{ marginTop: 20 }}>What we believe.</h2>
            </div>
            <p>Five short principles that govern both halves of the work.</p>
          </div>
          <div style={{ display: 'grid', gap: 0 }}>
            {[
              ['See twice', 'Most value left on the table in mining and farming alike comes from looking once. We look twice — at the orebody, at the soil, at the season.'],
              ['Long horizons', 'Tailings dams accumulate for decades. Mukamba trees grow for them. Our timelines are scaled to the material, not the reporting cycle.'],
              ['Resource is plural', 'There is rarely one metal in an ore. There is rarely one crop in a soil. We design for the assemblage.'],
              ['Local first', 'We sell minerals into African supply chains where we can, and food into Zimbabwean kitchens before we ship.'],
              ['Numbers you can defend', 'Every conclusion in our reports is the answer to a sample, a test or a measurement. No hand-waving.'],
            ].map(([t, d], i) => (
              <div key={t} style={{
                display: 'grid', gridTemplateColumns: '80px 1fr 2fr', gap: 'var(--gap-md)',
                padding: '40px 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: 28 }}>{t}</h3>
                <p style={{ color: 'var(--fg-mute)' }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>People</div>
              <h2 style={{ marginTop: 20 }}>Team & associates.</h2>
            </div>
            <p>A small core, deep network. Specialist associates joined per engagement.</p>
          </div>
          <div className="grid grid-3">
            {[
              { r: 'Principal', n: 'Founder & Lead Metallurgist', d: 'Sixteen years on the continent. Gold, diamonds, PGM, chrome, copper.', img: IMG.portraitA },
              { r: 'Estate Manager', n: 'Rehoboth Farm, Selous', d: 'Day-to-day management of the five-enterprise operation. Horticulture, livestock, hospitality.', img: IMG.portraitB },
              { r: 'Associates network', n: 'Geology, finance, market research', d: 'Seven associates across Harare, Johannesburg and Lusaka, briefed per mandate.', img: IMG.portraitC },
            ].map((p, i) => (
              <div key={p.n} className="card">
                <Ph label="Portrait placeholder" height={260} src={p.img} style={{ marginBottom: 8 }} />
                <span className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>{p.r}</span>
                <h3 style={{ fontSize: 22, marginTop: -4 }}>{p.n}</h3>
                <p>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <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.75)' }}>
                <span className="dot" style={{ background: 'var(--gold)' }}></span>Mamlakuwth, the name
              </div>
              <h2 style={{ marginTop: 24, fontSize: 'var(--h2)', color: 'var(--cream)' }}>
                A kingdom held in trust.
              </h2>
            </div>
            <p style={{ color: 'rgba(232,226,208,0.78)', maxWidth: '52ch', fontSize: 18 }}>
              Our name draws on a sense of mam &mdash; the practice of holding
              something for someone else &mdash; and the older idea of land,
              minerals and seasons as inheritances we steward rather than
              spend. It is the simplest way we have found to say what this
              house is for.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

function InsightsPage({ setPage }) {
  const posts = [
    { d: 'May 2026', cat: 'Minerals', t: 'Why African co-products are the cheapest critical-mineral supply in the world.', body: 'A short argument with three charts. We compare the all-in sustaining cost of producing cobalt, nickel and rare-earth oxides as primary minerals against their recovery as engineered co-products from existing copper and PGM concentrators.', mins: 8 },
    { d: 'Mar 2026', cat: 'Minerals', t: 'Tailings re-mining is closure economics in disguise.', body: 'Operators tend to evaluate re-mining as a standalone capex decision. We argue the right number is the closure liability you avoid, plus the resource you unlock, minus the residual closure footprint.', mins: 6 },
    { d: 'Feb 2026', cat: 'Lands', t: 'Two boreholes, ninety thousand litres, twelve hectares.', body: 'A walk-through of the water economics that make Rehoboth Farm work — from the April 2022 groundwater survey, through borehole siting, through drip irrigation across the four greenhouses.', mins: 7 },
    { d: 'Nov 2025', cat: 'Minerals', t: 'A practical taxonomy of “overlooked material”.', body: 'Eight categories — co-product, by-product, tail, dump, dilution, intermediate, off-spec, and waste rock. Each has a different metallurgical and commercial path. We map them.', mins: 10 },
    { d: 'Sept 2025', cat: 'Lands', t: 'Agritourism is a working farm’s second income, not its first.', body: 'A working note for farm owners considering a hospitality programme. The numbers, the human cost, and the rule we follow at Rehoboth: chalets earn 60-70% gross margin, but never set the agronomy.', mins: 5 },
    { d: 'Jul 2025', cat: 'House', t: 'Why a mining consultancy now runs a farm.', body: 'On the discipline shared between metallurgy and agriculture: long horizons, mixed resources, and the refusal to take a single number for an answer.', mins: 4 },
  ];
  const [cat, setCat] = React.useState('All');
  const cats = ['All', 'Minerals', 'Lands', 'House'];
  const filtered = cat === 'All' ? posts : posts.filter(p => p.cat === cat);

  return (
    <div className="page-fade">
      <PageHead
        crumbs="Mamlakuwth / Insights"
        title="Notes from the practice."
        lede="Short, technical, occasionally opinionated. New pieces every four to six weeks."
      />

      <section className="section">
        <div className="container">
          <div style={{ display: 'flex', gap: 8, marginBottom: 56 }}>
            {cats.map(c => (
              <button key={c}
                      onClick={() => setCat(c)}
                      style={{
                        padding: '8px 16px', borderRadius: 999,
                        border: '1px solid', borderColor: cat === c ? 'var(--accent)' : 'var(--line)',
                        background: cat === c ? 'var(--accent)' : 'transparent',
                        color: cat === c ? 'var(--bg)' : 'var(--fg-mute)',
                        fontFamily: 'var(--font-ui)', fontSize: 13,
                        letterSpacing: '0.04em',
                      }}>{c}</button>
            ))}
          </div>

          <div className="grid grid-2">
            {filtered.map((p, i) => (
              <article key={i} className="card" style={{ padding: 40, cursor: 'pointer' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span className="tag">{p.cat}</span>
                  <span className="mono" style={{ color: 'var(--fg-faint)', fontSize: 12 }}>{p.d}  &middot;  {p.mins} min read</span>
                </div>
                <h3 style={{ fontSize: 28, lineHeight: 1.15 }}>{p.t}</h3>
                <p>{p.body}</p>
                <span style={{ marginTop: 'auto', fontFamily: 'var(--font-ui)', fontSize: 13, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--accent)' }}>
                  Read note &rarr;
                </span>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-elevated)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <h2 style={{ fontSize: 'var(--h2)', maxWidth: '22ch', marginLeft: 'auto', marginRight: 'auto' }}>
            Subscribe to the quarterly letter.
          </h2>
          <p style={{ color: 'var(--fg-mute)', marginTop: 16, marginBottom: 32, maxWidth: '50ch', marginLeft: 'auto', marginRight: 'auto' }}>
            Four times a year. New work, sharp arguments, no list-rental nonsense.
          </p>
          <form onSubmit={e => { e.preventDefault(); alert('Thanks — we’ll be in touch.'); }}
                style={{ display: 'flex', gap: 12, maxWidth: 460, margin: '0 auto', flexWrap: 'wrap', justifyContent: 'center' }}>
            <input type="email" required placeholder="your@email.com"
                   style={{ flex: 1, minWidth: 220, padding: 14, background: 'var(--bg)', border: '1px solid var(--line-strong)', color: 'var(--fg)' }} />
            <button className="btn" type="submit">Subscribe</button>
          </form>
        </div>
      </section>
    </div>
  );
}

function CareersPage({ setPage }) {
  const roles = [
    { t: 'Senior Metallurgist — Co-products', loc: 'Harare or Lusaka  /  full-time', d: 'Lead co-product and tailings characterisation programmes across active Copperbelt and Bushveld mandates.' },
    { t: 'Process Engineer', loc: 'Harare  /  full-time', d: 'Flowsheet design, bench and pilot testwork, plant audit. Two to five years of plant or consulting experience.' },
    { t: 'Junior Geologist', loc: 'Harare  /  full-time', d: 'Resource sampling, QA/QC, drillcore management on tailings and dump characterisation programmes.' },
    { t: 'Estate Apprentice — Agroforestry', loc: 'Eastern Highlands  /  12-month placement', d: 'Year-long apprenticeship across the cropping calendar at Mamlakuwth Lands. Stipend, accommodation, the year of your life if you take it seriously.' },
    { t: 'Kitchen Lead — Homestead', loc: 'Eastern Highlands  /  seasonal', d: 'Run the homestead kitchen across the guest season. Heritage grains, open fire, twelve to fourteen diners a sitting.' },
  ];
  return (
    <div className="page-fade">
      <PageHead
        crumbs="Mamlakuwth / Careers"
        title="Work that takes itself seriously."
        lede="A small house, a long apprenticeship. We hire slowly and rarely, and we look for the same thing in metallurgists and bee-keepers: people who would still do the work if no one was watching."
      />

      <section className="section">
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>Open roles</div>
              <h2 style={{ marginTop: 20 }}>Five open positions.</h2>
            </div>
            <p>Most of our roles are filled by referral. We publish them here for the few who arrive cold and would be a good fit anyway.</p>
          </div>
          <div>
            {roles.map((r, i) => (
              <div className="list-row" key={r.t} onClick={() => setPage('contact')} style={{ cursor: 'pointer' }}>
                <span className="num">{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <h3>{r.t}</h3>
                  <p className="desc">{r.d}</p>
                </div>
                <span className="meta">{r.loc}</span>
                <span className="cta">Apply &rarr;</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-elevated)' }}>
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>How we hire</div>
              <h2 style={{ marginTop: 20 }}>The process.</h2>
            </div>
            <p>Same for every role, mining or farming. Roughly four to six weeks end to end.</p>
          </div>
          <div className="grid grid-4">
            {[
              ['01', 'A letter', 'Send a short letter, not a CV-only application. Tell us what you are looking to learn.'],
              ['02', 'A conversation', 'Forty-five minutes by phone. Anywhere in the world. No tricks.'],
              ['03', 'A trial piece', 'A one-day, paid trial — a sample to characterise, a beehive to inspect, a flowsheet to critique.'],
              ['04', 'An offer', 'Made fast if it is a yes. Made fast if it is a no. We will not leave you hanging.'],
            ].map(([n, t, d]) => (
              <div key={n}>
                <span className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.16em' }}>{n}</span>
                <h3 style={{ fontSize: 24, margin: '12px 0 12px', fontFamily: 'var(--font-display)' }}>{t}</h3>
                <p style={{ color: 'var(--fg-mute)', fontSize: 14 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactPage() {
  const [form, setForm] = React.useState({ name: '', email: '', org: '', interest: 'minerals', message: '' });
  const [sent, setSent] = React.useState(false);
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = e => { e.preventDefault(); setSent(true); };

  return (
    <div className="page-fade">
      <PageHead
        crumbs="Mamlakuwth / Contact"
        title="Start the conversation."
        lede="We answer all serious enquiries within two working days."
      />

      <section className="section">
        <div className="container">
          <div className="split" style={{ alignItems: 'flex-start', gap: 'var(--gap-lg)' }}>

            {/* Form / Sent state */}
            <div>
              {sent ? (
                <div style={{ padding: '80px 0' }}>
                  <span className="tag" style={{ marginBottom: 24, display: 'inline-block' }}>Received</span>
                  <h2 style={{ fontSize: 'var(--h2)', marginBottom: 24 }}>Thank you, {form.name || 'friend'}.</h2>
                  <p style={{ color: 'var(--fg-mute)', maxWidth: '50ch', marginBottom: 32 }}>
                    Your note has reached us. We will reply within two working days from our Harare office.
                  </p>
                  <button className="btn btn-ghost" onClick={() => { setSent(false); setForm({ name: '', email: '', org: '', interest: 'minerals', message: '' }); }}>
                    Send another &rarr;
                  </button>
                </div>
              ) : (
                <form onSubmit={submit}>
                  <div className="form-row">
                    <label>Your name</label>
                    <input required value={form.name} onChange={e => update('name', e.target.value)} placeholder="Tendai Moyo" />
                  </div>
                  <div className="form-row">
                    <label>Email</label>
                    <input required type="email" value={form.email} onChange={e => update('email', e.target.value)} placeholder="you@company.com" />
                  </div>
                  <div className="form-row">
                    <label>Company / organisation</label>
                    <input value={form.org} onChange={e => update('org', e.target.value)} placeholder="Optional" />
                  </div>
                  <div className="form-row">
                    <label>What is the enquiry about?</label>
                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8 }}>
                      {[
                        ['minerals', 'Minerals engagement'],
                        ['lands', 'Lands / wholesale'],
                        ['visit', 'Planning a visit'],
                        ['careers', 'Careers'],
                        ['press', 'Press / partnerships'],
                      ].map(([k, l]) => (
                        <button key={k} type="button" onClick={() => update('interest', k)}
                                style={{
                                  padding: '8px 14px', borderRadius: 999,
                                  border: '1px solid',
                                  borderColor: form.interest === k ? 'var(--accent)' : 'var(--line)',
                                  background: form.interest === k ? 'var(--accent)' : 'transparent',
                                  color: form.interest === k ? 'var(--bg)' : 'var(--fg-mute)',
                                  fontFamily: 'var(--font-ui)', fontSize: 13,
                                }}>{l}</button>
                      ))}
                    </div>
                  </div>
                  <div className="form-row">
                    <label>Tell us a little</label>
                    <textarea required value={form.message} onChange={e => update('message', e.target.value)} placeholder="A paragraph or two. Whatever you can share." />
                  </div>
                  <button type="submit" className="btn">Send brief &rarr;</button>
                </form>
              )}
            </div>

            {/* Right column — direct contact + office */}
            <div style={{ position: 'sticky', top: 100 }}>
              <div style={{ borderTop: '1px solid var(--line-strong)', paddingTop: 32 }}>
                <span className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>Direct</span>
                <div style={{ marginTop: 16, display: 'grid', gap: 14 }}>
                  <div>
                    <div className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Minerals</div>
                    <a href="mailto:minerals@mamlakuwth.com" style={{ fontFamily: 'var(--font-display)', fontSize: 22 }}>minerals@mamlakuwth.com</a>
                  </div>
                  <div>
                    <div className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Lands & visits</div>
                    <a href="mailto:lands@mamlakuwth.com" style={{ fontFamily: 'var(--font-display)', fontSize: 22 }}>lands@mamlakuwth.com</a>
                  </div>
                  <div>
                    <div className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Press</div>
                    <a href="mailto:press@mamlakuwth.com" style={{ fontFamily: 'var(--font-display)', fontSize: 22 }}>press@mamlakuwth.com</a>
                  </div>
                </div>
              </div>

              <div style={{ borderTop: '1px solid var(--line-strong)', paddingTop: 32, marginTop: 40 }}>
                <span className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>Offices</span>
                <div style={{ marginTop: 16, display: 'grid', gap: 20 }}>
                  <div>
                    <div className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Harare</div>
                    <p style={{ fontFamily: 'var(--font-display)', fontSize: 18, marginTop: 6 }}>
                      The Hangar, 12 Greendale Avenue<br />Harare, Zimbabwe
                    </p>
                  </div>
                  <div>
                    <div className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Farm (by appointment)</div>
                    <p style={{ fontFamily: 'var(--font-display)', fontSize: 18, marginTop: 6 }}>
                      Rehoboth Farm<br />Selous, Mashonaland West
                    </p>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage, InsightsPage, CareersPage, ContactPage });