"use client";

import { Award, Wrench, Droplet, Wind, Thermometer, Zap, Lightbulb, Shield, Users, Star, Clock, CheckCircle, MessageSquare, HelpCircle } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import MediaAbout from "@/components/sections/about/MediaAbout";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Local Pro Services"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" },
          ]}
          button={{
            text: "Call Now",            href: "tel:+15551234567"}}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Professional Local Service You Can Trust"
          description="Fast, reliable service for your home. Licensed, insured, and backed by years of local expertise. Call now for same-day estimates."
          background={{ variant: "sparkles-gradient" }}
          tag="Local Service Leader"
          tagIcon={Award}
          buttons={[
            { text: "Call Now: (555) 123-4567", href: "tel:+15551234567" },
            { text: "Get Free Quote", href: "#contact" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/happy-engineer-young-black-worker-handshaking-while-greeting-industrial-building_637285-4767.jpg?_wi=1"
          imageAlt="Professional service team ready to help"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureBento
          title="Our Core Services"
          description="We deliver expert solutions across all your home service needs. From emergency repairs to preventive maintenance, we're here when you need us."
          tag="Services"
          tagIcon={Wrench}
          features={[
            {
              title: "Plumbing",              description: "Expert plumbing repair and installation for all your water needs.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Droplet, label: "Leak Repair", value: "Same-Day" },
                { icon: Droplet, label: "Installations", value: "Professional" },
              ],
            },
            {
              title: "HVAC Services",              description: "Heating, cooling, and air quality solutions for year-round comfort.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Wind, label: "AC Service", value: "24/7 Available" },
                { icon: Thermometer, label: "Heating", value: "Maintenance" },
              ],
            },
            {
              title: "Electrical",              description: "Safe and code-compliant electrical work for homes and businesses.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Zap, label: "Repairs", value: "Licensed" },
                { icon: Lightbulb, label: "Installation", value: "Certified" },
              ],
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="25+ Years of Local Excellence"
          description="Serving our community with integrity, reliability, and expert craftsmanship. We're fully licensed, insured, and certified. Your satisfaction is guaranteed."
          tag="About Us"
          tagIcon={Shield}
          buttons={[{ text: "Verify Our Credentials", href: "#" }]}
          imageSrc="http://img.b2bpic.net/free-photo/happy-engineer-young-black-worker-handshaking-while-greeting-industrial-building_637285-4767.jpg?_wi=2"
          imageAlt="Our trusted team of professionals"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Trusted by Local Families"
          description="Our proven track record speaks for itself."
          metrics={[
            { id: "1", icon: Users, title: "Happy Customers", value: "12,500+" },
            { id: "2", icon: Star, title: "5-Star Reviews", value: "98%" },
            { id: "3", icon: Clock, title: "Years in Service", value: "25+" },
            { id: "4", icon: CheckCircle, title: "Projects Completed", value: "50,000+" },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="What Our Customers Say"
          description="Real reviews from real customers in our community."
          tag="Testimonials"
          tagIcon={MessageSquare}
          testimonials={[
            {
              id: "1",              title: "Emergency Service That Actually Arrives",              quote: "Called at midnight with a burst pipe. They arrived within 30 minutes and fixed it perfectly. Professional, courteous, and fair pricing. Highly recommend!",              name: "Sarah Mitchell",              role: "Homeowner",              imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",              imageAlt: "Sarah Mitchell"},
            {
              id: "2",              title: "Best HVAC Service in Town",              quote: "Been using them for 10 years. Their team knows my system inside and out. Regular maintenance keeps everything running smoothly.",              name: "David Thompson",              role: "Business Owner",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg",              imageAlt: "David Thompson"},
            {
              id: "3",              title: "Trustworthy and Reliable",              quote: "They don't try to upsell you on unnecessary work. They diagnose the real issue, explain it clearly, and provide fair solutions.",              name: "Maria Rodriguez",              role: "Homeowner",              imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg",              imageAlt: "Maria Rodriguez"},
            {
              id: "4",              title: "Top-Notch Electrical Work",              quote: "Had them rewire our kitchen. Licensed, insured, and knew exactly what they were doing. Code-compliant and beautiful work.",              name: "James Chen",              role: "Homeowner",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg",              imageAlt: "James Chen"},
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Answers to common questions about our services, pricing, and availability."
          tag="FAQ"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "Do you offer emergency service?",              content: "Yes! We provide 24/7 emergency service for urgent issues like burst pipes, no heat in winter, or electrical problems. Call us anytime at (555) 123-4567."},
            {
              id: "2",              title: "Are you licensed and insured?",              content: "Absolutely. All our technicians are fully licensed, bonded, and insured. We carry comprehensive liability coverage for your protection."},
            {
              id: "3",              title: "How quickly can you arrive?",              content: "For emergency calls, we aim for 30-45 minute response times. Same-day service is available for most routine appointments. We'll give you an exact window when you call."},
            {
              id: "4",              title: "Do you offer free estimates?",              content: "Yes! We provide free consultations and estimates for all services. No obligation. We'll explain the issue and provide transparent pricing upfront."},
            {
              id: "5",              title: "What areas do you serve?",              content: "We serve the entire metro area and surrounding suburbs within 25 miles. Call us to confirm we service your address."},
            {
              id: "6",              title: "Do you guarantee your work?",              content: "We stand behind everything we do. All work includes a satisfaction guarantee and warranty. If you're not happy, we'll make it right."}
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to get professional service today? Call us now for immediate assistance or submit a quick form for a callback."
          animationType="entrance-slide"
          buttons={[
            { text: "Call (555) 123-4567", href: "tel:+15551234567" },
            { text: "Request Quote", href: "#" },
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Local Pro Services"
          columns={[
            {
              title: "Services",              items: [
                { label: "Plumbing", href: "#services" },
                { label: "HVAC", href: "#services" },
                { label: "Electrical", href: "#services" },
                { label: "Emergency Service", href: "#" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Team", href: "#" },
                { label: "Certifications", href: "#" },
                { label: "Blog", href: "#" },
              ],
            },
            {
              title: "Contact",              items: [
                { label: "Call Now: (555) 123-4567", href: "tel:+15551234567" },
                { label: "Email: info@localproservices.com", href: "mailto:info@localproservices.com" },
                { label: "Service Area Map", href: "#" },
                { label: "Schedule Service", href: "#" },
              ],
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "#faq" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "Contact Form", href: "#contact" },
                { label: "Book Now", href: "#" },
              ],
            },
          ]}
          copyrightText="© 2025 Local Pro Services. Licensed | Insured | Certified."
        />
      </div>
    </ThemeProvider>
  );
}