"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Shield, Zap, Wrench, TrendingUp, Award, Users, CheckCircle, Star, Phone } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeLargeTitles"
      background="radialGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Peanuts Auto"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Why Us", id: "process" },
            { name: "Contact", id: "contact" },
            { name: "Hours", id: "footer" }
          ]}
          button={{
            text: "Call Now",            href: "tel:619-461-5711"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          tag="40+ Years of Excellence"
          tagIcon={Shield}
          title="Professional Auto Repair Service You Can Trust"
          description="Peanuts Auto Repair has proudly served the La Mesa community for over 40 years, offering reliable auto repair services for Japanese, American, and select European vehicles. Our dedicated team ensures your car is fixed right the first time."
          imageSrc="https://img.b2bpic.net/free-photo/young-auto-mechanic-using-compressor-while-maintaining-ac-unit-car-workshop_637285-4285.jpg"
          imageAlt="Professional mechanic working on vehicle"
          buttons={[
            {
              text: "Call Now: 619-461-5711",              href: "tel:619-461-5711"
            },
            {
              text: "Schedule Service",              href: "#contact"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Why Choose Peanuts Auto Repair"
          description={[
            "With over 40 years of automotive expertise, we've built our reputation on quality, reliability, and exceptional customer service. Our glowing reviews on Yelp, Google, Carfax, and Nextdoor reflect our commitment to excellence and customer satisfaction.",            "Our ASE-certified technicians and dedicated service writers stay updated with the latest automotive technology. We treat every vehicle with the same care and attention we'd give our own cars, ensuring your vehicle receives the best care possible. We offer a comprehensive 2-year, 24,000-mile warranty on all repairs.",            "Conveniently located in La Mesa, we're your go-to destination for all automotive repair needs. Whether it's preventative maintenance or complex repairs, our team delivers superior service with integrity."
          ]}
          buttons={[
            {
              text: "View Our Services",              href: "#services"
            }
          ]}
          showBorder={true}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="process" data-section="process">
        <FeatureProcessSteps
          tag="Our Process"
          tagIcon={Zap}
          title="How We Keep Your Vehicle Running Smoothly"
          description="Our streamlined process ensures your vehicle receives expert care at every stage, from initial diagnosis to final delivery. We prioritize communication, quality workmanship, and your satisfaction."
          steps={[
            {
              number: "01",              title: "Comprehensive Diagnosis",              tag: "Step 1",              description: "We perform a thorough electrical and mechanical diagnosis using the latest diagnostic equipment to identify all issues accurately and provide transparent quotes."
            },
            {
              number: "02",              title: "Expert Repair & Service",              tag: "Step 2",              description: "Our ASE-certified technicians execute repairs with precision, using quality parts and proven techniques. We keep you updated throughout the service process."
            },
            {
              number: "03",              title: "Quality Assurance & Warranty",              tag: "Step 3",              description: "Every repair includes our comprehensive 2-year, 24,000-mile warranty. Your vehicle is tested thoroughly before delivery, ensuring complete peace of mind."
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <ProductCardOne
          title="Our Services"
          description="We provide comprehensive automotive repair and maintenance services for Japanese, American, and select European vehicles. From routine maintenance to complex repairs, we handle it all."
          tag="Professional Services"
          tagIcon={Wrench}
          products={[
            {
              id: "1",              name: "Brake Inspections",              price: "From $49",              imageSrc: "https://img.b2bpic.net/free-photo/happy-car-mechanic-resting-while-working-auto-repair-shop_637285-7552.jpg",              imageAlt: "Professional brake service"
            },
            {
              id: "2",              name: "Oil Change Services",              price: "From $29",              imageSrc: "https://img.b2bpic.net/free-photo/happy-african-american-auto-repairman-talking-customer-workshop_637285-8626.jpg",              imageAlt: "Oil change and maintenance"
            },
            {
              id: "3",              name: "Suspension Work",              price: "From $99",              imageSrc: "https://img.b2bpic.net/free-photo/mechanic-repairing-engine-part_1170-1695.jpg",              imageAlt: "Suspension repair and alignment"
            },
            {
              id: "4",              name: "Electrical Diagnosis",              price: "From $59",              imageSrc: "https://img.b2bpic.net/free-photo/young-auto-mechanic-looking-away-while-repairing-car-engine-auto-repair-workshop_637285-4303.jpg",              imageAlt: "Advanced diagnostic testing"
            },
            {
              id: "5",              name: "Preventative Maintenance",              price: "Custom Quote",              imageSrc: "https://img.b2bpic.net/free-photo/happy-black-auto-mechanic-working-car-workshop-looking-camera_637285-11545.jpg",              imageAlt: "Vehicle maintenance and care"
            },
            {
              id: "6",              name: "Vehicle Inspections",              price: "From $79",              imageSrc: "https://img.b2bpic.net/free-photo/mechanic-smiling-while-servicing-car-engine_1170-1286.jpg",              imageAlt: "Professional vehicle inspection"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          tag="Our Impact"
          tagIcon={TrendingUp}
          title="Trusted by Thousands"
          description="Our commitment to excellence is reflected in these impressive metrics that showcase our impact on the La Mesa community."
          metrics={[
            {
              id: "1",              value: "40+",              title: "Years",              description: "Serving the La Mesa community with dedication",              icon: Award
            },
            {
              id: "2",              value: "75+",              title: "Years Combined",              description: "Team expertise across all technicians",              icon: Users
            },
            {
              id: "3",              value: "100%",              title: "Satisfaction",              description: "Commitment to customer satisfaction and quality",              icon: CheckCircle
            },
            {
              id: "4",              value: "2yr",              title: "Warranty",              description: "24,000-mile warranty on all repairs",              icon: Shield
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          tag="Customer Reviews"
          tagIcon={Star}
          title="What Our Customers Say"
          description="Read genuine testimonials from satisfied customers who trust Peanuts Auto Repair with their vehicles. Our commitment to quality and service excellence speaks volumes."
          testimonials={[
            {
              id: "1",              name: "Maria Rodriguez",              role: "Regular Customer",              company: "La Mesa Resident",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg",              imageAlt: "Maria Rodriguez testimonial"
            },
            {
              id: "2",              name: "James Mitchell",              role: "Loyal Customer",              company: "15-Year Client",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-mature-businessman-showing-thumb-up_1262-3024.jpg",              imageAlt: "James Mitchell testimonial"
            },
            {
              id: "3",              name: "Sarah Chen",              role: "Satisfied Client",              company: "La Mesa Business Owner",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-business-office-business-center_1303-20365.jpg",              imageAlt: "Sarah Chen testimonial"
            },
            {
              id: "4",              name: "David Torres",              role: "Trusted Customer",              company: "20-Year Member",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1633.jpg",              imageAlt: "David Torres testimonial"
            },
            {
              id: "5",              name: "Jennifer Lee",              role: "Happy Customer",              company: "Local Resident",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1689.jpg",              imageAlt: "Jennifer Lee testimonial"
            },
            {
              id: "6",              name: "Robert Davis",              role: "Regular Client",              company: "Family Friend",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/business-people-working-office-with-digital-tablet_1301-6633.jpg",              imageAlt: "Robert Davis testimonial"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get in Touch"
          tagIcon={Phone}
          title="Ready to Get Your Vehicle Fixed Right?"
          description="Contact Peanuts Auto Repair today to schedule your service. Our team is ready to answer your questions and get your vehicle back in top condition."
          inputPlaceholder="Enter your email address"
          buttonText="Get Updates"
          termsText="We respect your privacy. Unsubscribe at any time. By subscribing, you agree to receive updates about our services."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Services",              items: [
                { label: "Brake Services", href: "#services" },
                { label: "Oil Changes", href: "#services" },
                { label: "Suspension", href: "#services" },
                { label: "Electrical Diagnosis", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Process", href: "#process" },
                { label: "Contact", href: "#contact" },
                { label: "Reviews", href: "#testimonials" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "📞 619-461-5711", href: "tel:619-461-5711" },
                { label: "📧 peanutsautomotiverepair@gmail.com", href: "mailto:peanutsautomotiverepair@gmail.com" },
                { label: "📍 5387 Lake Murray Blvd, La Mesa, CA 91942", href: "#" }
              ]
            },
            {
              title: "Hours",              items: [
                { label: "Tue - Fri: 8am - 5:30pm" },
                { label: "Sat: 9am - 2pm" },
                { label: "Sun - Mon: Closed" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Peanuts Auto Repair. All rights reserved."
          bottomRightText="Professional Auto Repair Since 1985"
        />
      </div>
    </ThemeProvider>
  );
}