"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import {
  Axe,
  Zap,
  CheckCircle,
  Leaf,
  Eye,
  Shield,
  Hammer,
  Square,
  AlertTriangle,
  Phone,
  Sparkles,
  Award,
} from "lucide-react";

export default function ServicesPage() {
  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="services-detail" data-section="services-detail">
        <FeatureBento
          title="Complete Tree & Lawn Services"
          description="Professional solutions for every tree and lawn challenge — from routine maintenance to emergency storm response. Each service is backed by our 25+ years of expertise and commitment to excellence."
          tag="Our Services"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              title: "Tree Removal",
              description: "Safe, efficient removal of dead, diseased, or unwanted trees of any size. We handle complex removals near structures with precision and care.",
              bentoComponent: "icon-info-cards",
              items: [
                {
                  icon: Axe,
                  label: "Large Trees",
                  value: "Up to 100ft",
                },
                {
                  icon: Zap,
                  label: "Fast Service",
                  value: "Same-day available",
                },
                {
                  icon: CheckCircle,
                  label: "Fully Cleaned",
                  value: "Zero debris left",
                },
              ],
              button: {
                text: "Get Free Estimate",
                href: "tel:+1-800-TREE-911",
              },
            },
            {
              title: "Tree Trimming & Pruning",
              description: "Expert pruning to improve health, appearance, and safety. Disease prevention and shape maintenance for optimal tree longevity.",
              bentoComponent: "icon-info-cards",
              items: [
                {
                  icon: Leaf,
                  label: "Health Focus",
                  value: "Disease prevention",
                },
                {
                  icon: Eye,
                  label: "Aesthetic",
                  value: "Perfect shape",
                },
                {
                  icon: Shield,
                  label: "Safety",
                  value: "Remove hazards",
                },
              ],
              button: {
                text: "Schedule Service",
                href: "tel:+1-800-TREE-911",
              },
            },
            {
              title: "Stump Grinding",
              description: "Complete stump removal below ground level. Allows replanting or repurposing your yard space with no remnants left behind.",
              bentoComponent: "icon-info-cards",
              items: [
                {
                  icon: Hammer,
                  label: "Deep Removal",
                  value: "Below grade",
                },
                {
                  icon: Square,
                  label: "Space Recovery",
                  value: "Reuse your yard",
                },
                {
                  icon: Zap,
                  label: "Quick Work",
                  value: "1-2 hours typical",
                },
              ],
              button: {
                text: "Learn More",
                href: "tel:+1-800-TREE-911",
              },
            },
          ]}
          carouselMode="buttons"
        />
      </div>

      <div id="service-metrics" data-section="service-metrics">
        <MetricCardSeven
          title="Why Our Services Stand Out"
          description="Each service is executed with precision, professionalism, and a commitment to your complete satisfaction. We bring decades of experience to every job."
          metrics={[
            {
              id: "safety",
              value: "100%",
              title: "Safety Record",
              items: [
                "OSHA-trained crew",
                "Industry best practices",
                "Zero incidents on record",
              ],
            },
            {
              id: "equipment",
              value: "State",
              title: "Of The Art Equipment",
              items: [
                "Latest grinding technology",
                "Crane-assisted removals",
                "Precision tools",
              ],
            },
            {
              id: "guarantee",
              value: "Satisfaction",
              title: "Guaranteed",
              items: [
                "100% cleanup promise",
                "No hidden costs",
                "Money-back guarantee",
              ],
            },
            {
              id: "availability",
              value: "Always",
              title: "Ready To Help",
              items: [
                "24/7 emergency dispatch",
                "Same-day service",
                "Rapid response team",
              ],
            },
          ]}
          tag="Service Excellence"
          tagIcon={Award}
          tagAnimation="slide-up"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="services-cta" data-section="services-cta">
        <ContactCTA
          tag="Ready To Get Started?"
          tagIcon={Phone}
          tagAnimation="slide-up"
          title="Schedule Your Free Estimate Today"
          description="Call us to discuss your tree or lawn service needs. Our experts are available 24/7 for emergency situations or routine maintenance scheduling."
          buttons={[
            {
              text: "Call Now (24/7)",
              href: "tel:+1-800-TREE-911",
            },
            {
              text: "Back to Home",
              href: "/",
            },
          ]}
          buttonAnimation="slide-up"
          background={{
            variant: "plain",
          }}
          useInvertedBackground={false}
        />
      </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>
  );
}