"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Wrench, Award } from "lucide-react";

export default function ServicesPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "services" },
    { name: "Our Process", id: "process" },
    { name: "Projects", id: "projects" },
    { name: "Reviews", id: "reviews" },
    { name: "About", id: "about" },
  ];

  const footerColumns = [
    {
      title: "Services",      items: [
        { label: "Residential Roofing", href: "#services" },
        { label: "Roof Repairs", href: "#services" },
        { label: "Storm Damage", href: "#services" },
        { label: "Commercial Roofing", href: "#services" },
        { label: "Property Manager Program", href: "#property-manager" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/about" },
        { label: "Our Process", href: "#process" },
        { label: "Projects", href: "#projects" },
        { label: "Reviews", href: "#reviews" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Legal",      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Warranty Information", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLargeSizeLargeTitles"
      background="floatingGradient"
      cardStyle="inset"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={navItems}
          brandName="Five Star Roofing"
          button={{
            text: "Get Free Inspection",            href: "/contact"}}
          buttonClassName="px-4 py-2 rounded-full font-semibold hover:shadow-lg transition-all"
          buttonTextClassName="font-bold"
        />
      </div>

      <div id="services" data-section="services">
        <ProductCardTwo
          title="Complete Roofing Solutions"
          description="From emergency repairs to full replacements, we provide comprehensive roofing services tailored to your needs"
          tag="Premium Services"
          tagIcon={Wrench}
          tagAnimation="slide-up"
          products={[
            {
              id: "1",              brand: "Residential",              name: "Roof Replacement & Upgrades",              price: "Full Assessment Required",              rating: 5,
              reviewCount: "200+",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24747.jpg?_wi=2",              imageAlt: "Residential roof replacement project"},
            {
              id: "2",              brand: "Repairs",              name: "Repairs & Leak Detection",              price: "Fast, Accurate Service",              rating: 5,
              reviewCount: "180+",              imageSrc: "http://img.b2bpic.net/free-photo/male-worker-operating-machinery-factory_107420-96043.jpg?_wi=2",              imageAlt: "Leak detection and repair process"},
            {
              id: "3",              brand: "Insurance Support",              name: "Storm Damage & Insurance Claims",              price: "Complete Documentation",              rating: 5,
              reviewCount: "150+",              imageSrc: "http://img.b2bpic.net/free-photo/view-abandoned-decaying-house-nature_23-2150166560.jpg?_wi=2",              imageAlt: "Storm damage assessment and documentation"},
            {
              id: "4",              brand: "Commercial",              name: "Commercial Roofing Solutions",              price: "Low-Disruption Service",              rating: 5,
              reviewCount: "120+",              imageSrc: "http://img.b2bpic.net/free-photo/agricultural-silo_146671-19121.jpg?_wi=2",              imageAlt: "Commercial roofing project"},
            {
              id: "5",              brand: "Property Mgmt",              name: "Property Manager Program",              price: "Multi-Property Support",              rating: 5,
              reviewCount: "95+",              imageSrc: "http://img.b2bpic.net/free-photo/indoor-objects-company-background-papers_1304-2624.jpg?_wi=2",              imageAlt: "Property manager scheduling and reporting"},
          ]}
          textboxLayout="default"
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          useInvertedBackground={false}
          textBoxTitleClassName="text-4xl md:text-5xl"
          textBoxDescriptionClassName="text-lg text-gray-600"
        />
      </div>

      <div id="why-choose" data-section="why-choose">
        <FeatureCardOne
          title="Why Choose Our Services"
          description="Each service is backed by our commitment to professionalism and customer satisfaction"
          tag="Service Excellence"
          tagIcon={Award}
          tagAnimation="slide-up"
          features={[
            {
              title: "Expert Assessment",              description: "Our team provides thorough inspections with detailed documentation and clear recommendations for your roofing needs.",              imageSrc: "http://img.b2bpic.net/free-photo/specialist-technician-professional-engineer-with-laptop-tablet-maintenance-checking-installing-solar-roof-panel-factory-rooftop-sunlight-engineers-team-survey-check-solar-panel-roof_609648-2202.jpg?_wi=2",              imageAlt: "Professional roof assessment"},
            {
              title: "Quality Installation",              description: "All our installations use premium materials and techniques to ensure durability and performance for years to come.",              imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-together-roof_23-2149343674.jpg?_wi=2",              imageAlt: "Professional installation team"},
            {
              title: "Transparent Pricing",              description: "We provide detailed quotes with no hidden charges, so you know exactly what to expect before work begins.",              imageSrc: "http://img.b2bpic.net/free-photo/business-people-meeting_53876-25158.jpg?_wi=2",              imageAlt: "Transparent pricing consultation"},
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground={false}
          cardTitleClassName="text-4xl md:text-5xl"
          cardDescriptionClassName="text-lg text-gray-600"
        />
      </div>

      <div id="service-guarantee" data-section="service-guarantee">
        <FeatureCardOne
          title="Our Service Guarantee"
          description="We stand behind every project with comprehensive warranties and ongoing support"
          tag="Your Protection"
          tagIcon={Award}
          tagAnimation="slide-up"
          features={[
            {
              title: "Workmanship Warranty",              description: "10-year warranty on all installations covers materials and labor, giving you peace of mind for over a decade.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-female-engineer-hand-controling-robot-arm-welding-machine-industrial-40-modern-factory-backgroundsmart-female-engineer-inspect-quality-control-factory_609648-856.jpg?_wi=2",              imageAlt: "Quality guarantee and warranty"},
            {
              title: "Photo Documentation",              description: "Every project includes before, during, and after photos. Perfect for insurance claims and your peace of mind.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-working-alternative-energy_23-2149311503.jpg?_wi=2",              imageAlt: "Comprehensive project documentation"},
            {
              title: "24/7 Emergency Support",              description: "Storm damage? Leak emergency? We're available around the clock for urgent roofing issues that can't wait.",              imageSrc: "http://img.b2bpic.net/free-photo/people-working-call-center_23-2149288167.jpg?_wi=2",              imageAlt: "Emergency support availability"},
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground={false}
          cardTitleClassName="text-4xl md:text-5xl"
          cardDescriptionClassName="text-lg text-gray-600"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 Five Star Roofing. All rights reserved. Licensed | Insured | Bonded."
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}