"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitLarge from '@/components/sections/hero/HeroSplitLarge';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import SocialProofThree from '@/components/sections/socialProof/SocialProofThree';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Award, CheckCircle, Facebook, HelpCircle, Instagram, Linkedin, Sparkles, Star, Twitter, Zap } from "lucide-react";

export default function AutoHubPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="small"
      background="circleGradient"
      cardStyle="solid-accent"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="AutoHub"
          navItems={[
            { name: "Inventory", id: "product" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{ text: "Browse Cars", href: "product" }}
          navItemClassName="text-sm font-medium"
          buttonClassName="px-6 py-2"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitLarge
          title="Find Your Perfect Vehicle Today"
          description="Discover an extensive selection of premium cars with transparent pricing and exceptional service. Drive home your dream car from our curated inventory."
          tag="Trusted Dealership"
          tagIcon={Sparkles}
          buttons={[
            { text: "Browse Inventory", href: "product" },
            { text: "Schedule Test Drive", href: "contact" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161705753-vhizi7n6.png"
          imageAlt="Featured luxury vehicle"
          className="relative"
          containerClassName="w-full"
          titleClassName="text-5xl md:text-6xl font-bold"
          descriptionClassName="text-lg md:text-xl"
          buttonContainerClassName="flex gap-4 mt-8"
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardTwo
          title="Our Vehicle Inventory"
          description="Handpicked selection of quality vehicles to suit every budget and lifestyle"
          tag="Premium Selection"
          tagIcon={Award}
          products={[
            {
              id: "1",
              brand: "Premium Sedan",
              name: "Classic Luxury Sedan",
              price: "$32,500",
              rating: 5,
              reviewCount: "287",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161706572-sc55lnie.jpg",
              imageAlt: "White luxury sedan"
            },
            {
              id: "2",
              brand: "Sport SUV",
              name: "Adventure All-Terrain",
              price: "$45,000",
              rating: 5,
              reviewCount: "412",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161707162-ggdkkz0m.jpg",
              imageAlt: "Black sport utility vehicle"
            },
            {
              id: "3",
              brand: "Electric Motor",
              name: "Future Electric Vehicle",
              price: "$38,900",
              rating: 5,
              reviewCount: "156",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161708085-ea9hlb8q.jpg",
              imageAlt: "Modern electric car"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          containerStyle="default"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          titleClassName="text-4xl font-bold"
          descriptionClassName="text-lg"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About AutoHub"
          description={[
            "With over 20 years of experience in automotive sales, we pride ourselves on delivering quality vehicles and exceptional customer service. Our mission is to make car buying transparent, affordable, and enjoyable.",
            "Every vehicle in our inventory undergoes rigorous inspection and comes with comprehensive warranty coverage. Our expert team is committed to helping you find the perfect match for your lifestyle and budget."
          ]}
          buttons={[{ text: "Learn More", href: "about" }]}
          showBorder={true}
          useInvertedBackground="noInvert"
          titleClassName="text-4xl font-bold"
          descriptionClassName="text-base leading-relaxed"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Financing Options"
          description="Flexible payment plans to fit your budget and financial situation"
          tag="Special Offers"
          tagIcon={Sparkles}
          plans={[
            {
              id: "cash",
              badge: "Best Value",
              price: "Pay in Full",
              subtitle: "Immediate ownership with competitive pricing",
              features: [
                "No interest charges",
                "Best vehicle discounts",
                "Immediate delivery",
                "Full warranty coverage"
              ],
              badgeIcon: CheckCircle
            },
            {
              id: "finance",
              badge: "Most Popular",
              price: "Low Rates",
              subtitle: "Flexible terms with approved credit",
              features: [
                "As low as 4.9% APR",
                "Up to 72 months financing",
                "Quick pre-approval process",
                "Full warranty included"
              ],
              badgeIcon: Sparkles
            },
            {
              id: "lease",
              badge: "Flexible",
              price: "Monthly Lease",
              subtitle: "Drive new models with lower payments",
              features: [
                "Latest vehicle models",
                "Included maintenance",
                "Gap insurance coverage",
                "Early lease buyout option"
              ],
              badgeIcon: Zap
            }
          ]}
          animationType="slide-up"
          containerStyle="default"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          titleClassName="text-4xl font-bold"
          descriptionClassName="text-lg"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardEight
          title="What Our Customers Say"
          description="Real experiences from satisfied buyers who found their perfect vehicle with us"
          tag="Customer Reviews"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "James Richardson",
              role: "Business Owner",
              company: "Tech Ventures LLC",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5lgxyp",
              imageAlt: "James Richardson satisfied customer"
            },
            {
              id: "2",
              name: "Sarah Mitchell",
              role: "Marketing Manager",
              company: "Creative Agency Co",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=zybuum",
              imageAlt: "Sarah Mitchell happy buyer"
            },
            {
              id: "3",
              name: "David Chen",
              role: "Software Developer",
              company: "Innovation Labs",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161708683-7qtvsxr1.jpg",
              imageAlt: "David Chen customer"
            },
            {
              id: "4",
              name: "Emma Thompson",
              role: "Healthcare Professional",
              company: "City Medical Center",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bfeyhg",
              imageAlt: "Emma Thompson satisfied client"
            }
          ]}
          titleClassName="text-4xl font-bold"
          descriptionClassName="text-lg"
        />
      </div>

      <div id="socialproof" data-section="socialproof">
        <SocialProofThree
          title="Trusted Automotive Partnerships"
          description="We proudly work with leading vehicle manufacturers and industry leaders"
          tag="Industry Leaders"
          tagIcon={Award}
          logos={[
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161712989-pnkoz97v.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161467667-4c3wcywy.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161713790-bt99nbm8.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161714641-7ui6orzs.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161715457-sbndf49h.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161465876-pt5k0f1f.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161466428-kdufz4g1.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161716124-8088lrp0.jpg"
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          topMarqueeDirection="left"
          speed={40}
          titleClassName="text-4xl font-bold"
          descriptionClassName="text-lg"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about our vehicles and services"
          tag="Help & Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "What is your warranty coverage?",
              content: "All our vehicles come with a comprehensive warranty package. New inventory includes manufacturer warranty, while pre-owned vehicles receive our premium extended warranty covering major mechanical components for up to 5 years or 100,000 miles."
            },
            {
              id: "2",
              title: "Do you offer trade-in options?",
              content: "Yes, we welcome trade-ins. We provide competitive appraisals for your current vehicle, which can be applied directly to your purchase. Our appraisal process is fast, transparent, and fair market value based."
            },
            {
              id: "3",
              title: "What financing options are available?",
              content: "We offer flexible financing with approved credit including bank financing, dealer financing, and lease options. Our rates are competitive and we work to find terms that fit your budget. Pre-approval can be completed online."
            },
            {
              id: "4",
              title: "How long is the car buying process?",
              content: "The average purchase can be completed in 2-3 hours from test drive to paperwork. With pre-approval and trade-in appraisal done beforehand, the process moves even faster. We handle all documentation and title transfer."
            },
            {
              id: "5",
              title: "Can I schedule a test drive?",
              content: "Absolutely! You can schedule a test drive online through our website or contact us directly. We offer flexible scheduling including evening and weekend appointments to fit your convenience."
            },
            {
              id: "6",
              title: "Do you provide vehicle maintenance records?",
              content: "Yes, we provide complete vehicle history reports and maintenance records for all pre-owned vehicles. Every vehicle also includes our detailed inspection report ensuring quality and transparency."
            }
          ]}
          titleClassName="text-4xl font-bold"
          descriptionClassName="text-lg"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get In Touch"
          description="Schedule a test drive or inquire about specific vehicles. Our team is ready to help you find the perfect car."
          inputs={[
            { name: "fullName", 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: "vehicle", type: "text", placeholder: "Vehicle of Interest", required: false }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us how we can help (test drive, financing questions, trade-in appraisal, etc.)",
            rows: 5,
            required: false
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766161708683-7qtvsxr1.jpg"
          imageAlt="AutoHub dealership team"
          mediaPosition="right"
          buttonText="Send Inquiry"
          titleClassName="text-4xl font-bold"
          descriptionClassName="text-lg"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="AutoHub"
          copyrightText="© 2025 AutoHub. All rights reserved. Trusted automotive dealer."
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com/autohub", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com/autohub", ariaLabel: "Instagram" },
            { icon: Twitter, href: "https://twitter.com/autohub", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com/company/autohub", ariaLabel: "LinkedIn" }
          ]}
          containerClassName="py-20"
          cardClassName="rounded-2xl p-10"
          copyrightTextClassName="text-sm"
        />
      </div>
    </ThemeProvider>
  );
}