/* global React */
// ===========================================================
// Clean SVG/HTML mockups used in the Case Study section.
// Uses real product screenshots wrapped in refined window
// chrome with floating data cards on top.
// ===========================================================

// ---------- 01. Featured case study viewer (home page) ----------
function CaseTunnelMock() {
  return (
    <div className="cs-mock">
      {/* Window chrome */}
      <div className="cs-mock-bar">
        <span className="cs-mock-dot" style={{background: "#FF5F57"}}></span>
        <span className="cs-mock-dot" style={{background: "#FEBC2E"}}></span>
        <span className="cs-mock-dot" style={{background: "#28C840"}}></span>
        <span className="cs-mock-crumb">
          <span className="pm-dim">app.inframind</span>
          <span className="pm-dim">/</span>
          <span>Demo Tunnel</span>
          <span className="pm-dim">/</span>
          <span>Review Results</span>
        </span>
      </div>

      <div className="cs-mock-canvas">
        <img
          src="assets/screen-overview.png"
          alt="InfraMind defect summary dashboard showing spatial distribution heatmap of 11,263 detected defects"
          className="cs-mock-img"
        />
        <div className="cs-mock-canvas-fade"></div>

        {/* Floating stat card */}
        <div className="cs-mock-stat">
          <div className="cs-mock-stat-lbl pm-mono">DEFECTS DETECTED</div>
          <div className="cs-mock-stat-num">11,263</div>
          <div className="cs-mock-stat-row">
            <span className="cs-mock-stat-pill" style={{background: "var(--sev-critical)"}}></span>
            <span className="cs-mock-stat-k">Critical</span>
            <span className="cs-mock-stat-v">5.3%</span>
          </div>
          <div className="cs-mock-stat-row">
            <span className="cs-mock-stat-pill" style={{background: "var(--sev-high)"}}></span>
            <span className="cs-mock-stat-k">High</span>
            <span className="cs-mock-stat-v">19.4%</span>
          </div>
        </div>

        {/* Floating turnaround card */}
        <div className="cs-mock-turnaround">
          <div className="cs-mock-stat-lbl pm-mono">TURNAROUND</div>
          <div className="cs-mock-turnaround-row">
            <span className="cs-mock-turnaround-from">Weeks</span>
            <span className="cs-mock-turnaround-arrow">
              <svg width="16" height="10" viewBox="0 0 16 10" fill="none">
                <path d="M1 5H14M14 5L10 1M14 5L10 9" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </span>
            <span className="cs-mock-turnaround-to">Hours</span>
          </div>
          <div className="cs-mock-turnaround-sub pm-mono">first-pass review</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CaseTunnelMock });