import React from 'react';

export default function PillarsSection() {
  return (
    <section className="pillars-section">
      <div className="flagship-container">
        <div className="pillars-header">
          <div>
            <div className="font-label-caps text-dim-cyan pill-label">
              ENGINEERED ARCHITECTURE
            </div>
            <h2 className="font-headline-xl text-ink m-0">
              Built for extreme lean angles &amp; split-second decisions.
            </h2>
          </div>
          <p className="font-body-md pillars-desc">
            A bespoke telemetry suite connecting ECU sensors, gyroscopes, and track positioning straight to riders
            and crew chiefs.
          </p>
        </div>

        <div className="bento-grid">
          {/* Pillar 1: Live Cockpit & Handlebar HUD */}
          <div className="bento-card col-span-12 lg:col-span-7">
            <div>
              <div className="icon-box text-cyan-accent">
                <span className="material-symbols-outlined bento-icon">
                  dashboard_customize
                </span>
              </div>
              <span className="font-label-caps text-dim-cyan">01 / REAL-TIME STREAM</span>
              <h3 className="font-headline-lg bento-title">
                Live Cockpit &amp; Handlebar HUD
              </h3>
              <p className="font-body-md bento-desc">
                Real-time pitch, roll, yaw, throttle position, braking pressure, and predictive apex speeds delivered
                at 60fps to your handlebar display or phone mount without visual drag.
              </p>
            </div>

            <div className="bento-inner-card bento-inner-inset">
              <div className="bento-inner-header">
                <span className="font-code-mono text-xs sm:text-sm text-muted">
                  PITCH / ROLL / THROTTLE METRICS
                </span>
                <span className="font-code-mono text-xs sm:text-sm text-green-accent whitespace-nowrap">
                  60 FPS BUFFER
                </span>
              </div>
              <div className="bento-stats-grid-3">
                <div className="bento-stat-box">
                  <span className="font-label-caps text-[10px] sm:text-xs text-muted block">
                    THROTTLE
                  </span>
                  <span className="font-headline-md text-sm sm:text-headline-md text-cyan-accent block mt-2px">
                    94%
                  </span>
                </div>
                <div className="bento-stat-box">
                  <span className="font-label-caps text-[10px] sm:text-xs text-muted block">
                    FRONT BRAKE
                  </span>
                  <span className="font-headline-md text-sm sm:text-headline-md text-ink block mt-2px">
                    18.4 BAR
                  </span>
                </div>
                <div className="bento-stat-box">
                  <span className="font-label-caps text-[10px] sm:text-xs text-muted block">
                    LEAN BIAS
                  </span>
                  <span className="font-headline-md text-sm sm:text-headline-md text-green-accent block mt-2px">
                    R 48.2°
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* Pillar 2: Ride Intelligence & Session Replay */}
          <div className="bento-card col-span-12 lg:col-span-5">
            <div>
              <div className="icon-box text-green-accent">
                <span className="material-symbols-outlined bento-icon">
                  analytics
                </span>
              </div>
              <span className="font-label-caps text-green-accent">02 / DEEP TELEMETRY</span>
              <h3 className="font-headline-lg bento-title">
                Ride Intelligence &amp; Session Replay
              </h3>
              <p className="font-body-md bento-desc-short">
                Multi-layer track analysis with sector split times, deceleration zones, elevation profiles, and 3D
                GPS satellite trace replays after every canyon run or track session.
              </p>
            </div>

            <div className="bento-inner-card">
              <div className="font-code-mono text-xs sm:text-sm bento-flex-between text-muted mb-8px">
                <span>SECTOR 1 (-0.18s)</span>
                <span>SECTOR 2 (-0.24s)</span>
              </div>
              <div className="bento-progress-bar-container">
                <div className="bento-progress-bar-fill w-35 bg-cyan-accent" />
                <div className="bento-progress-bar-fill w-35 bg-green-accent" />
                <div className="bento-progress-bar-fill w-30 bg-surface-bright" />
              </div>
              <div className="bento-flex-between items-center mt-10px">
                <span className="font-label-caps text-muted">
                  OPTIMAL LAP
                </span>
                <span className="font-code-mono text-green-accent text-[15px]">
                  1:34.288
                </span>
              </div>
            </div>
          </div>

          {/* Pillar 3: Club Telemetry & Fleet Beacon */}
          <div className="bento-card col-span-12 lg:col-span-5">
            <div>
              <div className="icon-box text-blue-accent">
                <span className="material-symbols-outlined bento-icon">
                  emergency
                </span>
              </div>
              <span className="font-label-caps text-blue-accent">03 / SAFETY &amp; SQUAD</span>
              <h3 className="font-headline-lg bento-title">
                Club Telemetry &amp; Fleet Beacon
              </h3>
              <p className="font-body-md bento-desc-short">
                Live pack radar tracking, automatic crash detection beacon with SOS emergency dispatch, and
                competitive leaderboards with verified telemetry data.
              </p>
            </div>

            <div className="bento-inner-card bento-flex-row items-center gap-1rem">
              <div className="bento-icon-box text-danger-accent">
                <span className="material-symbols-outlined">satellite</span>
              </div>
              <div className="bento-text-col">
                <span className="font-headline-sm text-sm sm:text-base text-ink">
                  Automated SOS Crash Beacon
                </span>
                <span className="font-body-sm text-xs sm:text-sm">Accelerometer impact trigger &lt;150ms</span>
              </div>
            </div>
          </div>

          {/* Pillar 4: Zero-Friction Hardware & Security */}
          <div className="bento-card col-span-12 lg:col-span-7">
            <div>
              <div className="icon-box text-dim-cyan">
                <span className="material-symbols-outlined bento-icon">
                  memory
                </span>
              </div>
              <span className="font-label-caps text-dim-cyan">04 / HARDWARE AGNOSTIC</span>
              <h3 className="font-headline-lg bento-title">
                Zero-Friction Hardware &amp; Security
              </h3>
              <p className="font-body-md bento-desc">
                Encrypted zero-knowledge ride logs, offline Bluetooth / CAN-bus hardware sync, and end-to-end
                authenticated APIs compatible with Yamaha, Ducati, BMW, Kawasaki, KTM, and Honda.
              </p>
            </div>

            <div className="bento-stats-grid-auto">
              <div className="bento-stat-box text-center">
                <span className="font-label-caps text-[10px] sm:text-xs text-muted block">
                  OBD-II CAN
                </span>
                <span className="font-code-mono text-sm sm:text-base text-ink block mt-2px">
                  500 kbps
                </span>
              </div>
              <div className="bento-stat-box text-center">
                <span className="font-label-caps text-[10px] sm:text-xs text-muted block">
                  BLUETOOTH
                </span>
                <span className="font-code-mono text-sm sm:text-base text-ink block mt-2px">
                  BLE 5.3
                </span>
              </div>
              <div className="bento-stat-box text-center">
                <span className="font-label-caps text-[10px] sm:text-xs text-muted block">
                  ENCRYPTION
                </span>
                <span className="font-code-mono text-sm sm:text-base text-green-accent block mt-2px">
                  AES-256
                </span>
              </div>
              <div className="bento-stat-box text-center">
                <span className="font-label-caps text-[10px] sm:text-xs text-muted block">
                  LOCAL CACHE
                </span>
                <span className="font-code-mono text-sm sm:text-base text-ink block mt-2px">
                  Offline 100%
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}