'use client';

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

export default function PricingPage() {
  const [billingCycle, setBillingCycle] = useState<'monthly' | 'annual'>('annual');
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  const toggleFaq = (index: number) => {
    setOpenFaq((prev) => (prev === index ? null : index));
  };

  return (
    <div className="flagship-page text-on-surface bg-surface min-h-screen">
      <div className="flex flex-col w-full">
{/*  Subtle Ambient Glow Orbs  */}
<div className="relative w-full overflow-hidden">
<div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[720px] h-[380px] bg-primary-container/10 blur-[130px] pointer-events-none rounded-full"></div>
<div className="absolute top-96 right-10 w-[420px] h-[280px] bg-secondary-fixed/5 blur-[100px] pointer-events-none rounded-full"></div>
{/*  Editorial Header / Value Proposition  */}
<section className="max-w-container-max mx-auto px-gutter-desktop pt-space-2xl pb-space-3xl relative z-10">
<div className="flex flex-col items-center text-center max-w-3xl mx-auto">
{/*  Eyebrow Badge  */}
<div className="inline-flex items-center gap-space-xs px-space-md py-1 rounded-full bg-surface-container-high text-primary-fixed-dim shadow-sm mb-space-md">
<span className="material-symbols-outlined text-[15px] font-bold text-primary-container">speed</span>
<span className="font-label-caps text-label-caps tracking-wide">Transparent Telemetry Plans</span>
</div>
<h1 className="font-display-hero text-display-hero text-on-surface tracking-tight mb-space-md">
          Pro telemetry. <br className="hidden sm:inline"/>No hidden fees. <span className="text-primary-container">Ride free forever.</span>
</h1>
<p className="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mb-space-xl">
          From weekend canyon carving to MotoAmerica championship telemetry. Choose software-only with your smartphone sensors or unlock deep ECU analytics with our OBD-II plug-and-play link.
        </p>
{/*  Billing Switcher  */}
<div className="flex flex-col sm:flex-row items-center gap-space-md bg-surface-container-lowest p-space-xs rounded-full shadow-md">
<div className="flex items-center p-1 bg-surface-container rounded-full" role="group" aria-label="Billing frequency toggle">
<button
  type="button"
  onClick={() => setBillingCycle('monthly')}
  className={`px-space-md py-2 rounded-full font-label-md text-label-md min-h-[44px] transition-all cursor-pointer ${
    billingCycle === 'monthly'
      ? 'bg-primary-container text-on-primary-container shadow-sm font-bold'
      : 'text-on-surface-variant hover:text-on-surface'
  }`}
  id="billing-monthly-btn"
  aria-pressed={billingCycle === 'monthly'}
>
  Monthly Billing
</button>
<button
  type="button"
  onClick={() => setBillingCycle('annual')}
  className={`px-space-md py-2 rounded-full font-label-md text-label-md min-h-[44px] transition-all cursor-pointer ${
    billingCycle === 'annual'
      ? 'bg-primary-container text-on-primary-container shadow-sm font-bold'
      : 'text-on-surface-variant hover:text-on-surface'
  }`}
  id="billing-annual-btn"
  aria-pressed={billingCycle === 'annual'}
>
  Annual Billing
</button>
</div>
<div className="flex items-center gap-space-xs px-space-sm py-1.5 bg-secondary-fixed/15 text-secondary-fixed rounded-full">
<span className="material-symbols-outlined text-[16px]">redeem</span>
<span className="font-label-caps text-label-caps">Save 25% + Free OBD-II Dongle</span>
</div>
</div>
</div>
</section>
{/*  Pricing Matrix (3 Core Software Tiers)  */}
<section className="max-w-container-max mx-auto px-gutter-desktop pb-space-4xl relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-space-lg items-stretch">
{/*  Tier 1: Free Rider  */}
<div className="flex flex-col justify-between p-space-xl rounded-xl bg-surface-container-low shadow-md transition-all duration-300 hover:shadow-xl">
<div>
<div className="flex items-center justify-between mb-space-sm">
<span className="font-label-caps text-label-caps text-on-surface-variant tracking-wide">Baseline Level</span>
<span className="px-space-xs py-0.5 rounded bg-surface-container text-outline font-code-mono text-code-mono">Tier 01</span>
</div>
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Free Rider</h3>
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">Instant heads-up instrumentation using native phone accelerometers.</p>
<div className="flex items-baseline gap-space-2xs mb-space-xl">
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-on-surface">$0</span>
<span className="font-body-md text-body-md text-outline">/ forever</span>
</div>
{/*  Features List  */}
<ul className="flex flex-col gap-space-sm mb-space-xl">
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-outline text-[18px] mt-0.5">check_circle</span>
<span>Smartphone IMU &amp; GPS telemetry (1Hz)</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-outline text-[18px] mt-0.5">check_circle</span>
<span>Live lean angle &amp; speed HUD interface</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-outline text-[18px] mt-0.5">check_circle</span>
<span>Max 3 recorded ride logs in history cache</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-outline text-[18px] mt-0.5">check_circle</span>
<span>Standard community group rides</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-outline text-[18px] mt-0.5">check_circle</span>
<span>Basic SOS manual emergency dispatch</span>
</li>
<li className="flex items-start gap-space-sm text-outline font-body-sm text-body-sm opacity-50">
<span className="material-symbols-outlined text-[18px] mt-0.5">cancel</span>
<span>CAN-bus throttle &amp; brake pressure</span>
</li>
<li className="flex items-start gap-space-sm text-outline font-body-sm text-body-sm opacity-50">
<span className="material-symbols-outlined text-[18px] mt-0.5">cancel</span>
<span>400+ circuit lap timing sectors</span>
</li>
</ul>
</div>
<a className="w-full text-center 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-colors shadow-sm" data-path="create-account" href="/account">
            Get Started Free
          </a>
</div>
{/*  Tier 2: Pro Telemetry (Highlighted Hero)  */}
<div className="relative flex flex-col justify-between p-space-xl rounded-xl bg-surface-container-high shadow-2xl -mt-0 lg:-mt-4 mb-0 lg:-mb-4 z-20 overflow-hidden">
{/*  Top Cyber Radiant Stroke Accent  */}
<div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-primary-container via-primary-fixed to-secondary-fixed"></div>
<div>
<div className="flex items-center justify-between mb-space-sm">
<span className="px-space-sm py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-caps text-label-caps tracking-wide font-bold">Recommended</span>
<div className="flex items-center gap-space-2xs text-secondary-fixed">
<span className="relative flex h-2 w-2">
<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 w-2 bg-secondary-fixed-dim"></span>
</span>
<span className="font-code-mono text-code-mono">Apex Sync</span>
</div>
</div>
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Pro Telemetry</h3>
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">Full multi-sensor acquisition engine with precision ECU CAN metrics.</p>
<div className="flex items-baseline gap-space-2xs mb-space-xs">
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-primary-container" id="pro-price">
  {billingCycle === 'annual' ? '$10' : '$14'}
</span>
<span className="font-body-md text-body-md text-on-surface-variant" id="pro-period">/ month</span>
</div>
<p className="font-code-mono text-code-mono text-secondary-fixed mb-space-lg" id="pro-subtext">
  {billingCycle === 'annual'
    ? 'Billed annually ($120/yr) • Includes FREE OBD-II Link'
    : 'Billed monthly ($14/mo) • OBD-II Link separate'}
</p>
{/*  Sparkline Visual Component  */}
<div className="p-space-sm rounded-lg bg-surface-container-lowest mb-space-lg">
<div className="flex items-center justify-between text-on-surface-variant mb-space-2xs">
<span className="font-label-caps text-label-caps text-primary-fixed-dim">Apex Sampling Trace</span>
<span className="font-code-mono text-code-mono text-secondary-fixed font-bold">10Hz Multi-GNSS</span>
</div>
<svg className="w-full h-9 text-primary-container" fill="none" preserveAspectRatio="none" viewBox="0 0 300 40">
<path d="M0 35 L30 30 L55 33 L85 14 L115 19 L145 5 L175 22 L205 8 L235 25 L265 12 L300 4" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5"></path>
<path d="M0 35 L30 30 L55 33 L85 14 L115 19 L145 5 L175 22 L205 8 L235 25 L265 12 L300 4 L300 40 L0 40 Z" fill="currentColor" fill-opacity="0.08"></path>
</svg>
</div>
{/*  Features List  */}
<ul className="flex flex-col gap-space-sm mb-space-xl">
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-primary-container text-[18px] mt-0.5">verified</span>
<span>10Hz Multi-GNSS satellite lock &amp; 60fps high-refresh HUD</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-primary-container text-[18px] mt-0.5">verified</span>
<span>Full 6-axis IMU gyro analytics (pitch, roll, yaw, lateral Gs)</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-primary-container text-[18px] mt-0.5">verified</span>
<span>Unlimited cloud ride history &amp; 3D sector replay</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-primary-container text-[18px] mt-0.5">verified</span>
<span>Automatic crash impact beacon (&lt;150ms trigger)</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-primary-container text-[18px] mt-0.5">verified</span>
<span>Advanced Pack Radar with peer-to-peer mesh synchronization</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-secondary-fixed text-[18px] mt-0.5">electric_bolt</span>
<span>OBD-II &amp; CAN-bus live data (RPM, throttle %, brake psi, gear)</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-secondary-fixed text-[18px] mt-0.5">flag</span>
<span>Track day mode with 400+ circuit lap timing &amp; sector splits</span>
</li>
</ul>
</div>
<a className="w-full text-center py-3.5 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 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>
</div>
{/*  Tier 3: Club & Racing Team  */}
<div className="flex flex-col justify-between p-space-xl rounded-xl bg-surface-container-low shadow-md transition-all duration-300 hover:shadow-xl">
<div>
<div className="flex items-center justify-between mb-space-sm">
<span className="font-label-caps text-label-caps text-on-surface-variant tracking-wide">Fleet &amp; Competition</span>
<span className="px-space-xs py-0.5 rounded bg-surface-container text-tertiary-fixed-dim font-code-mono text-code-mono">Multi-Rider</span>
</div>
<h3 className="font-headline-lg text-headline-lg text-on-surface mb-space-xs">Club &amp; Racing Team</h3>
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-lg">Telemetry command headquarters for racing teams, riding clubs, and marshals.</p>
<div className="flex items-baseline gap-space-2xs mb-space-xs">
<span className="font-telemetry-metric-xl text-telemetry-metric-xl text-on-surface" id="club-price">
  {billingCycle === 'annual' ? '$40' : '$49'}
</span>
<span className="font-body-md text-body-md text-outline" id="club-period">/ month</span>
</div>
<p className="font-code-mono text-code-mono text-on-surface-variant mb-space-xl" id="club-subtext">
  {billingCycle === 'annual'
    ? 'Billed annually ($490/yr) • Up to 15 racers'
    : 'Billed monthly ($49/mo) • Up to 15 racers'}
</p>
{/*  Features List  */}
<ul className="flex flex-col gap-space-sm mb-space-xl">
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[18px] mt-0.5">groups</span>
<span>Everything in Pro for up to 15 team riders</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[18px] mt-0.5">analytics</span>
<span>Central club marshal &amp; paddock tactical dashboard</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[18px] mt-0.5">leaderboard</span>
<span>Private sector leaderboards &amp; verified lap telemetry</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[18px] mt-0.5">download</span>
<span>Export FIM-compliant CSV/KML data for crew chiefs</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[18px] mt-0.5">podium</span>
<span>Live pit-lane spectator broadcast link &amp; delta map</span>
</li>
<li className="flex items-start gap-space-sm text-on-surface font-body-sm text-body-sm">
<span className="material-symbols-outlined text-tertiary-fixed-dim text-[18px] mt-0.5">support_agent</span>
<span>Dedicated priority engineering telemetry support</span>
</li>
</ul>
</div>
          <Link
            className="w-full text-center 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-colors shadow-sm"
            data-path="clubs"
            href="/clubs/manage"
          >
            Open Founder Portal
          </Link>
</div>
</div>
</section>
{/*  Telemetry Precision Metrics Matrix  */}
<section className="max-w-container-max mx-auto px-gutter-desktop pb-space-4xl">
<div className="p-space-xl rounded-xl bg-surface-container-lowest shadow-md">
<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-container tracking-wide">Architectural Comparison</span>
<h2 className="font-headline-xl text-headline-xl text-on-surface mt-space-2xs">Full Feature Telemetry Breakdown</h2>
</div>
<div className="font-code-mono text-code-mono text-outline">
            SPEC STANDARD: ISO-11898 CAN 2.0B
          </div>
</div>
<div className="overflow-x-auto">
<table className="w-full text-left font-body-sm text-body-sm">
<thead>
<tr className="bg-surface-container-low text-on-surface">
<th className="p-space-md font-label-caps text-label-caps">Telemetry Capability</th>
<th className="p-space-md font-label-caps text-label-caps">Free Rider</th>
<th className="p-space-md font-label-caps text-label-caps text-primary-container">Pro Telemetry</th>
<th className="p-space-md font-label-caps text-label-caps text-tertiary-fixed-dim">Club &amp; Team</th>
</tr>
</thead>
<tbody className="divide-none text-on-surface-variant">
<tr className="hover:bg-surface-container-high/40 transition-colors">
<td className="p-space-md font-headline-sm text-headline-sm text-on-surface">Sampling Frequency</td>
<td className="p-space-md font-code-mono text-code-mono">1 Hz (Phone GPS)</td>
<td className="p-space-md font-code-mono text-code-mono text-primary-container font-bold">10 Hz Multi-GNSS</td>
<td className="p-space-md font-code-mono text-code-mono text-primary-container font-bold">10 Hz + 100Hz IMU</td>
</tr>
<tr className="bg-surface-container-low/30 hover:bg-surface-container-high/40 transition-colors">
<td className="p-space-md font-headline-sm text-headline-sm text-on-surface">Lean Angle &amp; G-Force Trace</td>
<td className="p-space-md">Realtime HUD only</td>
<td className="p-space-md text-on-surface">Stored per millisecond</td>
<td className="p-space-md text-on-surface">Multi-rider overlay compare</td>
</tr>
<tr className="hover:bg-surface-container-high/40 transition-colors">
<td className="p-space-md font-headline-sm text-headline-sm text-on-surface">ECU Diagnostics &amp; CAN Data</td>
<td className="p-space-md text-outline">None</td>
<td className="p-space-md text-secondary-fixed">Throttle, RPM, Brake, Gear</td>
<td className="p-space-md text-secondary-fixed">Raw CAN logging &amp; PID maps</td>
</tr>
<tr className="bg-surface-container-low/30 hover:bg-surface-container-high/40 transition-colors">
<td className="p-space-md font-headline-sm text-headline-sm text-on-surface">Circuit Lap Timing &amp; Deltas</td>
<td className="p-space-md text-outline">Manual start/stop</td>
<td className="p-space-md text-on-surface">400+ GPS micro-sectors</td>
<td className="p-space-md text-on-surface">Team Live Pit Deltas</td>
</tr>
<tr className="hover:bg-surface-container-high/40 transition-colors">
<td className="p-space-md font-headline-sm text-headline-sm text-on-surface">Ride History Cloud Storage</td>
<td className="p-space-md">3 sessions</td>
<td className="p-space-md text-primary-container">Unlimited full resolution</td>
<td className="p-space-md text-primary-container">Unlimited + Paddock Archive</td>
</tr>
<tr className="bg-surface-container-low/30 hover:bg-surface-container-high/40 transition-colors">
<td className="p-space-md font-headline-sm text-headline-sm text-on-surface">Crash Detection &amp; Mesh SOS</td>
<td className="p-space-md">Manual SOS</td>
<td className="p-space-md text-secondary-fixed">&lt;150ms Automatic Trigger</td>
<td className="p-space-md text-secondary-fixed">Fleetwide Marshall Auto-Dispatch</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
{/*  Hardware Add-ons Section  */}
<section id="hardware" className="max-w-container-max mx-auto px-gutter-desktop pb-space-4xl scroll-mt-24">
<div className="flex flex-col mb-space-2xl">
<span className="font-label-caps text-label-caps text-secondary-fixed tracking-wide">Hardware Ecosystem</span>
<h2 className="font-headline-xl text-headline-xl text-on-surface mt-space-2xs">Engineered Motorcycle Hardware</h2>
<p className="font-body-md text-body-md text-on-surface-variant max-w-2xl mt-space-xs">
          Industrial grade modular hardware plugs directly into modern motorcycle diagnostic links. Instant sync with the MotorSignal app over high-bandwidth Bluetooth 5.3.
        </p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-space-xl items-stretch">
{/*  Hardware Item 1: OBD-II / CAN Dongle  */}
<div className="flex flex-col sm:flex-row gap-space-lg p-space-xl rounded-xl bg-surface-container-low shadow-md hover:shadow-xl transition-all">
<div className="w-full sm:w-48 h-48 rounded-lg overflow-hidden bg-surface-container flex-shrink-0 relative">
<img className="w-full h-full object-cover" data-alt="A compact matte-black motorcycle OBD-II telemetry dongle with glowing cyan LED accents and water-resistant carbon fiber housing resting on an anodized racing bike frame." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAfdRGcXZFf1s-sG4CrdGNtARVa7s_tu9UibEnytT9IO3WXpOHQaxvGMmyJ6Clh5q690_Yi-KS-fR4fCTkWCzetkk_sNQ1-Ix4KMAyiRVbD4HkMl0kv9TT-k7ZOufN0l3hjEhBCYa_lrqmaDzaOR5H3RUDiY3A_RY6ES97lutb6zfm7is9m_bE7ACTdbtBozY6sdOfNGG-EoASFdrxZul_ELsvQV_5LLkQSJ6gFm8ske777hzqvdTB3cQ"/>
<span className="absolute top-2 left-2 px-space-xs py-0.5 rounded bg-surface-container-lowest/80 backdrop-blur font-code-mono text-code-mono text-primary-container">IP68 Waterproof</span>
</div>
<div className="flex flex-col justify-between flex-grow">
<div>
<div className="flex items-baseline justify-between mb-space-xs">
<h3 className="font-headline-md text-headline-md text-on-surface">MotorSignal Link Dongle</h3>
<span className="font-telemetry-metric-md text-telemetry-metric-md text-primary-container">$99</span>
</div>
<p className="font-label-caps text-label-caps text-secondary-fixed mb-space-sm">Free with annual Pro subscription</p>
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-md">
                Plugs straight into your bike's Euro4/Euro5 diagnostic port. Reads real-time brake line hydraulic pressure, lean-angle-sensitive traction control, and exact throttle opening.
              </p>
<div className="grid grid-cols-2 gap-space-xs font-code-mono text-code-mono text-on-surface mb-space-md">
<div className="flex items-center gap-space-2xs">
<span className="material-symbols-outlined text-primary-container text-[16px]">bluetooth</span>
<span>BT 5.3 Low Energy</span>
</div>
<div className="flex items-center gap-space-2xs">
<span className="material-symbols-outlined text-primary-container text-[16px]">wifi</span>
<span>Wi-Fi Direct 60fps</span>
</div>
<div className="flex items-center gap-space-2xs">
<span className="material-symbols-outlined text-primary-container text-[16px]">cable</span>
<span>Yamaha / KTM / Ducati</span>
</div>
<div className="flex items-center gap-space-2xs">
<span className="material-symbols-outlined text-primary-container text-[16px]">bolt</span>
<span>&lt;8mA Draw Sleep</span>
</div>
</div>
</div>
<a className="inline-flex items-center justify-center gap-space-xs py-2.5 px-space-md rounded-lg bg-surface-container-high hover:bg-surface-bright text-on-surface font-headline-sm text-headline-sm transition-colors" data-path="hardware-and-app" href="/account">
<span>View Specs &amp; Harness Fits</span>
<span className="material-symbols-outlined text-[18px]">arrow_forward</span>
</a>
</div>
</div>
{/*  Hardware Item 2: Fork IMU Module  */}
<div className="flex flex-col sm:flex-row gap-space-lg p-space-xl rounded-xl bg-surface-container-low shadow-md hover:shadow-xl transition-all">
<div className="w-full sm:w-48 h-48 rounded-lg overflow-hidden bg-surface-container flex-shrink-0 relative">
<img className="w-full h-full object-cover" data-alt="A machined billet aluminum 6-axis fork-mounted motorcycle IMU sensor clamp with electric cyan telemetry wire harness and laser etched calibration markings." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBU-2F8HuXFO0QSSfWOKIfsqW2Esh6pjI12ymtA0vP_drMLQHSGQrpJqNDCpw3Ei9mvXkvfKRJVdpahH0VznZNn-MQ8PZc7LAUni1K65bt_TklFlys_yYf8honGp4ttFqzQHffGHPUs0j-Gl56QcsasdN6D4TAzJbL0uqyax8VXlLEsMP4Nx3qEpLs8TfVZANJZ9M-NMjIz7FZXUJhqD86gjzzsgjIO_0VpRt0M11lCGRzF2LoYALBdbA"/>
<span className="absolute top-2 left-2 px-space-xs py-0.5 rounded bg-surface-container-lowest/80 backdrop-blur font-code-mono text-code-mono text-secondary-fixed">100Hz High Density</span>
</div>
<div className="flex flex-col justify-between flex-grow">
<div>
<div className="flex items-baseline justify-between mb-space-xs">
<h3 className="font-headline-md text-headline-md text-on-surface">6-Axis Fork IMU Module</h3>
<span className="font-telemetry-metric-md text-telemetry-metric-md text-on-surface">$149</span>
</div>
<p className="font-label-caps text-label-caps text-outline mb-space-sm">Optional track precision add-on</p>
<p className="font-body-sm text-body-sm text-on-surface-variant mb-space-md">
                Dedicated fork clamp sensor providing MotoGP-grade chassis pitch dynamics, suspension travel velocity, and high-frequency chatter detection.
              </p>
<div className="grid grid-cols-2 gap-space-xs font-code-mono text-code-mono text-on-surface mb-space-md">
<div className="flex items-center gap-space-2xs">
<span className="material-symbols-outlined text-secondary-fixed text-[16px]">sensors</span>
<span>100Hz Gyro / Accel</span>
</div>
<div className="flex items-center gap-space-2xs">
<span className="material-symbols-outlined text-secondary-fixed text-[16px]">precision_manufacturing</span>
<span>CNC 6061 Billet Clamp</span>
</div>
<div className="flex items-center gap-space-2xs">
<span className="material-symbols-outlined text-secondary-fixed text-[16px]">straighten</span>
<span>41mm to 55mm Fork Stems</span>
</div>
<div className="flex items-center gap-space-2xs">
<span className="material-symbols-outlined text-secondary-fixed text-[16px]">sync</span>
<span>Zero-lag CAN Bridging</span>
</div>
</div>
</div>
<a className="inline-flex items-center justify-center gap-space-xs py-2.5 px-space-md rounded-lg bg-surface-container-high hover:bg-surface-bright text-on-surface font-headline-sm text-headline-sm transition-colors" data-path="hardware-and-app" href="/account">
<span>Order Fork Module</span>
<span className="material-symbols-outlined text-[18px]">arrow_forward</span>
</a>
</div>
</div>
</div>
</section>
{/*  Interactive FAQ Accordion  */}
<section className="max-w-container-max mx-auto px-gutter-desktop pb-space-4xl">
<div className="max-w-3xl mx-auto">
<div className="text-center mb-space-2xl">
<span className="font-label-caps text-label-caps text-primary-container tracking-wide">Knowledge Base</span>
<h2 className="font-headline-xl text-headline-xl text-on-surface mt-space-2xs">Frequently Asked Questions</h2>
</div>
<div className="flex flex-col gap-space-md">
{/*  Q1  */}
<div className="rounded-xl bg-surface-container-low overflow-hidden shadow-sm">
<button 
  type="button"
  onClick={() => toggleFaq(1)}
  aria-expanded={openFaq === 1}
  className="w-full flex items-center justify-between p-space-lg text-left cursor-pointer hover:bg-surface-container-high/40 transition-colors min-h-[44px]"
>
<span className="font-headline-sm text-headline-sm text-on-surface">Do I need the OBD-II hardware to use MotorSignal?</span>
<span className={`material-symbols-outlined text-primary-container text-[24px] transition-transform duration-200 ${openFaq === 1 ? 'rotate-180' : ''}`} id="faq-icon-1">expand_more</span>
</button>
<div className={`px-space-lg pb-space-lg text-on-surface-variant font-body-md text-body-md ${openFaq === 1 ? 'block' : 'hidden'}`} id="faq-body-1">
              No. You can start immediately using solely your smartphone. Modern smartphones contain high-grade 6-axis accelerometers, gyroscopes, and GNSS modules capable of delivering 80% of our telemetry features including live lean angle, acceleration curves, and lap timing. The optional OBD-II hardware module unlocks deeper bike-specific metrics: engine RPM, gear position, throttle position percentage, traction control engagement, and hydraulic brake pressure.
            </div>
</div>
{/*  Q2  */}
<div className="rounded-xl bg-surface-container-low overflow-hidden shadow-sm">
<button 
  type="button"
  onClick={() => toggleFaq(2)}
  aria-expanded={openFaq === 2}
  className="w-full flex items-center justify-between p-space-lg text-left cursor-pointer hover:bg-surface-container-high/40 transition-colors min-h-[44px]"
>
<span className="font-headline-sm text-headline-sm text-on-surface">Does the crash detection work without cellular service?</span>
<span className={`material-symbols-outlined text-primary-container text-[24px] transition-transform duration-200 ${openFaq === 2 ? 'rotate-180' : ''}`} id="faq-icon-2">expand_more</span>
</button>
<div className={`px-space-lg pb-space-lg text-on-surface-variant font-body-md text-body-md ${openFaq === 2 ? 'block' : 'hidden'}`} id="faq-body-2">
              Yes. If you are riding in remote mountain passes without cellular coverage, the system initiates a dual fallback: it records high-precision blackbox sensor data locally, and simultaneously emits a high-priority emergency beacon via peer-to-peer Wi-Fi and Bluetooth mesh to nearby riders in your group pack. As soon as any pack member's device touches cellular or satellite connectivity, the incident coordinates are dispatched immediately.
            </div>
</div>
{/*  Q3  */}
<div className="rounded-xl bg-surface-container-low overflow-hidden shadow-sm">
<button 
  type="button"
  onClick={() => toggleFaq(3)}
  aria-expanded={openFaq === 3}
  className="w-full flex items-center justify-between p-space-lg text-left cursor-pointer hover:bg-surface-container-high/40 transition-colors min-h-[44px]"
>
<span className="font-headline-sm text-headline-sm text-on-surface">Can I cancel anytime? What happens to my data?</span>
<span className={`material-symbols-outlined text-primary-container text-[24px] transition-transform duration-200 ${openFaq === 3 ? 'rotate-180' : ''}`} id="faq-icon-3">expand_more</span>
</button>
<div className={`px-space-lg pb-space-lg text-on-surface-variant font-body-md text-body-md ${openFaq === 3 ? 'block' : 'hidden'}`} id="faq-body-3">
              You can cancel your subscription at any time with a single click in your Account settings. There are no cancellation penalties. Your ride telemetry and track logs are yours forever: you can export all your past session data in raw CSV, GPX, or FIM-standard KML formats at any point, even on the free tier.
            </div>
</div>
{/*  Q4  */}
<div className="rounded-xl bg-surface-container-low overflow-hidden shadow-sm">
<button 
  type="button"
  onClick={() => toggleFaq(4)}
  aria-expanded={openFaq === 4}
  className="w-full flex items-center justify-between p-space-lg text-left cursor-pointer hover:bg-surface-container-high/40 transition-colors min-h-[44px]"
>
<span className="font-headline-sm text-headline-sm text-on-surface">What motorcycle brands and models are supported?</span>
<span className={`material-symbols-outlined text-primary-container text-[24px] transition-transform duration-200 ${openFaq === 4 ? 'rotate-180' : ''}`} id="faq-icon-4">expand_more</span>
</button>
<div className={`px-space-lg pb-space-lg text-on-surface-variant font-body-md text-body-md ${openFaq === 4 ? 'block' : 'hidden'}`} id="faq-body-4">
              The phone sensor suite works on any vehicle with two wheels. For our OBD-II CAN Link dongle, all Euro4 and Euro5 compliant fuel-injected motorcycles from 2017 to present are supported out-of-the-box (including Yamaha, Ducati, BMW Motorrad, KTM, Kawasaki, Honda, Aprilia, Triumph, and Suzuki). We include custom pin adapter harnesses with every dongle order.
            </div>
</div>
</div>
</div>
</section>
{/*  Tactical Final Banner CTA  */}
<section className="max-w-container-max mx-auto px-gutter-desktop pb-space-4xl">
<div className="relative p-space-2xl md:p-space-3xl rounded-xl bg-gradient-to-r from-surface-container-high via-surface-container to-surface-container-lowest shadow-2xl overflow-hidden">
<div className="absolute right-0 top-0 bottom-0 w-1/3 bg-gradient-to-l from-primary-container/10 to-transparent pointer-events-none"></div>
<div className="relative z-10 max-w-2xl">
<span className="font-label-caps text-label-caps text-primary-container tracking-wide">Instant Telemetry Link</span>
<h2 className="font-headline-xl text-headline-xl text-on-surface mt-space-xs mb-space-sm">
            Ready to analyze your apex angles and lap splits?
          </h2>
<p className="font-body-md text-body-md text-on-surface-variant mb-space-xl">
            Download the app, mount your phone, and be track-ready in under 60 seconds. No credit card required for the free rider tier.
          </p>
<div className="flex flex-wrap items-center gap-space-md">
<a className="px-space-lg py-3 rounded-lg 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">
              Claim Free Telemetry Account
            </a>
<a className="px-space-md py-3 rounded-lg bg-surface-container hover:bg-surface-bright text-on-surface font-headline-sm text-headline-sm transition-colors" data-path="live-cockpit" href="/account">
              Explore Live Cockpit Demo
            </a>
</div>
</div>
</div>
</section>
</div>
</div>

    </div>
  );
}