"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="large"
      background="aurora"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Y&B Roofing Inc."
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwelve
          title="Comprehensive Roofing Services"
          description="From emergency repairs to complete replacements, we handle every aspect of roofing with professional excellence."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              id: "repair",
              label: "Repair",
              title: "Expert Roof Repair Services",
              items: ["Leak detection and sealing", "Flashing repairs", "Storm damage restoration", "Emergency patching"],
              buttons: [{ text: "Get Quote", href: "/contact" }]
            },
            {
              id: "replacement",
              label: "Replace",
              title: "Complete Roof Replacement",
              items: ["Full tear-offs and installation", "Premium material selection", "Structural assessment", "Comprehensive warranty"],
              buttons: [{ text: "Learn More", href: "/contact" }]
            },
            {
              id: "emergency",
              label: "Emergency",
              title: "24/7 Emergency Services",
              items: ["Winter service availability", "Storm damage response", "Temporary protection", "Insurance coordination"],
              buttons: [{ text: "Call Now", href: "tel:+1234567890" }]
            }
          ]}
        />
      </div>

      <div id="process" data-section="process">
        <MetricCardFourteen
          title="Our Simple, Transparent 4-Step Process. From inspection to peace of mind, we handle every detail with care and clarity."
          tag="How We Work"
          tagAnimation="blur-reveal"
          useInvertedBackground={false}
          metricsAnimation="slide-up"
          metrics={[
            {
              id: "1",
              value: "Step 1",
              description: "Free Inspection: We assess your roof thoroughly and explain exactly what we find."
            },
            {
              id: "2",
              value: "Step 2",
              description: "Clear, Honest Estimate: Transparent pricing with no surprises. You know exactly what to expect."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          title="Ready to Protect Your Investment?"
          description="Contact us today for a free inspection and honest assessment of your roofing needs."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          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=3"
          imageAlt="Professional roofing team ready to help"
          mediaPosition="right"
          inputPlaceholder="Enter your email for service information"
          buttonText="Get Service Quote"
          termsText="We'll respond within 24 hours with detailed service information."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Y&B Roofing Inc."
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}