"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import ContactText from "@/components/sections/contact/ContactText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Facebook, Instagram, Phone } from "lucide-react";

export default function GalleryPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="noise"
      cardStyle="inset"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Monjas YSK"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Gallery", id: "/gallery" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" },
          ]}
          button={{ text: "Call Now", href: "tel:+17755551234" }}
        />
      </div>

      {/* Before & After Gallery */}
      <div id="gallery-showcase" data-section="gallery-showcase">
        <FeatureCardOne
          features={[
            {
              title: "Turf Installation - Reno Backyard",
              description:
                "Transformed a bare, dusty backyard into a lush, green oasis with premium artificial turf. This Nevada home now has a beautiful outdoor space perfect for entertaining and family gatherings.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/old-woman-doing-fitness-exercises_23-2149565535.jpg",
              imageAlt: "Before and after turf installation",
              button: { text: "View Details", href: "/contact" },
            },
            {
              title: "Custom Patio & Hardscape",
              description:
                "Designed and built a stunning stone patio with integrated seating walls and planter boxes. This project combines modern aesthetics with functional outdoor living space for entertaining.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/path-way_74190-2125.jpg",
              imageAlt: "Custom patio hardscape project",
              button: { text: "View Details", href: "/contact" },
            },
            {
              title: "Complete Landscape Renovation",
              description:
                "Full landscape redesign including new plantings, irrigation system upgrade, pathway installation, and decorative rock features. This Carson City property now stands out in its neighborhood.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/terrace-with-trees-forest-cozy-outdoor-relaxation-space_169016-69565.jpg",
              imageAlt: "Complete landscape renovation",
              button: { text: "View Details", href: "/contact" },
            },
          ]}
          title="Before & After Gallery"
          description="Explore our most recent landscaping transformations and outdoor construction projects across Reno and Carson City."
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
          ariaLabel="Before and after project gallery"
        />
      </div>

      {/* Gallery CTA */}
      <div id="gallery-cta" data-section="gallery-cta">
        <ContactText
          text="Inspired by one of our projects? Let's create your own outdoor masterpiece. Our team is ready to bring your landscaping vision to life with professional expertise and attention to detail."
          animationType="entrance-slide"
          background={{ variant: "noise" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Start Your Project", href: "tel:+17755551234" },
            { text: "Back to Home", href: "/" },
          ]}
          ariaLabel="Gallery call to action section"
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Monjas YSK"
          copyrightText="© 2025 Monjas YSK Landscaping. All rights reserved. Professional Landscaping & Outdoor Construction serving Reno & Carson City, NV."
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Phone, href: "tel:+17755551234", ariaLabel: "Call us" },
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}