// Services overview — lists both services with detailed cards
function ServicesApp() {
  useReveal();
  return (
    <>
      <Nav/>
      <main>
        <PageHero
          eyebrow="Services"
          crumbs={[{label:'Home', href:'index.html'}, {label:'Services'}]}
          title={<>From the rack to the runtime — one accountable <span className="accent">partner.</span></>}
          sub="Two connected services. The AI platform that runs your models, and the data-center infrastructure that runs the platform."
        />

        <section className="section">
          <div className="wrap">
            <div className="line-grid">
              {SERVICE_LINES.map((l, i) => (
                <div key={l.id} className={`line-card reveal d${i+1}`}>
                  <div className="eyebrow">{l.eyebrow}</div>
                  <h3>{l.title}</h3>
                  <p className="desc">{l.desc}</p>
                  <ul className="child-list">
                    {l.children.map(c => <li key={c}>{c}</li>)}
                  </ul>
                  <div className="footer-link">
                    <b>Detailed scope</b>
                    <a className="sol-cta" href={l.href}>View service <I.arrow/></a>
                  </div>
                </div>
              ))}
            </div>

            <div className="reveal" style={{marginTop: 100}}>
              <div className="section-head" style={{marginBottom: 32}}>
                <div className="eyebrow">How it fits together / 02</div>
                <h2 style={{maxWidth: 720}}>A stacked delivery model.</h2>
                <p>Engage either service independently, or stack them — physical AIDC delivery flowing into platform operations and security. The handoff between layers is the part that usually breaks; we own it end-to-end.</p>
              </div>
              <div className="highlights">
                <div className="hl">
                  <div className="ico"><I.cube/></div>
                  <h4>Single-vendor accountability</h4>
                  <p>One contract, one project owner — across infrastructure, platform, and operations.</p>
                </div>
                <div className="hl">
                  <div className="ico"><I.loop/></div>
                  <h4>End-to-end design</h4>
                  <p>Architecture decisions made with full visibility from data-hall thermals to model serving SLAs.</p>
                </div>
                <div className="hl">
                  <div className="ico"><I.shield/></div>
                  <h4>Governable from day one</h4>
                  <p>Security, quota, and operational controls embedded in the platform — not bolted on at the end.</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <CTABanner
          title="Not sure which service fits?"
          sub="Tell us about your environment and goals. A short briefing call is usually enough to map the right starting point."
          primary="Talk to us"
          primaryHref="contact.html"
          secondary="See solutions"
          secondaryHref="solutions.html"
        />
      </main>
      <Footer/>
    </>
  );
}

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