"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, Heart, HelpCircle } from "lucide-react";

export default function SpaPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="none"
      cardStyle="glass-depth"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Serenity Spa"
          button={{
            text: "Book Now",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Transform Your Mind, Body & Spirit"
          description="Discover complete wellness and rejuvenation at our premium spa sanctuary. Expert therapists and luxurious treatments await you."
          tag="Welcome to Serenity"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/spa-massage-concept-with-woman_23-2147817020.jpg"
          imageAlt="Serene spa environment with candles and towels"
          buttons={[
            {
              text: "Book a Treatment",              href: "contact"
            },
            {
              text: "Learn More",              href: "about"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Your Wellness Journey Starts Here"
          description="At Serenity Spa, we believe in the power of holistic wellness. Our team of certified therapists combines traditional techniques with modern practices to deliver transformative experiences. Each treatment is customized to your unique needs, ensuring you leave feeling refreshed, restored, and reconnected."
          tag="About Us"
          imageSrc="https://img.b2bpic.net/free-photo/peaceful-body-lying-person-relax_1301-3277.jpg"
          imageAlt="Peaceful spa interior with soft lighting"
          buttons={[
            {
              text: "Explore Our Services",              href: "services"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyOne
          title="Premium Treatment Services"
          description="Indulge in our expertly crafted selection of therapeutic and rejuvenating treatments designed to elevate your wellness experience."
          tag="Our Services"
          tagIcon={Heart}
          imageSrc="https://img.b2bpic.net/free-photo/female-getting-professional-massage-beauty-spa-salon_181624-54510.jpg"
          imageAlt="Professional massage therapy session"
          mediaPosition="left"
          accordionItems={[
            {
              id: "1",              title: "Relaxation Massage",              content: "Our signature full-body massage combines Swedish and deep tissue techniques to melt away stress and tension. Perfect for those seeking pure relaxation and rejuvenation. 60 or 90 minutes available."
            },
            {
              id: "2",              title: "Facial Treatments",              content: "Customized facials tailored to your skin type, featuring premium products and advanced techniques. From hydrating to anti-aging, we have the perfect treatment for your complexion."
            },
            {
              id: "3",              title: "Aromatherapy & Essential Oils",              content: "Harness the healing power of essential oils through our specialized aromatherapy sessions. Combines massage with therapeutic scents for enhanced relaxation and wellness benefits."
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Serenity Spa completely transformed my relationship with wellness. From the moment I walked in, I felt the care and expertise of their team. Every treatment leaves me feeling renewed and centered. I've already booked my next visit!"
          rating={5}
          author="Sarah Mitchell, Wellness Enthusiast"
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/woman-posing-with-bathrobe-spa_23-2148206225.jpg",              alt: "Sarah Mitchell"
            },
            {
              src: "https://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67053.jpg",              alt: "Emma Johnson"
            },
            {
              src: "https://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67003.jpg",              alt: "Michael Roberts"
            },
            {
              src: "https://img.b2bpic.net/free-photo/woman-posing-with-bathrobe-spa_23-2148206146.jpg",              alt: "Jessica Lee"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our services, booking process, and wellness practices."
          tag="Help & Support"
          tagIcon={HelpCircle}
          imageSrc="https://img.b2bpic.net/free-photo/high-angle-view-beautiful-woman-having-head-massage-beauty-treatment-spa_637285-2192.jpg"
          imageAlt="Tranquil spa setting for FAQ section"
          mediaPosition="right"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",              title: "How do I book an appointment?",              content: "Booking is easy! Simply click the 'Book Now' button on our website, select your desired service, therapist, and time slot. You can also call us directly at (555) 123-4567. We recommend booking at least 48 hours in advance to secure your preferred time."
            },
            {
              id: "2",              title: "What should I expect during my first visit?",              content: "During your first visit, please arrive 10-15 minutes early to complete intake forms. Our team will discuss your wellness goals, any health concerns, and customize your treatment accordingly. You'll be guided to a private treatment room where you can relax in comfort."
            },
            {
              id: "3",              title: "Are your therapists certified?",              content: "Yes, all our therapists are certified professionals with extensive training in their respective specialties. They maintain continuous education in the latest wellness techniques and hold current licenses in massage therapy and skincare."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Relax?"
          description="Get in touch with us to book your next treatment or ask any questions. Our friendly team is here to help you begin your wellness journey."
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Your Email",              required: true
            },
            {
              name: "phone",              type: "tel",              placeholder: "Phone Number",              required: false
            },
            {
              name: "service",              type: "text",              placeholder: "Preferred Service",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your wellness goals and preferences...",            rows: 5,
            required: true
          }}
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/peaceful-body-lying-person-relax_1301-3277.jpg"
          imageAlt="Spa relaxation area"
          mediaPosition="right"
          buttonText="Send Inquiry"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Serenity Spa"
          columns={[
            {
              items: [
                {
                  label: "Home",                  href: "#"
                },
                {
                  label: "Services",                  href: "services"
                },
                {
                  label: "About",                  href: "about"
                },
                {
                  label: "Contact",                  href: "contact"
                }
              ]
            },
            {
              items: [
                {
                  label: "Gift Certificates",                  href: "#"
                },
                {
                  label: "Wellness Blog",                  href: "#"
                },
                {
                  label: "Careers",                  href: "#"
                },
                {
                  label: "Reviews",                  href: "#"
                }
              ]
            },
            {
              items: [
                {
                  label: "Privacy Policy",                  href: "#"
                },
                {
                  label: "Terms of Service",                  href: "#"
                },
                {
                  label: "Accessibility",                  href: "#"
                },
                {
                  label: "Contact Info",                  href: "contact"
                }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}