'use client';

import React, { useState, useEffect } from 'react';

export default function TelemetryStrip() {
  const [riderCount, setRiderCount] = useState(14820);

  useEffect(() => {
    const interval = setInterval(() => {
      if (Math.random() > 0.4) {
        setRiderCount((prev) => prev + Math.floor(Math.random() * 3));
      }
    }, 3200);
    return () => clearInterval(interval);
  }, []);

  return (
    <section className="telemetry-strip">
      <div className="flagship-container">
        <div className="metric-strip-grid">
          <div className="metric-box">
            <div className="metric-box-header">
              <span className="font-label-caps text-muted">
                ACTIVE NETWORK
              </span>
              <span className="material-symbols-outlined text-dim-green icon-md">
                hub
              </span>
            </div>
            <div className="metric-box-content">
              <div className="font-telemetry-metric-xl text-ink">
                {riderCount.toLocaleString()}+
              </div>
              <p className="font-body-sm metric-box-desc">
                Connected Live Riders
              </p>
            </div>
          </div>

          <div className="metric-box">
            <div className="metric-box-header">
              <span className="font-label-caps text-muted">
                DATABASE DEPTH
              </span>
              <span className="material-symbols-outlined text-cyan-accent icon-md">
                route
              </span>
            </div>
            <div className="metric-box-content">
              <div className="font-telemetry-metric-xl text-ink">
                3.2M+
              </div>
              <p className="font-body-sm metric-box-desc">
                Track Miles Analyzed
              </p>
            </div>
          </div>

          <div className="metric-box">
            <div className="metric-box-header">
              <span className="font-label-caps text-muted">
                PEAK DYNAMICS
              </span>
              <span className="material-symbols-outlined text-blue-accent icon-md">
                airline_stops
              </span>
            </div>
            <div className="metric-box-content">
              <div className="font-telemetry-metric-xl text-cyan-accent">58°</div>
              <p className="font-body-sm metric-box-desc">
                Max Recorded Lean Angle
              </p>
            </div>
          </div>

          <div className="metric-box">
            <div className="metric-box-header">
              <span className="font-label-caps text-muted">
                HARDWARE SAMPLING
              </span>
              <span className="material-symbols-outlined text-green-accent icon-md">
                timer
              </span>
            </div>
            <div className="metric-box-content">
              <div className="font-telemetry-metric-xl text-green-accent">0.01s</div>
              <p className="font-body-sm metric-box-desc">
                Telemetry Precision Sync
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}