"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Calendar, Droplet, Heart, Shield, Sparkles, Star, Sun, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Radiance Beauty"
          navItems={[
            { name: "Gallery", id: "gallery" },
            { name: "Services", id: "services" },
            { name: "Appointments", id: "/appointments" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Appointment", href: "/appointments" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Radiance Beauty Studio"
          description="Experience premium cosmetics and personalized beauty treatments. Discover our curated collection of luxury skincare and makeup, expertly tailored to enhance your natural beauty."
          background={{ variant: "radial-gradient" }}
          tag="Premium Beauty"
          tagIcon={Sparkles}
          buttons={[
            { text: "Book Now", href: "/appointments" },
            { text: "Explore Gallery", href: "#gallery" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/flat-lay-frame-with-facial-beauty-products_23-2148299559.jpg"
          imageAlt="Luxury cosmetics collection"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Your Beauty Destination"
          description="At Radiance Beauty Studio, we believe every client deserves personalized attention and premium products. Our team of certified beauty experts combines traditional techniques with cutting-edge treatments to deliver exceptional results. From skincare consultations to makeup applications, we're committed to helping you look and feel your absolute best."
          tag="About Us"
          buttons={[
            { text: "Learn More", href: "#services" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg?_wi=1"
          imageAlt="Radiance Beauty Studio interior"
          useInvertedBackground={false}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <ProductCardThree
          title="Our Premium Collection"
          description="Handpicked luxury cosmetics and skincare products curated for discerning beauty enthusiasts"
          products={[
            {
              id: "1",              name: "Radiance Foundation Pro",              price: "$48.00",              imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-foundation-bottle-plant_23-2149030339.jpg",              imageAlt: "Radiance Foundation Pro",              initialQuantity: 1
            },
            {
              id: "2",              name: "Glow Boost Facial Serum",              price: "$65.00",              imageSrc: "http://img.b2bpic.net/free-photo/healthy-jojoba-oil-arrangement_23-2149047719.jpg",              imageAlt: "Glow Boost Facial Serum",              initialQuantity: 1
            },
            {
              id: "3",              name: "Velvet Matte Lipstick",              price: "$32.00",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-lipsticks-red-silk_23-2148978202.jpg",              imageAlt: "Velvet Matte Lipstick",              initialQuantity: 1
            },
            {
              id: "4",              name: "Hydra Luxe Face Mask",              price: "$52.00",              imageSrc: "http://img.b2bpic.net/free-photo/woman-with-blue-heart-shape-face_633478-2552.jpg",              imageAlt: "Hydra Luxe Face Mask",              initialQuantity: 1
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureBento
          title="Our Signature Services"
          description="Discover transformative beauty treatments designed to enhance your natural radiance"
          tag="Services"
          tagIcon={Star}
          features={[
            {
              title: "Skin Analysis & Consultation",              description: "Professional skin assessment with personalized product recommendations",              bentoComponent: "icon-info-cards",              items: [
                { icon: Zap, label: "Instant Results", value: "Visible glow in 24hrs" },
                { icon: Shield, label: "Safe & Natural", value: "Dermatologist tested" }
              ]
            },
            {
              title: "Makeup Application",              description: "Expert makeup artistry for any occasion, from bridal to everyday looks",              bentoComponent: "reveal-icon",              icon: Sparkles
            },
            {
              title: "Premium Facials",              description: "Luxury facial treatments using high-end skincare technology",              bentoComponent: "3d-stack-cards",              items: [
                { icon: Droplet, title: "Hydration", subtitle: "Deep Moisture", detail: "Intensive hydrating treatment" },
                { icon: Sun, title: "Brightening", subtitle: "Radiant Glow", detail: "Luminosity enhancing therapy" },
                { icon: Heart, title: "Anti-Aging", subtitle: "Renewal", detail: "Rejuvenating facial therapy" }
              ]
            },
            {
              title: "Beauty Treatments",              description: "Brow design, lash enhancement, and specialized beauty services",              bentoComponent: "marquee",              centerIcon: Heart,
              variant: "text",              texts: ["Eyebrow Design", "Lash Extensions", "Nail Art", "Beauty Coaching"]
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="appointment" data-section="appointment">
        <ContactSplit
          tag="Schedule"
          tagIcon={Calendar}
          title="Book Your Beauty Session"
          description="Reserve your appointment with our beauty experts. Select your preferred service and time slot. Our team will confirm your booking within 24 hours."
          background={{ variant: "cell-wave" }}
          useInvertedBackground={true}
          imageSrc="http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg?_wi=2"
          imageAlt="Book your appointment"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Schedule Appointment"
          termsText="We respect your privacy. Your appointment details will be kept confidential and used only for scheduling purposes."
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-studio-portrait-smiling-blonde-female-pink-jacket_613910-12467.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Emily Davis",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg",              imageAlt: "Emily Davis"
            },
            {
              id: "3",              name: "Jessica Martinez",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman_158595-975.jpg",              imageAlt: "Jessica Martinez"
            },
            {
              id: "4",              name: "Amanda Wilson",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-corporate-woman-looks-dreamy-smiles-stands-outside-street-leans-her-head-hands_1258-193991.jpg",              imageAlt: "Amanda Wilson"
            }
          ]}
          cardTitle="Over 2,000 Satisfied Customers Trust Radiance Beauty"
          cardTag="See what they say"
          cardTagIcon={Heart}
          cardAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Radiance Beauty"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms & Conditions", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}