"use client";

import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from 'next/link';
import { Sparkles, Envelope } from 'lucide-react';

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Flowers Life"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Gallery", id: "/gallery" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Book Consultation",
            href: "/contact"
          }}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureProcessSteps
          tag="Our Expertise"
          tagIcon={Sparkles}
          title="Creating Botanical Masterpieces"
          description="Our meticulous process ensures every arrangement reflects your vision and emotions, from initial consultation to final presentation."
          buttons={[
            { text: "Start Your Order", href: "/contact" }
          ]}
          steps={[
            { number: "01", title: "Consultation", tag: "Discovery", description: "We listen to your ideas, preferences, and the occasion to understand your vision completely." },
            { number: "02", title: "Design & Selection", tag: "Creation", description: "Our expert florists design a custom arrangement using premium, freshly sourced flowers." },
            { number: "03", title: "Crafting", tag: "Artistry", description: "Each stem is carefully arranged with precision, ensuring structural integrity and visual harmony." },
            { number: "04", title: "Delivery & Beyond", tag: "Care", description: "We ensure timely delivery with care instructions to keep your arrangement fresh and beautiful." }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Signature Collections"
          description="Explore our carefully curated floral arrangements, each designed to bring joy and elegance to your special moments"
          tag="Premium Selections"
          tagIcon={Sparkles}
          products={[
            {
              id: "1",
              name: "Romantic Rose Bouquet",
              price: "$85",
              imageSrc: "https://img.b2bpic.net/free-photo/rose-wooden-background_1232-2088.jpg",
              imageAlt: "Premium rose bouquet",
              initialQuantity: 1
            },
            {
              id: "2",
              name: "Wedding Day Elegance",
              price: "$250",
              imageSrc: "https://img.b2bpic.net/free-photo/bouquet-roses-with-red-bow_23-2147591160.jpg",
              imageAlt: "Wedding flower arrangement",
              initialQuantity: 1
            },
            {
              id: "3",
              name: "Seasonal Celebration",
              price: "$95",
              imageSrc: "https://img.b2bpic.net/free-photo/elevated-view-red-rose-flower-vase_23-2148181221.jpg",
              imageAlt: "Seasonal flower mix",
              initialQuantity: 1
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          tagIcon={Envelope}
          title="Ready to bring your vision to life?"
          description="Join our mailing list to stay updated on seasonal collections, special promotions, and floral inspiration."
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy and will never share your email. Unsubscribe anytime."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal logoText="Flowers Life" />
      </div>
    </ThemeProvider>
  );
}