"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, HelpCircle } 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="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to your questions about our services, delivery, and care instructions"
          tag="Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "How far in advance should I order?",
              content: "We recommend ordering at least 3-5 days in advance for custom arrangements. For rush orders, please contact us directly as we can often accommodate same-day or next-day delivery depending on availability."
            },
            {
              id: "2",
              title: "Do you offer wedding and event services?",
              content: "Absolutely! We specialize in wedding florals, corporate events, and special occasions. We provide comprehensive design consultations to ensure your vision comes to life. Contact us for a custom proposal."
            },
            {
              id: "3",
              title: "What is your delivery area?",
              content: "We deliver throughout the metropolitan area and surrounding regions. For out-of-area orders, we can arrange coordination with trusted partner florists to ensure quality delivery."
            },
            {
              id: "4",
              title: "How should I care for my arrangement?",
              content: "Keep flowers in cool water away from direct sunlight and heat. Change the water every 2-3 days and trim stems at a 45-degree angle. We provide detailed care instructions with every arrangement."
            },
            {
              id: "5",
              title: "Can you accommodate allergies or preferences?",
              content: "Yes! We can work around allergies, color preferences, and specific flower requests. Please mention any preferences during consultation so we can create the perfect arrangement for you."
            },
            {
              id: "6",
              title: "What payment methods do you accept?",
              content: "We accept all major credit cards, digital payments, and bank transfers. A 50% deposit is required to confirm bookings, with the balance due before delivery."
            }
          ]}
        />
      </div>

      <FooterLogoReveal logoText="Flowers Life" />
    </ThemeProvider>
  );
}