"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Zap, Award, Instagram, Facebook, Twitter, Youtube } from "lucide-react";

export default function RaceDrivePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmall"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="RaceDrive"
          navItems={[
            { name: "Experience", id: "experience" },
            { name: "Vehicles", id: "vehicles" },
            { name: "Pricing", id: "pricing" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Feel the Thrill of High-Speed Precision"
          description="Experience the ultimate adrenaline rush. Drive world-class racing vehicles on exclusive tracks and discover what true performance feels like."
          tag="Premium Racing Experience"
          tagIcon={Zap}
          background={{ variant: "sparkles-gradient" }}
          mediaItems={[
            { imageSrc: "https://img.b2bpic.net/free-photo/urban-traffic-road-with-cityscape-night_1359-1052.jpg", imageAlt: "Racing car on track at high speed" },
            { imageSrc: "https://img.b2bpic.net/free-photo/beautiful-night-city-lights-abstract-urban-concept-hamburg-germany_1220-1117.jpg", imageAlt: "Sports car racing performance" },
            { imageSrc: "https://img.b2bpic.net/free-photo/city-sparkles-light-streets-night_23-2149057572.jpg", imageAlt: "Supercar accelerating on circuit" },
            { imageSrc: "https://img.b2bpic.net/free-photo/bridge-with-motion-blur-traffic-close-up_23-2148287761.jpg", imageAlt: "Race vehicle on racing circuit" },
            { imageSrc: "https://img.b2bpic.net/free-photo/traffic-light-trails-downtown_1359-840.jpg", imageAlt: "High-speed racing motorsport action" }
          ]}
          buttons={[
            { text: "Book Your Drive", href: "contact" },
            { text: "View Fleet", href: "vehicles" }
          ]}
        />
      </div>

      <div id="experience" data-section="experience">
        <MediaAbout
          title="Your Ultimate Racing Adventure"
          description="Immerse yourself in the world of professional racing. From track orientation to full throttle acceleration, our expert instructors guide you through an unforgettable experience designed for both beginners and seasoned drivers."
          tag="The Experience"
          imageSrc="https://img.b2bpic.net/free-photo/freeway-drive-structure-lifestyle-transit_1112-982.jpg"
          imageAlt="Driver in racing cockpit experiencing high-speed driving"
          useInvertedBackground="invertDefault"
          buttons={[{ text: "Learn More", href: "contact" }]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSeven
          title="What Makes Our Experience Exceptional"
          description="Discover the key elements that set our racecar driving experiences apart from the rest."
          tag="Core Features"
          tagIcon={Award}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Professional Instruction",              description: "Learn from certified racing drivers with years of competitive experience. Our instructors provide personalized guidance to maximize your performance and safety.",              imageSrc: "https://img.b2bpic.net/free-photo/blurred-motion-modern-sports-car-driving-generative-ai_188544-46227.jpg",              imageAlt: "Professional racing instructor demonstration"
            },
            {
              id: 2,
              title: "Premium Fleet Vehicles",              description: "Access to hand-selected, meticulously maintained high-performance racing cars. Each vehicle is inspected regularly and equipped with the latest safety technology.",              imageSrc: "https://img.b2bpic.net/free-photo/high-speed-silver-sport-car-driving-highway-sunny-weather_114579-4031.jpg",              imageAlt: "Fleet of premium racing vehicles"
            },
            {
              id: 3,
              title: "Exclusive Track Access",              description: "Drive on world-renowned racing circuits designed for precision and speed. Experience corners, straights, and technical sections used by professional racing teams.",              imageSrc: "https://img.b2bpic.net/free-photo/empty-soccer-stadium-with-dreamy-fantasy-view-sky_23-2151563110.jpg",              imageAlt: "Professional racing circuit track"
            }
          ]}
        />
      </div>

      <div id="vehicles" data-section="vehicles">
        <ProductCardTwo
          title="Our Racing Fleet"
          description="Choose from our collection of premium high-performance racing vehicles, each delivering unique thrills and capabilities."
          tag="Available Vehicles"
          tagIcon={Zap}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              brand: "RaceDrive",              name: "Formula Track Master",              price: "$599/session",              rating: 5,
              reviewCount: "847",              imageSrc: "https://img.b2bpic.net/free-photo/urban-traffic-road-with-cityscape-night_1359-1052.jpg",              imageAlt: "Formula Track Master racing vehicle"
            },
            {
              id: "2",              brand: "RaceDrive",              name: "GT Performance Elite",              price: "$449/session",              rating: 5,
              reviewCount: "623",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-night-city-lights-abstract-urban-concept-hamburg-germany_1220-1117.jpg",              imageAlt: "GT Performance Elite sports car"
            },
            {
              id: "3",              brand: "RaceDrive",              name: "Circuit Pro Racer",              price: "$399/session",              rating: 5,
              reviewCount: "512",              imageSrc: "https://img.b2bpic.net/free-photo/city-sparkles-light-streets-night_23-2149057572.jpg",              imageAlt: "Circuit Pro Racer racing vehicle"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="By The Numbers"
          description="See what our guests and track record tell us about RaceDrive."
          tag="Our Track Record"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          metrics={[
            {
              id: "1",              value: "5,200+",              title: "Drivers Thrilled",              items: ["98% satisfaction rate", "Repeat bookings growing"]
            },
            {
              id: "2",              value: "15+",              title: "World-Class Tracks",              items: ["Premium circuits", "Exclusive access"]
            },
            {
              id: "3",              value: "0",              title: "Safety Incidents",              items: ["Advanced safety protocols", "Expert instruction"]
            },
            {
              id: "4",              value: "12",              title: "Years Experience",              items: ["Industry leader", "Professional team"]
            }
          ]}
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardFifteen
          testimonial="Absolutely life-changing! The instructors were incredibly professional, and I felt completely safe pushing the limits. This is on my bucket list for sure."
          rating={5}
          author="Marcus Thompson"
          useInvertedBackground="invertDefault"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Marcus Thompson" },
            { src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "Sarah Williams" },
            { src: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg", alt: "James Rodriguez" },
            { src: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg", alt: "Emily Johnson" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Feel the Rush?"
          description="Book your unforgettable racecar driving experience today. Our team will help you select the perfect vehicle and track for your skill level."
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/nightlife-city-sparkles-light-streets_23-2149057552.jpg"
          imageAlt="Aerial view of racing circuit"
          mediaPosition="right"
          inputs={[
            { name: "name", type: "text", placeholder: "Full Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
            { name: "experience", type: "text", placeholder: "Driving Experience Level" }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your racing dreams and questions...",            rows: 5,
            required: true
          }}
          buttonText="Book My Experience"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="RaceDrive"
          copyrightText="© 2025 RaceDrive. All rights reserved. Pure performance, pure adrenaline."
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Youtube, href: "https://youtube.com", ariaLabel: "YouTube" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}