"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";
import { Briefcase, Award, Users } from "lucide-react";

export default function AboutPage() {
  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>

      {/* About Us Section */}
      <div id="about-intro" data-section="about-intro">
        <InlineImageSplitTextAbout
          heading={[
            {
              type: "text" as const,
              content: "About W&M Services - Your Trusted Landscaping Partner in Washington DC",
            },
          ]}
          buttons={[
            {
              text: "Get in Touch",
              href: "/#contact",
            },
            {
              text: "View Our Gallery",
              href: "/#gallery",
            },
          ]}
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      {/* Our Story & Values Section */}
      <div id="our-story" data-section="our-story">
        <FeatureCardOne
          title="Our Commitment to Excellence"
          description="Delivering premium landscaping services with integrity, expertise, and exceptional customer care"
          tag="Our Story"
          tagIcon={Briefcase}
          features={[
            {
              title: "15+ Years of Experience",
              description: "Over a decade and a half of proven success in landscaping, fence installation, and outdoor design throughout Washington, DC.",
              imageSrc: "http://img.b2bpic.net/free-photo/man-greenhouse_1398-1871.jpg",
              imageAlt: "Professional landscaper with experience",
            },
            {
              title: "Award-Winning Quality",
              description: "Consistently rated 4.9★ across Google, Angi, Houzz, and other platforms. Our commitment to quality is reflected in every project.",
              imageSrc: "http://img.b2bpic.net/free-photo/woman-collects-leaves-cleans-park_1157-27412.jpg",
              imageAlt: "Award-winning landscaping work",
            },
            {
              title: "Licensed & Insured",
              description: "Fully licensed, insured, and bonded. Your property and investment are completely protected with every project we undertake.",
              imageSrc: "http://img.b2bpic.net/free-photo/man-servant-caring-garden_23-2149530842.jpg",
              imageAlt: "Professional certified landscaping",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      {/* Why We're Different Section */}
      <div id="why-different" data-section="why-different">
        <FeatureCardOne
          title="Why Choose W&M Services"
          description="What sets us apart from other landscaping companies in the DC area"
          tag="Difference"
          tagIcon={Award}
          features={[
            {
              title: "Customer-First Approach",
              description: "Your vision and satisfaction come first. We listen carefully to understand your goals and deliver exactly what you envisioned.",
              imageSrc: "http://img.b2bpic.net/free-photo/young-man-traveling-country-side_23-2149406541.jpg",
              imageAlt: "Customer satisfaction focus",
            },
            {
              title: "Expert Craftsmanship",
              description: "Our team brings years of expertise in landscaping design, fence installation, gate work, and outdoor renovations.",
              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?_wi=2",
              imageAlt: "Expert craftsmanship",
            },
            {
              title: "Reliable & Professional",
              description: "On-time delivery, clear communication, and professional conduct throughout every project. We respect your time and property.",
              imageSrc: "http://img.b2bpic.net/free-photo/view-robot-tending-maintaining-gardens_23-2151803953.jpg?_wi=2",
              imageAlt: "Professional service delivery",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </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>
  );
}