"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 { Waves, Target, Shield } from 'lucide-react';

export default function PoolInstallationPage() {
  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="Pool Installation"
          description="Expert above-ground pool installation services. From site preparation to final setup, we handle every detail with precision and care."
          buttons={[
            { text: "Call Now (716) 563-4603", href: "tel:+17165634603" },
            { text: "Get Free Quote", href: "/contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/teenager-getting-out-from-bowl_23-2147678172.jpg"
          imageAlt="Professional pool installation process"
          showDimOverlay={true}
        />
      </div>

      <div id="installation-process" data-section="installation-process">
        <FeatureCardTwentyFive
          title="Our Installation Process"
          description="Professional, step-by-step pool installation for lasting results"
          features={[
            {
              title: "Site Preparation & Planning",              description: "Thorough ground preparation, leveling, and planning to ensure a perfect foundation for your pool installation.",              icon: Target,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/teenager-getting-out-from-bowl_23-2147678172.jpg",                  imageAlt: "Site preparation for pool installation"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/men-preparing-ride-skateboards_23-2147678227.jpg",                  imageAlt: "Ground leveling process"
                }
              ]
            },
            {
              title: "Professional Assembly",              description: "Expert assembly of your pool structure using quality materials and proven techniques for durability and safety.",              icon: Waves,
              mediaItems: [
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/legs-skateboarders-ramp_23-2147678199.jpg",                  imageAlt: "Pool frame assembly"
                },
                {
                  imageSrc: "https://img.b2bpic.net/free-photo/legs-skateboarder-preparing-ride_23-2147678296.jpg",                  imageAlt: "Professional installation work"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="installation-guarantee" data-section="installation-guarantee">
        <MetricSplitMediaAbout
          tag="Installation Guarantee"
          tagIcon={Shield}
          title="Quality Installation, Guaranteed"
          description="Every pool installation comes with our quality guarantee. We stand behind our work with comprehensive warranty coverage and ongoing support. Our owner-led approach ensures every installation meets the highest standards."
          metrics={[
            { value: "100%", title: "Quality Guaranteed" },
            { value: "1 Year", title: "Installation Warranty" }
          ]}
          useInvertedBackground={true}
          imageSrc="https://img.b2bpic.net/free-photo/handsome-man-sitting-near-swimming-pool-with-luggage-bag-posing_23-2148221972.jpg"
          imageAlt="Quality pool installation guarantee"
          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>
  );
}