MotorSignal-App/website/app/group-rides/page.tsx

'use client';

import React from 'react';
import Link from 'next/link';

export default function GroupRidesPage() {
  return (
    <div className="flagship-page text-on-surface bg-surface min-h-screen">
      <div className="flex flex-col w-full">
{/*  Dynamic Atmospheric Glow Background Layers  */}
<div className="relative w-full overflow-hidden">
<div className="absolute top-0 left-1/4 w-96 h-96 bg-primary-container/10 rounded-full blur-[120px] pointer-events-none -z-10"></div>
<div className="absolute top-64 right-10 w-[500px] h-[500px] bg-secondary-fixed/5 rounded-full blur-[140px] pointer-events-none -z-10"></div>
{/*  Hero Section  */}
<section className="max-w-container-max mx-auto px-gutter-desktop pt-space-2xl pb-space-3xl">
<div className="flex flex-col items-start max-w-4xl">
{/*  Eyebrow Badge  */}
<div className="inline-flex items-center gap-space-xs px-space-sm py-1.5 rounded-full bg-surface-container-high border-0 shadow-sm mb-space-md">
<span className="relative flex h-2.5 w-2.5">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary-fixed opacity-75"></span>
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-secondary-fixed-dim"></span>
</span>
<span className="font-label-caps text-label-caps text-secondary-fixed tracking-widest uppercase">LIVE PACK RADAR &amp; FORMATION TELEMETRY</span>
</div>
{/*  Headline  */}
<h1 className="font-display-hero text-display-hero text-on-surface tracking-tight uppercase mb-space-sm">
          Ride in pack formation. <br/>
<span className="bg-gradient-to-r from-primary-container via-primary-fixed to-secondary-fixed text-transparent bg-clip-text">Never lose a wingman.</span>
</h1>
{/*  Subheading  */}
<p className="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mb-space-xl">
          Real-time rider radar, staggered formation spacing alerts, instant incident broadcast, and automated regroup checkpoints calibrated for fast canyon runs and transcontinental tours.
        </p>
{/*  Dual CTAs & Quick Metrics Bar  */}
<div className="flex flex-wrap items-center gap-space-md w-full">
  <button className="inline-flex items-center justify-center gap-space-xs 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 shadow-xl hover:shadow-[0_0_24px_rgba(0,242,254,0.4)] transition-all" id="btn-create-ride">
    <span className="material-symbols-outlined text-[20px]">add_circle</span>
    Create Group Ride
  </button>
  <button className="inline-flex items-center justify-center gap-space-xs px-space-lg py-3.5 rounded-xl bg-surface-container-high hover:bg-surface-container-highest text-on-surface font-headline-sm text-headline-sm transition-all" id="btn-join-code">
    <span className="material-symbols-outlined text-primary-fixed-dim text-[20px]">qr_code_scanner</span>
    Join with Ride Code / QR
  </button>
</div>
</div>
</section>
{/*  Interactive Live Pack Radar Map & Dashboard  */}
<section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
<div className="bg-surface-container-lowest rounded-xl shadow-2xl overflow-hidden">
{/*  Tactical Header Strip  */}
<div className="bg-surface-container-low px-space-lg py-space-sm flex flex-wrap items-center justify-between gap-space-md">
<div className="flex items-center gap-space-md">
<div className="flex items-center gap-space-xs">
<span className="h-2 w-2 rounded-full bg-secondary-fixed"></span>
<span className="font-label-caps text-label-caps text-on-surface uppercase tracking-wider">SWARM RECON: SKYLINE BLVD &gt; COAST HWY</span>
</div>
<span className="font-code-mono text-code-mono text-on-surface-variant bg-surface-container px-2 py-0.5 rounded">SESSION #CA-84-SW</span>
</div>
<div className="flex items-center gap-space-lg font-code-mono text-code-mono text-on-surface-variant">
<span className="flex items-center gap-1 hidden lg:flex">
  <span className="material-symbols-outlined text-secondary-fixed text-[18px]">cell_tower</span> MESH ACTIVE
</span>
<span className="flex items-center gap-1"><span className="text-secondary-fixed">●</span> 6 SYNCHRONIZED</span>
<span className="hidden sm:inline">GAP DELTA: ±0.4s</span>
<span className="text-primary-container">REPAIR SQUAD: READY</span>
</div>
</div>
{/*  Cockpit Layout: Map & Radar Feed  */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-0">
{/*  Tactical Canvas & Radar Screen  */}
<div className="lg:col-span-8 relative bg-surface-container-low min-h-[540px] flex flex-col justify-between p-space-md overflow-hidden">
{/*  Map background placeholder with tactical overlay styling  */}
<div className="absolute inset-0 bg-cover bg-center opacity-40 mix-blend-luminosity" data-location="Skyline Boulevard, Woodside, CA" ></div>
{/*  Tactical Coordinate Grids (Inline SVG Overlay)  */}
<svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern height="48" id="grid-pattern" patternUnits="userSpaceOnUse" width="48">
<path className="text-outline-variant" d="M 48 0 L 0 0 0 48" fill="none" stroke="currentColor" strokeWidth="0.5"></path>
<circle className="text-primary-fixed-dim" cx="0" cy="0" fill="currentColor" r="1.5"></circle>
</pattern>
</defs>
<rect fill="url(#grid-pattern)" height="100%" width="100%"></rect>
{/*  Tactical Route Trace  */}
<path className="text-primary-container" d="M 120 460 C 220 380, 260 410, 360 300 S 490 260, 560 170 S 710 160, 840 90" fill="none" stroke="currentColor" strokeDasharray="8 6" strokeWidth="4"></path>
{/*  Safe Spacing Buffers  */}
<circle className="text-secondary-fixed/40" cx="840" cy="90" fill="none" r="32" stroke="currentColor" strokeWidth="1.5"></circle>
<circle className="text-secondary-fixed/40" cx="710" cy="160" fill="none" r="28" stroke="currentColor" strokeWidth="1.5"></circle>
<circle className="text-error/50" cx="560" cy="170" fill="none" r="32" stroke="currentColor" strokeWidth="2"></circle>
<circle className="text-secondary-fixed/40" cx="360" cy="300" fill="none" r="26" stroke="currentColor" strokeWidth="1.5"></circle>
<circle className="text-error-container" cx="260" cy="410" fill="none" r="36" stroke="currentColor" strokeDasharray="4 2" strokeWidth="2.5"></circle>
<circle className="text-primary-container/50" cx="120" cy="460" fill="none" r="30" stroke="currentColor" strokeWidth="1.5"></circle>
</svg>
{/*  Map HUD Top Left: Sector Status  */}
<div className="relative z-10 flex items-start justify-between">
<div className="bg-surface/90 backdrop-blur-md px-space-md py-2.5 rounded-xl shadow-lg flex flex-col gap-0.5">
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">FORMATION PROFILE</span>
<span className="font-headline-sm text-headline-sm text-primary">STAGGERED DUAL COLUMN [B]</span>
<span className="font-code-mono text-code-mono text-secondary-fixed">PACELINE LOCK: OPTIMAL</span>
</div>
{/*  Map HUD Top Right: Telemetry Ping  */}
<div className="bg-surface/90 backdrop-blur-md px-space-md py-2 rounded-xl shadow-lg flex items-center gap-space-sm">
<div className="text-right">
<span className="font-label-caps text-label-caps text-on-surface-variant block uppercase">GPS FREQUENCY</span>
<span className="font-code-mono text-code-mono text-on-surface">10.0 Hz • GNSS LOCK</span>
</div>
<span className="material-symbols-outlined text-secondary-fixed text-[24px]">satellite_alt</span>
</div>
</div>
{/*  Visual Pin Indicators plotted across the canyon trace  */}
<div className="relative z-10 my-auto pointer-events-none">
{/*  Lead Rider Marker  */}
<div className="absolute -top-32 right-12 flex items-center gap-space-xs bg-surface-container-high/90 px-2.5 py-1 rounded shadow-md pointer-events-auto cursor-pointer hover:bg-surface-bright">
<span className="w-2.5 h-2.5 rounded-full bg-secondary-fixed animate-pulse"></span>
<span className="font-code-mono text-code-mono text-on-surface font-bold">1 • ApexLead</span>
<span className="font-label-caps text-label-caps text-secondary-fixed">68 MPH</span>
</div>
{/*  Hard Braking Warning Marker (Rider 5)  */}
<div className="absolute bottom-12 left-1/3 flex items-center gap-space-xs bg-error-container/90 px-2.5 py-1.5 rounded shadow-xl pointer-events-auto">
<span className="material-symbols-outlined text-error text-[16px] animate-bounce">warning</span>
<span className="font-code-mono text-code-mono text-on-surface font-bold">5 • Alex_Ducati</span>
<span className="font-label-caps text-label-caps text-error">-1.2G DECEL</span>
</div>
</div>
{/*  Map HUD Bottom Control Strip  */}
<div className="relative z-10 flex flex-wrap items-center justify-between gap-space-sm mt-auto pt-space-lg">
<div className="flex items-center gap-space-xs bg-surface/90 backdrop-blur-md p-1.5 rounded-xl">
<button className="px-space-sm py-1 rounded-lg bg-surface-container-highest text-primary font-label-caps text-label-caps uppercase">Tactical</button>
<button className="px-space-sm py-1 rounded-lg hover:bg-surface-container text-on-surface-variant font-label-caps text-label-caps uppercase">Satellite</button>
<button className="px-space-sm py-1 rounded-lg hover:bg-surface-container text-on-surface-variant font-label-caps text-label-caps uppercase">Elevation 3D</button>
</div>
<div className="bg-surface/90 backdrop-blur-md px-space-md py-1.5 rounded-xl flex items-center gap-space-sm">
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">REGROUP POINT</span>
<span className="font-code-mono text-code-mono text-primary-container font-bold">Alice's Restaurant (14.8 mi)</span>
</div>
</div>
</div>
{/*  Live Swarm Nodes Telemetry Column  */}
<div className="lg:col-span-4 bg-surface-container p-space-md flex flex-col gap-space-sm overflow-y-auto max-h-[620px]">
<div className="flex items-center justify-between pb-space-xs mb-space-xs">
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">PACK TELEMETRY STREAM</span>
<span className="font-code-mono text-code-mono text-primary-fixed-dim">6 ACTIVE</span>
</div>
{/*  Rider 1: ApexLead  */}
<div className="p-space-sm rounded-xl bg-surface-container-high hover:bg-surface-container-highest transition-all">
<div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-space-xs">
<span className="w-2 h-2 rounded-full bg-secondary-fixed"></span>
<span className="font-headline-sm text-headline-sm text-on-surface">ApexLead</span>
<span className="px-1.5 py-0.5 rounded bg-surface-container-lowest font-label-caps text-label-caps text-secondary-fixed uppercase">Pace Setter</span>
</div>
<span className="font-code-mono text-code-mono text-primary-fixed">LEAD</span>
</div>
<div className="grid grid-cols-3 gap-2 mt-2 font-code-mono text-code-mono text-on-surface-variant">
<div>SPEED: <span className="text-on-surface font-bold">68 MPH</span></div>
<div>LEAN: <span className="text-primary-container font-bold">42°</span></div>
<div>THROTTLE: <span className="text-on-surface">78%</span></div>
</div>
</div>
{/*  Rider 2: Ghost99  */}
<div className="p-space-sm rounded-xl bg-surface-container-high hover:bg-surface-container-highest transition-all">
<div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-space-xs">
<span className="w-2 h-2 rounded-full bg-secondary-fixed"></span>
<span className="font-headline-sm text-headline-sm text-on-surface">Ghost99</span>
<span className="px-1.5 py-0.5 rounded bg-surface-container-lowest font-label-caps text-label-caps text-on-surface-variant uppercase">Wingman L</span>
</div>
<span className="font-code-mono text-code-mono text-secondary-fixed">+45m GAP</span>
</div>
<div className="grid grid-cols-3 gap-2 mt-2 font-code-mono text-code-mono text-on-surface-variant">
<div>SPEED: <span className="text-on-surface">67 MPH</span></div>
<div>LEAN: <span className="text-primary-container font-bold">40°</span></div>
<div>BRAKE: <span className="text-on-surface">0%</span></div>
</div>
</div>
{/*  Rider 3: Sarah_RR (Warning: Tire Pressure)  */}
<div className="p-space-sm rounded-xl bg-surface-container-high hover:bg-surface-container-highest transition-all relative overflow-hidden">
<div className="absolute left-0 top-0 bottom-0 w-1 bg-error"></div>
<div className="flex items-center justify-between mb-1 pl-1">
<div className="flex items-center gap-space-xs">
<span className="w-2 h-2 rounded-full bg-error animate-pulse"></span>
<span className="font-headline-sm text-headline-sm text-on-surface">Sarah_RR</span>
<span className="px-1.5 py-0.5 rounded bg-surface-container-lowest font-label-caps text-label-caps text-on-surface-variant uppercase">Wingman R</span>
</div>
<span className="font-code-mono text-code-mono text-on-surface-variant">+110m GAP</span>
</div>
<div className="mt-2 pl-1">
<div className="flex items-center gap-1 text-error font-code-mono text-code-mono">
<span className="material-symbols-outlined text-[15px]">tire_repair</span>
<span>ALERT: REAR TIRE 28 PSI (LOW)</span>
</div>
</div>
</div>
{/*  Rider 4: Dan_KTM  */}
<div className="p-space-sm rounded-xl bg-surface-container-high hover:bg-surface-container-highest transition-all">
<div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-space-xs">
<span className="w-2 h-2 rounded-full bg-secondary-fixed"></span>
<span className="font-headline-sm text-headline-sm text-on-surface">Dan_KTM</span>
<span className="px-1.5 py-0.5 rounded bg-surface-container-lowest font-label-caps text-label-caps text-on-surface-variant uppercase">Mid Pack</span>
</div>
<span className="font-code-mono text-code-mono text-secondary-fixed">+180m GAP</span>
</div>
<div className="grid grid-cols-3 gap-2 mt-2 font-code-mono text-code-mono text-on-surface-variant">
<div>SPEED: <span className="text-on-surface">63 MPH</span></div>
<div>LEAN: <span className="text-on-surface">28°</span></div>
<div>TEMP: <span className="text-on-surface">88°C</span></div>
</div>
</div>
{/*  Rider 5: Alex_Ducati (Yellow Flag: Hard Braking)  */}
<div className="p-space-sm rounded-xl bg-surface-container-high hover:bg-surface-container-highest transition-all relative overflow-hidden">
<div className="absolute left-0 top-0 bottom-0 w-1 bg-error-container"></div>
<div className="flex items-center justify-between mb-1 pl-1">
<div className="flex items-center gap-space-xs">
<span className="w-2 h-2 rounded-full bg-error"></span>
<span className="font-headline-sm text-headline-sm text-on-surface">Alex_Ducati</span>
<span className="px-1.5 py-0.5 rounded bg-surface-container-lowest font-label-caps text-label-caps text-error uppercase">DECEL EVENT</span>
</div>
<span className="font-code-mono text-code-mono text-on-surface-variant">+320m GAP</span>
</div>
<div className="mt-2 pl-1 flex items-center justify-between font-code-mono text-code-mono">
<span className="text-error font-bold">HARD BRAKING (-1.2G)</span>
<span className="text-on-surface-variant">ABS: ENGAGED</span>
</div>
</div>
{/*  Rider 6: Sweep_Marshal  */}
<div className="p-space-sm rounded-xl bg-surface-container-high hover:bg-surface-container-highest transition-all">
<div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-space-xs">
<span className="w-2 h-2 rounded-full bg-primary-container"></span>
<span className="font-headline-sm text-headline-sm text-on-surface">Sweep_Marshal</span>
<span className="px-1.5 py-0.5 rounded bg-surface-container-lowest font-label-caps text-label-caps text-primary-container uppercase">Rear Guard</span>
</div>
<span className="font-code-mono text-code-mono text-primary-fixed-dim">+450m GAP</span>
</div>
<div className="grid grid-cols-3 gap-2 mt-2 font-code-mono text-code-mono text-on-surface-variant">
<div>SPEED: <span className="text-on-surface">59 MPH</span></div>
<div>RADIO: <span className="text-secondary-fixed">OPEN</span></div>
<div>PACK LOCK: <span className="text-primary">100%</span></div>
</div>
</div>
</div>
</div>
{/*  Formation Safety Metrics Panel Strip  */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 bg-surface-container-highest p-space-lg gap-space-lg">
{/*  Metric 1: Spacing Integrity  */}
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">SPACING INTEGRITY</span>
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">verified</span>
</div>
<div className="flex items-baseline gap-space-xs">
<span className="font-telemetry-metric-md text-telemetry-metric-md text-secondary-fixed">94%</span>
<span className="font-code-mono text-code-mono text-on-surface-variant">SAFETY INDEX</span>
</div>
<div className="w-full bg-surface-container h-1.5 rounded-full overflow-hidden mt-1">
<div className="bg-secondary-fixed h-full rounded-full" ></div>
</div>
</div>
{/*  Metric 2: Average Pack Speed  */}
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">AVERAGE PACK VELOCITY</span>
<span className="material-symbols-outlined text-primary-container text-[18px]">speed</span>
</div>
<div className="flex items-baseline gap-space-xs">
<span className="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">64.2</span>
<span className="font-code-mono text-code-mono text-primary-fixed-dim">MPH</span>
</div>
<span className="font-code-mono text-code-mono text-on-surface-variant">DELTA DRIFT: -1.8 MPH (TIGHTENING)</span>
</div>
{/*  Metric 3: Atmospheric & Track Conditions  */}
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">SURFACE &amp; CLIMATE</span>
<span className="material-symbols-outlined text-on-surface-variant text-[18px]">thermostat</span>
</div>
<div className="flex items-baseline gap-space-xs">
<span className="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">21°C</span>
<span className="font-code-mono text-code-mono text-on-surface-variant">DRY ASPHALT</span>
</div>
<span className="font-code-mono text-code-mono text-secondary-fixed">0% PRECIP • GRIP OPTIMAL</span>
</div>
{/*  Metric 4: Next Regroup Waypoint  */}
<div className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<span className="font-label-caps text-label-caps text-on-surface-variant uppercase">REGROUP POINT</span>
<span className="material-symbols-outlined text-primary-container text-[18px]">pin_drop</span>
</div>
<div className="flex items-baseline gap-space-xs">
<span className="font-telemetry-metric-md text-telemetry-metric-md text-primary-container">14.8</span>
<span className="font-code-mono text-code-mono text-primary-fixed-dim">MILES</span>
</div>
<span className="font-code-mono text-code-mono text-on-surface">ALICE'S RESTAURANT CHECKPOINT</span>
</div>
</div>
</div>
</section>
{/*  Group Ride Features Grid  */}
<section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
<div className="flex flex-col mb-space-2xl">
<span className="font-label-caps text-label-caps text-primary-container tracking-widest uppercase mb-1">COCKPIT ARCHITECTURE</span>
<h2 className="font-headline-xl text-headline-xl text-on-surface tracking-tight uppercase">ENGINEERED FOR SQUADRON COHESION</h2>
<p className="font-body-md text-body-md text-on-surface-variant max-w-2xl">High-frequency mesh communications keep the entire formation synchronized through blind apexes, switchbacks, and offline mountain passes.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-space-lg">
{/*  Feature 1  */}
<div className="bg-surface-container-low p-space-xl rounded-xl flex flex-col justify-between hover:bg-surface-container transition-all shadow-md">
<div>
<div className="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center text-primary-container mb-space-lg">
<span className="material-symbols-outlined text-[26px]">spatial_audio_off</span>
</div>
<span className="font-code-mono text-code-mono text-primary-fixed-dim block mb-1">01 / PACELINE AUDIT</span>
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-sm">Staggered Paceline Warnings</h3>
<p className="font-body-sm text-body-sm text-on-surface-variant leading-relaxed">
              Spatial audio HUD chimes dynamically sound whenever rider follow distance or lane positioning falls beneath calculated emergency stopping thresholds.
            </p>
</div>
<div className="pt-space-lg mt-space-lg flex items-center justify-between font-code-mono text-code-mono text-primary-container">
<span>RESPONSE: &lt;12ms</span>
<span className="material-symbols-outlined text-[16px]">arrow_forward</span>
</div>
</div>
{/*  Feature 2  */}
<div className="bg-surface-container-low p-space-xl rounded-xl flex flex-col justify-between hover:bg-surface-container transition-all shadow-md">
<div>
<div className="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center text-error mb-space-lg">
<span className="material-symbols-outlined text-[26px]">fmd_bad</span>
</div>
<span className="font-code-mono text-code-mono text-error block mb-1">02 / SWARM BROADCAST</span>
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-sm">Crash &amp; Separation Alerts</h3>
<p className="font-body-sm text-body-sm text-on-surface-variant leading-relaxed">
              Autonomous IMU-based impact detection pings the entire pack instantly. Visual yellow and red telemetry flags highlight precise coordinates for immediate regrouping.
            </p>
</div>
<div className="pt-space-lg mt-space-lg flex items-center justify-between font-code-mono text-code-mono text-error">
<span>IMU SENSING: 6-AXIS</span>
<span className="material-symbols-outlined text-[16px]">arrow_forward</span>
</div>
</div>
{/*  Feature 3  */}
<div className="bg-surface-container-low p-space-xl rounded-xl flex flex-col justify-between hover:bg-surface-container transition-all shadow-md">
<div>
<div className="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center text-secondary-fixed mb-space-lg">
<span className="material-symbols-outlined text-[26px]">hub</span>
</div>
<span className="font-code-mono text-code-mono text-secondary-fixed block mb-1">03 / OFFLINE LINK</span>
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-sm">Peer-to-Peer Mesh Sync</h3>
<p className="font-body-sm text-body-sm text-on-surface-variant leading-relaxed">
              Never rely on cellular towers in deep canyons. High-throughput ad-hoc Bluetooth and Wi-Fi Direct protocols daisy-chain vital bike metrics from lead to sweep.
            </p>
</div>
<div className="pt-space-lg mt-space-lg flex items-center justify-between font-code-mono text-code-mono text-secondary-fixed">
<span>ZERO-CELL READY</span>
<span className="material-symbols-outlined text-[16px]">arrow_forward</span>
</div>
</div>
{/*  Feature 4  */}
<div className="bg-surface-container-low p-space-xl rounded-xl flex flex-col justify-between hover:bg-surface-container transition-all shadow-md">
<div>
<div className="w-12 h-12 rounded-xl bg-surface-container-high flex items-center justify-center text-primary-fixed mb-space-lg">
<span className="material-symbols-outlined text-[26px]">history_toggle_off</span>
</div>
<span className="font-code-mono text-code-mono text-primary-fixed block mb-1">04 / MISSION DEBRIEF</span>
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-sm">Group Replay &amp; Debrief</h3>
<p className="font-body-sm text-body-sm text-on-surface-variant leading-relaxed">
              Relive the ride with synced multi-bike timelines. Compare apex apex entries, sector speeds, and individual lean angles on an interactive 3D map renderer.
            </p>
</div>
<div className="pt-space-lg mt-space-lg flex items-center justify-between font-code-mono text-code-mono text-primary-fixed">
<span>3D REPLAY ENGINE</span>
<span className="material-symbols-outlined text-[16px]">arrow_forward</span>
</div>
</div>
</div>
</section>
{/*  Visual Divider / Action Interstitial  */}
<section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
<div className="relative bg-surface-container-low rounded-xl overflow-hidden shadow-2xl p-space-2xl">
<div className="absolute -right-16 -bottom-16 w-80 h-80 bg-primary-container/10 rounded-full blur-3xl pointer-events-none"></div>
<div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-space-xl">
<div className="flex flex-col gap-space-xs max-w-xl">
<span className="font-label-caps text-label-caps text-secondary-fixed uppercase">HARDWARE COMPATIBILITY</span>
<h3 className="font-headline-lg text-headline-lg text-on-surface uppercase tracking-tight">Sync directly with your helmet comms &amp; bike dash</h3>
<p className="font-body-md text-body-md text-on-surface-variant">
              Integrates seamlessly with Cardo, Sena, Apple Watch, and OBD-II CAN bus links for live peg-to-peg data overlays.
            </p>
</div>
<div className="flex items-center gap-space-md">
<div className="flex items-center gap-space-sm px-space-md py-3 rounded-xl bg-surface-container-high">
<span className="material-symbols-outlined text-secondary-fixed">headset_mic</span>
<span className="font-code-mono text-code-mono text-on-surface">CARDO / SENA HUD</span>
</div>
<div className="flex items-center gap-space-sm px-space-md py-3 rounded-xl bg-surface-container-high">
<span className="material-symbols-outlined text-primary-container">watch</span>
<span className="font-code-mono text-code-mono text-on-surface">HAPTIC ALERTS</span>
</div>
</div>
</div>
</div>
</section>
{/*  Active Public & Regional Group Rides Directory  */}
<section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
<div className="flex flex-col md:flex-row md:items-end justify-between mb-space-xl gap-space-md">
<div>
<span className="font-label-caps text-label-caps text-primary-fixed-dim uppercase tracking-widest block mb-1">REGIONAL OPERATIONS</span>
<h2 className="font-headline-xl text-headline-xl text-on-surface uppercase tracking-tight">Active &amp; Upcoming Pack Runs</h2>
</div>
{/*  Filter Toggles  */}
<div className="flex flex-wrap items-center gap-space-xs bg-surface-container-low p-1 rounded-xl">
<button className="px-space-md py-1.5 rounded-lg bg-surface-container-highest text-on-surface font-label-md text-label-md">All Runs (14)</button>
<button className="px-space-md py-1.5 rounded-lg text-on-surface-variant hover:text-on-surface font-label-md text-label-md">Brisk Pace</button>
<button className="px-space-md py-1.5 rounded-lg text-on-surface-variant hover:text-on-surface font-label-md text-label-md">Track / Apex</button>
<button className="px-space-md py-1.5 rounded-lg text-on-surface-variant hover:text-on-surface font-label-md text-label-md">Weekend Tours</button>
</div>
</div>
{/*  Search and Region Filters Bar  */}
<div className="bg-surface-container-lowest p-space-md rounded-xl mb-space-lg flex flex-wrap items-center justify-between gap-space-md shadow-md">
<div className="flex items-center gap-space-sm flex-1 min-w-[280px]">
<span className="material-symbols-outlined text-on-surface-variant text-[20px]">search</span>
<input className="w-full bg-transparent font-body-md text-body-md text-on-surface placeholder:text-on-surface-variant outline-none" placeholder="Search by region, canyon, or road marshal..." type="text"/>
</div>
<div className="flex items-center gap-space-sm font-code-mono text-code-mono text-on-surface-variant">
<span>SORT BY:</span>
<span className="text-primary-container cursor-pointer font-bold">START TIME ↓</span>
</div>
</div>
{/*  Rides Cards Grid  */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-space-lg">
{/*  Ride 1  */}
<div className="bg-surface-container-low rounded-xl overflow-hidden hover:bg-surface-container transition-all flex flex-col justify-between shadow-xl">
<div>
<div className="relative h-44 w-full">
<div className="w-full h-full bg-cover bg-center" data-alt="High performance sport motorcycles carving through early morning mist on California mountain ridge highway with sweeping Pacific ocean view in dark cinematic tones" ></div>
<div className="absolute inset-0 bg-gradient-to-t from-surface-container-low via-surface-container-low/40 to-transparent"></div>
<div className="absolute top-3 left-3 px-2 py-1 rounded bg-surface/80 backdrop-blur font-label-caps text-label-caps text-secondary-fixed uppercase">
                SATURDAY • 06:30 AM PST
              </div>
<div className="absolute top-3 right-3 px-2 py-1 rounded bg-primary-container text-on-primary-container font-label-caps text-label-caps font-bold uppercase">
                TRACK PACE
              </div>
</div>
<div className="p-space-lg">
<div className="flex items-center justify-between text-on-surface-variant font-code-mono text-code-mono mb-1">
<span>SAN FRANCISCO, CA</span>
<span>82.4 MILES</span>
</div>
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-xs">Bay Area Dawn Patrol</h3>
<p className="font-body-sm text-body-sm text-on-surface-variant line-clamp-2 mb-space-md">
                Fast sweepers from Woodside down to San Gregorio beach before morning traffic. Strict staggered formation enforced.
              </p>
<div className="flex items-center justify-between pt-space-sm bg-surface-container-high/60 p-space-sm rounded-xl">
<div className="flex items-center gap-space-xs">
<div className="w-6 h-6 rounded-full bg-primary-fixed-dim flex items-center justify-center text-on-primary-fixed font-bold text-[11px]">AL</div>
<span className="font-code-mono text-code-mono text-on-surface">Lead: ApexLead</span>
</div>
<div className="flex items-center gap-1 font-code-mono text-code-mono text-secondary-fixed">
<span className="material-symbols-outlined text-[16px]">group</span>
<span>14/16 RIDERS</span>
</div>
</div>
</div>
</div>
<div className="p-space-lg pt-0">
<button className="w-full py-2.5 rounded-lg bg-surface-container-high hover:bg-primary-container hover:text-on-primary-container text-on-surface font-headline-sm text-headline-sm transition-all flex items-center justify-center gap-space-xs">
<span className="material-symbols-outlined text-[18px]">lock_open</span>
              Request Pack Slot
            </button>
</div>
</div>
{/*  Ride 2  */}
<div className="bg-surface-container-low rounded-xl overflow-hidden hover:bg-surface-container transition-all flex flex-col justify-between shadow-xl">
<div>
<div className="relative h-44 w-full">
<div className="w-full h-full bg-cover bg-center" data-alt="Trio of supernaked Italian motorcycles parked at golden hour canyon overlook with asphalt switchbacks carving through dark mountains" ></div>
<div className="absolute inset-0 bg-gradient-to-t from-surface-container-low via-surface-container-low/40 to-transparent"></div>
<div className="absolute top-3 left-3 px-2 py-1 rounded bg-surface/80 backdrop-blur font-label-caps text-label-caps text-secondary-fixed uppercase">
                SUNDAY • 07:15 AM PST
              </div>
<div className="absolute top-3 right-3 px-2 py-1 rounded bg-surface-container-highest text-primary font-label-caps text-label-caps font-bold uppercase">
                BRISK PACE
              </div>
</div>
<div className="p-space-lg">
<div className="flex items-center justify-between text-on-surface-variant font-code-mono text-code-mono mb-1">
<span>MALIBU, CA</span>
<span>64.0 MILES</span>
</div>
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-xs">Malibu Canyons Fast Pace</h3>
<p className="font-body-sm text-body-sm text-on-surface-variant line-clamp-2 mb-space-md">
                Tuna Canyon descent to Latigo Canyon technical curves. Regroup checkpoint planned at Rock Store overlook.
              </p>
<div className="flex items-center justify-between pt-space-sm bg-surface-container-high/60 p-space-sm rounded-xl">
<div className="flex items-center gap-space-xs">
<div className="w-6 h-6 rounded-full bg-tertiary-fixed-dim flex items-center justify-center text-on-tertiary font-bold text-[11px]">DK</div>
<span className="font-code-mono text-code-mono text-on-surface">Lead: Dan_KTM</span>
</div>
<div className="flex items-center gap-1 font-code-mono text-code-mono text-secondary-fixed">
<span className="material-symbols-outlined text-[16px]">group</span>
<span>9/12 RIDERS</span>
</div>
</div>
</div>
</div>
<div className="p-space-lg pt-0">
<button className="w-full py-2.5 rounded-lg bg-surface-container-high hover:bg-primary-container hover:text-on-primary-container text-on-surface font-headline-sm text-headline-sm transition-all flex items-center justify-center gap-space-xs">
<span className="material-symbols-outlined text-[18px]">lock_open</span>
              Request Pack Slot
            </button>
</div>
</div>
{/*  Ride 3  */}
<div className="bg-surface-container-low rounded-xl overflow-hidden hover:bg-surface-container transition-all flex flex-col justify-between shadow-xl">
<div>
<div className="relative h-44 w-full">
<div className="w-full h-full bg-cover bg-center" data-alt="Dense green mountain pass winding asphalt curve with neon trail lights of aggressive sport bikes in moody dark atmospheric lighting" ></div>
<div className="absolute inset-0 bg-gradient-to-t from-surface-container-low via-surface-container-low/40 to-transparent"></div>
<div className="absolute top-3 left-3 px-2 py-1 rounded bg-surface/80 backdrop-blur font-label-caps text-label-caps text-secondary-fixed uppercase">
                FRI-SUN • OCT 12-14
              </div>
<div className="absolute top-3 right-3 px-2 py-1 rounded bg-secondary-container text-on-secondary-container font-label-caps text-label-caps font-bold uppercase">
                ENDURANCE / CHILL
              </div>
</div>
<div className="p-space-lg">
<div className="flex items-center justify-between text-on-surface-variant font-code-mono text-code-mono mb-1">
<span>ROBBINSVILLE, NC</span>
<span>318 CURVES</span>
</div>
<h3 className="font-headline-md text-headline-md text-on-surface uppercase mb-space-xs">Tail of the Dragon Run</h3>
<p className="font-body-sm text-body-sm text-on-surface-variant line-clamp-2 mb-space-md">
                11 miles, 318 technical curves. Telemetry debrief sessions every evening with custom apex analysis and gear logs.
              </p>
<div className="flex items-center justify-between pt-space-sm bg-surface-container-high/60 p-space-sm rounded-xl">
<div className="flex items-center gap-space-xs">
<div className="w-6 h-6 rounded-full bg-secondary-fixed flex items-center justify-center text-on-secondary-fixed font-bold text-[11px]">SM</div>
<span className="font-code-mono text-code-mono text-on-surface">Lead: Sweep_Marshal</span>
</div>
<div className="flex items-center gap-1 font-code-mono text-code-mono text-error">
<span className="material-symbols-outlined text-[16px]">group</span>
<span>FULL (24/24)</span>
</div>
</div>
</div>
</div>
<div className="p-space-lg pt-0">
<button className="w-full py-2.5 rounded-lg bg-surface-container text-on-surface-variant font-headline-sm text-headline-sm cursor-not-allowed flex items-center justify-center gap-space-xs">
<span className="material-symbols-outlined text-[18px]">hourglass_top</span>
              Join Waitlist (3)
            </button>
</div>
</div>
</div>
</section>
{/*  Modal: Join Code Trigger Overlay (Interactive Script Attached)  */}
<div className="fixed inset-0 bg-surface-container-lowest/80 backdrop-blur-md z-50 hidden flex items-center justify-center p-space-md" id="join-modal">
<div className="bg-surface-container-low max-w-md w-full rounded-xl p-space-xl shadow-2xl relative">
<div className="flex items-center justify-between mb-space-lg">
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-primary-container">qr_code_scanner</span>
<h3 className="font-headline-md text-headline-md text-on-surface uppercase">Join Pack Formation</h3>
</div>
<button className="text-on-surface-variant hover:text-on-surface" id="close-modal">
<span className="material-symbols-outlined">close</span>
</button>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">
          Enter the 6-character encrypted ride code generated by your Lead Pace Setter or scan their cockpit radar QR display.
        </p>
<div className="flex flex-col gap-space-md mb-space-lg">
<input className="w-full bg-surface-container-lowest font-code-mono text-headline-sm text-center tracking-widest text-primary px-space-md py-3 rounded-lg outline-none uppercase placeholder:text-on-surface-variant" placeholder="CODE: e.g. APEX84" type="text"/>
<div className="flex items-center gap-space-md text-on-surface-variant font-code-mono text-code-mono justify-center">
<span className="h-px bg-outline-variant flex-1"></span>
<span>OR SCAN CAMERA</span>
<span className="h-px bg-outline-variant flex-1"></span>
</div>
<div className="bg-surface-container h-36 rounded-lg flex flex-col items-center justify-center gap-2 text-on-surface-variant hover:text-primary transition-colors cursor-pointer">
<span className="material-symbols-outlined text-[36px]">photo_camera</span>
<span className="font-code-mono text-code-mono">ACTIVATE RADAR LENS</span>
</div>
</div>
<button className="w-full py-3 rounded-lg bg-gradient-to-r from-primary-container to-primary-fixed text-on-primary-container font-headline-sm text-headline-sm">
          Connect Squad Telemetry
        </button>
</div>
</div>
</div>

</div>
    </div>
  );
}