/* eslint-disable */
/* ─────────────────────────────────────────────
   SERVICES PAGE — Direction B "Geometric Atlas"
   ───────────────────────────────────────────── */

function ServicesHero() {
  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">
          Five disciplines.<br/>
          <em>One platform.</em>
        </h1>
        <p className="page-hero__sub">
          Each service is backed by direct operating experience. We don't advise on systems we haven't run ourselves.
        </p>
      </div>
    </section>
  );
}

/* ── Jump-nav for the 5 services ── */
function ServicesNav() {
  const links = [
    ['#software', '01', 'Product Engineering'],
    ['#ai',       '02', 'AI Consultancy'],
    ['#it',       '03', 'Infrastructure'],
    ['#mining',   '04', 'Bitcoin Mining'],
    ['#invest',   '05', 'Investments'],
  ];
  return (
    <div style={{
      background: 'var(--ink-900)',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
      position: 'sticky', top: 0,
      zIndex: 40,
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto', padding: '0 40px',
        display: 'flex', gap: 0, overflowX: 'auto',
      }}>
        {links.map(([href, num, label]) => (
          <a key={href} href={href} style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '14px 18px',
            fontFamily: 'var(--font-mono)', fontSize: 11,
            letterSpacing: '0.06em',
            color: 'rgba(255,255,255,0.45)',
            textDecoration: 'none',
            whiteSpace: 'nowrap',
            borderBottom: '2px solid transparent',
            transition: 'color .2s, border-color .2s',
          }}
          onMouseEnter={e => { e.currentTarget.style.color='var(--jade)'; e.currentTarget.style.borderBottomColor='var(--jade)'; }}
          onMouseLeave={e => { e.currentTarget.style.color='rgba(255,255,255,0.45)'; e.currentTarget.style.borderBottomColor='transparent'; }}
          >
            <span style={{color:'rgba(255,255,255,0.25)'}}>{num}</span>
            {label}
          </a>
        ))}
      </div>
    </div>
  );
}

function ServiceBlock({ id, num, accent, icon, label, title, paras, includes, note, link }) {
  const isCopper = accent === 'copper';
  const accentColor = isCopper ? 'var(--copper)' : 'var(--jade)';
  return (
    <div id={id} className="service-block" style={{scrollMarginTop:80}}>
      <div className="two-col two-col--wide-left">
        {/* Left — copy */}
        <div>
          <div className="service-block__tag">
            <div className="service-block__icon">
              {icon}
            </div>
            <span className="eyebrow-num" style={{color: accentColor}}>
              {num} — {label}
            </span>
          </div>
          <h2 className="service-block__title" style={{
            margin: '0 0 20px',
            fontSize: 'clamp(26px,3.2vw,40px)',
            fontWeight: 500,
            letterSpacing: '-0.02em',
            lineHeight: 1.1,
            color: '#fff',
          }}>{title}</h2>
          {paras.map((p, i) => (
            <p key={i} style={{
              color:'rgba(255,255,255,0.6)',
              fontSize:16, lineHeight:1.65,
              margin: i < paras.length - 1 ? '0 0 16px' : '0',
            }} dangerouslySetInnerHTML={{__html: p}}/>
          ))}
          {link && (
            <a href={link.href} className={'service-block__link' + (isCopper ? ' service-block__link--copper' : '')}>
              {link.label} <span>→</span>
            </a>
          )}
        </div>
        {/* Right — cards */}
        <div style={{display:'flex', flexDirection:'column', gap:12}}>
          <div className="includes-card">
            <h4>What this includes</h4>
            <ul className={'bullet-list' + (isCopper ? ' bullet-list--copper' : '')}>
              {includes.map((item, i) => <li key={i} dangerouslySetInnerHTML={{__html: item}}/>)}
            </ul>
          </div>
          {note && (
            <div className="note-card">
              <p><strong>{note.label}</strong> {note.body}</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function ServicesBody() {
  const SERVICES = [
    {
      id: 'software',
      num: '01',
      accent: 'jade',
      icon: (
        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="var(--jade)" strokeWidth="1.8">
          <path strokeLinecap="round" strokeLinejoin="round" d="M8 9l-3 3 3 3m8-6 3 3-3 3M14 5l-4 14"/>
        </svg>
      ),
      label: 'Digital Product Engineering',
      title: 'Digital products with purpose, built to last.',
      paras: [
        'We design and develop software products — mobile applications, web platforms, and internal tools — with a clear focus on user experience, architectural quality, and long-term maintainability. We don\'t build throwaway prototypes; we build products intended to run and grow.',
        'Our flagship product, <strong style="color:#fff;font-weight:500">Rihla AI Travel Planner</strong>, demonstrates this approach: a fully-featured iOS application with AI-powered planning capabilities, a bilingual interface, and a product design refined over multiple iterations.',
      ],
      includes: [
        'iOS and cross-platform mobile application development',
        'Product strategy, UX design, and user research',
        'API design and backend service development',
        'App Store and Play Store submission and management',
        'Ongoing product development and feature iteration',
      ],
      note: {
        label: 'Engagement model.',
        body: 'Project-based or ongoing retainer. We take a limited number of external development projects each year to maintain quality and availability.',
      },
      link: { href:'projects.html#rihla', label:'See Rihla in our projects' },
    },
    {
      id: 'ai',
      num: '02',
      accent: 'jade',
      icon: (
        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="var(--jade)" strokeWidth="1.8">
          <path strokeLinecap="round" strokeLinejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
        </svg>
      ),
      label: 'AI Consultancy & Custom Solutions',
      title: 'Applied AI that delivers measurable operational change.',
      paras: [
        'The value of AI is not in the technology itself — it\'s in correctly identifying where automation, inference, or pattern recognition can reduce friction, improve decisions, or surface insight that would otherwise stay hidden. We help organisations find those points and build working systems at them.',
        'We apply AI internally across our own products and processes first. This means we arrive at client engagements with practical knowledge of integration challenges, evaluation methods, and what actually changes behaviour vs. what just looks impressive in a demo.',
        'For <strong style="color:#fff;font-weight:500">AI agent deployments</strong>, we ship agentic workflows with explicit role boundaries, least-privilege tool access, retrieval and evidence trails that stay auditable, human-in-the-loop checkpoints where decisions carry material risk, and production monitoring that tracks quality drift, failures, and cost.',
      ],
      includes: [
        'AI opportunity mapping and use-case prioritisation',
        'Custom workflow automation and intelligent pipeline design',
        'Agent deployments: orchestration, hardening, rollback paths, and production monitoring',
        'Tool-use agents with permissioned tools, retrieval grounding, policy guardrails, and traceability',
        'Language model integration and prompt engineering',
        'Internal tools with AI-assisted decision support',
        'Evaluation frameworks and output quality measurement',
      ],
      note: {
        label: 'Who we work with.',
        body: 'Regional businesses, government-adjacent organisations, and operators who want practical AI outcomes. We work best with clients who have a specific problem in mind.',
      },
    },
    {
      id: 'it',
      num: '03',
      accent: 'copper',
      icon: (
        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="var(--copper)" strokeWidth="1.8">
          <path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0H3"/>
        </svg>
      ),
      label: 'Infrastructure Field Engineering',
      title: 'Infrastructure field engineering you can run beside production.',
      paras: [
        'Digital operations depend on physical systems performing reliably in the field. STM provides diagnostics, preventive maintenance, fault investigation, and on-site assistance for equipment and infrastructure where uptime matters.',
        'This is a service grounded in direct experience: we manage hardware ourselves across our mining operations and internal systems. We understand failure modes, maintenance schedules, and the cost of downtime from first-hand exposure.',
      ],
      includes: [
        'Hardware health assessments and fault diagnostics',
        'Scheduled preventive maintenance programmes',
        'Repair coordination and component sourcing',
        'On-site technical support and system configuration',
        'Network and infrastructure troubleshooting',
      ],
      note: {
        label: 'Coverage area.',
        body: 'On-site support primarily within Oman. Remote diagnostic and advisory services available more broadly.',
      },
    },
    {
      id: 'mining',
      num: '04',
      accent: 'copper',
      icon: (
        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="var(--copper)" strokeWidth="1.8">
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v18M8.5 6.5h5.25a3.25 3.25 0 010 6.5H8.5h5.75a3.25 3.25 0 010 6.5H8.5"/>
        </svg>
      ),
      label: 'Bitcoin Mining Operations',
      title: 'Infrastructure-led Bitcoin mining, managed from the ground up.',
      paras: [
        'We participate in Bitcoin mining as an active operator, not a passive investor. Our fleet includes 220 Bitmain Antminer S19j Pro+ units, representing roughly 26–27 PH/s of nameplate hashrate, with site power approaching the one-megawatt class once mining load, cooling, and infrastructure overhead are included.',
        'Our approach combines technical hardware management with careful monitoring of network conditions, hashrate economics, and operational efficiency. Our primary Bitcoin mining footprint is a containerised deployment hosted at Green Data City, where we operate our own ASIC fleet as a site client.',
      ],
      includes: [
        'ASIC hardware operations and performance monitoring',
        'Container and thermal management',
        'Pool management and hashrate optimisation',
        'Fault detection, maintenance scheduling, and component replacement',
        'Power infrastructure oversight',
      ],
      note: {
        label: 'Our approach.',
        body: 'We treat mining as an engineering operation, not a financial speculation. Hardware uptime, temperature efficiency, and cost per terahash are the metrics that matter.',
      },
      link: { href:'projects.html#green-data-city', label:'See Green Data City' },
    },
    {
      id: 'invest',
      num: '05',
      accent: 'jade',
      icon: (
        <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="var(--jade)" strokeWidth="1.8">
          <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 19.5h16.5M5 17V8.75L12 4l7 4.75V17M9 17v-5h6v5"/>
        </svg>
      ),
      label: 'Strategic Investments',
      title: 'Capital deployed where we have genuine understanding.',
      paras: [
        'We invest in technology ventures and digital infrastructure businesses where we can make a real assessment of the technology, the operations, and the risk. We don\'t diversify for its own sake. We back businesses and assets where our own domain knowledge gives us an edge in evaluating and supporting them.',
        'Our most visible infrastructure-linked position is Bitcoin mining capacity deployed at <a href="https://www.greendatacity.com/" target="_blank" rel="noopener noreferrer" style="color:var(--jade)">Green Data City</a>: we invested in hashrate and modular container capacity on that site and operate it day to day.',
      ],
      includes: [
        'Technology we understand technically and operationally',
        'Businesses where we can contribute more than capital',
        'Long investment horizon — we are not event-driven traders',
        'Infrastructure and digital asset focus',
        'Partners where operational depth gives us a real edge',
      ],
      note: {
        label: 'Investment discussions.',
        body: 'Building in digital infrastructure, Bitcoin, or adjacent technology and looking for a partner with operational depth? Reach out via our contact page.',
      },
    },
  ];

  return (
    <section className="sec-dark">
      <div className="sec-inner">
        {SERVICES.map(s => <ServiceBlock key={s.id} {...s}/>)}
      </div>
    </section>
  );
}

function ServicesPage() {
  return (
    <div className="page-b">
      <NavB active="services"/>
      <ServicesHero/>
      <ServicesNav/>
      <ServicesBody/>
      <CtaB/>
      <FooterB/>
    </div>
  );
}

window.ServicesPage = ServicesPage;
