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

export default function HeroSection() {
  return (
    <section className="hero-wrapper">
      <div className="hero-glow-1" />
      <div className="hero-glow-2" />
      <div className="flagship-container">
        <div className="hero-grid">
          {/* Hero Copy */}
          <div className="hero-content-col">
            <div className="hero-pill">
              <span className="pulse-dot-green">
                <span className="ping" />
                <span className="core" />
              </span>
              <span className="font-label-caps text-dim-cyan" style={{ letterSpacing: '0.12em' }}>
                ⚡ NEXT-GEN TELEMETRY ENGINE 3.0 • REAL-TIME CAN-BUS &amp; GPS
              </span>
            </div>

            <h1 className="font-display-hero hero-title">
              Know what your <br className="hidden sm:inline" />
              <span className="gradient-title-text">ride is doing.</span>
            </h1>

            <p className="font-body-lg hero-desc">
              MotorSignal turns every ride into clear, actionable insight: real-time lean angle, live GPS track
              telemetry on the road, post-session performance replay, and enterprise security for riders and clubs.
            </p>

            <div className="hero-actions-row">
              <Link className="btn-primary-gradient" href="/register">
                <span>Create your account</span>
                <span className="material-symbols-outlined icon-bold">arrow_forward</span>
              </Link>
              <Link className="btn-secondary-surface" href="/features">
                <span className="material-symbols-outlined text-dim-cyan">play_circle</span>
                <span>Explore features</span>
              </Link>
              <Link className="btn-ghost-surface" href="/features">
                View Live Demo
              </Link>
            </div>

            {/* Trust Avatars & Proof */}
            <div className="hero-trust-row">
              <div className="hero-trust-avatars">
                <div className="trust-avatar avatar-blue">
                  <span className="material-symbols-outlined">sports_motorsports</span>
                </div>
                <div className="trust-avatar avatar-green">
                  <span className="material-symbols-outlined">speed</span>
                </div>
                <div className="trust-avatar avatar-cyan">
                  <span className="material-symbols-outlined">timeline</span>
                </div>
                <div className="trust-avatar avatar-count">
                  +420
                </div>
              </div>
              <div className="hero-trust-text">
                <span className="font-label-md text-ink">
                  Trusted by 14,800+ riders
                </span>
                <span className="font-body-sm">Across 420+ racing clubs &amp; track leagues worldwide</span>
              </div>
            </div>
          </div>

          {/* Hero Cockpit Showcase Visual */}
          <div className="cockpit-frame-wrapper">
            <div className="cockpit-viewport">
              <img
                src="/images/motorsignal-hero.jpg"
                alt="Motorcycle leaning into high speed curve with glowing cyan digital telemetry cockpit overlay"
              />
              <div className="cockpit-vignette-bottom" />
              <div className="cockpit-vignette-side" />

              {/* Top Badge: Apex Vector Locked */}
              <div className="hud-apex-badge">
                <span className="status-dot-green" />
                <span className="font-code-mono text-green-accent">APEX VECTOR LOCKED</span>
                <span className="font-code-mono text-muted">| CAN-BUS 100Hz</span>
              </div>

              {/* Floating HUD 1: Lean Angle */}
              <div className="hud-lean-card">
                <div className="hud-header">
                  <span className="font-label-caps text-muted-blue">LEAN ANGLE</span>
                  <span className="font-code-mono text-green-accent">LIVE</span>
                </div>
                <div className="hud-value-row">
                  <span className="font-telemetry-metric-xl text-cyan-accent">54°</span>
                  <span className="font-code-mono text-muted">LEFT</span>
                </div>
                <div className="hud-progress-bg">
                  <div className="hud-progress-bar lean-progress" />
                </div>
                <div className="hud-footer font-code-mono">
                  <span className="text-muted">0°</span>
                  <span className="text-muted">PEAK 58°</span>
                </div>
              </div>

              {/* Floating HUD 2: Velocity & G-Force */}
              <div className="hud-speed-card">
                <div className="hud-header">
                  <span className="font-label-caps text-muted-blue">VELOCITY &amp; G-FORCE</span>
                  <span className="material-symbols-outlined text-cyan-accent icon-sm">speed</span>
                </div>
                <div className="hud-value-row">
                  <span className="font-telemetry-metric-md text-ink">158</span>
                  <span className="font-code-mono text-dim-cyan">MPH</span>
                </div>
                <div className="hud-lateral-box">
                  <span className="font-code-mono text-muted-blue">LATERAL</span>
                  <span className="font-headline-sm text-green-accent">+1.82 G</span>
                </div>
              </div>

              {/* Bottom Right Floating HUD 3: GPS Multi-band */}
              <div className="hud-gps-card">
                <div className="hud-header">
                  <div className="hud-header-title">
                    <span className="material-symbols-outlined text-dim-cyan icon-sm">satellite_alt</span>
                    <span className="font-label-caps text-ink">GPS MULTI-BAND</span>
                  </div>
                  <span className="font-code-mono text-green-accent">10Hz LOCK</span>
                </div>
                <div className="hud-detail-row">
                  <span className="font-code-mono text-muted">SYNC LATENCY</span>
                  <span className="font-headline-sm text-cyan-accent">12ms</span>
                </div>
                <div className="hud-detail-row font-code-mono">
                  <span className="text-muted-blue">SAT IN VIEW</span>
                  <span className="text-ink">24 SATS</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}