// Success Stories — central listing of customer use cases as a 3-column card grid.

const StoryCard = ({ c }) => {
  // Show only the two most striking stats on the card.
  const topStats = c.stats.slice(0, 2);
  return (
    <article className="story-card reveal">
      <h3 className="story-title">{c.title}</h3>
      <p className="story-sub">{c.subtitle}.</p>

      <div className="story-stats">
        {topStats.map((s) =>
        <div key={s.lbl} className="story-stat">
            <div className="n">{s.n}<span className="u">{s.u}</span></div>
            <div className="lbl">{s.lbl}</div>
          </div>
        )}
      </div>

      <div className="story-meta">
        <div className="row">
          <span className="lbl">Duration</span>
          <span className="val">{c.duration}</span>
        </div>
        <div className="row">
          <span className="lbl">Scope</span>
          <span className="val">{c.scope.join(' · ')}</span>
        </div>
        <div className="row">
          <span className="lbl">Coverage</span>
          <span className="val">{c.coverage}</span>
        </div>
      </div>

    </article>);

};

const StoryCTACard = () =>
<article className="story-card story-card--cta reveal d2">
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <span className="cta-eyebrow">Next story</span>
      <h3>Could be yours.</h3>
      <p>From a single rack to a multi-country GPU project, we deliver as a single accountable partner.

    </p>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <a href="contact.html" className="btn btn-primary" style={{ alignSelf: 'flex-start' }}>
        Talk to us <I.arrow />
      </a>
      <a href="services.html" className="btn-link" style={{ alignSelf: 'flex-start' }}>
        Browse services <I.arrow />
      </a>
    </div>
  </article>;


const StoriesGrid = () =>
<section className="section">
    <div className="wrap">
      <div className="section-head reveal" style={{ marginBottom: 40, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', maxWidth: 'none' }}>
        <div>
          <div className="eyebrow">Selected deliveries / {String(CASE_STUDIES.length).padStart(2, '0')}</div>
          <h2 style={{ marginTop: 18, maxWidth: 'none', textAlign: "left", whiteSpace: 'nowrap' }}>Recent customer success stories.</h2>
        </div>
        <p className="muted" style={{ maxWidth: 'none', fontSize: 14, whiteSpace: 'nowrap' }}>
          Project summaries are written with the operator. Detailed reports and reference calls available under NDA.
        </p>
      </div>

      <div className="stories-grid">
        {CASE_STUDIES.map((c) => <StoryCard key={c.code} c={c} />)}
        <StoryCTACard />
      </div>
    </div>
  </section>;


function SuccessStoriesApp() {
  useReveal();
  return (
    <>
      <Nav />
      <main>
        <PageHero
          eyebrow="Success Stories"
          crumbs={[{ label: 'Home', href: 'index.html' }, { label: 'Success Stories' }]}
          title={<>Delivered programs. <span className="accent">Verifiable outcomes.</span></>}
          sub="A growing portfolio of GPU cluster deployments, AI infrastructure builds, and platform engagements across APAC, EMEA, and the Americas."
          image="assets/success-stories-hero-bg.png" />
        

        <StoriesGrid />

        <CTABanner
          title="Have a program we should hear about?"
          sub="Whether you are scoping, building, or scaling, we'll line up a tailored briefing with people who've delivered similar work."
          primary="Start scoping"
          primaryHref="contact.html"
          secondary="Browse services"
          secondaryHref="services.html" />
        
      </main>
      <Footer />
    </>);

}

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