// AI Platform Services — the 3 pillars (GPU Virt, LLM Ops, AI Security)
const { useState } = React;

const ServicesTabs = () => {
  const [active, setActive] = useState('gpu');
  const svc = SERVICES.find(s => s.id === active);
  const visual = active === 'gpu' ? <StackVisual/> : active === 'data' ? <DataVisual/> : active === 'llm' ? <LifecycleVisual/> : <SecurityVisual/>;
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow">Pillars / 01</div>
          <h2>Four pillars for production-ready enterprise AI.</h2>
          <p>Each pillar is delivered as a connected practice — strategy, platform, and operating controls — so capability compounds across the program.</p>
        </div>

        <div className="services-tabs reveal d1" role="tablist">
          {SERVICES.map(s => {
            const label = s.id==='gpu' ? 'GPU Virtualization' : s.id==='data' ? 'Data Foundation' : s.id==='llm' ? 'LLM Operations' : 'AI Security';
            return (
              <button key={s.id} role="tab" aria-selected={active===s.id} className={`tab ${active===s.id?'active':''}`} onClick={() => setActive(s.id)}>
                {label}
              </button>
            );
          })}
        </div>

        <div className="service-panel reveal d2" key={active}>
          <div>
            <div className="service-meta">
              <span className="chip">{svc.chip}</span>
              <span style={{fontFamily:'JetBrains Mono', fontSize:11, letterSpacing:'.12em', color:'var(--ink-4)'}}>{svc.tag.toUpperCase()}</span>
            </div>
            <h3 id={svc.id}>{svc.title}</h3>
            <p className="desc">{svc.desc}</p>
            <div className="service-caps">
              {svc.caps.map((c,i) => (
                <div key={i} className="cap">
                  <div className="cap-dot"><I.check/></div>
                  <div className="cap-text">
                    <b>{c.b}</b>
                    <span>{c.t}</span>
                  </div>
                </div>
              ))}
            </div>
            <a href="solutions.html" className="btn btn-primary" style={{padding:'12px 20px', fontSize: 14}}>See in solutions <I.arrow/></a>
          </div>
          <div className="service-visual">
            {visual}
          </div>
        </div>
      </div>
    </section>
  );
};

const AllPillars = () => (
  <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">All four pillars / 02</div>
        <h2 style={{maxWidth: 720}}>Detailed scope at a glance.</h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: 24}}>
        {SERVICES.map((s,i) => (
          <div key={s.id} id={s.id} className={`reveal d${i+1}`} style={{background:'var(--bg)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', padding: 28}}>
            <div className="eyebrow" style={{marginBottom: 14}}>{s.chip}</div>
            <h4 style={{fontSize: 22, marginBottom: 10}}>{s.title}</h4>
            <p style={{fontSize: 14.5, marginBottom: 20, color: 'var(--ink-3)'}}>{s.desc}</p>
            <ul style={{margin: 0, padding: 0, listStyle: 'none', display:'flex', flexDirection:'column', gap: 10}}>
              {s.caps.map(c => (
                <li key={c.b} style={{fontSize: 13.5, color:'var(--ink-2)', paddingLeft: 22, position:'relative'}}>
                  <span style={{position:'absolute', left:0, top: 2}}><span style={{display:'inline-flex', width:14, height:14, alignItems:'center', justifyContent:'center', borderRadius: '50%', background:'var(--accent-soft)', color:'var(--accent)'}}><I.check/></span></span>
                  <b style={{display:'block', color:'var(--ink)', fontWeight: 600}}>{c.b}</b>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  </section>
);

function AIPlatformApp() {
  useReveal();
  return (
    <>
      <Nav/>
      <main>
        <PageHero
          eyebrow="AI Platform Services"
          crumbs={[{label:'Home', href:'index.html'}, {label:'Services', href:'services.html'}, {label:'AI Platform'}]}
          title={<>The operating model for <span className="accent">enterprise AI.</span></>}
          sub="GPU virtualization, data foundation, LLM operations, and AI security delivered as one connected practice — strategy, platform, and operating controls together."
          image="assets/aiplatform-hero-bg.png"
          heroStyle={{ minHeight: '667px' }}
        >
          <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="solutions.html" className="btn btn-ghost">Explore Solutions</a>
          </div>
        </PageHero>
        <ServicesTabs/>
        <AllPillars/>
        <CTABanner
          title="Map a platform strategy with us."
          sub="Bring your current state — environment, tooling, team. We'll come back with a phased plan that turns AI ambition into operating capability."
          primary="Book a strategy call"
          primaryHref="contact.html"
          secondary="See infrastructure services"
          secondaryHref="infrastructure.html"
        />
      </main>
      <Footer/>
    </>
  );
}

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