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

function AboutHero() {
  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)'}}>About</span>
        </div>
        <span className="eyebrow page-hero__eyebrow">About STM</span>
        <h1 className="page-hero__title">
          Operators first.<br/>
          <em>Always.</em>
        </h1>
        <p className="page-hero__sub">
          Technology, AI, and infrastructure — built and operated from Oman.
          We run the systems we recommend.
        </p>
      </div>
    </section>
  );
}

function StorySection() {
  return (
    <section className="sec-paper">
      <div className="sec-inner">
        <div className="two-col two-col--wide-right">
          <div>
            <span className="eyebrow" style={{color:'var(--jade)', display:'block', marginBottom:16}}>Our story</span>
            <h2 style={{margin:0, fontSize:'clamp(32px,4vw,50px)', fontWeight:500, letterSpacing:'-0.025em', lineHeight:1.05, color:'var(--ink-950)'}}>
              We started with a question: why are technology companies so disconnected from real operations?
            </h2>
          </div>
          <div style={{paddingTop:8}}>
            <p style={{fontSize:17, color:'rgba(11,20,38,0.6)', lineHeight:1.65, margin:'0 0 20px'}}>
              STM was founded to close that gap. Too many technology firms advise on systems they have never had to run, recommend software they have never had to maintain, and invest in infrastructure they have never had to monitor at 3am. We are different.
            </p>
            <p style={{fontSize:17, color:'rgba(11,20,38,0.6)', lineHeight:1.65, margin:'0 0 20px'}}>
              Based in Oman, STM operates across five complementary business lines: digital product engineering, applied AI consultancy, infrastructure field engineering, Bitcoin mining infrastructure, and strategic investments. That breadth is deliberate — it keeps us honest about what technology actually takes.
            </p>
            <p style={{fontSize:17, color:'rgba(11,20,38,0.6)', lineHeight:1.65, margin:0}}>
              When STM ships digital products, we know what it means to support them in production. When STM consults on AI — including{' '}
              <strong style={{fontWeight:600, color:'var(--ink-950)'}}>AI agent deployments</strong>
              {' '}with clear roles, tool permissions, auditability, and human-in-the-loop controls — we have already applied similar techniques internally.
            </p>
          </div>
        </div>

        {/* Mission pull-quote */}
        <div className="story-pull">
          <span className="eyebrow" style={{color:'var(--jade)', display:'block', marginBottom:16}}>Our mission</span>
          <blockquote>
            "To build practical technology products, run dependable digital infrastructure, and invest in businesses that create durable value —{' '}
            <em>with honesty about what each demands.</em>"
          </blockquote>
        </div>
      </div>
    </section>
  );
}

const VALUES = [
  {
    icon: (
      <svg width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.8" style={{color:'var(--jade)'}}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
      </svg>
    ),
    title: 'Operators first',
    body: 'We run the systems we recommend. Our advice is grounded in experience, not theory. If we haven\'t done it ourselves, we say so.',
  },
  {
    icon: (
      <svg width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.8" style={{color:'var(--copper)'}}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
    ),
    title: 'Specificity over vagueness',
    body: 'We say what we do and what we don\'t do. Clients and partners know exactly what to expect. No overpromising, no jargon to hide behind.',
  },
  {
    icon: (
      <svg width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.8" style={{color:'var(--jade)'}}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>
    ),
    title: 'Built for durability',
    body: 'Short-cycle thinking produces short-lived results. We design software, infrastructure, and investments to last under real conditions.',
  },
  {
    icon: (
      <svg width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.8" style={{color:'var(--copper)'}}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064"/>
      </svg>
    ),
    title: 'Regional roots, global standards',
    body: 'Proudly based in Oman, we understand the regional context deeply — while holding our work to international technical and professional standards.',
  },
  {
    icon: (
      <svg width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.8" style={{color:'var(--jade)'}}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0"/>
      </svg>
    ),
    title: 'Small team, clear ownership',
    body: 'We maintain a focused team with clear responsibility. Every project and system has an owner. Nothing is committee-managed into mediocrity.',
  },
  {
    icon: (
      <svg width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.8" style={{color:'var(--copper)'}}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
      </svg>
    ),
    title: 'Capital follows conviction',
    body: 'We invest where we understand the technology, the operations, and the risk. Our strategic investments reflect real judgment, not diversification for its own sake.',
    dark: true,
  },
];

function ValuesSection() {
  return (
    <section className="sec-paper-2">
      <div className="sec-inner">
        <div className="sec-header" style={{color:'var(--ink-950)'}}>
          <span className="eyebrow" style={{color:'var(--copper)', display:'block', marginBottom:14}}>How we work</span>
          <h2 style={{color:'var(--ink-950)'}}>Principles that guide every decision.</h2>
        </div>
        <div className="values-grid">
          {VALUES.map((v, i) => (
            <div key={i} className="value-card" style={v.dark ? {background:'var(--ink-950)'} : {}}>
              <div className="value-card__icon">{v.icon}</div>
              <h3>{v.title}</h3>
              <p>{v.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const LINES = [
  { n:'01', color:'jade',   title:'Digital Product Engineering',          body:'We build consumer software products — mobile apps, platforms, and tools — with a focus on usability, performance, and clean engineering. Flagship: Rihla, an AI-powered travel planning app on iOS.', href:'services.html#software' },
  { n:'02', color:'jade',   title:'AI Consultancy & Custom Solutions',     body:'We help organisations identify where AI creates real operational value, then build the workflows, automation, and production-grade AI agent deployments to deliver it.', href:'services.html#ai' },
  { n:'03', color:'copper', title:'Infrastructure Field Engineering',      body:'Field diagnostics, preventive maintenance, fault response, and dependable systems support for critical infrastructure where reliability matters.', href:'services.html#it' },
  { n:'04', color:'copper', title:'Bitcoin Mining Operations',             body:'We participate in Bitcoin mining as an active operator. 220 Antminer S19j Pro+ units (~26-27 PH/s) containerised at Green Data City, managed day to day by STM.', href:'services.html#mining' },
  { n:'05', color:'jade',   title:'Strategic Investments',                 body:'We invest where we have operational understanding — including Bitcoin mining capacity we host and operate ourselves at Green Data City.', href:'services.html#invest' },
];

function BusinessLinesSection() {
  return (
    <section className="sec-dark">
      <div className="sec-inner">
        <div className="sec-header" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:60, alignItems:'end', marginBottom:60}}>
          <div>
            <span className="eyebrow" style={{color:'var(--jade)', display:'block', marginBottom:14}}>What we do</span>
            <h2 style={{margin:0, fontSize:'clamp(32px,4vw,50px)', fontWeight:500, letterSpacing:'-0.025em', lineHeight:1.05}}>Five integrated business lines.</h2>
          </div>
          <p style={{margin:0, fontSize:16, color:'rgba(255,255,255,0.5)', lineHeight:1.65}}>
            Each line is independent, but they reinforce each other. Infrastructure field engineering informs digital product decisions. Digital products inform AI. AI informs investment theses.
          </p>
        </div>
        <ul className="num-list">
          {LINES.map(l => (
            <li key={l.n} style={{display:'grid', gridTemplateColumns:'40px 1fr auto', gap:20, padding:'24px 0', borderTop:'1px solid rgba(255,255,255,0.06)', alignItems:'start'}}>
              <span className="eyebrow-num" style={{color: l.color === 'jade' ? 'var(--jade)' : 'var(--copper)', paddingTop:2}}>{l.n}</span>
              <div>
                <strong style={{display:'block', fontSize:18, fontWeight:500, color:'#fff', letterSpacing:'-0.01em', marginBottom:6}}>{l.title}</strong>
                <span style={{fontSize:14, color:'rgba(255,255,255,0.5)', lineHeight:1.55}}>{l.body}</span>
              </div>
              <a href={l.href} className="btn-ghost-b" style={{fontSize:12, padding:'8px 16px', whiteSpace:'nowrap', alignSelf:'center'}}>
                Details →
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function AboutPage() {
  return (
    <div className="page-b">
      <NavB active="about"/>
      <AboutHero/>
      <StorySection/>
      <ValuesSection/>
      <BusinessLinesSection/>
      <CtaB/>
      <FooterB/>
    </div>
  );
}

window.AboutPage = AboutPage;