"use client"

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardSplit from '@/components/sections/hero/HeroBillboardSplit';
import TagAbout from '@/components/sections/about/TagAbout';
import ProductCardSix from '@/components/sections/product/ProductCardSix';
import FeatureCardThirteen from '@/components/sections/feature/FeatureCardThirteen';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Facebook, Instagram, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumSizeExtraSmallSpacing"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="outline"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Inventory", id: "inventory" },
            { name: "Why Us", id: "about" },
            { name: "FAQ", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Browse Cars",
            href: "inventory"
          }}
          brandName="AutoHub"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardSplit
          tag="Premium Selection"
          title="Find Your Perfect Car Today"
          description="Browse our curated selection of quality vehicles with transparent pricing and expert support. Your dream car is just a few clicks away."
          buttons={[
            { text: "Explore Inventory", href: "inventory" },
            { text: "Schedule Test Drive", href: "contact" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766146477653-77nt4hip.jpg"
          imageAlt="Luxury car showroom"
          frameStyle="browser"
        />
      </div>

      <div id="about" data-section="about">
        <TagAbout
          tag="Why Choose Us"
          description="We believe in transparency, quality, and customer satisfaction. Our carefully selected inventory combines reliability with value. Every vehicle undergoes rigorous inspection to ensure you drive away confident."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="inventory" data-section="inventory">
        <ProductCardSix
          title="Featured Inventory"
          description="Explore our latest available vehicles carefully selected for quality and value"
          tag="In Stock"
          products={[
            {
              id: "1",
              name: "2023 Sedan Deluxe",
              price: "$28,500",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766146481032-ajtv6s20.jpg",
              imageAlt: "2023 Sedan Deluxe"
            },
            {
              id: "2",
              name: "2024 SUV Pro Max",
              price: "$42,900",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766146484040-wt1xw5sz.jpg",
              imageAlt: "2024 SUV Pro Max"
            },
            {
              id: "3",
              name: "2023 Coupe Edition",
              price: "$35,200",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766146486593-g4t9r5h6.jpg",
              imageAlt: "2023 Coupe Edition"
            },
            {
              id: "4",
              name: "2022 Truck Adventure",
              price: "$38,750",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766146488339-p7mm4yhc.jpg",
              imageAlt: "2022 Truck Adventure"
            },
            {
              id: "5",
              name: "2023 Convertible Dream",
              price: "$45,600",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766146490553-viu91yyz.jpg",
              imageAlt: "2023 Convertible Dream"
            },
            {
              id: "6",
              name: "2024 Hatchback Smart",
              price: "$22,300",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766146492318-4z1klmsa.jpg",
              imageAlt: "2024 Hatchback Smart"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
          animationType="slide-up"
          containerStyle="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardThirteen
          title="Simple Buying Process"
          description="We've streamlined the car buying journey to be transparent, quick, and hassle-free"
          tag="How It Works"
          features={[
            {
              id: "01",
              title: "Browse Selection",
              description: "Explore our inventory of quality vehicles with detailed photos, specifications, and pricing information."
            },
            {
              id: "02",
              title: "Schedule Visit",
              description: "Request a test drive or visit our showroom at your convenience to inspect your chosen vehicle."
            },
            {
              id: "03",
              title: "Get Financing",
              description: "Work with our finance team to explore flexible payment options tailored to your budget."
            },
            {
              id: "04",
              title: "Drive Home",
              description: "Complete paperwork and drive away with your new vehicle, backed by our satisfaction guarantee."
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          textboxLayout="default"
          animationType="slide-up"
          containerStyle="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Trusted by Our Customers"
          description="See what real car buyers have to say about their experience with us"
          tag="Reviews"
          testimonials={[
            {
              id: "1",
              title: "Transparent and Fair Pricing",
              quote: "I was skeptical about car buying, but AutoHub made the entire process transparent and stress-free. No hidden fees, no surprises. They found the perfect car for my family.",
              name: "Michael Johnson",
              role: "Family of Four",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766146496933-nlxtrfx9.jpg",
              imageAlt: "Michael Johnson"
            },
            {
              id: "2",
              title: "Expert Guidance Throughout",
              quote: "The team at AutoHub took time to understand my needs and budget. Their expertise was invaluable in helping me choose between options. Highly recommended!",
              name: "Sarah Williams",
              role: "First-Time Buyer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766146498227-9szmckd0.jpg",
              imageAlt: "Sarah Williams"
            },
            {
              id: "3",
              title: "Quick and Professional Service",
              quote: "From browsing to driving off the lot took just one weekend. The entire staff was professional and helpful. Best car buying experience I've had.",
              name: "David Chen",
              role: "Business Owner",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766146499352-leugnvgu.jpg",
              imageAlt: "David Chen"
            },
            {
              id: "4",
              title: "Quality Vehicles and Support",
              quote: "Every vehicle I looked at was in excellent condition. The inspection reports were thorough. Six months in, my car is running perfectly. Great investment!",
              name: "Jennifer Martinez",
              role: "Long-term Customer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766146500582-fa5sq319.jpg",
              imageAlt: "Jennifer Martinez"
            }
          ]}
          variant="card"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our vehicles, financing, and buying process"
          tag="Help Center"
          faqs={[
            {
              id: "1",
              title: "How are your vehicles inspected?",
              content: "Every vehicle in our inventory undergoes a comprehensive multi-point inspection covering mechanical systems, safety features, and cosmetic condition. We provide detailed inspection reports with each listing."
            },
            {
              id: "2",
              title: "Do you offer financing options?",
              content: "Yes, we work with multiple lenders to offer flexible financing solutions. Our finance team can help you explore options that fit your budget and credit situation."
            },
            {
              id: "3",
              title: "Can I test drive a vehicle?",
              content: "Absolutely! We encourage test drives. You can schedule one online or visit our showroom. Test drives give you the best sense of how a vehicle performs."
            },
            {
              id: "4",
              title: "What warranty coverage is available?",
              content: "We provide warranty information with each vehicle. Many of our pre-owned cars come with extended warranty options. Ask our sales team for specific coverage details."
            },
            {
              id: "5",
              title: "How is the price determined?",
              content: "Our pricing is based on market research, vehicle condition, mileage, and demand. We maintain transparent pricing with no hidden fees. You always know exactly what you're paying for."
            },
            {
              id: "6",
              title: "Do you accept trade-ins?",
              content: "Yes, we accept trade-ins! Bring your current vehicle for evaluation, and we'll provide a fair offer that can be applied toward your new purchase."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766146493933-kwdwgaxp.jpg"
          imageAlt="AutoHub showroom interior"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          mediaPosition="right"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Ready to Find Your Perfect Car?"
          description="Get in touch with our team. We're here to answer questions, schedule test drives, and help you make the right choice."
          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: "vehicleInterest",
              type: "text",
              placeholder: "What type of vehicle interests you?",
              required: false
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your needs or ask any questions...",
            rows: 5,
            required: true
          }}
          buttonText="Send Inquiry"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="AutoHub"
          copyrightText="© 2025 AutoHub. All rights reserved."
          socialLinks={[
            {
              icon: Facebook,
              href: "https://facebook.com/autohub",
              ariaLabel: "Follow us on Facebook"
            },
            {
              icon: Instagram,
              href: "https://instagram.com/autohub",
              ariaLabel: "Follow us on Instagram"
            },
            {
              icon: Twitter,
              href: "https://twitter.com/autohub",
              ariaLabel: "Follow us on Twitter"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}