"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { CheckCircle, Droplets, Shield, Sparkles, Star, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmall"
      background="aurora"
      cardStyle="inset"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="A Detailing"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Services", id: "features" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Premium Auto Detailing in San Diego"
          description="Expert vehicle detailing by Rainer and Romet - trusted by San Diego State University area residents for pristine finishes and professional care"
          imageSrc="https://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22299.jpg"
          imageAlt="Professional auto detailing"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "Book Your Detail", href: "contact" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Where Passion Meets" },
            { type: "text", content: "Perfection" }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Discover Our Services", href: "features" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTen
          title="Our Premium Services"
          description="A comprehensive range of professional detailing services designed to protect and enhance your vehicle's appearance"
          features={[
            {
              id: "1",              title: "Exterior Detailing",              description: "Professional washing, clay bar treatment, paint correction, and protective coatings to restore your vehicle's showroom shine",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/mid-adult-mechanic-examining-vehicle-hood-while-working-auto-repair-shop_637285-7664.jpg"
              },
              items: [
                { icon: Sparkles, text: "Paint protection" },
                { icon: Shield, text: "UV protection" },
                { icon: CheckCircle, text: "Long-lasting shine" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "Interior Detailing",              description: "Deep cleaning of upholstery, carpets, leather conditioning, and meticulous attention to every interior detail for a pristine cabin",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30596.jpg"
              },
              items: [
                { icon: Zap, text: "Stain removal" },
                { icon: Droplets, text: "Leather care" },
                { icon: CheckCircle, text: "Fresh and clean" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Protective Coatings",              description: "Premium ceramic coatings, paint protection film, and sealants that keep your vehicle protected from environmental contaminants",              media: {
                imageSrc: "https://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193564.jpg"
              },
              items: [
                { icon: Shield, text: "Ceramic coating" },
                { icon: Droplets, text: "Water beading" },
                { icon: CheckCircle, text: "Years of protection" }
              ],
              reverse: false
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTen
          title="Meet the Experts Behind A Detailing"
          tag="Our Team"
          members={[
            {
              id: "1",              name: "Rainer",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Rainer - Founder & Master Detailer"
            },
            {
              id: "2",              name: "Romet",              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: "Romet - Founder & Master Detailer"
            }
          ]}
          memberVariant="card"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by Hundreds of Satisfied Vehicle Owners"
          cardTag="Customer Testimonials"
          testimonials={[
            {
              id: "1",              name: "Sarah Martinez",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg"
            },
            {
              id: "2",              name: "James Chen",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg"
            },
            {
              id: "3",              name: "Michelle Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businesswoman-smiling-looking-camera-successful-confident-grey-haired-manager-sitting-office-room-workplace-business-management-concept_74855-7343.jpg"
            },
            {
              id: "4",              name: "David Thompson",              imageSrc: "https://img.b2bpic.net/free-photo/cheerful-middle-aged-businesswoman_1262-21005.jpg"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Track Record"
          description="Proven excellence in auto detailing serving the San Diego area"
          metrics={[
            {
              id: "1",              icon: Users,
              title: "Happy Clients",              value: "500+"
            },
            {
              id: "2",              icon: Star,
              title: "5-Star Reviews",              value: "98%"
            },
            {
              id: "3",              icon: Zap,
              title: "Years Experience",              value: "15+"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your vehicle? Contact A Detailing today for a personalized consultation and premium detailing service."
          animationType="entrance-slide"
          buttons={[
            { text: "Schedule Service", href: "https://example.com/booking" },
            { text: "Get a Quote", href: "https://example.com/quote" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Services",              items: [
                { label: "Exterior Detailing", href: "#features" },
                { label: "Interior Detailing", href: "#features" },
                { label: "Protective Coatings", href: "#features" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Team", href: "#team" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "Near SDSU", href: "https://maps.google.com" },
                { label: "Email", href: "mailto:info@adetailing.com" },
                { label: "Book Now", href: "#contact" }
              ]
            }
          ]}
          bottomLeftText="© 2025 A Detailing by Rainer & Romet. All rights reserved."
          bottomRightText="Premium Auto Care in San Diego"
        />
      </div>
    </ThemeProvider>
  );
}