// pages-minerals.jsx — Minerals service page + Projects case studies

function MineralsPage({ setPage }) {
  const services = [
    {
      n: '01', t: 'Feasibility studies & technical due diligence',
      d: 'End-to-end evaluation: sampling campaigns, laboratory testwork, grade-tonnage verification, bespoke metallurgical flowsheets, plant configuration, and integrated financial models covering capex, opex, recoveries and project economics.',
      points: ['Resource sampling & QA/QC', 'Bench and pilot test programmes', 'Flowsheet design & trade-off studies', 'Bankable financial models'],
    },
    {
      n: '02', t: 'Processing optimisation & waste reduction',
      d: 'Total-resource thinking. We design for recoveries across the full mineral assemblage, identify the bottlenecks throttling your concentrator, and reduce the volume and grade of what leaves as tails.',
      points: ['Plant audit & circuit modelling', 'Reagent and comminution strategy', 'Recovery upside studies', 'Tailings reduction programmes'],
    },
    {
      n: '03', t: 'Co-product-first recovery strategies',
      d: 'Most operations are designed around one headline metal. We map the by-products and co-products travelling through your circuit, then build a recovery strategy that treats them as primary, not residual.',
      points: ['Co-product mapping & valuation', 'Stream-by-stream recovery design', 'Marketability & off-take research', 'Critical-mineral integration plans'],
    },
    {
      n: '04', t: 'Remining of legacy waste & tailings',
      d: 'Many of Africa’s historical dumps were deposited when recoveries were poor and prices were lower. We assess, characterise and re-engineer those liabilities into active resources.',
      points: ['Dump & tailings characterisation', 'Re-mining economic studies', 'Environmental remediation modelling', 'Closure-cost offset programmes'],
    },
  ];

  return (
    <div className="page-fade">
      <PageHead
        crumbs="Mamlakuwth / Minerals"
        title="Mineral processing & supply-chain consultancy for the energy transition."
        lede="We help mining companies, developers and investors unlock value from underutilised and secondary resources — strengthening Africa’s role in critical mineral supply chains."
      >
        <div style={{ display: 'flex', gap: 16, marginTop: 32, flexWrap: 'wrap' }}>
          <button className="btn" onClick={() => setPage('contact')}>Request a capability statement &rarr;</button>
          <button className="btn btn-ghost" onClick={() => setPage('projects')}>See case studies</button>
        </div>
      </PageHead>

      {/* Hero image */}
      <section style={{ padding: '0 var(--pad-x)', marginTop: -1 }}>
        <div className="container">
          <Ph label="Photo: tailings deposit / processing plant" height={420} src={IMG.mining} />
        </div>
      </section>

      {/* Belief */}
      <section className="section">
        <div className="container">
          <div className="split">
            <div>
              <div className="eyebrow"><span className="dot"></span>Position</div>
              <p className="quote" style={{ marginTop: 24 }}>
                Total resource utilisation is not a sustainability slogan. It
                is the cheapest critical-mineral supply available to Africa,
                and it sits inside circuits we already operate.
              </p>
            </div>
            <div>
              <p style={{ color: 'var(--fg-mute)', marginBottom: 16 }}>
                The energy transition has changed which metals matter and how
                they move. Lithium, cobalt, nickel, rare-earths, copper — many
                of them already pass through Sub-Saharan plants as
                co-products, by-products or losses to tails.
              </p>
              <p style={{ color: 'var(--fg-mute)', marginBottom: 16 }}>
                Mamlakuwth Minerals exists to surface that value. We bridge
                geology, metallurgy and market realities so investors and
                operators can move on resources others have not yet
                priced.
              </p>
              <p style={{ color: 'var(--fg-mute)' }}>
                We are practitioners. Every engagement begins with sample in
                hand and ends with a number you can defend.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Services */}
      <section className="section" style={{ background: 'var(--bg-elevated)' }}>
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>Practice areas</div>
              <h2 style={{ marginTop: 20 }}>Four areas of work.</h2>
            </div>
            <p>Each engagement is bespoke; the philosophy is constant. We are conservative on numbers, generous on transparency, and we never bury a risk in a footnote.</p>
          </div>
          <div className="grid grid-2">
            {services.map(s => (
              <div className="card" key={s.n} style={{ padding: 40 }}>
                <span className="num">{s.n}</span>
                <h3 style={{ fontSize: 28 }}>{s.t}</h3>
                <p>{s.d}</p>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8 }}>
                  {s.points.map((p, i) => (
                    <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'baseline', fontSize: 14, color: 'var(--fg-mute)' }}>
                      <span style={{ color: 'var(--accent-2)' }}>&#9656;</span>
                      <span>{p}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Geography */}
      <section className="section">
        <div className="container">
          <div className="sec-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>Geographic focus</div>
              <h2 style={{ marginTop: 20 }}>Where we work.</h2>
            </div>
            <p>Sub-Saharan Africa, with deep operating experience in three jurisdictions and selective engagements elsewhere.</p>
          </div>
          <div className="grid grid-3">
            {[
              { c: 'Zimbabwe', s: 'Home market. Gold tailings, diamond processing, chrome and PGM co-products. Operating since 2010.' },
              { c: 'South Africa', s: 'Selected engagements in gold, PGM and tailings re-mining. Strong partner laboratory network.' },
              { c: 'Zambia', s: 'Copperbelt co-product strategy, particularly cobalt and nickel. Active investor mandates.' },
            ].map((p, 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' }}>0{i+1}</span>
                <h3 style={{ fontSize: 32, margin: '12px 0 16px' }}>{p.c}</h3>
                <p style={{ color: 'var(--fg-mute)' }}>{p.s}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section" style={{ background: 'var(--forest)', color: 'var(--cream)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: 'rgba(232,226,208,0.75)' }}>
            <span className="dot" style={{ background: 'var(--gold)' }}></span>Engage
          </div>
          <h2 style={{ marginTop: 24, fontSize: 'clamp(40px, 5vw, 72px)', maxWidth: '22ch', marginLeft: 'auto', marginRight: 'auto' }}>
            Bring us your sample, your dump or your due-diligence problem.
          </h2>
          <div style={{ marginTop: 40 }}>
            <button className="btn" style={{ background: 'var(--gold)', color: 'var(--ink)' }} onClick={() => setPage('contact')}>
              Start a Minerals engagement &rarr;
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

function ProjectsPage({ setPage }) {
  const [filter, setFilter] = React.useState('all');
  const projects = [
    {
      year: '2010', t: 'Primrose Mine — Gold Tailings Feasibility',
      loc: 'Kwekwe, Zimbabwe', tag: 'gold',
      bullet: 'Feasibility study & technical due diligence',
      body: 'End-to-end sampling, laboratory testwork and grade-tonnage verification on a historic gold tailings deposit. Bespoke flowsheet design aligned to material characteristics, plant configuration, operating philosophy and a full capex/opex financial model.',
      stat: '14,000+ oz', statL: 'contained gold characterised (combined with Tutonic)',
    },
    {
      year: '2010', t: 'Tutonic Dump — Gold Tailings Feasibility',
      loc: 'Filabusi, Zimbabwe', tag: 'gold',
      bullet: 'Feasibility study & technical due diligence',
      body: 'Companion engagement to Primrose. Integrated sampling and testwork programme, with metallurgical flowsheet, operating-philosophy definition, and a bankable financial model for project developers and equity providers.',
      stat: '2', statL: 'sites delivered under one integrated investor mandate',
    },
    {
      year: '2016', t: 'Diamond Operation — Mineral Processing DD',
      loc: 'Eastern Highlands, Zimbabwe', tag: 'diamond',
      bullet: 'Investor-led technical due diligence',
      body: 'Specialist mineral-processing input to investor-led due diligence on an active diamond operation. Ore-characteristic assessment, plant performance review, identification of optimisation and recovery upside, and a candid view on the technical risks and alignment between resource and processing strategy.',
      stat: '6', statL: 'optimisation interventions identified, three implemented',
    },
    {
      year: '2019', t: 'PGM Tailings Re-mining Pre-feasibility',
      loc: 'Bushveld Complex, South Africa', tag: 'pgm',
      bullet: 'Pre-feasibility & flowsheet trade-off',
      body: 'Tailings re-mining pre-feasibility on a historical platinum-group dump. Comminution and flotation trade-off studies, recovery scenarios across two reagent suites, environmental closure offset modelling, and an indicative go/no-go for the asset owner.',
      stat: 'PFS', statL: 'pre-feasibility delivered in 14 weeks',
    },
    {
      year: '2022', t: 'Copper Concentrator Co-Product Strategy',
      loc: 'Zambian Copperbelt', tag: 'copper',
      bullet: 'Co-product-first recovery strategy  (NDA)',
      body: 'Co-product mapping and recovery strategy for cobalt, nickel and rare-earth phases moving through an active copper concentrator. Stream-by-stream characterisation, recovery flowsheet options, off-take landscape and a phased implementation plan. Engagement details NDA-bound.',
      stat: '3', statL: 'critical-mineral streams scoped as primary outputs',
    },
    {
      year: '2024', t: 'Chrome Co-Product Recovery Audit',
      loc: 'Great Dyke, Zimbabwe', tag: 'chrome',
      bullet: 'Plant audit & co-product recovery upside',
      body: 'Three-week onsite audit of a chrome concentrator with a view to recovering PGM phases historically lost to tails. Mass-balance reconciliation, audit-grade sampling, and a stage-gated recovery plan with capex/opex envelopes.',
      stat: '3 wk', statL: 'onsite audit, 6 weeks reporting',
    },
  ];
  const tags = ['all', 'gold', 'diamond', 'pgm', 'copper', 'chrome'];
  const filtered = filter === 'all' ? projects : projects.filter(p => p.tag === filter);

  return (
    <div className="page-fade">
      <PageHead
        crumbs="Mamlakuwth / Minerals / Projects"
        title="Selected case studies."
        lede="A short, representative slate. Many engagements sit under non-disclosure; happy to discuss relevant work on request."
      />

      <section className="section section-tight">
        <div className="container">
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
            <span className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', marginRight: 12 }}>Filter</span>
            {tags.map(t => (
              <button
                key={t}
                onClick={() => setFilter(t)}
                style={{
                  padding: '8px 16px',
                  border: '1px solid',
                  borderColor: filter === t ? 'var(--accent)' : 'var(--line)',
                  background: filter === t ? 'var(--accent)' : 'transparent',
                  color: filter === t ? 'var(--bg)' : 'var(--fg-mute)',
                  fontFamily: 'var(--font-ui)',
                  fontSize: 12,
                  letterSpacing: '0.08em',
                  textTransform: 'uppercase',
                  borderRadius: 999,
                  transition: 'all 0.2s ease',
                }}
              >{t}</button>
            ))}
          </div>

          <div style={{ marginTop: 56 }}>
            {filtered.map((p, i) => (
              <article key={p.t} style={{
                display: 'grid',
                gridTemplateColumns: '120px 1.5fr 1fr',
                gap: 'var(--gap-lg)',
                padding: '56px 0',
                borderTop: '1px solid var(--line)',
                alignItems: 'start',
              }}>
                <div>
                  <div className="mono" style={{ color: 'var(--fg-faint)', fontSize: 12, letterSpacing: '0.12em' }}>{p.year}</div>
                  <span className="tag" style={{ marginTop: 12 }}>{p.tag}</span>
                </div>
                <div>
                  <div className="mono" style={{ color: 'var(--fg-faint)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase' }}>{p.bullet}</div>
                  <h3 style={{ fontSize: 'clamp(28px, 2.6vw, 40px)', margin: '12px 0 16px' }}>{p.t}</h3>
                  <div className="mono" style={{ color: 'var(--fg-mute)', fontSize: 12, letterSpacing: '0.08em', marginBottom: 20 }}>{p.loc}</div>
                  <p style={{ color: 'var(--fg-mute)', maxWidth: '60ch' }}>{p.body}</p>
                </div>
                <div className="stat" style={{ borderLeft: '1px solid var(--line)', paddingLeft: 32 }}>
                  <span className="num-lg" style={{ fontSize: 64 }}>{p.stat}</span>
                  <span className="lbl">{p.statL}</span>
                </div>
              </article>
            ))}
            {filtered.length === 0 && (
              <p style={{ padding: '80px 0', textAlign: 'center', color: 'var(--fg-faint)' }}>
                No projects match this filter — yet.
              </p>
            )}
          </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' }}>
            More work under NDA. Ask us about your asset class.
          </h2>
          <div style={{ marginTop: 32 }}>
            <button className="btn" onClick={() => setPage('contact')}>Request references &rarr;</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { MineralsPage, ProjectsPage });