'use client';

import React, { useEffect } from 'react';
import Link from 'next/link';

export default function FeaturesPage() {
  useEffect(() => {
    let speed = 174;
    let lean = 52.8;
    const speedEl = document.getElementById('speed-val');
    const leanEl = document.getElementById('lean-val');

    const i1 = setInterval(() => {
      if (speedEl) {
        const delta = Math.floor(Math.random() * 5) - 2;
        speed = Math.min(186, Math.max(162, speed + delta));
        speedEl.textContent = speed.toString();
      }
      if (leanEl) {
        const leanDelta = (Math.random() * 0.4 - 0.2).toFixed(1);
        lean = parseFloat((lean + parseFloat(leanDelta)).toFixed(1));
        leanEl.textContent = lean + '°';
      }
    }, 800);

    return () => {
      clearInterval(i1);
    };
  }, []);

  return (
    <div className="flagship-page text-on-surface bg-surface min-h-screen">
      <div className="flex flex-col w-full">
{/*  Top Ambient Telemetry Grid Aura  */}
<div className="relative w-full overflow-hidden bg-surface pb-space-3xl">
<div className="absolute -top-40 left-1/2 -translate-x-1/2 w-[1100px] h-[500px] bg-gradient-to-b from-primary-container/10 via-surface-tint/5 to-transparent blur-3xl pointer-events-none rounded-full"></div>
<div className="absolute top-20 right-10 w-96 h-96 bg-secondary-fixed/5 blur-3xl pointer-events-none rounded-full"></div>
{/*  Editorial / Hero Container  */}
<div className="max-w-container-max mx-auto px-gutter-desktop pt-space-2xl relative z-10">
{/*  Eyebrow Pill  */}
<div className="inline-flex items-center gap-space-xs px-space-md py-1.5 rounded-full bg-surface-container-high shadow-sm mb-space-lg">
<span className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-container opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary-container"></span>
</span>
<span className="font-label-caps text-label-caps text-primary tracking-normal">Comprehensive Telemetry Stack • 10Hz Multi-GNSS &amp; 6-Axis IMU</span>
</div>
{/*  Main Headline & Subheading  */}
<div className="flex flex-col gap-space-xl items-start mb-space-3xl">
  <div className="flex flex-col gap-space-md max-w-4xl">
    <h1 className="font-display-hero text-display-hero text-on-surface tracking-tight">
      Surgical data precision for every apex, straightaway, and canyon.
    </h1>
    <p className="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">
      Explore phone-based ride recording, performance tools, and rider community features available in MotorSignal today.
    </p>
  </div>
  <div className="flex flex-col gap-space-sm pb-space-xs w-full max-w-sm">
    <div className="bg-surface-container-low p-space-md rounded-xl shadow-md">
      <div className="flex items-center justify-between font-code-mono text-code-mono text-outline mb-space-2xs">
        <span>Hardware Link Rate</span>
        <span className="text-secondary-fixed">Synchronized</span>
      </div>
      <div className="flex items-baseline gap-space-xs">
        <span className="font-telemetry-metric-md text-telemetry-metric-md text-primary">1000</span>
        <span className="font-label-caps text-label-caps text-on-surface-variant">Samples / Sec (IMU)</span>
      </div>
      <div className="w-full bg-surface-container-highest h-1.5 rounded-full mt-space-xs overflow-hidden">
        <div className="bg-gradient-to-r from-primary-container to-secondary-container h-full w-[94%] rounded-full"></div>
      </div>
    </div>
  </div>
</div>
{/*  Quick Fast Anchor Pills  */}
<div className="flex items-center gap-space-xs overflow-x-auto pb-space-sm scrollbar-none">
  <a className="flex-shrink-0 px-space-md py-2 rounded-xl bg-surface-container-high hover:bg-surface-bright text-primary font-label-caps text-label-caps transition-all shadow-sm flex items-center gap-space-2xs" href="#cockpit">
    <span className="text-primary-container">01</span> Live Cockpit
  </a>
  <a className="flex-shrink-0 px-space-md py-2 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface-variant hover:text-on-surface font-label-caps text-label-caps transition-all shadow-sm flex items-center gap-space-2xs" href="#lap-analysis">
    <span className="text-outline">02</span> Lap Analysis &amp; Sectors
  </a>
  <a className="flex-shrink-0 px-space-md py-2 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface-variant hover:text-on-surface font-label-caps text-label-caps transition-all shadow-sm flex items-center gap-space-2xs" href="#emergency">
    <span className="text-outline">03</span> Ride Records &amp; Road Alerts
  </a>
  <a className="flex-shrink-0 px-space-md py-2 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface-variant hover:text-on-surface font-label-caps text-label-caps transition-all shadow-sm flex items-center gap-space-2xs" href="#canbus">
    <span className="text-outline">04</span> Phone Sensor Telemetry
  </a>
  <a className="flex-shrink-0 px-space-md py-2 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface-variant hover:text-on-surface font-label-caps text-label-caps transition-all shadow-sm flex items-center gap-space-2xs" href="#cloud-replay">
    <span className="text-outline">05</span> Cloud Sync &amp; Replay
  </a>
</div>
</div>
</div>
{/*  SECTION 1: LIVE COCKPIT HUD  */}
<section className="w-full bg-surface-container-lowest py-space-4xl relative" id="cockpit">
<div className="max-w-container-max mx-auto px-gutter-desktop">
{/*  Section Header  */}
<div className="flex flex-col gap-space-md mb-space-2xl max-w-4xl">
  <div>
    <div className="flex items-center gap-space-xs mb-space-2xs">
      <span className="font-code-mono text-code-mono text-primary-container">01 // Tactical Flight Interface</span>
      <span className="h-1.5 w-1.5 rounded-full bg-primary-container"></span>
    </div>
    <h2 className="font-headline-xl text-headline-xl text-on-surface tracking-tight">
      Live Cockpit &amp; Handlebar HUD
    </h2>
  </div>
  <p className="font-body-md text-body-md text-on-surface-variant max-w-xl">
    Engineered for instant optical ingestion at 180+ mph. Crisp, high-contrast digital flight deck mounted directly to your top triple-clamp.
  </p>
</div>
{/*  Cockpit Interactive Frame Grid  */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-space-lg mb-space-2xl">
{/*  Left: Major Telemetry Screen Preview (8 cols)  */}
<div className="lg:col-span-8 bg-surface-container-low rounded-xl p-space-lg shadow-xl relative overflow-hidden flex flex-col justify-between">
<div className="absolute top-0 right-0 w-80 h-80 bg-primary-container/5 rounded-full blur-3xl pointer-events-none"></div>
{/*  Top Status Ribbon of HUD  */}
<div className="flex items-center justify-between pb-space-md mb-space-md bg-surface-container px-space-md py-space-xs rounded-lg">
<div className="flex items-center gap-space-md font-code-mono text-code-mono">
<span className="text-secondary-fixed flex items-center gap-1">
<span className="h-2 w-2 rounded-full bg-secondary-fixed animate-ping inline-block"></span>
                Active Recording
              </span>
<span className="text-on-surface-variant">Portimao Circuit // S2 Apex 4</span>
</div>
<div className="flex items-center gap-space-sm font-code-mono text-code-mono text-primary-fixed-dim">
<span>Latency: 9.4ms</span>
<span className="text-on-surface-variant">•</span>
<span>10Hz GNSS Lock (18 Sats)</span>
</div>
</div>
{/*  Central HUD Layout Simulation  */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-space-md items-center py-space-lg">
{/*  Left Dial: Lean Angle  */}
<div className="bg-surface-container p-space-md rounded-xl flex flex-col items-center justify-center text-center relative shadow-sm">
<span className="font-label-caps text-label-caps text-on-surface-variant mb-space-xs">Lean Angle (Apex Peak)</span>
{/*  SVG Arc Lean Angle Dial  */}
<div className="relative w-44 h-44 flex items-center justify-center">
<svg className="w-full h-full -rotate-90" viewBox="0 0 160 160">
<circle className="text-surface-bright" cx="80" cy="80" fill="none" r="68" stroke="currentColor" strokeDasharray="213 427" strokeLinecap="round" strokeWidth="8"></circle>
<circle className="text-primary-container" cx="80" cy="80" fill="none" r="68" stroke="currentColor" strokeDasharray="160 427" strokeLinecap="round" strokeWidth="9"></circle>
</svg>
<div className="absolute inset-0 flex flex-col items-center justify-center">
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-primary" id="lean-val">52.8°</span>
<span className="font-label-caps text-label-caps text-secondary-fixed tracking-normal">L Peak Pegged</span>
</div>
</div>
<div className="w-full flex justify-between font-code-mono text-code-mono text-on-surface-variant mt-space-2xs px-space-xs">
<span>R 48.2°</span>
<span className="text-primary">Limit: 65°</span>
<span className="text-secondary-fixed">L 52.8°</span>
</div>
</div>
{/*  Center Speed & G-Force Primary Indicator  */}
<div className="bg-surface-container-high p-space-lg rounded-xl flex flex-col items-center justify-center text-center shadow-lg relative">
<span className="font-label-caps text-label-caps text-primary-fixed tracking-normal mb-space-xs">Velocity Vector</span>
<div className="flex items-baseline justify-center gap-space-2xs my-space-xs">
<span className="font-display-hero text-display-hero text-on-surface tracking-tighter" id="speed-val">174</span>
<span className="font-headline-sm text-headline-sm text-on-surface-variant">MPH</span>
</div>
{/*  G-Force Crosshair Minimal Widget  */}
<div className="w-full mt-space-sm bg-surface-container p-space-sm rounded-lg flex items-center justify-between">
<div className="flex flex-col text-left">
<span className="font-label-caps text-label-caps text-on-surface-variant">Lateral G</span>
<span className="font-telemetry-metric-md text-telemetry-metric-md text-primary-container">+1.68 G</span>
</div>
<div className="w-12 h-12 rounded-full bg-surface-bright relative flex items-center justify-center">
<div className="w-px h-full bg-surface-container-highest absolute"></div>
<div className="h-px w-full bg-surface-container-highest absolute"></div>
<div className="w-3 h-3 rounded-full bg-secondary-container absolute translate-x-2 -translate-y-1 shadow-sm"></div>
</div>
<div className="flex flex-col text-right">
<span className="font-label-caps text-label-caps text-on-surface-variant">Decel G</span>
<span className="font-telemetry-metric-md text-telemetry-metric-md text-secondary-fixed">-1.32 G</span>
</div>
</div>
</div>
{/*  Right: Throttle & Hydraulic Brake Line Pressure  */}
<div className="bg-surface-container p-space-md rounded-xl flex flex-col justify-between shadow-sm">
<span className="font-label-caps text-label-caps text-on-surface-variant mb-space-sm">Hydraulic &amp; TPS Telemetry</span>
{/*  Throttle Bar  */}
<div className="mb-space-md">
<div className="flex justify-between font-label-caps text-label-caps text-on-surface mb-1">
<span>Throttle TPS</span>
<span className="text-primary-container">88% Open</span>
</div>
<div className="w-full bg-surface-container-highest h-3 rounded-full overflow-hidden">
<div className="h-full bg-gradient-to-r from-primary-fixed-dim to-primary-container w-[88%] rounded-full"></div>
</div>
</div>
{/*  Front Brake Line Pressure  */}
<div className="mb-space-md">
<div className="flex justify-between font-label-caps text-label-caps text-on-surface mb-1">
<span>Front Brake (bar)</span>
<span className="text-error">18.4 / 30 bar</span>
</div>
<div className="w-full bg-surface-container-highest h-3 rounded-full overflow-hidden">
<div className="h-full bg-gradient-to-r from-secondary-fixed to-error w-[61%] rounded-full"></div>
</div>
</div>
{/*  Rear Brake Line Pressure  */}
<div>
<div className="flex justify-between font-label-caps text-label-caps text-on-surface mb-1">
<span>Rear Trail Brake</span>
<span className="text-on-surface-variant">3.8 bar</span>
</div>
<div className="w-full bg-surface-container-highest h-3 rounded-full overflow-hidden">
<div className="h-full bg-secondary-fixed-dim w-[16%] rounded-full"></div>
</div>
</div>
</div>
</div>
{/*  Bottom Live Sparkline Telemetry Wave  */}
<div className="mt-space-md pt-space-md bg-surface-container-lowest p-space-sm rounded-lg flex items-center justify-between">
<div className="flex flex-col">
<span className="font-label-caps text-label-caps text-on-surface-variant">Throttle vs Decel Timeline (Last 800m)</span>
<span className="font-code-mono text-code-mono text-outline">Turn 3 Entry &gt; Apex 4 Braking Discharge</span>
</div>
{/*  Inline SVG Sparkline  */}
<svg className="w-64 h-8 text-primary-container" fill="none" viewBox="0 0 240 32">
<path d="M0,28 L30,28 L45,4 L60,4 L90,26 L120,24 L140,2 L170,2 L190,22 L240,16" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5"></path>
</svg>
</div>
</div>
{/*  Right: Hardware Specs & Mount Imagery (4 cols)  */}
<div className="lg:col-span-4 flex flex-col gap-space-md">
{/*  Cockpit Photo Card  */}
<div className="relative w-full h-56 rounded-xl overflow-hidden shadow-lg group">
<div className="bg-cover bg-center w-full h-full transform group-hover:scale-105 transition-transform duration-500" data-alt="High-end sport motorcycle cockpit showing digital phone mount HUD displaying vibrant cyan speed and lean angle gauges at dusk on an asphalt race track, sharp reflections on windshield and carbon fiber handlebars." ></div>
<div className="absolute inset-0 bg-gradient-to-t from-surface-container-lowest via-surface-container-lowest/30 to-transparent"></div>
<div className="absolute bottom-3 left-3 right-3 flex items-center justify-between">
<span className="px-space-xs py-1 rounded bg-surface-container-highest/80 font-label-caps text-label-caps text-primary backdrop-blur-md">CNC Billet Stem Mount</span>
<span className="font-code-mono text-code-mono text-on-surface">IP68 Waterproof</span>
</div>
</div>
{/*  Key Spec List  */}
<div className="bg-surface-container p-space-md rounded-xl flex-1 flex flex-col justify-between shadow-md">
<h3 className="font-headline-sm text-headline-sm text-on-surface mb-space-xs">Engineered Cockpit Protocol</h3>
<ul className="flex flex-col gap-space-sm font-body-sm text-body-sm text-on-surface-variant">
<li className="flex items-start gap-space-xs">
<span className="material-symbols-outlined text-primary-container text-base mt-0.5">bolt</span>
<span><strong className="text-on-surface">60fps Fluid Refresh Rate:</strong> GPU-rendered zero-tearing UI on OLED mobile mounts with micro-second reactive vector dials.</span>
</li>
<li className="flex items-start gap-space-xs">
<span className="material-symbols-outlined text-secondary-fixed text-base mt-0.5">wifi_tethering</span>
<span><strong className="text-on-surface">Bluetooth 5.3 LE Sub-15ms:</strong> Zero perceptible lag between physical handlebar movements and screen updates.</span>
</li>
<li className="flex items-start gap-space-xs">
<span className="material-symbols-outlined text-primary-fixed-dim text-base mt-0.5">wb_sunny</span>
<span><strong className="text-on-surface">Dynamic Polarized Daylight Mode:</strong> High-luminescence inverted neon palette tuned for direct sunlight through helmet visors.</span>
</li>
</ul>
<div className="pt-space-sm mt-space-sm bg-surface-container-low px-space-sm py-2 rounded-lg flex items-center justify-between">
<span className="font-label-caps text-label-caps text-on-surface-variant">Native Mount Support</span>
<span className="font-code-mono text-code-mono text-primary">QuadLock / RAM / SP Connect</span>
</div>
</div>
</div>
</div>
</div>
</section>
{/*  SECTION 2: DEEP SECTOR LAP & RIDE INTELLIGENCE  */}
<section className="w-full bg-surface py-space-4xl relative" id="lap-analysis">
<div className="max-w-container-max mx-auto px-gutter-desktop">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-space-md mb-space-2xl">
<div>
<div className="flex items-center gap-space-xs mb-space-2xs">
<span className="font-code-mono text-code-mono text-secondary-fixed">02 // Chronometric Race Analysis</span>
<span className="h-1.5 w-1.5 rounded-full bg-secondary-fixed"></span>
</div>
<h2 className="font-headline-xl text-headline-xl text-on-surface tracking-tight">
            Deep Sector Lap &amp; Ride Intelligence
          </h2>
</div>
<p className="font-body-md text-body-md text-on-surface-variant max-w-md">
          Micro-second GPS timing and IMU apex correlation. Overlay your fastest ghost lap and pinpoint precisely where milliseconds were won or lost.
        </p>
</div>
{/*  Bento Grid for Lap Analytics  */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-space-lg mb-space-2xl">
{/*  Left: Track GPS Layout & Apex Map (5 cols)  */}
<div className="lg:col-span-5 bg-surface-container-low p-space-lg rounded-xl shadow-lg flex flex-col justify-between">
<div>
<div className="flex items-center justify-between mb-space-sm">
<span className="font-headline-sm text-headline-sm text-on-surface">Mugello Circuit (Autodromo)</span>
<span className="px-space-xs py-0.5 rounded bg-primary-container/20 text-primary-fixed-dim font-label-caps text-label-caps">Auto-Detected</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-md">
              5.245 km • 15 Turns • 1,141m Long Straightaway. 10Hz multi-satellite track boundary matching.
            </p>
</div>
{/*  Track Map SVG Visualizer  */}
<div className="relative w-full h-64 bg-surface-container rounded-lg p-space-md flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-tr from-surface-container-lowest to-transparent pointer-events-none"></div>
{/*  Complex circuit path  */}
<svg className="w-full h-full text-outline-variant" fill="none" viewBox="0 0 300 200">
{/*  Background circuit trace  */}
<path d="M 30,170 C 10,140 10,90 40,60 C 70,30 110,25 150,25 C 190,25 240,40 270,70 C 290,90 280,140 240,160 C 210,175 180,140 160,140 C 130,140 120,180 80,180 Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="8"></path>
{/*  Active Delta Ghost Track Overlay  */}
<path d="M 30,170 C 10,140 10,90 40,60 C 70,30 110,25 150,25" stroke="url(#cyan-grad)" strokeLinecap="round" strokeWidth="8"></path>
{/*  Sector Split Markers  */}
<circle cx="40" cy="60" fill="#34ff8c" r="5"></circle>
<circle cx="150" cy="25" fill="#00f2fe" r="5"></circle>
<circle cx="270" cy="70" fill="#6ff6ff" r="5"></circle>
<circle cx="160" cy="140" fill="#ffb4ab" r="5"></circle>
<defs>
<linearGradient id="cyan-grad" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stopColor="#00f2fe"></stop>
<stop offset="100%" stopColor="#34ff8c"></stop>
</linearGradient>
</defs>
</svg>
<div className="absolute top-4 left-4 bg-surface-container-lowest/80 backdrop-blur-md px-2 py-1 rounded font-code-mono text-code-mono text-secondary-fixed">
              Speed Trap: 312.4 km/h
            </div>
<div className="absolute bottom-4 right-4 bg-surface-container-lowest/80 backdrop-blur-md px-2 py-1 rounded font-code-mono text-code-mono text-primary">
              Apex 9 Peak: 49.6° Lean
            </div>
</div>
<div className="grid grid-cols-2 gap-space-sm mt-space-md pt-space-sm">
<div className="bg-surface-container px-space-sm py-2 rounded-lg">
<span className="font-label-caps text-label-caps text-on-surface-variant block">Best Lap Time</span>
<span className="font-telemetry-metric-md text-telemetry-metric-md text-primary">1:48.342</span>
</div>
<div className="bg-surface-container px-space-sm py-2 rounded-lg">
<span className="font-label-caps text-label-caps text-on-surface-variant block">Optimal Sector Sum</span>
<span className="font-telemetry-metric-md text-telemetry-metric-md text-secondary-fixed">1:47.809</span>
</div>
</div>
</div>
{/*  Right: Sector Comparison & Throttle Traces (7 cols)  */}
<div className="lg:col-span-7 flex flex-col gap-space-md">
{/*  Sector Split Table Card  */}
<div className="bg-surface-container p-space-md rounded-xl shadow-md">
<div className="flex items-center justify-between pb-space-sm mb-space-sm">
<span className="font-headline-sm text-headline-sm text-on-surface">Sector Delta Matrix (Lap 7 vs Best Lap 4)</span>
<span className="font-code-mono text-code-mono text-secondary-fixed">-0.533s Ahead</span>
</div>
<div className="flex flex-col gap-space-xs">
{/*  Sector 1  */}
<div className="flex items-center justify-between p-space-xs bg-surface-container-low rounded-lg">
<div className="flex items-center gap-space-sm">
<span className="px-2 py-0.5 rounded bg-surface-bright font-code-mono text-code-mono text-on-surface">S1</span>
<span className="font-body-sm text-body-sm text-on-surface">San Donato Straight to Curva 2</span>
</div>
<div className="flex items-center gap-space-md font-code-mono text-code-mono">
<span className="text-on-surface">26.112s</span>
<span className="text-secondary-fixed bg-secondary-fixed/10 px-2 py-0.5 rounded">-0.240s</span>
</div>
</div>
{/*  Sector 2  */}
<div className="flex items-center justify-between p-space-xs bg-surface-container-low rounded-lg">
<div className="flex items-center gap-space-sm">
<span className="px-2 py-0.5 rounded bg-surface-bright font-code-mono text-code-mono text-on-surface">S2</span>
<span className="font-body-sm text-body-sm text-on-surface">Luco / Poggio Secco Complex</span>
</div>
<div className="flex items-center gap-space-md font-code-mono text-code-mono">
<span className="text-on-surface">22.408s</span>
<span className="text-secondary-fixed bg-secondary-fixed/10 px-2 py-0.5 rounded">-0.315s</span>
</div>
</div>
{/*  Sector 3  */}
<div className="flex items-center justify-between p-space-xs bg-surface-container-low rounded-lg">
<div className="flex items-center gap-space-sm">
<span className="px-2 py-0.5 rounded bg-surface-bright font-code-mono text-code-mono text-on-surface">S3</span>
<span className="font-body-sm text-body-sm text-on-surface">Casanova - Savelli - Arrabbiata 1 &amp; 2</span>
</div>
<div className="flex items-center gap-space-md font-code-mono text-code-mono">
<span className="text-on-surface">31.054s</span>
<span className="text-error bg-error/10 px-2 py-0.5 rounded">+0.112s</span>
</div>
</div>
{/*  Sector 4  */}
<div className="flex items-center justify-between p-space-xs bg-surface-container-low rounded-lg">
<div className="flex items-center gap-space-sm">
<span className="px-2 py-0.5 rounded bg-surface-bright font-code-mono text-code-mono text-on-surface">S4</span>
<span className="font-body-sm text-body-sm text-on-surface">Scarperia &gt; Palagio &gt; Bucine Apex</span>
</div>
<div className="flex items-center gap-space-md font-code-mono text-code-mono">
<span className="text-on-surface">28.768s</span>
<span className="text-secondary-fixed bg-secondary-fixed/10 px-2 py-0.5 rounded">-0.090s</span>
</div>
</div>
</div>
</div>
{/*  Canyon & Open Road Tracking Highlights  */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-space-md">
<div className="bg-surface-container-low p-space-md rounded-xl">
<div className="flex items-center gap-space-xs mb-space-xs text-primary-container">
<span className="material-symbols-outlined">explore</span>
<span className="font-headline-sm text-headline-sm">400+ Circuits + Canyon Paths</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant">
                Preloaded with FIM, MotoGP, and MotoAmerica track maps. Auto-initiates timing gates with zero manual push-button triggers.
              </p>
</div>
<div className="bg-surface-container-low p-space-md rounded-xl">
<div className="flex items-center gap-space-xs mb-space-xs text-secondary-fixed">
<span className="material-symbols-outlined">stacked_line_chart</span>
<span className="font-headline-sm text-headline-sm">Lean vs Velocity Heatmaps</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant">
                Synthesize throttle commitment with edge grip. Evaluate whether you are picking up the throttle early enough on corner exit.
              </p>
</div>
</div>
</div>
</div>
</div>
</section>
{/*  SECTION 3: EMERGENCY IMPACT & SOS BEACON  */}
<section className="w-full bg-surface-container-lowest py-space-4xl relative overflow-hidden" id="emergency">
<div className="absolute -bottom-20 -left-20 w-96 h-96 bg-error/5 rounded-full blur-3xl pointer-events-none"></div>
<div className="max-w-container-max mx-auto px-gutter-desktop relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-space-2xl items-center">
{/*  Left Explanatory Text & Certs (6 cols)  */}
<div className="lg:col-span-6 flex flex-col gap-space-md">
<div className="flex items-center gap-space-xs">
<span className="font-code-mono text-code-mono text-error">03 // Blackbox Protocol &amp; Life Safety</span>
<span className="h-1.5 w-1.5 rounded-full bg-error"></span>
</div>
<h2 className="font-headline-xl text-headline-xl text-on-surface tracking-tight">
            Ride Records &amp; Rider-Reported Hazards
          </h2>
<p className="font-body-lg text-body-lg text-on-surface-variant">
            Record ride telemetry on your phone and share road hazards with other riders. MotorSignal does not automatically detect crashes or contact emergency services.
          </p>
{/*  Feature Bullets  */}
<div className="flex flex-col gap-space-sm my-space-xs">
<div className="flex items-start gap-space-sm p-space-sm rounded-lg bg-surface-container-low">
<div className="p-2 rounded-lg bg-error-container text-on-error-container flex items-center justify-center">
<span className="material-symbols-outlined text-xl">sensors</span>
</div>
<div>
<h4 className="font-headline-sm text-headline-sm text-on-surface">Local Ride Recording</h4>
<p className="font-body-sm text-body-sm text-on-surface-variant">
                  Ride recording uses your phone sensors and remains available when cloud services are offline.
                </p>
</div>
</div>
<div className="flex items-start gap-space-sm p-space-sm rounded-lg bg-surface-container-low">
<div className="p-2 rounded-lg bg-surface-bright text-primary flex items-center justify-center">
<span className="material-symbols-outlined text-xl">satellite_alt</span>
</div>
<div>
<h4 className="font-headline-sm text-headline-sm text-on-surface">Rider-Submitted Road Alerts</h4>
<p className="font-body-sm text-body-sm text-on-surface-variant">
                  Report a road hazard or incident from the app. Alerts are not emergency dispatch and require network access to share.
                </p>
</div>
</div>
<div className="flex items-start gap-space-sm p-space-sm rounded-lg bg-surface-container-low">
<div className="p-2 rounded-lg bg-surface-bright text-secondary-fixed flex items-center justify-center">
<span className="material-symbols-outlined text-xl">lock_reset</span>
</div>
<div>
<h4 className="font-headline-sm text-headline-sm text-on-surface">Your Ride Data</h4>
<p className="font-body-sm text-body-sm text-on-surface-variant">
                  Review recorded ride history and export supported ride data. No CAN-bus or camera data is captured by this feature.
                </p>
</div>
</div>
</div>
{/*  Compliance Badges  */}
<div className="flex items-center gap-space-md pt-space-xs">
<div className="px-space-md py-2 rounded-xl bg-surface-container flex items-center gap-space-xs">
<span className="material-symbols-outlined text-secondary-fixed text-lg">verified</span>
<span className="font-label-caps text-label-caps text-on-surface">Phone Sensor Telemetry</span>
</div>
<div className="px-space-md py-2 rounded-xl bg-surface-container flex items-center gap-space-xs">
<span className="material-symbols-outlined text-primary-container text-lg">shield</span>
<span className="font-label-caps text-label-caps text-on-surface">Offline-Ready Recording</span>
</div>
</div>
</div>
{/*  Right SOS Interactive HUD Card (6 cols)  */}
<div className="lg:col-span-6 bg-surface-container p-space-xl rounded-xl shadow-2xl relative">
<div className="flex items-center justify-between pb-space-md border-b-0 mb-space-md">
<div className="flex items-center gap-space-xs">
<span className="w-3 h-3 rounded-full bg-error animate-ping"></span>
<span className="font-label-caps text-label-caps text-error">Illustrative UI Preview — Not an Emergency Service</span>
</div>
<span className="font-code-mono text-code-mono text-outline">Sample Data</span>
</div>
<div className="bg-surface-container-lowest p-space-lg rounded-xl mb-space-lg flex flex-col items-center justify-center text-center">
<div className="w-20 h-20 rounded-full bg-error/10 flex items-center justify-center mb-space-sm text-error">
<span className="material-symbols-outlined text-4xl">warning</span>
</div>
<span className="font-headline-lg text-headline-lg text-on-surface mb-space-2xs">Road Alert Example</span>
<p className="font-body-sm text-body-sm text-on-surface-variant max-w-sm mb-space-md">
              This preview is illustrative. It does not detect crashes, transmit an SOS, or contact responders.
            </p>
<div className="font-label-caps text-label-caps text-error mb-space-sm">
              SAMPLE
            </div>
<div className="flex gap-space-sm w-full max-w-xs">
<span className="flex-1 py-2 rounded-xl bg-surface-bright text-on-surface font-label-md text-label-md">
                Close Preview
              </span>
<span className="flex-1 py-2 rounded-xl bg-error text-on-error font-label-md text-label-md">
                Report a Hazard
              </span>
</div>
</div>
<div className="bg-surface-container-low p-space-md rounded-lg flex flex-col gap-space-xs font-code-mono text-code-mono text-on-surface-variant">
<div className="flex justify-between">
<span>Lat/Long:</span>
<span className="text-on-surface">43.9975° N, 11.3714° E (Mugello S3)</span>
</div>
<div className="flex justify-between">
<span>Availability:</span>
<span className="text-on-surface">Sample content only</span>
</div>
<div className="flex justify-between">
<span>Emergency dispatch:</span>
<span className="text-secondary-fixed">Not provided</span>
</div>
</div>
</div>
</div>
</div>
</section>
{/*  SECTION 4: CAN-BUS & ECU HEALTH STREAM  */}
<section className="w-full bg-surface py-space-4xl relative" id="canbus">
<div className="max-w-container-max mx-auto px-gutter-desktop">
<div className="flex flex-col md:flex-row md:items-end justify-between gap-space-md mb-space-2xl">
<div>
<div className="flex items-center gap-space-xs mb-space-2xs">
<span className="font-code-mono text-code-mono text-primary">04 // Phone Sensor Telemetry</span>
<span className="h-1.5 w-1.5 rounded-full bg-primary-container"></span>
</div>
<h2 className="font-headline-xl text-headline-xl text-on-surface tracking-tight">
            Phone-Based Ride Telemetry
          </h2>
</div>
<p className="font-body-md text-body-md text-on-surface-variant max-w-md">
          Use your phone's supported sensors to record ride data. OBD-II, CAN-bus, and motorcycle ECU diagnostics are not currently available.
        </p>
</div>
<p className="font-body-md text-body-md text-on-surface-variant bg-surface-container-low p-space-lg rounded-xl">
  OBD-II, CAN-bus, and motorcycle ECU diagnostics are not currently available in MotorSignal. Ride recording uses supported phone sensors.
</p>
{/* Unavailable hardware concepts are intentionally not presented as product capabilities. */}
<div hidden>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-space-md mb-space-2xl">
{/*  Sensor 1: Coolant Temp  */}
<div className="bg-surface-container-low p-space-lg rounded-xl shadow-sm hover:shadow-md transition-all">
<div className="flex items-center justify-between mb-space-md">
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-primary-container">thermostat</span>
<span className="font-label-caps text-label-caps text-on-surface-variant">Engine Coolant</span>
</div>
<span className="font-code-mono text-code-mono text-secondary-fixed">Nominal</span>
</div>
<div className="flex items-baseline gap-space-xs mb-space-xs">
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-on-surface">88°</span>
<span className="font-headline-sm text-headline-sm text-on-surface-variant">Celsius</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant">
            ECU threshold alerts warn of radiator heat-soak before cylinder head distortion occurs.
          </p>
</div>
{/*  Sensor 2: Oil Pressure & PSI  */}
<div className="bg-surface-container-low p-space-lg rounded-xl shadow-sm hover:shadow-md transition-all">
<div className="flex items-center justify-between mb-space-md">
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-primary-container">oil_barrel</span>
<span className="font-label-caps text-label-caps text-on-surface-variant">Oil Hydraulic PSI</span>
</div>
<span className="font-code-mono text-code-mono text-secondary-fixed">High Stability</span>
</div>
<div className="flex items-baseline gap-space-xs mb-space-xs">
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-on-surface">62.4</span>
<span className="font-headline-sm text-headline-sm text-on-surface-variant">PSI @ 9,800 RPM</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant">
            Continuous crankcase pressure monitoring prevents oil cavitation in prolonged apex leans.
          </p>
</div>
{/*  Sensor 3: Gear Position Indicator  */}
<div className="bg-surface-container-low p-space-lg rounded-xl shadow-sm hover:shadow-md transition-all">
<div className="flex items-center justify-between mb-space-md">
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-secondary-fixed">settings_input_component</span>
<span className="font-label-caps text-label-caps text-on-surface-variant">Gearbox State</span>
</div>
<span className="font-code-mono text-code-mono text-primary">Quickshifter Active</span>
</div>
<div className="flex items-baseline gap-space-xs mb-space-xs">
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-primary-container">4</span>
<span className="font-headline-sm text-headline-sm text-on-surface-variant">Gear // 11,400 RPM</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant">
            Monitors shift cut-off duration (ms), false neutral occurrences, and clutch slip ratios.
          </p>
</div>
{/*  Sensor 4: RPM Tachometer Trace  */}
<div className="bg-surface-container-low p-space-lg rounded-xl shadow-sm hover:shadow-md transition-all">
<div className="flex items-center justify-between mb-space-md">
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-primary-container">speed</span>
<span className="font-label-caps text-label-caps text-on-surface-variant">Crank RPM Peak</span>
</div>
<span className="font-code-mono text-code-mono text-on-surface-variant">Redline 14,500</span>
</div>
<div className="flex items-baseline gap-space-xs mb-space-xs">
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-on-surface">13,850</span>
<span className="font-headline-sm text-headline-sm text-on-surface-variant">Max Recorded</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant">
            Full resolution engine rpm graph correlated with throttle opening percentage.
          </p>
</div>
{/*  Sensor 5: Fuel Burn Rate  */}
<div className="bg-surface-container-low p-space-lg rounded-xl shadow-sm hover:shadow-md transition-all">
<div className="flex items-center justify-between mb-space-md">
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-primary-container">local_gas_station</span>
<span className="font-label-caps text-label-caps text-on-surface-variant">Fuel Injection Consumption</span>
</div>
<span className="font-code-mono text-code-mono text-secondary-fixed">8.2 L / 100km</span>
</div>
<div className="flex items-baseline gap-space-xs mb-space-xs">
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-on-surface">3.8</span>
<span className="font-headline-sm text-headline-sm text-on-surface-variant">Laps Remaining Fuel</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant">
            Sprint-race fuel management strategy to avoid carrying unnecessary ballast weight.
          </p>
</div>
{/*  Sensor 6: TPMS & Compound Temperature  */}
<div className="bg-surface-container-low p-space-lg rounded-xl shadow-sm hover:shadow-md transition-all">
<div className="flex items-center justify-between mb-space-md">
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-secondary-fixed">tire_repair</span>
<span className="font-label-caps text-label-caps text-on-surface-variant">TPMS Carcass Temp</span>
</div>
<span className="font-code-mono text-code-mono text-secondary-fixed">Track Grip Optimal</span>
</div>
<div className="flex items-baseline gap-space-xs mb-space-xs">
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-secondary-fixed">82° / 78°</span>
<span className="font-headline-sm text-headline-sm text-on-surface-variant">F / R Rear Tire</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant">
            Live cold/hot pressure inflation delta tracking to eliminate tire tearing and cold tears.
          </p>
</div>
</div>
{/*  Manufacturer OEM Plug-and-Play Compatibility Bar  */}
<div className="bg-surface-container p-space-lg rounded-xl shadow-md">
<div className="flex flex-col md:flex-row items-center justify-between gap-space-md mb-space-md">
<div>
<span className="font-label-caps text-label-caps text-primary block mb-1">OEM Factory Harness Support</span>
<h3 className="font-headline-sm text-headline-sm text-on-surface">Universal Plug &amp; Play OBD-II / Euro5 Connectors</h3>
</div>
<span className="font-code-mono text-code-mono text-on-surface-variant bg-surface-container-low px-space-md py-1.5 rounded-lg">
            Zero ECU Flashing Required
          </span>
</div>
<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-space-xs text-center font-headline-sm text-headline-sm">
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">Yamaha</div>
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">Ducati</div>
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">BMW</div>
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">Kawasaki</div>
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">KTM</div>
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">Honda</div>
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">Aprilia</div>
<div className="p-space-sm rounded-lg bg-surface-container-low text-on-surface hover:text-primary-container transition-colors">Triumph</div>
</div>
</div>
</div>
</div>
</section>
{/*  SECTION 5: CLOUD SYNC & REPLAY  */}
<section className="w-full bg-surface-container-lowest py-space-4xl relative" id="cloud-replay">
<div className="max-w-container-max mx-auto px-gutter-desktop">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-space-2xl items-center">
{/*  Visual Telemetry Replay Snapshot (7 cols)  */}
<div className="lg:col-span-7 bg-surface-container p-space-lg rounded-xl shadow-xl flex flex-col gap-space-md">
<div className="flex items-center justify-between">
<div className="flex items-center gap-space-xs">
<span className="w-2.5 h-2.5 rounded-full bg-secondary-fixed"></span>
<span className="font-headline-sm text-headline-sm text-on-surface">Telemetry Trace Playback Engine</span>
</div>
<div className="flex items-center gap-space-xs font-code-mono text-code-mono text-outline">
<span className="material-symbols-outlined text-base">cloud_done</span>
<span>Synchronized (Session #142)</span>
</div>
</div>
{/*  Video Replay Frame Overlay  */}
<div className="relative w-full h-72 rounded-lg overflow-hidden group shadow-md">
<div className="bg-cover bg-center w-full h-full transform group-hover:scale-105 transition-transform duration-700" data-alt="First-person rider POV looking through a dark smoked motorcycle windscreen leaning heavily into an asphalt racetrack corner with digital cyan telemetry overlays showing speed, throttle, and RPM curves, sunlight gleaming on asphalt." ></div>
<div className="absolute inset-0 bg-gradient-to-t from-surface-container-lowest via-transparent to-transparent"></div>
{/*  Floating Data Widgets over rider view  */}
<div className="absolute bottom-4 left-4 right-4 flex items-center justify-between bg-surface-container-lowest/85 backdrop-blur-md p-space-sm rounded-lg">
<div className="flex items-center gap-space-md font-code-mono text-code-mono">
<span className="text-primary-container font-bold">T: 01:24.810</span>
<span className="text-on-surface">Speed: 182 km/h</span>
<span className="text-secondary-fixed">Lean: 51.4° L</span>
</div>
<div className="flex items-center gap-space-xs">
<button className="w-8 h-8 rounded-lg bg-surface-bright flex items-center justify-center text-on-surface hover:text-primary-container">
<span className="material-symbols-outlined text-lg">play_arrow</span>
</button>
<button className="w-8 h-8 rounded-lg bg-surface-bright flex items-center justify-center text-on-surface hover:text-primary-container">
<span className="material-symbols-outlined text-lg">fast_forward</span>
</button>
</div>
</div>
</div>
{/*  Scrubbing Bar with Sector Flags  */}
<div className="w-full bg-surface-container-low p-space-sm rounded-lg">
<div className="flex justify-between font-code-mono text-code-mono text-on-surface-variant mb-1">
<span>Lap 4 Replay (Total 01:48.342)</span>
<span>100% Telemetry Buffer</span>
</div>
<div className="relative w-full bg-surface-container-highest h-2 rounded-full overflow-hidden">
<div className="h-full bg-primary-container w-[72%] rounded-full"></div>
</div>
</div>
</div>
{/*  Explanatory Replay Details (5 cols)  */}
<div className="lg:col-span-5 flex flex-col gap-space-md">
<div className="flex items-center gap-space-xs">
<span className="font-code-mono text-code-mono text-secondary-fixed">05 // Telemetry Cloud Sync</span>
<span className="h-1.5 w-1.5 rounded-full bg-secondary-fixed"></span>
</div>
<h2 className="font-headline-xl text-headline-xl text-on-surface tracking-tight">
            Frame-Accurate Video &amp; Telemetry Overlay
          </h2>
<p className="font-body-md text-body-md text-on-surface-variant">
            Export 4K video with embedded Formula/MotoGP broadcast overlays. Sync external action cameras (GoPro, Insta360, DJI) automatically using GPS timestamp correlation.
          </p>
<ul className="flex flex-col gap-space-sm font-body-sm text-body-sm text-on-surface-variant">
<li className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-primary-container text-base">sync</span>
<span>Automatic cloud backup whenever phone reconnects to Wi-Fi.</span>
</li>
<li className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-secondary-fixed text-base">group</span>
<span>Team paddock telemetry sharing: Mechanics inspect engine thermals remotely.</span>
</li>
<li className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-primary text-base">ios_share</span>
<span>Direct export to CSV, GPX, MoTeC i2 Pro, and AiM Race Studio formats.</span>
</li>
</ul>
<div className="pt-space-sm">
<a className="inline-flex items-center gap-space-xs px-space-lg py-2.5 rounded-xl bg-surface-container-high hover:bg-surface-bright text-primary font-headline-sm text-headline-sm transition-all shadow-sm" data-path="live-cockpit" href="/account">
<span>View Interactive Replay Demo</span>
<span className="material-symbols-outlined text-base">arrow_forward</span>
</a>
</div>
</div>
</div>
</div>
</section>
{/*  BOTTOM CALL TO ACTION  */}
<section className="w-full bg-surface py-space-4xl relative overflow-hidden">
<div className="max-w-container-max mx-auto px-gutter-desktop">
<div className="relative bg-gradient-to-tr from-surface-container-lowest via-surface-container to-surface-container-low p-space-2xl md:p-space-3xl rounded-2xl shadow-2xl overflow-hidden flex flex-col items-center text-center">
<div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-primary-container/10 blur-3xl pointer-events-none rounded-full"></div>
<div className="inline-flex items-center gap-space-xs px-space-md py-1 rounded-full bg-surface-container-high text-primary-container font-label-caps text-label-caps tracking-normal mb-space-md shadow-sm">
<span className="h-2 w-2 rounded-full bg-secondary-fixed"></span>
          Ready for Track &amp; Canyon Roads
        </div>
<h2 className="font-headline-xl text-headline-xl text-on-surface max-w-2xl mb-space-md tracking-tight">
           Start recording rides with your phone.
        </h2>
<p className="font-body-lg text-body-lg text-on-surface-variant max-w-xl mb-space-xl">
          Explore the ride recording and rider community features available in MotorSignal today.
        </p>
<div className="flex flex-col sm:flex-row items-center gap-space-md w-full justify-center max-w-md">
<a className="w-full sm:w-auto inline-flex items-center justify-center px-space-xl py-3.5 rounded-xl bg-gradient-to-r from-primary-container to-primary-fixed text-on-primary-container font-headline-sm text-headline-sm hover:shadow-[0_0_24px_rgba(0,242,254,0.45)] transition-all" data-path="create-account" href="/account">
            Start 30-Day Free Trial
          </a>
<a className="w-full sm:w-auto inline-flex items-center justify-center px-space-xl py-3.5 rounded-xl bg-surface-container-high hover:bg-surface-bright text-on-surface font-headline-sm text-headline-sm transition-all shadow-sm" data-path="hardware-and-app" href="/account">
            Explore MotorSignal
          </a>
</div>
<div className="mt-space-lg flex items-center gap-space-lg font-code-mono text-code-mono text-outline">
<span>No Wire Splicing</span>
<span>•</span>
<span>Worldwide 3-Day Express Dispatch</span>
<span>•</span>
<span>Money Back Guarantee</span>
</div>
</div>
</div>
</section>
</div>

    </div>
  );
}