'use client';

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

export default function ClubsPage() {
  return (
    <div className="flagship-page text-on-surface bg-surface min-h-screen">
      <div className="flex flex-col w-full">
{/*  Top Command Matrix Hero  */}
<section className="relative w-full py-space-4xl overflow-hidden bg-surface-container-lowest">
<div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[900px] h-[450px] bg-primary-container/10 blur-[130px] rounded-full pointer-events-none"></div>
<div className="absolute top-1/3 right-10 w-[420px] h-[420px] bg-secondary-container/5 blur-[120px] rounded-full pointer-events-none"></div>
<div className="relative max-w-container-max mx-auto px-gutter-desktop">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-space-2xl items-center">
<div className="lg:col-span-7 flex flex-col gap-space-lg">
<div className="inline-flex items-center gap-space-xs px-space-sm py-1.5 rounded-full bg-surface-container w-fit shadow-md">
<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-fixed-dim"></span>
</span>
<span className="font-label-caps text-label-caps text-primary-fixed tracking-normal">Motorcycle Clubs, Fleets &amp; Track Academies</span>
</div>
<h1 className="font-display-hero text-display-hero text-on-surface tracking-tight">
            Command your club fleet with <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-container via-primary-fixed-dim to-secondary-fixed">military-grade telemetry</span>.
          </h1>
<p className="font-body-lg text-body-lg text-on-surface-variant max-w-xl">
            Empower road captains, track day organizers, and racing teams with central member rosters, telemetry leaderboards, safety beacon monitoring, and fleet maintenance.
          </p>
<div className="flex flex-wrap items-center gap-space-md pt-space-xs">
<a 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_30px_rgba(0,242,254,0.45)] transition-all" href="#register-club">
<span className="material-symbols-outlined text-[20px]">hub</span>
<span>Register Your Club</span>
</a>
<Link className="inline-flex items-center justify-center gap-space-xs px-space-xl py-3.5 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface font-headline-sm text-headline-sm shadow-md transition-all border border-outline-variant/60 hover:border-primary/40" href="/clubs/manage">
<span className="material-symbols-outlined text-[20px] text-secondary">dashboard</span>
<span>Founder Portal</span>
</Link>
<a className="inline-flex items-center justify-center gap-space-xs px-space-xl py-3.5 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface font-headline-sm text-headline-sm shadow-md transition-all" href="#directory">
<span className="material-symbols-outlined text-[20px]">explore</span>
<span>Explore Verified Clubs</span>
</a>
</div>
<div className="grid grid-cols-3 gap-space-md pt-space-lg max-w-lg">
<div className="p-space-sm bg-surface-container-low rounded-lg shadow-sm">
<span className="font-code-mono text-code-mono text-outline block">Sync Rate</span>
<span className="font-telemetry-metric-md text-telemetry-metric-md text-primary-container block">10Hz</span>
<span className="font-body-sm text-body-sm text-on-surface-variant">Real-time CAN-bus</span>
</div>
<div className="p-space-sm bg-surface-container-low rounded-lg shadow-sm">
<span className="font-code-mono text-code-mono text-outline block">Active Fleets</span>
<span className="font-telemetry-metric-md text-telemetry-metric-md text-secondary-fixed block">1,840+</span>
<span className="font-body-sm text-body-sm text-on-surface-variant">Global syndicates</span>
</div>
<div className="p-space-sm bg-surface-container-low rounded-lg shadow-sm">
<span className="font-code-mono text-code-mono text-outline block">Safety Beacon</span>
<span className="font-telemetry-metric-md text-telemetry-metric-md text-tertiary-fixed-dim block">&lt;400ms</span>
<span className="font-body-sm text-body-sm text-on-surface-variant">Crash dispatch latency</span>
</div>
</div>
</div>
<div className="lg:col-span-5 relative">
<div className="relative bg-surface-container-low rounded-xl p-space-lg shadow-2xl overflow-hidden">
<div className="flex items-center justify-between pb-space-sm">
<div className="flex items-center gap-space-xs">
<span className="h-2.5 w-2.5 rounded-full bg-secondary-fixed"></span>
<span className="font-label-caps text-label-caps text-secondary-fixed">Live Roster Stream</span>
</div>
<span className="font-code-mono text-code-mono text-outline">Net: 48 Node Mesh</span>
</div>
<div className="space-y-space-xs py-space-xs">
<div className="p-space-sm rounded-lg bg-surface-container flex items-center justify-between">
<div className="flex items-center gap-space-sm">
<div className="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center font-code-mono text-code-mono text-primary-fixed">01</div>
<div>
<div className="font-headline-sm text-headline-sm text-on-surface">Cap. Marcus Vance</div>
<div className="font-code-mono text-code-mono text-on-surface-variant">Yamaha YZF-R1M • Leader</div>
</div>
</div>
<div className="text-right">
<div className="font-telemetry-metric-md text-telemetry-metric-md text-secondary-fixed">54.2°</div>
<div className="font-code-mono text-code-mono text-outline">Apex Lean</div>
</div>
</div>
<div className="p-space-sm rounded-lg bg-surface-container flex items-center justify-between">
<div className="flex items-center gap-space-sm">
<div className="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center font-code-mono text-code-mono text-primary-fixed">02</div>
<div>
<div className="font-headline-sm text-headline-sm text-on-surface">Elena Rostova</div>
<div className="font-code-mono text-code-mono text-on-surface-variant">Ducati Panigale V4 S</div>
</div>
</div>
<div className="text-right">
<div className="font-telemetry-metric-md text-telemetry-metric-md text-primary-container">1:41.88</div>
<div className="font-code-mono text-code-mono text-outline">Sector 3 Split</div>
</div>
</div>
<div className="p-space-sm rounded-lg bg-surface-container flex items-center justify-between">
<div className="flex items-center gap-space-sm">
<div className="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center font-code-mono text-code-mono text-primary-fixed">03</div>
<div>
<div className="font-headline-sm text-headline-sm text-on-surface">Daisuke Sato</div>
<div className="font-code-mono text-code-mono text-on-surface-variant">BMW S1000RR • Tail Marshal</div>
</div>
</div>
<div className="text-right">
<div className="font-telemetry-metric-md text-telemetry-metric-md text-tertiary-fixed-dim">99.4%</div>
<div className="font-code-mono text-code-mono text-outline">Tire Integrity</div>
</div>
</div>
</div>
<div className="mt-space-sm pt-space-sm bg-surface-container-lowest rounded-lg p-space-sm flex items-center justify-between">
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">cell_tower</span>
<span className="font-code-mono text-code-mono text-on-surface">Pack Formation: Diamond Alpha</span>
</div>
<span className="font-code-mono text-code-mono text-secondary-fixed">Health: Nominal</span>
</div>
</div>
</div>
</div>
</div>
</section>
{/*  Key Operational Pillars Section  */}
<section className="w-full py-space-4xl bg-surface">
<div className="max-w-container-max mx-auto px-gutter-desktop">
<div className="flex flex-col gap-space-xs max-w-2xl mb-space-3xl">
<span className="font-label-caps text-label-caps text-primary-container tracking-normal">Tactical Capabilities</span>
<h2 className="font-headline-xl text-headline-xl text-on-surface">Key Operational Pillars for Clubs</h2>
<p className="font-body-md text-body-md text-on-surface-variant">Standardize ride telemetry, protect group formations, and track hardware readiness across every connected machine.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-space-xl">
{/*  Pillar 1  */}
<div className="p-space-xl rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-lg">
<div>
<div className="flex items-center justify-between mb-space-md">
<div className="w-12 h-12 rounded-xl bg-primary-container/10 flex items-center justify-center">
<span className="material-symbols-outlined text-primary-container text-[24px]">groups</span>
</div>
<span className="font-code-mono text-code-mono text-outline">Pillar // 01</span>
</div>
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Central Fleet &amp; Member Roster</h3>
<p className="font-body-md text-body-md text-on-surface-variant mb-space-lg">
              Manage hundreds of club members, their registered bikes, emergency contact info, and marshal access permissions with instant profile synchronization.
            </p>
</div>
<div className="p-space-md rounded-lg bg-surface-container-lowest">
<div className="flex items-center justify-between font-code-mono text-code-mono text-on-surface-variant mb-space-2xs">
<span>Active Riders Validated</span>
<span className="text-primary-container">482 / 500</span>
</div>
<div className="w-full h-2 bg-surface-container-highest rounded-full overflow-hidden">
<div className="h-full bg-gradient-to-r from-primary-container to-surface-tint w-[92%]"></div>
</div>
</div>
</div>
{/*  Pillar 2  */}
<div className="p-space-xl rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-lg">
<div>
<div className="flex items-center justify-between mb-space-md">
<div className="w-12 h-12 rounded-xl bg-secondary-container/10 flex items-center justify-center">
<span className="material-symbols-outlined text-secondary-fixed text-[24px]">military_tech</span>
</div>
<span className="font-code-mono text-code-mono text-outline">Pillar // 02</span>
</div>
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Private Leaderboards &amp; Segment Trophies</h3>
<p className="font-body-md text-body-md text-on-surface-variant mb-space-lg">
              Compare verified lean angles, sector lap times, and track speed on private leaderboards with multi-constellation anti-cheat GPS validation.
            </p>
</div>
<div className="p-space-md rounded-lg bg-surface-container-lowest flex items-center justify-between">
<div className="flex items-center gap-space-sm">
<span className="material-symbols-outlined text-secondary-fixed text-[22px]">verified</span>
<div>
<div className="font-code-mono text-code-mono text-on-surface">Anti-Cheat Enforced</div>
<div className="font-body-sm text-body-sm text-on-surface-variant">10Hz RTK-grade drift rejection</div>
</div>
</div>
<span className="font-label-caps text-label-caps text-secondary-fixed bg-secondary-container/20 px-space-xs py-1 rounded">Secure</span>
</div>
</div>
{/*  Pillar 3  */}
<div className="p-space-xl rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-lg">
<div>
<div className="flex items-center justify-between mb-space-md">
<div className="w-12 h-12 rounded-xl bg-primary-container/10 flex items-center justify-center">
<span className="material-symbols-outlined text-primary-container text-[24px]">radar</span>
</div>
<span className="font-code-mono text-code-mono text-outline">Pillar // 03</span>
</div>
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Road Captain Master Console</h3>
<p className="font-body-md text-body-md text-on-surface-variant mb-space-lg">
              Bird's-eye live view of all club pack rides with real-time health, incident warnings, high-G deceleration alerts, and direct marshal dispatch.
            </p>
</div>
<div className="p-space-md rounded-lg bg-surface-container-lowest grid grid-cols-2 gap-space-sm">
<div>
<span className="font-code-mono text-code-mono text-outline">Dispatch Status</span>
<div className="font-headline-sm text-headline-sm text-on-surface">3 Marshals Ready</div>
</div>
<div>
<span className="font-code-mono text-code-mono text-outline">Incident Queue</span>
<div className="font-headline-sm text-headline-sm text-secondary-fixed">0 Critical</div>
</div>
</div>
</div>
{/*  Pillar 4  */}
<div className="p-space-xl rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-lg">
<div>
<div className="flex items-center justify-between mb-space-md">
<div className="w-12 h-12 rounded-xl bg-tertiary-container/10 flex items-center justify-center">
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[24px]">manufacturing</span>
</div>
<span className="font-code-mono text-code-mono text-outline">Pillar // 04</span>
</div>
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Fleet Maintenance &amp; Engine Telemetry</h3>
<p className="font-body-md text-body-md text-on-surface-variant mb-space-lg">
              Track oil life, brake wear estimates, tire heat cycles, and ECU fault codes across member bikes to prevent mechanical DNFs on track and road.
            </p>
</div>
<div className="p-space-md rounded-lg bg-surface-container-lowest flex items-center justify-between">
<div className="flex items-center gap-space-sm">
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[22px]">vital_signs</span>
<span className="font-code-mono text-code-mono text-on-surface">CAN-Bus ECU Diagnostics</span>
</div>
<span className="font-code-mono text-code-mono text-tertiary-fixed-dim">100% Health Check</span>
</div>
</div>
</div>
</div>
</section>
{/*  Featured Verified Clubs Directory  */}
<section className="w-full py-space-4xl bg-surface-container-lowest" id="directory">
<div className="max-w-container-max mx-auto px-gutter-desktop">
<div className="flex flex-col md:flex-row md:items-end justify-between mb-space-3xl gap-space-md">
<div className="flex flex-col gap-space-xs">
<span className="font-label-caps text-label-caps text-primary-fixed-dim tracking-normal">Global Roster</span>
<h2 className="font-headline-xl text-headline-xl text-on-surface">Featured Verified Clubs</h2>
<p className="font-body-md text-body-md text-on-surface-variant">Join elite performance racing syndicates and organized touring packs running live telemetry networks.</p>
</div>
<div className="flex items-center gap-space-xs">
<span className="font-code-mono text-code-mono text-outline">Sort:</span>
<span className="font-label-md text-label-md text-primary-container">Verified High-Performance</span>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-space-lg">
{/*  Club Card 1  */}
<div className="p-space-lg rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-md">
<div className="space-y-space-md">
<div className="flex items-center justify-between">
<span className="inline-flex items-center gap-1.5 px-space-xs py-1 rounded bg-secondary-container/15 font-label-caps text-label-caps text-secondary-fixed">
<span className="h-1.5 w-1.5 rounded-full bg-secondary-fixed animate-pulse"></span>
                2 Active Rides
              </span>
<span className="font-code-mono text-code-mono text-outline">CA-09</span>
</div>
<div>
<h3 className="font-headline-md text-headline-md text-on-surface">Apex Pro Track School</h3>
<p className="font-code-mono text-code-mono text-primary-container">San Jose, CA</p>
</div>
<div className="flex flex-wrap gap-space-2xs">
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">240 Members</span>
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">14 Track Days/yr</span>
<span className="px-space-xs py-0.5 rounded bg-primary-container/20 font-code-mono text-code-mono text-primary-fixed">Pro Certified</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant">
              Lead Coach: Dave Kinlan (AMA Pro Superbike Alum). Specialized in telemetry-guided apex entry and throttle-trace optimization.
            </p>
</div>
<div className="pt-space-lg mt-space-md">
<button className="w-full py-2.5 px-space-md rounded-lg bg-surface-container 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>Request to Join</span>
<span className="material-symbols-outlined text-[18px]">chevron_right</span>
</button>
</div>
</div>
{/*  Club Card 2  */}
<div className="p-space-lg rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-md">
<div className="space-y-space-md">
<div className="flex items-center justify-between">
<span className="inline-flex items-center gap-1.5 px-space-xs py-1 rounded bg-secondary-container/15 font-label-caps text-label-caps text-secondary-fixed">
<span className="h-1.5 w-1.5 rounded-full bg-secondary-fixed animate-pulse"></span>
                4 Active Rides
              </span>
<span className="font-code-mono text-code-mono text-outline">CA-01</span>
</div>
<div>
<h3 className="font-headline-md text-headline-md text-on-surface">NorCal Canyon Syndicate</h3>
<p className="font-code-mono text-code-mono text-primary-container">San Francisco, CA</p>
</div>
<div className="flex flex-wrap gap-space-2xs">
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">580 Members</span>
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">Weekly Packs</span>
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">Sport / Superbike</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant">
              Road Captain: Ryan 'Hatch' Miller. Precision formation passes, mountain safety monitors, and private Skaggs Springs leaderboards.
            </p>
</div>
<div className="pt-space-lg mt-space-md">
<button className="w-full py-2.5 px-space-md rounded-lg bg-surface-container 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>Request to Join</span>
<span className="material-symbols-outlined text-[18px]">chevron_right</span>
</button>
</div>
</div>
{/*  Club Card 3  */}
<div className="p-space-lg rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-md">
<div className="space-y-space-md">
<div className="flex items-center justify-between">
<span className="inline-flex items-center gap-1.5 px-space-xs py-1 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">
                Standby
              </span>
<span className="font-code-mono text-code-mono text-outline">WA-04</span>
</div>
<div>
<h3 className="font-headline-md text-headline-md text-on-surface">Pacific Northwest Moto Fleet</h3>
<p className="font-code-mono text-code-mono text-primary-container">Seattle, WA</p>
</div>
<div className="flex flex-wrap gap-space-2xs">
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">310 Members</span>
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">Touring &amp; ADV</span>
<span className="px-space-xs py-0.5 rounded bg-primary-container/20 font-code-mono text-code-mono text-primary-fixed">All-Weather</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant">
              Fleet Lead: Sarah Jenkins. Cascade loop expeditions, wet-grip telemetry tracking, and satellite mesh communicator integration.
            </p>
</div>
<div className="pt-space-lg mt-space-md">
<button className="w-full py-2.5 px-space-md rounded-lg bg-surface-container 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>Request to Join</span>
<span className="material-symbols-outlined text-[18px]">chevron_right</span>
</button>
</div>
</div>
{/*  Club Card 4  */}
<div className="p-space-lg rounded-xl bg-surface-container-low hover:bg-surface-container transition-all flex flex-col justify-between shadow-md">
<div className="space-y-space-md">
<div className="flex items-center justify-between">
<span className="inline-flex items-center gap-1.5 px-space-xs py-1 rounded bg-secondary-container/15 font-label-caps text-label-caps text-secondary-fixed">
<span className="h-1.5 w-1.5 rounded-full bg-secondary-fixed animate-pulse"></span>
                1 Active Ride
              </span>
<span className="font-code-mono text-code-mono text-outline">TX-03</span>
</div>
<div>
<h3 className="font-headline-md text-headline-md text-on-surface">Austin Apex League</h3>
<p className="font-code-mono text-code-mono text-primary-container">Austin, TX</p>
</div>
<div className="flex flex-wrap gap-space-2xs">
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">420 Members</span>
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">Track &amp; Street</span>
<span className="px-space-xs py-0.5 rounded bg-surface-container-highest font-code-mono text-code-mono text-on-surface-variant">COTA Track Days</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant">
              Founder: Mateo Alvarez. Regular COTA track allocations, night Hill Country loops, and high-frequency suspension setup telemetry.
            </p>
</div>
<div className="pt-space-lg mt-space-md">
<button className="w-full py-2.5 px-space-md rounded-lg bg-surface-container 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>Request to Join</span>
<span className="material-symbols-outlined text-[18px]">chevron_right</span>
</button>
</div>
</div>
</div>
</div>
</section>
{/*  Live Telemetry Radar Preview Panel  */}
<section className="w-full py-space-3xl bg-surface">
<div className="max-w-container-max mx-auto px-gutter-desktop">
<div className="p-space-2xl rounded-xl bg-surface-container-low shadow-xl">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-space-xl items-center">
<div className="lg:col-span-6 flex flex-col gap-space-md">
<span className="font-label-caps text-label-caps text-secondary-fixed tracking-normal">Live Marshal Radar</span>
<h3 className="font-headline-xl text-headline-xl text-on-surface">Keep pack formations tighter and track incidents instantly.</h3>
<p className="font-body-md text-body-md text-on-surface-variant">
              When a rider slows unexpectedly or triggers an emergency IMU deceleration event, the entire road captain council gets an immediate audio-visual alert with pinpoint GPS coordinates.
            </p>
<div className="space-y-space-xs pt-space-xs">
<div className="flex items-center gap-space-sm">
<span className="material-symbols-outlined text-secondary-fixed text-[20px]">check_circle</span>
<span className="font-body-md text-body-md text-on-surface">Automatic peg-scrape hazard mapping for follow riders</span>
</div>
<div className="flex items-center gap-space-sm">
<span className="material-symbols-outlined text-secondary-fixed text-[20px]">check_circle</span>
<span className="font-body-md text-body-md text-on-surface">Anti-straggle pace delta monitoring on multi-tier routes</span>
</div>
<div className="flex items-center gap-space-sm">
<span className="material-symbols-outlined text-secondary-fixed text-[20px]">check_circle</span>
<span className="font-body-md text-body-md text-on-surface">Cross-brand CAN-bus support (Ducati, Yamaha, BMW, KTM, Aprilia)</span>
</div>
</div>
</div>
<div className="lg:col-span-6">
<div className="bg-surface-container-lowest p-space-lg rounded-xl shadow-inner">
<div className="flex items-center justify-between pb-space-sm mb-space-sm">
<span className="font-code-mono text-code-mono text-outline">Telemetry Delta // Sector 2</span>
<span className="font-code-mono text-code-mono text-secondary-fixed">Apex Cloud Active</span>
</div>
{/*  Telemetry Sparkline Simulation  */}
<div className="h-36 w-full flex items-end gap-1.5 pt-space-sm">
<div className="w-full bg-primary-container/20 rounded-t h-[40%]"></div>
<div className="w-full bg-primary-container/30 rounded-t h-[65%]"></div>
<div className="w-full bg-primary-container/40 rounded-t h-[55%]"></div>
<div className="w-full bg-primary-container/60 rounded-t h-[85%]"></div>
<div className="w-full bg-primary-container/80 rounded-t h-[95%]"></div>
<div className="w-full bg-secondary-fixed rounded-t h-[100%] shadow-[0_0_12px_rgba(96,255,152,0.6)]"></div>
<div className="w-full bg-primary-container/90 rounded-t h-[75%]"></div>
<div className="w-full bg-primary-container/70 rounded-t h-[60%]"></div>
<div className="w-full bg-primary-container/50 rounded-t h-[45%]"></div>
<div className="w-full bg-primary-container/30 rounded-t h-[30%]"></div>
<div className="w-full bg-primary-container/20 rounded-t h-[50%]"></div>
<div className="w-full bg-primary-container/30 rounded-t h-[70%]"></div>
</div>
<div className="grid grid-cols-3 gap-space-xs pt-space-md mt-space-md">
<div>
<span className="font-code-mono text-code-mono text-outline block">Max Speed</span>
<span className="font-headline-sm text-headline-sm text-on-surface">264 km/h</span>
</div>
<div>
<span className="font-code-mono text-code-mono text-outline block">Peak Lean</span>
<span className="font-headline-sm text-headline-sm text-primary-container">57.8° L</span>
</div>
<div>
<span className="font-code-mono text-code-mono text-outline block">G-Force Lat</span>
<span className="font-headline-sm text-headline-sm text-secondary-fixed">1.42 G</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/*  Club Administrative Tier Comparison  */}
<section className="w-full py-space-4xl bg-surface-container-lowest" id="register-club">
<div className="max-w-container-max mx-auto px-gutter-desktop">
<div className="text-center max-w-2xl mx-auto mb-space-3xl">
<span className="font-label-caps text-label-caps text-primary-container tracking-normal">Organization Tiers</span>
<h2 className="font-headline-xl text-headline-xl text-on-surface mt-space-2xs">Club Administrative Plans</h2>
<p className="font-body-md text-body-md text-on-surface-variant mt-space-xs">Scalable telemetry, cloud computing, and real-time mesh for grassroots packs up to world-class racing academies.</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-space-xl items-stretch">
{/*  Tier 1  */}
<div className="p-space-xl rounded-xl bg-surface-container-low flex flex-col justify-between shadow-lg">
<div>
<div className="flex items-center justify-between mb-space-xs">
<span className="font-label-caps text-label-caps text-outline">Entry Fleet</span>
<span className="font-code-mono text-code-mono text-on-surface-variant">Community</span>
</div>
<h3 className="font-headline-lg text-headline-lg text-on-surface">Grassroots Clubs</h3>
<div className="flex items-baseline gap-1 my-space-md">
<span className="font-display-hero text-display-hero text-on-surface">Free</span>
<span className="font-body-sm text-body-sm text-on-surface-variant">/ forever</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">
              Essential fleet synchronization for local casual packs and weekend canyon riders.
            </p>
<div className="space-y-space-sm pt-space-xs">
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-outline text-[18px]">check</span>
<span className="font-body-sm text-body-sm text-on-surface">Up to 15 riders per pack</span>
</div>
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-outline text-[18px]">check</span>
<span className="font-body-sm text-body-sm text-on-surface">Standard GPS live tracking</span>
</div>
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-outline text-[18px]">check</span>
<span className="font-body-sm text-body-sm text-on-surface">Basic lean angle logs</span>
</div>
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-outline text-[18px]">check</span>
<span className="font-body-sm text-body-sm text-on-surface">Public club directory listing</span>
</div>
</div>
</div>
<div className="pt-space-xl mt-space-md">
<button className="w-full py-3 px-space-md rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface font-headline-sm text-headline-sm transition-all">
              Deploy Grassroots
            </button>
</div>
</div>
{/*  Tier 2 (Highlighted)  */}
<div className="p-space-xl rounded-xl bg-surface-container flex flex-col justify-between shadow-2xl relative">
<div className="absolute -top-3 left-1/2 -translate-x-1/2 px-space-sm py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-caps text-label-caps tracking-normal shadow-md">
            Most Popular Syndicate
          </div>
<div>
<div className="flex items-center justify-between mb-space-xs">
<span className="font-label-caps text-label-caps text-primary-container">Pro Formation</span>
<span className="font-code-mono text-code-mono text-primary-fixed">Verified Badge</span>
</div>
<h3 className="font-headline-lg text-headline-lg text-on-surface">Verified Syndicate</h3>
<div className="flex items-baseline gap-1 my-space-md">
<span className="font-display-hero text-display-hero text-primary-container">$49</span>
<span className="font-body-sm text-body-sm text-on-surface-variant">/ month</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">
              Engineered for established sportbike clubs, track groups, and high-frequency touring units.
            </p>
<div className="space-y-space-sm pt-space-xs">
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-primary-container text-[18px]">check_circle</span>
<span className="font-body-sm text-body-sm text-on-surface">Up to 100 verified riders</span>
</div>
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-primary-container text-[18px]">check_circle</span>
<span className="font-body-sm text-body-sm text-on-surface">Private telemetry leaderboards</span>
</div>
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-primary-container text-[18px]">check_circle</span>
<span className="font-body-sm text-body-sm text-on-surface">Road captain emergency marshal beacons</span>
</div>
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-primary-container text-[18px]">check_circle</span>
<span className="font-body-sm text-body-sm text-on-surface">10Hz high-frequency CAN-bus sync</span>
</div>
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-primary-container text-[18px]">check_circle</span>
<span className="font-body-sm text-body-sm text-on-surface">Automated crash &amp; peg-scrape alerts</span>
</div>
</div>
</div>
<div className="pt-space-xl mt-space-md">
<button className="w-full py-3 px-space-md rounded-lg bg-gradient-to-r from-primary-container to-primary-fixed text-on-primary-container font-headline-sm text-headline-sm shadow-lg hover:shadow-[0_0_24px_rgba(0,242,254,0.45)] transition-all">
              Initialize Syndicate
            </button>
</div>
</div>
{/*  Tier 3  */}
<div className="p-space-xl rounded-xl bg-surface-container-low flex flex-col justify-between shadow-lg">
<div>
<div className="flex items-center justify-between mb-space-xs">
<span className="font-label-caps text-label-caps text-secondary-fixed">Enterprise Grid</span>
<span className="font-code-mono text-code-mono text-secondary-fixed">FIM Data Spec</span>
</div>
<h3 className="font-headline-lg text-headline-lg text-on-surface">Enterprise Academy</h3>
<div className="flex items-baseline gap-1 my-space-md">
<span className="font-display-hero text-display-hero text-secondary-fixed">$199</span>
<span className="font-body-sm text-body-sm text-on-surface-variant">/ month</span>
</div>
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">
              Complete professional infrastructure for track schools, race teams, and commercial fleets.
            </p>
<div className="space-y-space-sm pt-space-xs">
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">verified</span>
<span className="font-body-sm text-body-sm text-on-surface">Unlimited riders and fleet assets</span>
</div>
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">verified</span>
<span className="font-body-sm text-body-sm text-on-surface">Live track telemetry broadcast link</span>
</div>
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">verified</span>
<span className="font-body-sm text-body-sm text-on-surface">Telemetry REST API &amp; Webhook access</span>
</div>
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">verified</span>
<span className="font-body-sm text-body-sm text-on-surface">Custom club branding &amp; sub-domain</span>
</div>
<div className="flex items-center gap-space-xs">
<span className="material-symbols-outlined text-secondary-fixed text-[18px]">verified</span>
<span className="font-body-sm text-body-sm text-on-surface">Dedicated fleet engineer support</span>
</div>
</div>
</div>
<div className="pt-space-xl mt-space-md">
<button className="w-full py-3 px-space-md rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface font-headline-sm text-headline-sm transition-all">
              Contact Race Operations
            </button>
</div>
</div>
</div>
</div>
</section>
{/*  Interactive Club Registration Callout  */}
<section className="w-full py-space-3xl bg-surface">
<div className="max-w-container-max mx-auto px-gutter-desktop">
<div className="p-space-2xl rounded-xl bg-gradient-to-r from-surface-container-low via-surface-container to-surface-container-high shadow-xl flex flex-col md: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-primary-container tracking-normal">Ready to Integrate?</span>
<h3 className="font-headline-xl text-headline-xl text-on-surface">Connect your club to the MotorSignal Grid today.</h3>
<p className="font-body-md text-body-md text-on-surface-variant">Setup takes less than 3 minutes. Distribute invite tokens to your road marshals and member bikes.</p>
</div>
<div className="flex items-center gap-space-md w-full md:w-auto">
<button className="w-full md:w-auto 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.45)] transition-all flex items-center justify-center gap-space-xs">
<span className="material-symbols-outlined text-[20px]">add_moderator</span>
<span>Create Club Hub</span>
</button>
</div>
</div>
</div>
</section>
</div>

    </div>
  );
}