import React from 'react';
import { FeaturesContent, DEFAULT_FEATURES } from '../../lib/cms';

interface PillarsSectionProps {
  features?: FeaturesContent;
}

export default function PillarsSection({ features = DEFAULT_FEATURES }: PillarsSectionProps) {
  const content = features || DEFAULT_FEATURES;
  const item0 = content.items?.[0] || DEFAULT_FEATURES.items[0];
  const item1 = content.items?.[1] || DEFAULT_FEATURES.items[1];
  const item2 = content.items?.[2] || DEFAULT_FEATURES.items[2];
  const item3 = content.items?.[3] || DEFAULT_FEATURES.items[3];

  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">
              {content.pillars_title || 'Built for extreme lean angles & split-second decisions.'}
            </h2>
          </div>
          <p className="font-body-md pillars-desc">
            {content.pillars_subtitle ||
              '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">
                  {item0.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">
                {item0.title}
              </h3>
              <p className="font-body-md bento-desc">
                {item0.description}
              </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">
                  {item1.icon || 'analytics'}
                </span>
              </div>
              <span className="font-label-caps text-green-accent">02 / DEEP TELEMETRY</span>
              <h3 className="font-headline-lg bento-title">
                {item1.title}
              </h3>
              <p className="font-body-md bento-desc-short">
                {item1.description}
              </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">
                  {item2.icon || 'emergency'}
                </span>
              </div>
              <span className="font-label-caps text-blue-accent">03 / SAFETY &amp; SQUAD</span>
              <h3 className="font-headline-lg bento-title">
                {item2.title}
              </h3>
              <p className="font-body-md bento-desc-short">
                {item2.description}
              </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">
                  {item3.icon || 'memory'}
                </span>
              </div>
              <span className="font-label-caps text-dim-cyan">04 / HARDWARE AGNOSTIC</span>
              <h3 className="font-headline-lg bento-title">
                {item3.title}
              </h3>
              <p className="font-body-md bento-desc">
                {item3.description}
              </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>
  );
}