"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";
import { Leaf, Award, Images, MessageCircle, Clock, FileText, Phone, Star } from "lucide-react";

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="gradient-mesh"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "services" },
            { name: "Gallery", id: "gallery" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "contact" },
          ]}
          brandName="W&M Services"
          bottomLeftText="Washington, DC 20011"
          bottomRightText="+1 202-361-8677"
        />
      </div>

      {/* Hero Section */}
      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="W&M Services"
          description="Transform Your Outdoor Space with Professional Landscaping & Home Improvement Services"
          buttons={[
            {
              text: "Call Now +1 202-361-8677",              href: "tel:+12023618677"},
            {
              text: "Get Free Quote",              href: "#contact"},
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/back-view-young-woman-taking-care-plants_23-2148509882.jpg"
          imageAlt="Professional landscaping transformation in Washington DC"
          showDimOverlay={true}
          buttonAnimation="slide-up"
          ariaLabel="Hero section - W&M Services landscaping"
        />
      </div>

      {/* Services Section */}
      <div id="services" data-section="services">
        <FeatureCardOne
          title="Professional Landscaping Services"
          description="Comprehensive outdoor solutions for your home"
          tag="Services"
          tagIcon={Leaf}
          features={[
            {
              title: "Landscaping Design",              description: "Custom landscape designs tailored to your vision and property needs",              imageSrc: "http://img.b2bpic.net/free-photo/pensive-middle-aged-gardener-holding-small-thuja-pot-bearded-garden-worker-glasses-wearing-blue-shirt-apron-growing-evergreen-plants-greenhouse-commercial-gardening-summer-concept_74855-12936.jpg",              imageAlt: "Professional landscaping design"},
            {
              title: "Fence Installation",              description: "Premium fence installation with high-quality materials and expert craftsmanship",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-base-green-barrier-overpass-bridge_181624-22816.jpg?_wi=1",              imageAlt: "Fence installation services"},
            {
              title: "Gate Installation",              description: "Professional gate installation for security and curb appeal",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-base-green-barrier-overpass-bridge_181624-22816.jpg?_wi=2",              imageAlt: "Gate installation services"},
            {
              title: "Backyard Renovation",              description: "Complete backyard transformations with custom outdoor living spaces",              imageSrc: "http://img.b2bpic.net/free-photo/view-robot-tending-maintaining-gardens_23-2151803953.jpg",              imageAlt: "Backyard renovation project"},
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      {/* Why Choose Us Section */}
      <div id="why-choose-us" data-section="why-choose-us">
        <InlineImageSplitTextAbout
          heading={[
            {
              type: "text" as const,
              content: "Why Choose W&M Services for Your Landscaping Needs"},
          ]}
          buttons={[
            {
              text: "Schedule Consultation",              href: "#contact"},
            {
              text: "View Our Work",              href: "#gallery"},
          ]}
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      {/* Metrics Section */}
      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Our Track Record"
          description="Proven excellence in landscaping and outdoor services"
          tag="Results"
          tagIcon={Award}
          metrics={[
            {
              id: "1",              value: "4.9★",              description: "Average Rating on Google & Reviews"},
            {
              id: "2",              value: "24+",              description: "Verified Customer Reviews"},
            {
              id: "3",              value: "15+",              description: "Years of Experience"},
            {
              id: "4",              value: "100%",              description: "Customer Satisfaction Rate"},
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={true}
          tagAnimation="slide-up"
        />
      </div>

      {/* Gallery Section */}
      <div id="gallery" data-section="gallery">
        <ProductCardTwo
          title="Our Project Portfolio"
          description="Stunning transformations showcasing our landscaping expertise"
          tag="Gallery"
          tagIcon={Images}
          products={[
            {
              id: "1",              brand: "Residential",              name: "Backyard Landscape Transformation",              price: "Complete Design",              rating: 5,
              reviewCount: "12 Reviews",              imageSrc: "http://img.b2bpic.net/free-photo/african-american-lady-safety-helmet-writing-notepad-near-building-construction_23-2148039982.jpg?_wi=1",              imageAlt: "Completed backyard landscaping project"},
            {
              id: "2",              brand: "Residential",              name: "Premium Fence Installation",              price: "Full Project",              rating: 5,
              reviewCount: "15 Reviews",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-wooden-criss-cross-fence-with-blurred_181624-16317.jpg?_wi=1",              imageAlt: "Professional fence installation"},
            {
              id: "3",              brand: "Luxury",              name: "Outdoor Living Space Design",              price: "Premium Service",              rating: 5,
              reviewCount: "18 Reviews",              imageSrc: "http://img.b2bpic.net/free-photo/woman-training-with-tractor-wheel_23-2147671878.jpg?_wi=1",              imageAlt: "Luxury backyard transformation"},
            {
              id: "4",              brand: "Residential",              name: "Gate & Entry Installation",              price: "Complete Design",              rating: 5,
              reviewCount: "10 Reviews",              imageSrc: "http://img.b2bpic.net/free-photo/japanese-culture-house-entrance_23-2149301087.jpg?_wi=1",              imageAlt: "Professional gate installation"},
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          tagAnimation="slide-up"
          carouselMode="buttons"
        />
      </div>

      {/* Testimonials Section */}
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Customers Say"
          description="Real reviews from homeowners we've helped transform their outdoor spaces"
          tag="Testimonials"
          tagIcon={MessageCircle}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson, Homeowner",              date: "Date: November 2024",              title: "Exceptional Quality and Attention to Detail",              quote: "We couldn't be happier with the quality and design of the fence. W&M Services exceeded all our expectations. The team was professional, punctual, and delivered exactly what we envisioned.",              tag: "Fence Installation",              avatarSrc: "http://img.b2bpic.net/free-photo/afro-american-woman-taking-selfie_23-2148336923.jpg",              avatarAlt: "Sarah Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-wooden-criss-cross-fence-with-blurred_181624-16317.jpg?_wi=2",              imageAlt: "Fence installation project"},
            {
              id: "2",              name: "Michael Chen, Property Owner",              date: "Date: October 2024",              title: "Amazing Backyard Transformation",              quote: "They did an amazing job on our backyard project. Highly recommend their team. The landscaping design is beautiful and has completely changed how we enjoy our outdoor space.",              tag: "Landscaping Design",              avatarSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg",              avatarAlt: "Michael Chen",              imageSrc: "http://img.b2bpic.net/free-photo/african-american-lady-safety-helmet-writing-notepad-near-building-construction_23-2148039982.jpg?_wi=2",              imageAlt: "Backyard landscaping project"},
            {
              id: "3",              name: "Walter Martinez, Homeowner",              date: "Date: September 2024",              title: "Professional Installation and Great Service",              quote: "Walter and his team did a fantastic job installing our fence and gate. Their professionalism and expertise made the entire process smooth and stress-free. Couldn't ask for better service.",              tag: "Fence & Gate",              avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-bearded-man_1098-22109.jpg",              avatarAlt: "Walter Martinez",              imageSrc: "http://img.b2bpic.net/free-photo/japanese-culture-house-entrance_23-2149301087.jpg?_wi=2",              imageAlt: "Gate installation project"},
            {
              id: "4",              name: "Emily Rodriguez, DC Resident",              date: "Date: August 2024",              title: "Trustworthy Local Professionals",              quote: "As a local resident, I trust W&M Services completely. They've been in the community for years and their reputation is well-deserved. Excellent work every single time.",              tag: "Premium Service",              avatarSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-13618.jpg",              avatarAlt: "Emily Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/woman-training-with-tractor-wheel_23-2147671878.jpg?_wi=2",              imageAlt: "Luxury backyard project"},
            {
              id: "5",              name: "David Kim, Property Manager",              date: "Date: July 2024",              title: "Reliable and High-Quality Work",              quote: "W&M Services handles multiple properties for us. Their reliability, quality workmanship, and attention to detail are unmatched. They're our go-to for all landscaping needs.",              tag: "Commercial Properties",              avatarSrc: "http://img.b2bpic.net/free-photo/copy-space-smiley-business-woman-with-glasses_23-2148317348.jpg",              avatarAlt: "David Kim",              imageSrc: "http://img.b2bpic.net/free-photo/african-american-lady-safety-helmet-writing-notepad-near-building-construction_23-2148039982.jpg?_wi=3",              imageAlt: "Commercial landscaping project"},
            {
              id: "6",              name: "Jessica Thompson, Homeowner",              date: "Date: June 2024",              title: "Outstanding Customer Service",              quote: "From the initial consultation to project completion, W&M Services provided outstanding customer service. They listened to our needs and delivered beyond expectations. Highly recommended!",              tag: "Full Service",              avatarSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg",              avatarAlt: "Jessica Thompson",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-wooden-criss-cross-fence-with-blurred_181624-16317.jpg?_wi=3",              imageAlt: "Residential fence project"},
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          tagAnimation="slide-up"
        />
      </div>

      {/* Social Proof Section */}
      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted By Leading Review Platforms"
          description="Featured and highly-rated on industry-leading platforms"
          tag="Partnerships"
          tagIcon={Star}
          names={[
            "Google Reviews",            "Angi",            "Houzz",            "Thumbtack",            "Yelp",            "Facebook",            "Better Business Bureau"]}
          textboxLayout="default"
          useInvertedBackground={true}
          speed={40}
          showCard={true}
          tagAnimation="slide-up"
        />
      </div>

      {/* CTA Section */}
      <div id="cta-section" data-section="cta-section">
        <PricingCardFive
          title="Ready to Transform Your Yard?"
          description="Get Your Free Quote Today - No Obligation. Contact W&M Services for a professional consultation."
          tag="Limited Time"
          tagIcon={Clock}
          plans={[
            {
              id: "consultation",              tag: "Free Consultation",              tagIcon: Phone,
              price: "Call",              period: "Today",              description: "Speak directly with our landscaping experts about your project needs and vision.",              button: {
                text: "Call +1 202-361-8677",                href: "tel:+12023618677"},
              featuresTitle: "What's Included:",              features: [
                "Free project evaluation",                "Professional recommendations",                "No hidden charges",                "Flexible scheduling"],
            },
            {
              id: "quote",              tag: "Free Quote Request",              tagIcon: FileText,
              price: "Online",              period: "24-48 hrs",              description: "Submit your project details online and receive a detailed quote from our team within 24-48 hours.",              button: {
                text: "Request Free Quote",                href: "#contact"},
              featuresTitle: "What's Included:",              features: [
                "Detailed project estimate",                "Service timeline",                "Material recommendations",                "Professional guidance"],
            },
          ]}
          animationType="slide-up"
          textboxLayout="split"
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      {/* Contact Section */}
      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Get in Touch With W&M Services"
          ctaDescription="Ready to start your landscaping project? Contact us today for a free consultation and quote."
          ctaButton={{
            text: "Call +1 202-361-8677",            href: "tel:+12023618677"}}
          ctaIcon={Phone}
          faqs={[
            {
              id: "1",              title: "What areas do you service?",              content: "We provide professional landscaping services throughout Washington, DC and surrounding areas. Contact us to confirm service availability for your location."},
            {
              id: "2",              title: "How much does a landscape design cost?",              content: "Costs vary depending on project scope and materials. We offer free consultations to assess your needs and provide accurate quotes. Contact us today for your personalized estimate."},
            {
              id: "3",              title: "Do you offer maintenance services?",              content: "Yes! We provide comprehensive lawn and property maintenance services including ongoing landscape care, seasonal updates, and custom maintenance plans."},
            {
              id: "4",              title: "How long does a typical project take?",              content: "Project timelines depend on scope and complexity. We'll provide a detailed timeline during your consultation. Most projects are completed within 2-4 weeks."},
            {
              id: "5",              title: "Are you licensed and insured?",              content: "Yes, W&M Services is fully licensed, insured, and bonded. Your property and our team are fully protected during every project."},
            {
              id: "6",              title: "Do you provide warranties on your work?",              content: "Absolutely! We stand behind our work with comprehensive warranties on materials and labor. We want you completely satisfied with your landscaping investment."},
          ]}
          useInvertedBackground={false}
          animationType="slide-up"
          accordionAnimationType="smooth"
          showCard={true}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="W&M Services"
          columns={[
            {
              items: [
                {
                  label: "Home",                  href: "/"},
                {
                  label: "Services",                  href: "#services"},
                {
                  label: "Gallery",                  href: "#gallery"},
              ],
            },
            {
              items: [
                {
                  label: "About",                  href: "/about"},
                {
                  label: "Contact",                  href: "#contact"},
                {
                  label: "Get Quote",                  href: "#contact"},
              ],
            },
            {
              items: [
                {
                  label: "Call Us",                  href: "tel:+12023618677"},
                {
                  label: "Email",                  href: "mailto:info@wmnservices.com"},
                {
                  label: "Address",                  href: "#"},
              ],
            },
            {
              items: [
                {
                  label: "Google Reviews",                  href: "https://www.google.com/search?q=W&M+Services+landscaping+DC"},
                {
                  label: "Facebook",                  href: "https://www.facebook.com"},
                {
                  label: "Privacy Policy",                  href: "#"},
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}