/* eslint-disable */
/* ─────────────────────────────────────────────
   SERVICES PAGE — Bitcoin Mining / Green Data City
   Direction B "Geometric Atlas"
   ───────────────────────────────────────────── */

function MiningHero() {
  return (
    <section className="page-hero">
      <div className="page-hero__pattern" aria-hidden="true"/>
      <div className="page-hero__grade" aria-hidden="true"/>
      <div className="page-hero__inner">
        <div className="page-hero__breadcrumb">
          <a href="index.html">Home</a>
          <span>/</span>
          <span style={{color:'rgba(255,255,255,0.55)'}}>Services</span>
        </div>
        <span className="eyebrow page-hero__eyebrow">Our Services</span>
        <h1 className="page-hero__title">
          Infrastructure-led<br/>
          <em>Bitcoin mining.</em>
        </h1>
        <p className="page-hero__sub">
          We participate in Bitcoin mining as an active operator. Hardware, thermals, pool management, fault response — managed from the ground up at Green Data City, Oman.
        </p>
      </div>
    </section>
  );
}

function MiningStats() {
  const stats = [
    { num: '220', label: 'Bitmain S19j Pro+ units' },
    { num: '~27', label: 'PH/s nameplate hashrate' },
    { num: '~1 MW', label: 'site power class' },
    { num: '100%', label: 'STM-operated' },
  ];
  return (
    <div style={{
      background: 'var(--ink-900)',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto', padding: '32px 40px',
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
        gap: 32,
      }}>
        {stats.map((s, i) => (
          <div key={i}>
            <p style={{margin:'0 0 4px', fontSize:'clamp(28px,3vw,40px)', fontWeight:700, letterSpacing:'-0.03em', color:'var(--copper)', lineHeight:1}}>{s.num}</p>
            <p style={{margin:0, fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.1em', color:'rgba(255,255,255,0.4)', textTransform:'uppercase'}}>{s.label}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function GreenDataCitySection() {
  const photos = [
    { src:'photos/IMG-20230719-WA0163.jpg',         label:'CONTAINER INSTALLATION', caption:'Modular mining unit crane-lifted into position at the Green Data City site' },
    { src:'photos/PHOTO-2023-08-15-08-53-02 1.jpg', label:'MINING CONTAINER',       caption:'STM-branded modular mining container at the Green Data City site' },
    { src:'photos/mining-interior-racks.png',        label:'ASIC INTERIOR',          caption:'Bitmain Antminer S19j Pro+ units installed inside the containerised mining environment' },
    { src:'photos/mining-cooling-yard.png',          label:'COOLING INFRASTRUCTURE', caption:'External cooling and container infrastructure supporting the mining operation' },
  ];

  return (
    <section id="green-data-city" style={{scrollMarginTop:80}} className="sec-ink">
      <div className="sec-inner">
        <div className="project-block" style={{borderTop:0, paddingTop:0}}>

          <div className="project-header">
            <div>
              <div style={{display:'flex', gap:8, marginBottom:20, flexWrap:'wrap'}}>
                <span className="project-badge project-badge--copper">Infrastructure</span>
                <span className="project-badge project-badge--jade">Active · STM-operated</span>
              </div>
              <h2 className="project-title">Green Data City</h2>
              <p className="project-desc">
                Green Data City is a digital infrastructure and colocation environment focused on modular Bitcoin mining. STM is a client on the site: we have invested in and operate our own containerised mining deployment within Green Data City, alongside other operators.
              </p>
              <p style={{fontSize:16, color:'rgba(255,255,255,0.55)', lineHeight:1.65, marginTop:16}}>
                This is not a passive investment. The operation includes 220 Bitmain Antminer S19j Pro+ units — roughly 26–27 PH/s of nameplate hashrate — with power demand in the one-megawatt class once mining load, cooling, and supporting infrastructure are included. STM is involved in hardware selection, site setup, operational monitoring, and maintenance.
              </p>
              <div className="project-tags">
                {['Bitcoin mining', 'Modular containers', 'ASIC infrastructure', '~26–27 PH/s', 'STM-operated'].map(t => (
                  <span key={t} className="project-tag">{t}</span>
                ))}
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:12}}>
              <div className="includes-card">
                <h4>Our operational role</h4>
                <ul className="bullet-list bullet-list--copper">
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Site & infrastructure management</strong> — containerised mining units installed and maintained on-site</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Hardware operations</strong> — ASIC miner deployment, performance monitoring, fault response</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Thermal & power management</strong> — cooling systems and power infrastructure oversight</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Pool & hashrate management</strong> — pool selection, optimisation, and performance tracking</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Deployment economics</strong> — we own and manage our mining capacity and equipment on site</li>
                </ul>
              </div>
              <div className="note-card">
                <p><strong>Infrastructure partnerships.</strong> Organisations interested in digital infrastructure partnerships, mining co-location, or related investment discussions are welcome to reach out via our <a href="contact.html" style={{color:'var(--jade)'}}>contact page</a>.</p>
              </div>
            </div>
          </div>

          {/* Photos */}
          <div>
            <span className="eyebrow" style={{color:'rgba(255,255,255,0.3)', display:'block', marginBottom:20}}>Infrastructure photos</span>
            <div className="photo-grid">
              {photos.map((p, i) => (
                <div key={i} className="photo-card">
                  <img src={p.src} alt={p.caption}/>
                  <div className="photo-card__caption">
                    <span className="eyebrow-num">{p.label}</span>
                    <p>{p.caption}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

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

function MiningApproachB() {
  return (
    <section className="sec-dark">
      <div className="sec-inner">
        <div style={{maxWidth:720}}>
          <span className="eyebrow" style={{color:'var(--copper)'}}>— Our approach</span>
          <h2 style={{fontSize:'clamp(28px,3.5vw,44px)', fontWeight:500, letterSpacing:'-0.02em', lineHeight:1.1, color:'#fff', margin:'16px 0 24px'}}>
            Engineering first.<br/><em>Always.</em>
          </h2>
          <p style={{fontSize:17, color:'rgba(255,255,255,0.6)', lineHeight:1.7, marginBottom:20}}>
            We treat mining as an engineering operation, not a financial speculation. Hardware uptime, temperature efficiency, and cost per terahash are the metrics that matter — not price predictions.
          </p>
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(200px, 1fr))', gap:20, marginTop:40}}>
            {[
              { num:'01', h:'Hardware-first', b:'Every unit selected, installed, and monitored by our own team.' },
              { num:'02', h:'Thermal discipline', b:'Cooling infrastructure managed with the same rigour as compute.' },
              { num:'03', h:'Cost per terahash', b:'Operational efficiency — not speculation — drives our decisions.' },
            ].map(c => (
              <div key={c.num} style={{
                background:'rgba(212,145,90,0.04)', border:'1px solid rgba(212,145,90,0.15)',
                borderRadius:14, padding:'24px 20px',
              }}>
                <p style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--copper)', letterSpacing:'0.1em', margin:'0 0 10px'}}>{c.num}</p>
                <p style={{fontSize:15, fontWeight:500, color:'#fff', margin:'0 0 8px'}}>{c.h}</p>
                <p style={{fontSize:13.5, color:'rgba(255,255,255,0.45)', lineHeight:1.55, margin:0}}>{c.b}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function MiningPage() {
  return (
    <div className="page-b">
      <NavB active="services"/>
      <MiningHero/>
      <MiningStats/>
      <GreenDataCitySection/>
      <MiningApproachB/>
      <CtaB/>
      <FooterB/>
    </div>
  );
}

window.MiningPage = MiningPage;