"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Shield, CheckCircle, Award, Clock, DollarSign, Zap, Users, Heart, Sparkles, Star, Building2 } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="largeSmall"
      background="noiseDiagonalGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Your Service"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Services", id: "features" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Get a Quote", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Trusted Local Service Excellence"
          description="Professional, reliable service for your home and business. Licensed, insured, and dedicated to your satisfaction."
          tag="Local Experts"
          tagIcon={Shield}
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/executives-having-fun-while-working_1098-2208.jpg",              imageAlt: "Professional service team at work"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/full-shot-people-learning-language_23-2149300738.jpg?_wi=1",              imageAlt: "Expert technician delivering quality service"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/young-metal-workers-cooperating-with-their-manager-while-reading-reports-industrial-building_637285-4758.jpg",              imageAlt: "Quality workmanship in action"},
          ]}
          buttons={[
            { text: "Call Now", href: "tel:+1-XXX-XXX-XXXX" },
            { text: "Get Free Quote", href: "#contact" },
          ]}
          buttonAnimation="slide-up"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Why Choose Us"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          title="15+ Years of Trusted Service"
          description="We're committed to delivering exceptional results with integrity and professionalism. Our team of certified experts brings years of experience to every project, ensuring your complete satisfaction."
          metrics={[
            { value: "500+", title: "Happy Customers" },
            { value: "98%", title: "Satisfaction Rate" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/full-shot-people-learning-language_23-2149300738.jpg?_wi=2"
          imageAlt="Professional team delivering exceptional service"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBorderGlow
          features={[
            {
              icon: Award,
              title: "Licensed & Insured",              description: "Fully certified professionals with comprehensive insurance coverage for your peace of mind."},
            {
              icon: Clock,
              title: "Fast Response Time",              description: "Same-day service available. We respect your time and respond quickly to every request."},
            {
              icon: DollarSign,
              title: "Transparent Pricing",              description: "No hidden fees. Get accurate quotes upfront with honest, fair pricing every time."},
            {
              icon: Zap,
              title: "Quality Guarantee",              description: "All work backed by our satisfaction guarantee. We stand behind every project."},
            {
              icon: Users,
              title: "Local Experts",              description: "Deep knowledge of local codes and conditions. Supporting your community for 15+ years."},
            {
              icon: Heart,
              title: "Customer First",              description: "Your satisfaction is our priority. We listen, communicate, and deliver exceptional results."},
          ]}
          title="Why Customers Trust Us"
          description="We deliver consistent quality backed by professional expertise and genuine customer care."
          tag="Our Services"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Customers Say"
          description="Real feedback from real customers who trust us with their most important needs."
          tag="Customer Reviews"
          tagIcon={Star}
          tagAnimation="slide-up"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Homeowner",              company: "Suburbs District",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg?_wi=1",              imageAlt: "Sarah Johnson"},
            {
              id: "2",              name: "Michael Chen",              role: "Business Owner",              company: "Downtown District",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=1",              imageAlt: "Michael Chen"},
            {
              id: "3",              name: "Emily Rodriguez",              role: "Property Manager",              company: "Commercial Properties",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg",              imageAlt: "Emily Rodriguez"},
            {
              id: "4",              name: "David Thompson",              role: "Home Renovator",              company: "Riverside Community",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=2",              imageAlt: "David Thompson"},
            {
              id: "5",              name: "Jessica Martinez",              role: "Facility Director",              company: "Tech Campus",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg?_wi=2",              imageAlt: "Jessica Martinez"},
            {
              id: "6",              name: "Robert Williams",              role: "Contractor",              company: "Build & Restore",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg?_wi=3",              imageAlt: "Robert Williams"},
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Leading Organizations"
          description="Serving businesses and homeowners across the region with excellence."
          tag="Partners & Clients"
          tagIcon={Building2}
          tagAnimation="slide-up"
          names={[
            "Local Chamber of Commerce",            "Better Business Bureau",            "Community Builders Association",            "Regional Contractors Guild",            "Small Business Alliance",            "Home Improvement Network",            "Professional Services Board",            "Neighborhood Improvement District"]}
          logos={[
            "http://img.b2bpic.net/free-vector/abstract-logo-triangular-shape_1043-1.jpg",            "http://img.b2bpic.net/free-vector/two-rounded-squares-logo_1025-434.jpg",            "http://img.b2bpic.net/free-vector/abstract-business-card-template_23-2148303097.jpg",            "http://img.b2bpic.net/free-vector/retro-labels-collection_1009-307.jpg",            "http://img.b2bpic.net/free-vector/collection-modern-logos-abstract-design_23-2147594158.jpg",            "http://img.b2bpic.net/free-vector/gradient-patented-label-collection_23-2149733219.jpg",            "http://img.b2bpic.net/free-vector/colorful-modern-business-stationery_52683-30464.jpg"]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to get started? Contact us today for a free consultation. Our team is standing by to help with your service needs."
          animationType="entrance-slide"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Call Now", href: "tel:+1-XXX-XXX-XXXX" },
            { text: "Request Free Quote", href: "#footer" },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/relaxed-coworkers-office-having-fun-chatting-while-reviewing-documents_482257-126482.jpg"
          imageAlt="Professional team serving your local community"
          logoText="Your Local Service Company"
          copyrightText="© 2025 Your Local Service Company. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
                { label: "Our Services", href: "#features" },
                { label: "Service Areas", href: "#" },
                { label: "Emergency Service", href: "tel:+1-XXX-XXX-XXXX" },
                { label: "Maintenance Plans", href: "#" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Team", href: "#about" },
                { label: "Certifications", href: "#" },
                { label: "Community Involvement", href: "#" },
              ],
            },
            {
              title: "Contact",              items: [
                { label: "Call Now", href: "tel:+1-XXX-XXX-XXXX" },
                { label: "Get a Quote", href: "#contact" },
                { label: "Service Request", href: "#contact" },
                { label: "Emergency Support", href: "tel:+1-XXX-XXX-XXXX" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
