"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactText from '@/components/sections/contact/ContactText';
import FooterSimple from '@/components/sections/footer/FooterSimple';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Services", id: "services" },
            { name: "Why Us", id: "why-us" },
            { name: "Gallery", id: "gallery" },
            { name: "Contact", id: "contact" },
            { name: "Areas", id: "areas" }
          ]}
          button={{
            text: "Call Now",            href: "tel:0411844388"
          }}
          brandName="Dotspot"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Dotspot"
          description="Premium Car Detailing in Melbourne | Interior & Exterior | Paint Correction | Ceramic Coating"
          buttons={[
            { text: "📞 Call Now", href: "tel:0411844388" },
            { text: "Get Free Quote", href: "#contact" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22299.jpg"
          imageAlt="Premium car detailing result"
          showDimOverlay={true}
        />
      </div>

      <div id="why-us" data-section="why-us">
        <MediaAbout
          title="Why Choose Dotspot"
          description="5-Star Rated Local Business • Attention to Detail • Professional Equipment • Punctual & Reliable • Passionate Car Specialists"
          tag="About Us"
          imageSrc="http://img.b2bpic.net/free-photo/happy-mechanic-greeting-with-his-african-american-coworker-auto-repair-shop_637285-11601.jpg"
          imageAlt="Dotspot professional detailing team"
          buttons={[
            { text: "Learn More", href: "#services" }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentySeven
          title="Our Premium Services"
          description="Professional car detailing solutions tailored to restore and protect your vehicle"
          tag="Services"
          features={[
            {
              id: "1",              title: "Interior Detailing",              description: "Deep clean seats, carpets, dash, stain removal, and odor treatment to restore your car's interior to showroom condition.",              imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2004.jpg",              imageAlt: "Professional interior detailing"
            },
            {
              id: "2",              title: "Exterior Detailing",              description: "Hand wash, clay bar treatment, polish, and protection coating for a flawless exterior finish.",              imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2002.jpg",              imageAlt: "Professional exterior hand wash"
            },
            {
              id: "3",              title: "Paint Correction",              description: "Advanced machine polishing to remove scratches, swirl marks, and imperfections from your car's paint.",              imageSrc: "http://img.b2bpic.net/free-photo/man-polish-car-garage_1157-26059.jpg",              imageAlt: "Paint correction machine polishing"
            },
            {
              id: "4",              title: "Ceramic Coating",              description: "Long-lasting protective coating that enhances gloss, repels water, and keeps your car looking pristine.",              imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30596.jpg",              imageAlt: "Ceramic coating application"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Request Quote", href: "#contact" }
          ]}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <ProductCardOne
          title="Before & After Transformations"
          description="See the stunning results of our professional detailing work"
          tag="Gallery"
          products={[
            {
              id: "1",              name: "Interior Restoration",              price: "Starting $150",              imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2004.jpg",              imageAlt: "Interior before and after"
            },
            {
              id: "2",              name: "Exterior Polish",              price: "Starting $200",              imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30596.jpg",              imageAlt: "Exterior before and after"
            },
            {
              id: "3",              name: "Full Detailing",              price: "Starting $350",              imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22299.jpg",              imageAlt: "Complete detailing result"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="areas" data-section="areas">
        <SocialProofOne
          title="Service Areas in Melbourne West"
          description="Professional car detailing service available across Melbourne's West and surrounding suburbs"
          tag="Locations"
          names={["Altona Meadows", "Werribee", "Hoppers Crossing", "Point Cook", "Williamstown", "Newport", "Yarraville"]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Customers Say"
          description="Real feedback from satisfied car owners in Melbourne"
          tag="Reviews"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Car Owner",              company: "Altona Meadows",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Business Owner",              company: "Werribee",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-female-professional-with-tablet-meeting-table-with-satisfied-customers_74855-8866.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emma Williams",              role: "Family Parent",              company: "Point Cook",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",              imageAlt: "Emma Williams"
            },
            {
              id: "4",              name: "David Kim",              role: "Ute Owner",              company: "Hoppers Crossing",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg",              imageAlt: "David Kim"
            },
            {
              id: "5",              name: "Lisa Rodriguez",              role: "Car Enthusiast",              company: "Williamstown",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",              imageAlt: "Lisa Rodriguez"
            },
            {
              id: "6",              name: "James Thompson",              role: "Fleet Manager",              company: "Newport",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-greeting-their-mechanic-auto-repair-shop_637285-8674.jpg",              imageAlt: "James Thompson"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to restore your car's shine? Contact Dotspot today for a free quote and experience professional car detailing at its finest."
          animationType="entrance-slide"
          buttons={[
            { text: "📞 Call 0411 844 388", href: "tel:0411844388" },
            { text: "Get Quote Form", href: "#quote" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Services",              items: [
                { label: "Interior Detailing", href: "#services" },
                { label: "Exterior Detailing", href: "#services" },
                { label: "Paint Correction", href: "#services" },
                { label: "Ceramic Coating", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#why-us" },
                { label: "Service Areas", href: "#areas" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "Gallery", href: "#gallery" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "📞 0411 844 388", href: "tel:0411844388" },
                { label: "📍 4 Warren Ct, Altona Meadows VIC 3028", href: "#" },
                { label: "Facebook", href: "#" },
                { label: "Instagram", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms & Conditions", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Dotspot Premium Car Detailing. All rights reserved."
          bottomRightText="📍 Altona Meadows, Melbourne West | 🔒 Fully Insured"
        />
      </div>
    </ThemeProvider>
  );
}
