// Home page — editorial-corporate composition.
// Sections: masthead-style hero · technology rail · two services ·
// dark-slab case study · operating outcomes · CTA.

const HomeHero = () => (
  <section id="home" className="hero" data-screen-label="Home">
    <div className="wrap">
      <div className="hero-inner">
        <div className="reveal in">
          <h1>
            Build, run and secure<br/>
            Hyperscale and Enterprise AI — with<br/>
            <em>one</em> accountable partner.
          </h1>
        </div>
        <div className="hero-side reveal in d2">
          <p className="hero-standfirst">
            CloudEngine Digital turns AI ambition into an operating
            model that is <strong>scalable, governable and
            production-ready</strong> from the data hall and GPU
            cluster up to LLM operations and AI security.
          </p>
          <div className="hero-ctas">
            <a href="solutions.html" className="btn btn-accent">Explore solutions <I.arrow/></a>
            <a href="contact.html" className="btn btn-ghost btn-white">Book a consultation</a>
          </div>
        </div>
      </div>

      {/* figure sits below as the editorial plate, full-width */}
      <div className="reveal in d3" style={{paddingBottom: 24}}>
        <CapabilityStack/>
      </div>

      {/* hero rail / proof */}
      <div className="hero-rail reveal in d4">
        <div className="cell">
          <span className="k">AIDC &amp; GPU Infrastructure</span>
          <span className="v">Cluster deployment<small>Design · Deployment · O&amp;M</small></span>
        </div>
        <div className="cell">
          <span className="k">AI Platform Services</span>
          <span className="v">AI Platform Services<small>GPU virtualisation · LLM ops · AI security</small></span>
        </div>
        <div className="cell">
          <span className="k">Recent delivery</span>
          <span className="v">64 × GB200 cluster<small>Malaysia · Johor · Kulai</small></span>
        </div>
        <div className="cell">
          <span className="k">Coverage</span>
          <span className="v">Global Delivery<small>SG · MY · ID · TH · VN · KR · JP · US · DE · AE</small></span>
        </div>
      </div>
    </div>
  </section>
);

const HomeMarquee = () => {
  const items = ['NVIDIA','PyTorch','TensorFlow','Kubernetes','AMD','Ray','vLLM','BeeGFS','Triton','MLflow','Airflow','Llama 3','Mistral','DeepSeek','Qwen','Ceph'];
  const all = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-inner">
        <div className="marquee-label">Built on the open AI stack</div>
        <div className="marquee-mask">
          <div className="marquee-track">
            {all.map((it, i) => (
              <span key={i} className="marquee-item">{it}<span className="sep">/</span></span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const HomeServiceLines = () => (
  <section className="section" data-screen-label="Service Lines">
    <div className="wrap">
      <div className="section-head reveal" style={{display:'grid', gridTemplateColumns:'5fr 7fr', gap: 80, alignItems:'end', maxWidth:'none'}}>
        <div>
          <h2 style={{marginTop: 0, maxWidth: '11ch'}}>Two services. <em className="serif">One</em> accountable partner.</h2>
        </div>
        <p className="lead" style={{maxWidth: '46ch'}}>
          From the rack to the runtime — physical infrastructure
          and the operating model that makes enterprise AI real.
        </p>
      </div>
      <div className="line-grid">
        {SERVICE_LINES.map((l, i) => (
          <a key={l.id} href={l.href} className={`line-card reveal d${i+1}`}>
            <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>{l.cta || `Open ${l.title.split(' ')[0]} Services`}</b>
              <span className="sol-cta">View <I.arrow/></span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const HomeStats = () => (
  <section className="section" data-screen-label="Outcomes">
    <div className="wrap">
      <div className="section-head reveal" style={{marginBottom: 32, maxWidth: 760}}>
        <h2 style={{marginTop: 0, maxWidth: '20ch'}}>What changes when AI runs as an operating model.</h2>
      </div>
      <div className="stats reveal d1">
        {STATS.map(s => (
          <div key={s.lbl} className="stat">
            <div className="num">{s.num}<span className="unit">{s.unit}</span></div>
            {s.cat && <div className="stat-cat">{s.cat}</div>}
            <div className="lbl">{s.lbl}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

function HomeApp() {
  useReveal();
  return (
    <>
      <Nav/>
      <main>
        <HomeHero/>
        <HomeMarquee/>
        <HomeServiceLines/>
        <HomeStats/>
        <CTABanner
          title={<>From AI ambition to <em className="serif">operating model</em>.</>}
          sub="Tell us where you are today — strategy, infrastructure or operations — and we will put a tailored briefing on your calendar within one business day."
          primary="Get in touch"
          primaryHref="contact.html"
          secondary="Browse services"
          secondaryHref="services.html"
        />
      </main>
      <Footer/>
    </>
  );
}

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