"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import {
  Shield,
  Wrench,
  AlertCircle,
  Home,
  Building2,
  Star,
  Square,
  Zap,
  Droplets,
  Clock,
  Phone,
  AlertTriangle,
} from "lucide-react";

export default function ServicesPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "Why Us", id: "/why-us" },
    { name: "Contact", id: "/contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Nottingham Premier Roofing"
          navItems={navItems.map((item) => ({
            name: item.name,
            id: item.id === "/" ? "/" : item.id,
          }))}
        />
      </div>

      <div id="services-detail" data-section="services-detail">
        <FeatureBento
          title="Professional Roofing Services Tailored to Your Needs"
          description="Whether you need emergency repairs, a complete roof installation, or specialized flat roofing services, our experienced team has the expertise to handle every project with precision and care."
          tag="Expert Solutions"
          features={[
            {
              title: "Emergency Roof Repairs",              description: "Immediate response to leaks, storm damage, and urgent roofing issues. Available 24/7 for your peace of mind.",              bentoComponent: "icon-info-cards",              items: [
                { icon: AlertCircle, label: "Same-Day Response", value: "Available" },
                { icon: Shield, label: "Emergency Coverage", value: "24/7" },
                { icon: Wrench, label: "Fast Turnaround", value: "24-48hrs" },
              ],
            },
            {
              title: "New Roof Installations",              description: "Complete roof replacements and new installations using premium quality materials. Full consultation and design service included.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Home, label: "Residential", value: "Expert Work" },
                { icon: Building2, label: "Commercial", value: "Professional" },
                { icon: Star, label: "Quality Materials", value: "Guaranteed" },
              ],
            },
            {
              title: "Flat Roof Specialization",              description: "Dedicated expertise in flat roofing systems including EPDM rubber, felt, and slate applications for modern properties.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Square, label: "EPDM Systems", value: "Durable" },
                { icon: Droplets, label: "Waterproofing", value: "Certified" },
                { icon: Zap, label: "Modern Materials", value: "Available" },
              ],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
        />
      </div>

      <div id="services-cta" data-section="services-cta">
        <ContactCTA
          tag="Ready to Get Started?"
          tagIcon={Phone}
          title="Schedule Your Service Today"
          description="Contact our team to discuss your roofing needs and receive a free, no-obligation quote. We're committed to delivering exceptional results on every project."
          buttons={[
            { text: "Book Free Assessment", href: "/contact" },
            { text: "Call: 0115 912 3456", href: "tel:+441159123456" },
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Nottingham Premier Roofing"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms & Conditions", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}