"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import MediaAbout from "@/components/sections/about/MediaAbout";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";

export default function ServicesPage() {
  const navItems = [
    { name: "Services", id: "services" },
    { name: "Why Us", id: "why-us" },
    { name: "Reviews", id: "reviews" },
    { name: "Service Area", id: "service-area" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="A Cut Above" navItems={navItems} />
      </div>

      <div id="service-details" data-section="service-details">
        <ProductCardTwo
          title="Our Tree Services"
          description="Expert solutions for all your tree care needs in Lake Stevens and surrounding areas. Each service is performed with precision, safety, and meticulous attention to detail."
          products={[
            {
              id: "service-1",              brand: "A Cut Above",              name: "Tree Removal",              price: "Professional Grade",              rating: 5,
              reviewCount: "Expert",              imageSrc:
                "http://img.b2bpic.net/free-photo/outdoor-shot-logger-having-rest-open-air-after-cutting-trees_176532-14596.jpg?_wi=6",              imageAlt: "Professional tree removal service"},
            {
              id: "service-2",              brand: "A Cut Above",              name: "Hazardous Tree Removal",              price: "Precision Work",              rating: 5,
              reviewCount: "Specialist",              imageSrc:
                "http://img.b2bpic.net/free-photo/reforestation-done-by-voluntary-group_23-2149500866.jpg?_wi=3",              imageAlt: "Hazardous tree removal near homes"},
            {
              id: "service-3",              brand: "A Cut Above",              name: "Tree Trimming & Pruning",              price: "Maintenance",              rating: 5,
              reviewCount: "Care",              imageSrc:
                "http://img.b2bpic.net/free-photo/close-up-man-cutting-dried-branches_23-2148396749.jpg?_wi=3",              imageAlt: "Professional tree trimming service"},
            {
              id: "service-4",              brand: "A Cut Above",              name: "Stump Grinding",              price: "Complete Removal",              rating: 5,
              reviewCount: "Thorough",              imageSrc:
                "http://img.b2bpic.net/free-photo/ax-tree-trunk-background-roadway_181624-47172.jpg?_wi=3",              imageAlt: "Stump grinding and removal"},
            {
              id: "service-5",              brand: "A Cut Above",              name: "Emergency Tree Service",              price: "24/7 Available",              rating: 5,
              reviewCount: "Urgent",              imageSrc:
                "http://img.b2bpic.net/free-photo/two-women-walking-forest-forest-nature-outdoor-recreation_169016-68233.jpg?_wi=3",              imageAlt: "Emergency tree removal service"},
          ]}
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="why-choose-services" data-section="why-choose-services">
        <FeatureCardSixteen
          title="What Sets Our Services Apart"
          description="Professional tree care that prioritizes your safety, property, and satisfaction. Every service is completed with expert precision and comprehensive cleanup."
          negativeCard={{
            items: [
              "Unprofessional equipment and techniques",              "Property damage and hidden costs",              "Incomplete or rushed work",              "Lack of safety precautions"],
          }}
          positiveCard={{
            items: [
              "State-of-the-art professional equipment",              "Meticulous property protection",              "Complete thorough cleanup",              "Full safety compliance and insurance"],
          }}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="service-commitment" data-section="service-commitment">
        <MediaAbout
          title="Our Service Commitment"
          description="We stand behind every project with a promise of excellence. From initial consultation to final cleanup, you'll experience professionalism, expertise, and genuine care for your property. Your satisfaction is our priority."
          tag="Quality Guaranteed"
          buttons={[{ text: "Schedule Consultation", href: "tel:2069305697" }]}
          imageSrc="http://img.b2bpic.net/free-photo/analyzing-results-expert-study_1098-14778.jpg?_wi=3"
          imageAlt="precision work careful planning professional accuracy"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="A Cut Above"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}