'use client';

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

interface HeroContent {
  headline: string;
  subheadline: string;
  cta_text: string;
  cta_link: string;
  badge_text: string;
}

const DEFAULT_HERO_CONTENT: HeroContent = {
  headline: 'Know what your ride is doing.',
  subheadline:
    '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.',
  cta_text: 'Create your account',
  cta_link: '/register',
  badge_text: '⚡ Next-Gen Telemetry Engine 3.0 • Real-Time CAN-Bus & GPS',
};

export default function HeroSection() {
  const [content, setContent] = useState<HeroContent>(DEFAULT_HERO_CONTENT);

  useEffect(() => {
    fetch('/api/cms/homepage_hero')
      .then((res) => (res.ok ? res.json() : null))
      .then((data) => {
        if (data?.published) {
          setContent((prev) => ({
            ...prev,
            ...data.published,
          }));
        }
      })
      .catch(() => {});
  }, []);

  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 shrink-0">
                <span className="ping" />
                <span className="core" />
              </span>
              <span className="font-label-caps text-dim-cyan">
                {content.badge_text}
              </span>
            </div>

            <h1 className="font-display-hero hero-title">
              {content.headline.includes('ride is doing.') ? (
                <>
                  {content.headline.replace('ride is doing.', '')}
                  <br className="hidden sm:inline" />
                  <span className="gradient-title-text">ride is doing.</span>
                </>
              ) : (
                <span className="gradient-title-text">{content.headline}</span>
              )}
            </h1>

            <p className="font-body-lg hero-desc">
              {content.subheadline}
            </p>

            <div className="hero-actions-row">
              <Link className="btn-primary-gradient" href={content.cta_link || '/register'}>
                <span>{content.cta_text || '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>
  );
}