// About page — mission, framework, who we serve, regional presence
const AboutIntro = () =>
<section className="section" data-screen-label="About">
    <div className="wrap">
      <div className="about-grid">
        <div className="reveal">
          <div className="eyebrow" style={{ marginBottom: 24 }}>Our mission / 01</div>
          <h2 style={{ marginBottom: 28 }}>Strategy, platform, and operations connected.</h2>
          <p className="lead">
            We connect <strong>strategy, platform design, implementation, and operational controls</strong> so enterprise AI can move from concept to production with <strong>less rework, clearer ownership, and lower risk</strong>.
          </p>
          <p style={{ marginTop: 24 }}>
            CloudEngine Digital delivers the physical layer underneath: data-center fit-out, structured cabling, and large-scale GPU cluster deployment in markets across APAC and beyond.
          </p>
          <p style={{ marginTop: 24 }}>The end-to-end service is designed for CIOs, CTOs, platform teams, AI teams, and security leaders accountable for turning generative AI from pilot into operating capability without breaking infrastructure economics or compliance posture.

        </p>
        </div>
        <div className="reveal d2">
          <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: 36, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', right: -60, top: -60, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, #FFD7E5 0%, transparent 65%)', opacity: .6 }} />
            <div style={{ position: 'absolute', right: -30, bottom: -80, width: 180, height: 180, borderRadius: '50%', background: 'radial-gradient(circle, #DCE6FF 0%, transparent 65%)', opacity: .8 }} />
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Promise</div>
              <h3 style={{ fontSize: 28, marginBottom: 20 }}>From AI ambition to operating model.</h3>
              <p style={{ fontSize: 16, marginBottom: 24 }}>Every engagement leaves you with a platform that is measurably more scalable, more governable, and more production-ready than the day we started.</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {['Clearer AI roadmap', 'Faster time to production', 'Better utilization and control', 'Lower operational risk'].map((t) =>
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14.5, color: 'var(--ink-2)', fontWeight: 600 }}>
                    <span style={{ display: 'inline-flex', width: 22, height: 22, alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent)' }}><I.check /></span>
                    {t}
                  </div>
              )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>;


const AboutFramework = () =>
<section className="section" style={{ paddingTop: 0 }}>
    <div className="wrap">
      <div className="section-head reveal">
        <div className="eyebrow">Engagement framework / 02</div>
        <h2 style={{ maxWidth: 720 }}>A four-step path from pilot to production-ready AI.</h2>
        <p>Repeatable across program scope, equally applicable to a single GPU cluster, a regional AI platform, or an enterprise-wide LLM operating model.</p>
      </div>
      <div className="framework reveal d1">
        {FRAMEWORK.map((s) =>
      <div key={s.n} className="fw-step">
            <div className="fw-num">{s.n}</div>
            <h4>{s.title}</h4>
            <ul>
              {s.items.map((it) => <li key={it}>{it}</li>)}
            </ul>
          </div>
      )}
      </div>
      <div className="stats reveal d2">
        {STATS.map((s) =>
      <div key={s.lbl} className="stat">
            <div className="num">{s.num}<span className="unit">{s.unit}</span></div>
            <div className="lbl">{s.lbl}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


const WhoWeServe = () =>
<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">Who we serve / 03</div>
        <h2 style={{ maxWidth: 760 }}>Operators, builders, and platforms running AI at enterprise scale.</h2>
      </div>
      <div className="serve-grid">
        {SERVE.map((s, i) =>
      <div key={s.short} className={`serve-card reveal d${i + 1}`}>
            <div className="short">{s.short}</div>
            <div className="name">{s.name}</div>
            <div className="desc">{s.desc}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


const REGION_CONTINENTS = [
{ id: 'sea', label: 'SE Asia', codes: ['SG', 'MY', 'ID', 'TH', 'VN', 'PH'] },
{ id: 'east', label: 'East Asia', codes: ['KR', 'JP'] },
{ id: 'me', label: 'Middle East', codes: ['SA', 'AE'] },
{ id: 'eu', label: 'Europe', codes: ['DE'] },
{ id: 'na', label: 'Americas', codes: ['US'] },
{ id: 'world', label: 'World', codes: null }];


const Regions = () => {
  const iframeRef = React.useRef(null);
  const [active, setActive] = React.useState('sea');

  // Keep the parent button highlight in sync if the map ever broadcasts
  // a state change of its own (e.g. on initial load it announces 'sea').
  React.useEffect(() => {
    const onMessage = (e) => {
      const d = e.data;
      if (d && d.type === 'continentChanged' && d.id) setActive(d.id);
    };
    window.addEventListener('message', onMessage);
    return () => window.removeEventListener('message', onMessage);
  }, []);

  const go = (id) => {
    setActive(id);
    const win = iframeRef.current && iframeRef.current.contentWindow;
    if (win) win.postMessage({ type: 'flyToContinent', id }, '*');
  };

  return (
    <section className="section">
      <div className="wrap">
        <div className="regions-layout">
          <div className="col-left reveal">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Regional presence / 04</div>
            <h2>Cross-border delivery, from Singapore HQ.</h2>
            <p style={{ marginTop: 18 }}>Our delivery footprint spans twelve markets across Asia Pacific, the Middle East, Europe, and the United States — one accountable partner coordinating across borders, languages, and operating environments.</p>
            <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 14.5, color: 'var(--ink-2)', fontWeight: 600 }}>
                <span style={{ display: 'inline-flex', width: 22, height: 22, alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent)' }}><I.check /></span>
                Cross-regional delivery capability
              </div>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 14.5, color: 'var(--ink-2)', fontWeight: 600 }}>
                <span style={{ display: 'inline-flex', width: 22, height: 22, alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent)' }}><I.check /></span>
                Focused on data-center infrastructure & ICT engineering
              </div>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 14.5, color: 'var(--ink-2)', fontWeight: 600 }}>
                <span style={{ display: 'inline-flex', width: 22, height: 22, alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent)' }}><I.check /></span>
                Strong AI / GPU cluster deployment expertise
              </div>
            </div>
          </div>

          <nav className="continent-rail reveal d1" aria-label="Continent navigation">
            <span className="continent-rail__label mono">Jump to</span>
            {REGION_CONTINENTS.map((c) =>
              <button
                key={c.id}
                type="button"
                className={`continent-rail__btn ${active === c.id ? 'is-active' : ''}`}
                onClick={() => go(c.id)}
                aria-pressed={active === c.id}>
                <span className="continent-rail__name">{c.label}</span>
                <span className="continent-rail__count mono">
                  {c.codes ? String(c.codes.length).padStart(2, '0') : '12'}
                </span>
              </button>
            )}
          </nav>

          <div className="regions-map-col reveal d2">
            <div className="regions-map">
              <iframe
                ref={iframeRef}
                src="world-map.html"
                title="CloudEngine Digital — global delivery footprint"
                loading="lazy"
                referrerPolicy="no-referrer" />
            </div>
            <div className="regions-map-legend">
              <span className="legend-item">
                <span className="dot dot--hq" />
                <span>Singapore HQ</span>
              </span>
              <span className="legend-item">
                <span className="dot dot--market" />
                <span>{REGIONS.length - 1} delivery markets</span>
              </span>
              <span className="legend-meta mono">Drag · scroll to zoom · click a marker</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};


function AboutApp() {
  useReveal();
  return (
    <>
      <Nav />
      <main>
        <PageHero
          eyebrow="About"
          crumbs={[{ label: 'Home', href: 'index.html' }, { label: 'About' }]}
          title={<>The team behind enterprise AI <span className="accent">that ships.</span></>}
          sub="CloudEngine Digital is a Singapore-headquartered AI platform and data-center delivery partner, serving cloud providers, internet companies, and large enterprises across twelve markets."
          image="assets/about-hero-bg.png" />
        
        <AboutIntro />
        <AboutFramework />
        <WhoWeServe />
        <Regions />
        <CTABanner
          title="Want to talk about your AI program?"
          sub="Strategy review, platform architecture, or a cluster build — start with a short briefing call."
          primary="Start a conversation"
          primaryHref="contact.html"
          secondary="Explore services"
          secondaryHref="services.html" />
        
      </main>
      <Footer />
    </>);

}

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