"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Facebook, Pinterest } from 'lucide-react';

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="large"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Jasmin"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "Services", id: "/services" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Book Now",
            href: "/contact"
          }}
        />
      </div>

      <div id="services-overview" data-section="services-overview">
        <FeatureCardTwentyThree
          title="Our Comprehensive Services"
          description="From intimate gatherings to grand celebrations, we offer complete floral design services tailored to your unique vision and requirements"
          features={[
            {
              id: "1",
              title: "Wedding Floral Design",
              tags: ["Bridal Bouquets", "Ceremony Decor", "Reception Centerpieces"],
              imageSrc: "https://img.b2bpic.net/free-photo/blooming-flowers-table-garden_1304-4038.jpg",
              imageAlt: "Wedding floral design service"
            },
            {
              id: "2",
              title: "Corporate Events",
              tags: ["Executive Meetings", "Galas", "Product Launches"],
              imageSrc: "https://img.b2bpic.net/free-photo/row-bouquets-decorating-table_1304-4047.jpg",
              imageAlt: "Corporate event floral service"
            },
            {
              id: "3",
              title: "Weekly Subscriptions",
              tags: ["Home Delivery", "Office Spaces", "Seasonal Themes"],
              imageSrc: "https://img.b2bpic.net/free-photo/vase-flower_74190-1525.jpg",
              imageAlt: "Weekly flower subscription service"
            },
            {
              id: "4",
              title: "Special Occasions",
              tags: ["Birthdays", "Anniversaries", "Celebrations"],
              imageSrc: "https://img.b2bpic.net/free-photo/assorted-flower-arrangement-vase_209848-94.jpg",
              imageAlt: "Special occasion floral service"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Book Consultation", href: "/contact" }
          ]}
        />
      </div>

      <div id="service-packages" data-section="service-packages">
        <ProductCardFour
          title="Service Packages"
          description="Choose from our carefully curated service packages designed to meet different needs and budgets"
          products={[
            {
              id: "1",
              name: "Essential Package",
              price: "$299",
              variant: "Perfect for intimate gatherings",
              imageSrc: "https://img.b2bpic.net/free-photo/bouquet-pink-roses-with-green-leaves-inside-vase_114579-1439.jpg",
              imageAlt: "Essential service package"
            },
            {
              id: "2",
              name: "Premium Package",
              price: "$599",
              variant: "Ideal for medium-sized events",
              imageSrc: "https://img.b2bpic.net/free-photo/bouquet-pink-roses-single-branch-rose-with-green-leaves-inside-vase_114579-1440.jpg",
              imageAlt: "Premium service package"
            },
            {
              id: "3",
              name: "Luxury Package",
              price: "$1,299",
              variant: "Complete full-service experience",
              imageSrc: "https://img.b2bpic.net/free-photo/wedding-roses-bouquet-stands-chair-around-are-scattered-petals-roses_8353-9798.jpg",
              imageAlt: "Luxury service package"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          carouselMode="buttons"
          buttons={[
            { text: "Custom Quote", href: "/contact" }
          ]}
        />
      </div>

      <div id="service-process" data-section="service-process">
        <FeatureCardTwentyThree
          title="Our Process"
          description="We follow a proven approach to ensure every project exceeds your expectations from initial consultation to final delivery"
          features={[
            {
              id: "1",
              title: "Initial Consultation",
              tags: ["Vision Discussion", "Budget Planning"],
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-flowers_23-2149247537.jpg",
              imageAlt: "Initial consultation process"
            },
            {
              id: "2",
              title: "Design Development",
              tags: ["Concept Creation", "Style Refinement"],
              imageSrc: "https://img.b2bpic.net/free-photo/vase-flower_74190-1525.jpg",
              imageAlt: "Design development process"
            },
            {
              id: "3",
              title: "Perfect Execution",
              tags: ["Setup", "Quality Assurance"],
              imageSrc: "https://img.b2bpic.net/free-photo/row-bouquets-decorating-table_1304-4047.jpg",
              imageAlt: "Perfect execution process"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Jasmin"
          copyrightText="© 2024 Jasmin Flowers Studio. All rights reserved."
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com/jasminflowers", ariaLabel: "Instagram" },
            { icon: Facebook, href: "https://facebook.com/jasminflowers", ariaLabel: "Facebook" },
            { icon: Pinterest, href: "https://pinterest.com/jasminflowers", ariaLabel: "Pinterest" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}