"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Wrench, Store, Gauge, Zap, Droplet, AlertCircle, Star, CheckCircle, Clock, Sparkles, Shield, Calendar } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="noise"
      cardStyle="outline"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Metropole Garage"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Services", id: "services" },
            { name: "Reviews", id: "reviews" },
            { name: "About Us", id: "about" },
            { name: "Contact", id: "contact" },
          ]}
          bottomLeftText="0487 34 99 76"
          bottomRightText="Liersesteenweg 41, Mechelen"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardDashboard
          title="Reliable, Fast & Affordable Car Repair in Mechelen"
          description="Professional mechanics you can trust. Honest pricing, quick service, and customer-friendly expertise. Your car deserves the best care."
          tag="Expert Car Care"
          tagIcon={Wrench}
          tagAnimation="slide-up"
          buttons={[
            { text: "Book Repair", href: "#appointment" },
            { text: "Get Price Estimate", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Our Reputation",            logoIcon: Gauge,
            imageSrc: "http://img.b2bpic.net/free-photo/red-steel-tool-box-garage_613910-13485.jpg",            searchPlaceholder: "Search services...",            sidebarItems: [
              { icon: Wrench },
              { icon: AlertCircle },
              { icon: Shield },
            ],
            buttons: [
              { text: "Book Now", href: "#appointment" },
              { text: "Call Us", href: "#" },
            ],
            stats: [
              {
                title: "Customer Rating",                values: [4.6, 4.7, 4.6],
                valuePrefix: "⭐ ",                description: "Out of 5 stars"},
              {
                title: "Reviews",                values: [41, 45, 41],
                description: "Verified customer reviews"},
              {
                title: "Experience",                values: [15, 20, 15],
                valueSuffix: "+ years",                description: "In automotive repair"},
            ],
            chartTitle: "Service Quality",            chartData: [
              { value: 95 },
              { value: 98 },
              { value: 96 },
              { value: 99 },
              { value: 97 },
            ],
            listTitle: "Latest Services",            listItems: [
              { icon: Zap, title: "Engine Repair", status: "Quick Service" },
              { icon: Droplet, title: "Oil Change", status: "Available Today" },
              { icon: AlertCircle, title: "Brake Inspection", status: "Book Now" },
            ],
          }}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="About Metropole Garage"
          tagIcon={Store}
          tagAnimation="slide-up"
          title="Family-Owned Professional Car Repair with Price-Quality Balance You Can Trust"
          buttons={[{ text: "Learn More", href: "#services" }]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardNine
          title="Our Core Services"
          description="From routine maintenance to complex repairs, we provide comprehensive automotive care at transparent, competitive prices."
          tag="Services"
          tagIcon={Wrench}
          tagAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Mechanical Repairs",              description: "Engine repair, water pump replacement, general diagnostics, and comprehensive engine maintenance to keep your vehicle running smoothly.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/coworkers-car-service-using-professional-mechanical-tool-repair-broken-engine-efficient-workers-garage-repairing-client-automobile-ensuring-optimal-automotive-performance-close-up_482257-73057.jpg"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/portrait-car-mechanic-with-wrench-tool-working-vehicle-car-repair-shop_342744-789.jpg"},
            },
            {
              id: 2,
              title: "Maintenance & Inspections",              description: "Oil changes, brake checks, car inspection preparation, and preventative maintenance to extend your vehicle's lifespan.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-oiling-car-brake_1170-1625.jpg"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/black-mechanic-his-manager-working-touchpad-auto-repair-shop_637285-8672.jpg"},
            },
            {
              id: 3,
              title: "Transparent Pricing",              description: "We provide high quality work at fair and transparent prices. No hidden costs. Clear explanation of all work performed.",              phoneOne: {
                imageSrc: "http://img.b2bpic.net/free-photo/us-tax-form-1040-tablet-with-calculator-pen_1357-55.jpg"},
              phoneTwo: {
                imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-showing-thumb-up-sign-while-team-discussing-background_23-2147923383.jpg"},
            },
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardOne
          title="What Our Customers Say"
          description="Real feedback from satisfied customers about their experience with Metropole Garage"
          tag="Customer Reviews"
          tagIcon={Star}
          tagAnimation="slide-up"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Jan Demeyer",              role: "Car Owner",              company: "Mechelen",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"},
            {
              id: "2",              name: "Marie Vandenberg",              role: "Business Owner",              company: "Fleet Manager",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg"},
            {
              id: "3",              name: "Pieter Claes",              role: "Taxi Driver",              company: "Professional Driver",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-suit-examining-auto-before-purchase_7502-9822.jpg"},
            {
              id: "4",              name: "Sarah Wouters",              role: "Family of 4",              company: "Regular Customer",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg"},
            {
              id: "5",              name: "Thomas Verhulst",              role: "Company Director",              company: "Corporate Client",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"},
            {
              id: "6",              name: "Anna Devos",              role: "Frequent Customer",              company: "Sales Professional",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"},
          ]}
        />
      </div>

      <div id="trust-signals" data-section="trust-signals">
        <SocialProofOne
          title="Why Choose Metropole Garage"
          description="We're committed to excellence in every repair and service"
          tag="Our Promise"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "Friendly & Professional Staff",            "Competitive Pricing",            "Fast Repair Service",            "Clear Work Explanation",            "Customer-First Approach",            "Quality Guaranteed",            "Transparent Estimates",            "Years of Experience"]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <ContactFaq
          faqs={[
            {
              id: "1",              title: "How expensive are repairs?",              content: "Repair costs depend on the specific problem your car has. We provide transparent price estimates upfront and focus on fair pricing with quality work. No hidden costs or surprises."},
            {
              id: "2",              title: "Do I need an appointment?",              content: "An appointment is recommended to ensure we have time for your vehicle. However, we also offer urgent help when needed. Call us at 0487 34 99 76 for emergency repairs."},
            {
              id: "3",              title: "What services do you offer?",              content: "We provide mechanical repairs (engine, water pump), maintenance services (oil changes, brake checks), car inspection preparation, and general diagnostics. Contact us for specific services."},
            {
              id: "4",              title: "How long does a repair take?",              content: "Repair time varies by job complexity. Simple services like oil changes take 30-45 minutes. Engine repairs may take several hours. We'll give you an estimated timeline when you visit or call."},
            {
              id: "5",              title: "Do you offer warranty?",              content: "Yes, we stand behind our work. All repairs come with our quality guarantee. We're happy to discuss warranty details when you bring your vehicle in."},
            {
              id: "6",              title: "Are you open on weekends?",              content: "Please call us at 0487 34 99 76 to confirm our current hours. We aim to serve you when it's convenient for your schedule."},
          ]}
          ctaTitle="Book Your Repair Today"
          ctaDescription="Get your car fixed by trusted professionals. Fast, reliable, and transparent service."
          ctaButton={{ text: "Schedule Appointment", href: "#appointment" }}
          ctaIcon={Calendar}
          useInvertedBackground={false}
          animationType="slide-up"
          accordionAnimationType="smooth"
          showCard={true}
        />
      </div>

      <div id="appointment" data-section="appointment">
        <PricingCardOne
          plans={[
            {
              id: "1",              badge: "Popular",              badgeIcon: Sparkles,
              price: "Quick Service",              subtitle: "Oil change, filters, basic maintenance",              features: [
                "30-45 minutes",                "Transparent pricing",                "Professional service",                "Immediate appointment availability"],
            },
            {
              id: "2",              badge: "Standard",              badgeIcon: Wrench,
              price: "Medium Repair",              subtitle: "Mechanical repairs, diagnostics, brake service",              features: [
                "1-2 hours typical",                "Detailed diagnosis",                "Quality parts",                "Clear work explanation"],
            },
            {
              id: "3",              badge: "Complete",              badgeIcon: Shield,
              price: "Major Service",              subtitle: "Engine repair, complex diagnostics, inspections",              features: [
                "Several hours",                "Comprehensive service",                "Quality guarantee",                "Same-day scheduling often available"],
            },
            {
              id: "4",              badge: "Emergency",              badgeIcon: AlertCircle,
              price: "Urgent Help",              subtitle: "Breakdown assistance and emergency repairs",              features: [
                "Quick response",                "Mobile service available",                "Roadside support",                "Call for immediate assistance"],
            },
          ]}
          title="Book Your Service"
          description="Choose the service you need and schedule your appointment with us"
          tag="Quick Booking"
          tagIcon={Clock}
          tagAnimation="slide-up"
          buttons={[{ text: "Call Now", href: "#" }]}
          buttonAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <FooterLogoReveal
          logoText="Metropole Garage"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}
