"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Heart, Phone } from "lucide-react";

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "About", id: "about" },
    { name: "Reviews", id: "reviews" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={navItems}
          brandName="A-1 Discount Tree & Lawn"
          button={{
            text: "Call Now",
            href: "tel:+1-800-TREE-911",
          }}
        />
      </div>

      <div id="about-story" data-section="about-story">
        <MetricSplitMediaAbout
          title="About A-1 Discount Tree & Lawn Service"
          description="Founded in 1998, A-1 Discount Tree & Lawn Service has grown from a single crew to a trusted regional leader in professional tree care and lawn services. We've built our reputation on reliability, safety, and honest pricing. Every member of our team shares a commitment to treating your property with the same care we'd show our own homes."
          tag="Our Story"
          tagIcon={Heart}
          tagAnimation="slide-up"
          metrics={[
            {
              value: "25+",
              title: "Years in Business",
            },
            {
              value: "150+",
              title: "5-Star Reviews",
            },
            {
              value: "4.8★",
              title: "Average Rating",
            },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/men-posing-garden-botanical-greenhouse-photoshoot_53876-133528.jpg?_wi=2"
          imageAlt="professional tree service team group photo"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="team-values" data-section="team-values">
        <MetricSplitMediaAbout
          title="Our Team & Values"
          description="Our skilled arborists and crew members are trained, certified, and dedicated to delivering exceptional results. We believe in transparent communication, fair pricing, and leaving every yard in better condition than we found it. Safety is our top priority—for your family, our team, and your property."
          tag="What We Stand For"
          tagIcon={Heart}
          tagAnimation="slide-up"
          metrics={[
            {
              value: "100%",
              title: "Licensed & Insured",
            },
            {
              value: "Certified",
              title: "Arborists on Staff",
            },
            {
              value: "24/7",
              title: "Emergency Ready",
            },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/crop-woman-adjusting-waist-bag_23-2147714892.jpg?_wi=2"
          imageAlt="professional tree removal crew working safely"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="testimonial-about" data-section="testimonial-about">
        <TestimonialCardFifteen
          testimonial="A-1 isn't just a service provider—they're part of our community. When a massive tree threatened our fence last spring, they showed up quickly, worked safely, and educated us about why the removal was necessary. They could have upselled us, but they were honest about what we actually needed. That's integrity."
          rating={5}
          author="Michael Chen, Homeowner"
          avatars={[
            {
              src: "http://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",
              alt: "Michael Chen",
            },
            {
              src: "http://img.b2bpic.net/free-photo/portrait-smiling-redhead-female-resting-outdoor_613910-10360.jpg",
              alt: "Lisa Chen",
            },
            {
              src: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",
              alt: "Tom Johnson",
            },
            {
              src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
              alt: "David Martinez",
            },
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact-about-cta" data-section="contact-about-cta">
        <ContactCTA
          tag="Get In Touch"
          tagIcon={Phone}
          tagAnimation="slide-up"
          title="Ready to Work With A Professional Team?"
          description="Whether you need routine maintenance or emergency storm response, we're here to help. Contact us today for a free estimate or immediate assistance."
          buttons={[
            {
              text: "Call Now (24/7)",
              href: "tel:+1-800-TREE-911",
            },
            {
              text: "Request Free Estimate",
              href: "#contact-form",
            },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="A-1 Discount Tree & Lawn"
          leftLink={{
            text: "Privacy Policy",
            href: "#privacy",
          }}
          rightLink={{
            text: "Terms of Service",
            href: "#terms",
          }}
        />
      </div>
    </ThemeProvider>
  );
}