"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, Wrench, TrendingUp, Calendar } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="AutoElite"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Results", id: "metrics" },
            { name: "Testimonials", id: "testimonials" }
          ]}
          button={{
            text: "Book Service",            href: "contact"
          }}
          className="rounded-full shadow-lg"
          navItemClassName="text-sm font-semibold tracking-wide"
          buttonClassName="px-6 py-2 rounded-full font-semibold"
          buttonTextClassName="text-sm"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="AutoElite Premium Service"
          description="Experience luxury automotive care with our comprehensive service suite. From precision maintenance to premium detailing, we deliver excellence for discerning vehicle owners."
          buttons={[
            { text: "Schedule Appointment", href: "contact" },
            { text: "Learn More", href: "services" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/he-is-confident-small-business-owner_637285-9324.jpg"
          imageAlt="Premium automotive service facility with luxury vehicles"
          frameStyle="browser"
          logoLineHeight={1.15}
          ariaLabel="Premium automotive service hero section"
          className="py-12"
          containerClassName="max-w-7xl mx-auto px-6"
          logoContainerClassName="mb-8"
          descriptionClassName="text-lg leading-relaxed"
          buttonContainerClassName="flex gap-4 mt-8"
          buttonClassName="px-8 py-3 rounded-lg font-semibold transition-all"
          mediaWrapperClassName="mt-12 rounded-lg overflow-hidden"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Premium Service"
          tagIcon={Sparkles}
          title="Elevating Automotive Excellence"
          description="With decades of combined experience, our team of certified technicians delivers uncompromising quality and attention to detail. We've built our reputation on expertise, transparency, and customer satisfaction. Every vehicle receives the precision care it deserves."
          metrics={[
            { value: "25+", title: "Years Industry Experience" },
            { value: "98%", title: "Customer Satisfaction Rate" }
          ]}
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/medium-shot-valet-doing-his-job_23-2150274594.jpg"
          imageAlt="Professional automotive technician performing service"
          ariaLabel="About AutoElite premium service"
          className="py-16"
          containerClassName="max-w-7xl mx-auto px-6"
          gridClassName="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"
          titleClassName="text-4xl md:text-5xl font-bold mb-6"
          descriptionClassName="text-lg leading-relaxed mb-8"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardOne
          title="Premium Service Suite"
          description="Comprehensive automotive solutions delivered with precision and care"
          tag="Our Services"
          tagIcon={Wrench}
          features={[
            {
              title: "Precision Maintenance",              description: "Scheduled maintenance, oil changes, fluid checks, and preventive care using OEM-quality parts",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-valet-doing-his-job_23-2150274594.jpg",              imageAlt: "Precision maintenance service"
            },
            {
              title: "Premium Detailing",              description: "Interior and exterior detailing with professional-grade products for showroom finish",              imageSrc: "https://img.b2bpic.net/free-photo/valet-holding-baggage-medium-shot_23-2149901450.jpg",              imageAlt: "Premium car detailing service"
            },
            {
              title: "Diagnostic Services",              description: "State-of-the-art diagnostic technology to identify issues with precision accuracy",              imageSrc: "https://img.b2bpic.net/free-photo/modern-stylish-bearded-businessman-automobile-saloon_146671-16002.jpg",              imageAlt: "Advanced diagnostic inspection"
            },
            {
              title: "Expert Repairs",              description: "Complex repair work handled by certified technicians with extensive experience",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-man-repairing-workshop_23-2150171284.jpg",              imageAlt: "Expert automotive repair service"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          ariaLabel="Premium automotive services"
          className="py-16"
          containerClassName="max-w-7xl mx-auto px-6"
          cardClassName="rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow"
          textBoxTitleClassName="text-3xl font-bold mb-4"
          textBoxDescriptionClassName="text-lg leading-relaxed"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Impact & Results"
          description="Proven excellence in automotive service delivery"
          tag="Performance Metrics"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",              value: "5,000+",              title: "Vehicles Serviced",              description: "Trusted by thousands of satisfied customers",              imageSrc: "https://img.b2bpic.net/free-photo/salesman-car-showroom_1303-13491.jpg",              imageAlt: "Customer satisfaction illustration"
            },
            {
              id: "2",              value: "24/7",              title: "Support Available",              description: "Round-the-clock availability for emergencies",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-seller-car-dealership_23-2149106194.jpg",              imageAlt: "Professional team support"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          ariaLabel="Service metrics and results"
          className="py-16"
          containerClassName="max-w-7xl mx-auto px-6"
          valueClassName="text-4xl font-bold"
          cardTitleClassName="text-lg font-semibold mt-4"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Trusted by Discerning Vehicle Owners"
          description="See what our satisfied customers have to say about our premium service"
          tag="Testimonials"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",              title: "Exceptional Service Excellence",              quote: "AutoElite has transformed how I care for my vehicle. The professionalism and attention to detail are unmatched. I trust them completely with my luxury car.",              name: "James Mitchell",              role: "Executive, Automotive Enthusiast",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "James Mitchell testimonial"
            },
            {
              id: "2",              title: "Precision and Professionalism",              quote: "From the moment I arrived, I felt the difference. Their team knows what they're doing, and they treat your vehicle like their own. Highly recommend.",              name: "Sarah Chen",              role: "Business Owner",              imageSrc: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              imageAlt: "Sarah Chen testimonial"
            },
            {
              id: "3",              title: "Worth Every Penny",              quote: "I've been going to AutoElite for three years. They consistently deliver exceptional results. My vehicle runs like new, and I couldn't ask for better service.",              name: "Marcus Rodriguez",              role: "Technology Professional",              imageSrc: "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",              imageAlt: "Marcus Rodriguez testimonial"
            },
            {
              id: "4",              title: "Premium Care for Premium Vehicles",              quote: "As someone who owns multiple vehicles, I appreciate their expertise with luxury brands. They understand what it takes to maintain perfection.",              name: "Victoria Thompson",              role: "Entrepreneur",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",              imageAlt: "Victoria Thompson testimonial"
            },
            {
              id: "5",              title: "Outstanding Customer Experience",              quote: "The transparency, communication, and professionalism set them apart. They explain everything clearly and always deliver on their promises.",              name: "David Park",              role: "Investment Manager",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "David Park testimonial"
            },
            {
              id: "6",              title: "True Excellence in Service",              quote: "I've tried many service centers, but AutoElite is in a league of their own. The quality of work and customer care is genuinely exceptional.",              name: "Amanda Foster",              role: "Medical Professional",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-outdoor-businessman_23-2148763884.jpg",              imageAlt: "Amanda Foster testimonial"
            }
          ]}
          ariaLabel="Customer testimonials section"
          className="py-16"
          containerClassName="max-w-7xl mx-auto px-6"
          textBoxTitleClassName="text-3xl font-bold mb-4"
          quoteClassName="text-lg italic leading-relaxed"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about our premium automotive services"
          tag="Support"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What makes AutoElite different from other service centers?",              content: "We combine decades of expertise with a commitment to excellence. Our certified technicians, state-of-the-art diagnostic equipment, and customer-first approach set us apart. We treat every vehicle with the precision it deserves."
            },
            {
              id: "2",              title: "How do I schedule a service appointment?",              content: "You can schedule an appointment through our website, call us directly, or use our online booking system. We offer flexible scheduling to accommodate your busy lifestyle. Same-day appointments are often available."
            },
            {
              id: "3",              title: "Do you work on all vehicle makes and models?",              content: "Yes, our team specializes in all major brands including luxury vehicles. Whether it's routine maintenance or complex repairs, we have the expertise and equipment to service your vehicle properly."
            },
            {
              id: "4",              title: "What warranty do you offer on repairs?",              content: "All repairs include a comprehensive warranty covering parts and labor. We stand behind our work completely. Specific warranty terms vary by service type—ask our team for details."
            },
            {
              id: "5",              title: "How long does a typical service take?",              content: "Service times vary depending on the work required. A standard oil change takes 30-45 minutes, while more complex services may take longer. We'll provide an accurate estimate during your appointment."
            },
            {
              id: "6",              title: "Do you use genuine or aftermarket parts?",              content: "We primarily use OEM-quality parts to ensure your vehicle maintains its performance and value. We discuss parts options with you and always ensure quality meets our standards."
            }
          ]}
          ariaLabel="FAQ section"
          className="py-16"
          containerClassName="max-w-7xl mx-auto px-6"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Ready to Schedule"
          title="Book Your Premium Service Today"
          description="Experience the AutoElite difference. Schedule your appointment now and discover why discerning vehicle owners choose us."
          tagIcon={Calendar}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email address"
          buttonText="Schedule Now"
          termsText="By scheduling, you agree to our service terms and privacy policy. We respect your time and privacy."
          ariaLabel="Contact and scheduling section"
          className="py-16"
          containerClassName="max-w-2xl mx-auto px-6"
          titleClassName="text-4xl font-bold mb-4"
          descriptionClassName="text-lg mb-8"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="AutoElite"
          copyrightText="© 2025 AutoElite Premium Service. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
                { label: "Maintenance", href: "services" },
                { label: "Detailing", href: "services" },
                { label: "Repairs", href: "services" },
                { label: "Diagnostics", href: "services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Testimonials", href: "testimonials" },
                { label: "Contact", href: "contact" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "faq" },
                { label: "Warranty", href: "#" },
                { label: "Service Hours", href: "#" },
                { label: "Emergency Service", href: "contact" }
              ]
            }
          ]}
          ariaLabel="Site footer"
          className="border-t"
          containerClassName="max-w-7xl mx-auto px-6 py-12"
          logoTextClassName="text-2xl font-bold mb-8"
          columnTitleClassName="font-semibold mb-4"
        />
      </div>
    </ThemeProvider>
  );
}