"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Droplet, RefreshCw, Award } from 'lucide-react';

export default function LinerReplacementPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="blurBottom"
      cardStyle="gradient-mesh"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Precision Pools"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Pool Installation", id: "/pool-installation" },
            { name: "Liner Replacement", id: "/liner-replacement" },
            { name: "Pool Services", id: "/pool-services" },
            { name: "Reviews", id: "/reviews" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Call (716) 563-4603",            href: "tel:+17165634603"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Liner Replacement"
          description="Professional pool liner replacement services. Restore your pool with quality materials and expert installation techniques."
          buttons={[
            { text: "Call Now (716) 563-4603", href: "tel:+17165634603" },
            { text: "Get Free Quote", href: "/contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/legs-skateboarders-ramp_23-2147678199.jpg"
          imageAlt="Professional pool liner replacement service"
          showDimOverlay={true}
        />
      </div>

      <div id="liner-services" data-section="liner-services">
        <FeatureCardTwentyFive
          title="Liner Replacement Services"
          description="Complete liner replacement solutions for all pool types"
          features={[
            {
              title: "Quality Liner Materials",              description: "We use only premium liner materials designed for durability and long-lasting performance in all weather conditions.",              icon: Award,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/legs-skateboarders-ramp_23-2147678199.jpg",                  imageAlt: "Quality pool liner materials"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/legs-skateboarder-preparing-ride_23-2147678296.jpg",                  imageAlt: "Premium liner installation"
                }
              ]
            },
            {
              title: "Expert Installation Process",              description: "Professional liner installation with precise measurements and careful attention to detail for a perfect fit every time.",              icon: RefreshCw,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/teenager-getting-out-from-bowl_23-2147678172.jpg",                  imageAlt: "Professional liner installation"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/men-preparing-ride-skateboards_23-2147678227.jpg",                  imageAlt: "Expert installation process"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="liner-benefits" data-section="liner-benefits">
        <MetricSplitMediaAbout
          tag="Liner Benefits"
          tagIcon={Droplet}
          title="Why Replace Your Pool Liner?"
          description="A new pool liner not only improves your pool's appearance but also prevents leaks, reduces maintenance costs, and extends your pool's lifespan. Our quality liners come with comprehensive warranties for peace of mind."
          metrics={[
            { value: "10+", title: "Years Liner Lifespan" },
            { value: "50%", title: "Reduced Maintenance" }
          ]}
          useInvertedBackground={true}
          imageSrc="https://img.b2bpic.net/free-photo/legs-skateboarder-preparing-ride_23-2147678296.jpg"
          imageAlt="Pool liner replacement benefits"
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
        />
      </div>

      <FooterLogoEmphasis
        logoText="Precision Pools"
        columns={[
          {
            items: [
              { label: "Home", href: "/" },
              { label: "Pool Installation", href: "/pool-installation" },
              { label: "Liner Replacement", href: "/liner-replacement" }
            ]
          },
          {
            items: [
              { label: "Pool Services", href: "/pool-services" },
              { label: "Reviews", href: "/reviews" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            items: [
              { label: "Tonawanda, NY 14150" },
              { label: "(716) 563-4603", href: "tel:+17165634603" },
              { label: "51 Fillmore Ave" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}