const barHeights = ['40%','65%','50%','80%','60%','90%','75%'];

function Cases() {
  return (
    <section id="cases" className="cases">
      <div className="cases-header">
        <div>
          <div className="section-label">Case Study</div>
          <h2>Software die<br />al live staat.</h2>
        </div>
        <p className="section-intro" style={{maxWidth:'300px'}}>Geen beloftes. Hier is wat we hebben gebouwd.</p>
      </div>

      <div className="case-card">
        <div className="case-info">
          <div className="case-tag">Verzekeringen</div>
          <h3>Polisbeheer.app</h3>
          <p>Een volledig multi-tenant platform waarmee verzekeringskantoren hun polissen, klanten en claims centraal beheren. Gebouwd op .NET 8, Next.js en SQL Server — met Docker en CI/CD voor schaalbare deployment.</p>
          <div className="case-stats">
            <div className="stat">
              <div className="stat-num" id="stat-cloud">100%</div>
              <div className="stat-label">Cloud-native</div>
            </div>
            <div className="stat">
              <div className="stat-num">Multi</div>
              <div className="stat-label">Tenant architectuur</div>
            </div>
            <div className="stat">
              <div className="stat-num">Live</div>
              <div className="stat-label">Productie</div>
            </div>
          </div>
        </div>
        <div className="case-visual">
          <div className="mockup">
            <div className="mockup-bar">
              <div className="dot dot-r"></div>
              <div className="dot dot-y"></div>
              <div className="dot dot-g"></div>
            </div>
            <div className="mockup-content">
              <div className="mock-row">
                <span className="mock-label">Actieve polissen</span>
                <span className="mock-val cyan">1.247</span>
              </div>
              <div className="mock-row">
                <span className="mock-label">Openstaande claims</span>
                <span className="mock-val mag">14</span>
              </div>
              <div className="mock-row">
                <span className="mock-label">Klanten dit kwartaal</span>
                <span className="mock-val">+38</span>
              </div>
              <div className="mock-chart">
                {barHeights.map((h, i) => (
                  <div className="bar" key={i} data-height={h} style={{height: '4px'}}></div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Cases });