// Infrastructure Services — Global AIDC & GPU Infrastructure
const ANCHOR_BY_NUM = {
  '01': 'network-design',
  '02': 'rack-stack',
  '03': 'logical',
  '04': 'testing',
  '05': 'handover'
};

const InfraIntro = () =>
<section className="section">
    <div className="wrap">
      <div className="two-col">
        <div className="col-left reveal">
          <div className="eyebrow" style={{ marginBottom: 18 }}>Service 01</div>
          <h2>Global AIDC & GPU Infrastructure Solution Provider.</h2>
          <p style={{ marginTop: 18 }}>Design, deployment, cabling, fit-out, and operations delivered as a single coordinated practice. Built around the reality of modern AI compute: high power, high density, high bandwidth, low tolerance for handoff failures.

        </p>
          <div className="gpu-chips reveal" style={{ marginTop: 32 }}>
            {GPU_MODELS.map((g) => <span key={g} className="gpu-chip">{g}</span>)}
          </div>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '.14em', color: 'var(--ink-4)', marginTop: 14 }}>
            GPU PLATFORMS DEPLOYED IN PRODUCTION
          </div>
        </div>
        <div className="reveal d2">
          <div className="highlights" style={{ marginTop: 0, gridTemplateColumns: '1fr', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
            <div className="hl" style={{ borderRight: 'none', borderBottom: '1px solid var(--line)', paddingRight: 0 }}>
              <div className="ico"><I.cube /></div>
              <h4>Cross-regional delivery capability</h4>
              <p>Global delivery coordinated under one project owner, with on-the-ground presence across APAC, the Middle East, Europe, and the US.</p>
            </div>
            <div className="hl" style={{ borderRight: 'none', borderBottom: '1px solid var(--line)', paddingRight: 0, paddingLeft: 0 }}>
              <div className="ico"><I.spark /></div>
              <h4>Focused on data-center infrastructure & ICT engineering</h4>
              <p>Not a generalist. We are a specialist team built around the operational details that determine whether AI clusters actually run.</p>
            </div>
            <div className="hl" style={{ borderRight: 'none', borderBottom: 'none', paddingRight: 0, paddingLeft: 0 }}>
              <div className="ico"><I.shield /></div>
              <h4>Strong AI / GPU cluster deployment expertise</h4>
              <p>Production deployments across NVIDIA's latest platforms, from H100 to GB300 at scale.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>;


const CoreServices = () =>
<section className="section" style={{ background: '#fff', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
    <div className="wrap">
      <div className="section-head reveal">
        <div className="eyebrow">Core services / 02</div>
        <h2>End-to-end delivery for AI data-center infrastructure.</h2>
        <p>Five core service offerings to engage individually, or together as a coordinated AIDC build.</p>
      </div>
      <div className="reveal d1">
        {INFRA_SERVICES.map((s, i) =>
      <div key={s.num} id={ANCHOR_BY_NUM[s.num]} className="infra-row">
            <div className="num">{s.num} / 05</div>
            <div className="infra-content">
              <div className="infra-head">
                <div className="meta">{s.tag}</div>
                <h3>{s.title}</h3>
              </div>
              <div className="infra-body">
                <p>{s.desc}</p>
                <div className="bullets">
                  <ul>
                    {s.bullets.map((b) => <li key={b}>{b}</li>)}
                  </ul>
                </div>
              </div>
            </div>
          </div>
      )}
      </div>
    </div>
  </section>;


const DeliveryWorkflow = () =>
<section className="section">
    <div className="wrap">
      <div className="section-head reveal">
        <div className="eyebrow">Delivery workflow / 03</div>
        <h2 style={{ maxWidth: 720 }}>Six-step delivery workflow.</h2>
        <p>The execution pattern we use on every cluster build — sequenced so handoffs between trades happen on time and on spec.</p>
      </div>
      <div className="workflow reveal d1">
        {DELIVERY_WORKFLOW.map((s, i) =>
      <div key={s.n} className="wf-step">
            <div className="n">{s.n}</div>
            <h5>{s.title}</h5>
            {i < DELIVERY_WORKFLOW.length - 1 &&
        <span className="arrow"><I.arrow /></span>
        }
          </div>
      )}
      </div>

      <div className="reveal" style={{ marginTop: 80 }}>
        <div className="section-head" style={{ marginBottom: 32 }}>
          <div className="eyebrow">Typical use cases / 04</div>
          <h2 style={{ maxWidth: 720, fontSize: 'clamp(28px, 3vw, 38px)' }}>Where this delivery model fits.</h2>
        </div>
        <div className="highlights">
          <div className="hl">
            <div className="ico"><I.cube /></div>
            <h4>AI training clusters</h4>
            <p>Large-scale multi-node GPU builds for foundation-model and fine-tuning workloads.</p>
          </div>
          <div className="hl">
            <div className="ico"><I.spark /></div>
            <h4>Inference clusters</h4>
            <p>High-throughput serving fabrics for production LLM and vision workloads.</p>
          </div>
          <div className="hl">
            <div className="ico"><I.loop /></div>
            <h4>HPC environments</h4>
            <p>Scientific compute and simulation clusters where bandwidth and density matter.</p>
          </div>
        </div>
      </div>
    </div>
  </section>;


function InfraApp() {
  useReveal();
  return (
    <>
      <Nav />
      <main>
        <PageHero
          eyebrow="Infrastructure Services"
          crumbs={[{ label: 'Home', href: 'index.html' }, { label: 'Services', href: 'services.html' }, { label: 'Infrastructure' }]}
          title={<>Global AIDC and GPU Infrastructure <span className="accent">solution provider.</span></>}
          sub="Design · Deployment · Cabling · Fit-Out · Operations. End-to-end delivery for AI data-center infrastructure globally."
          image="assets/infra-hero-bg.png">
          
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a href="success-stories.html" className="btn btn-primary">See Success Stories <I.arrow /></a>
            <a href="architecture.html" className="btn btn-ghost">Explore Architecture</a>
          </div>
        </PageHero>
        <InfraIntro />
        <CoreServices />
        <DeliveryWorkflow />
        <CTABanner
          title="Planning a GPU cluster or AIDC build?"
          sub="From a single rack to a 60+ node GB200 cluster — talk to us about scope, timeline, and on-the-ground delivery."
          primary="Start scoping"
          primaryHref="contact.html"
          secondary="See AI Platform services"
          secondaryHref="ai-platform.html" />
        
      </main>
      <Footer />
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<InfraApp />);