"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-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Radiance"
          navItems={[
            { name: "Gallery", id: "gallery" },
            { name: "Services", id: "services" },
            { name: "Appointments", id: "appointment" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "#appointment" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Luxury Beauty Redefined"
          description="Experience the pinnacle of cosmetic artistry. Our curated collection of premium skincare and makeup is meticulously crafted to enhance your natural radiance with elegance and sophistication."
          background={{ variant: "plain" }}
          tag="Luxury Collection"
          tagIcon={Sparkles}
          buttons={[
            { text: "Explore Now", href: "#gallery" },
            { text: "Book Session", href: "#appointment" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Akrk3jRMuRcbCJKPZq8TEjwqVG/uploaded-1773315384693-y145xpsz.png"
          imageAlt="Luxury cosmetics collection"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Elegance in Every Detail"
          description="At Radiance, we believe beauty is an art form. Our curated collection combines timeless elegance with cutting-edge formulations. Each product is carefully selected from prestigious brands known for their commitment to quality, sustainability, and transformative results. Our expert consultants provide personalized guidance to ensure you discover products that enhance your unique beauty."
          tag="Our Philosophy"
          buttons={[
            { text: "View Collection", href: "#gallery" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Akrk3jRMuRcbCJKPZq8TEjwqVG/uploaded-1773315384693-g8rb1jbw.png?_wi=1"
          imageAlt="Radiance luxury beauty studio"
          useInvertedBackground={true}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <ProductCardThree
          title="Signature Collection"
          description="Handpicked luxury beauty essentials, each selected for superior quality and transformative results"
          products={[
            {
              id: "1",              name: "Luminous Foundation",              price: "$75.00",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Akrk3jRMuRcbCJKPZq8TEjwqVG/uploaded-1773315384693-suew52h2.png",              imageAlt: "Luminous Foundation",              initialQuantity: 1
            },
            {
              id: "2",              name: "Silk Serum Complex",              price: "$85.00",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Akrk3jRMuRcbCJKPZq8TEjwqVG/uploaded-1773315384693-8o11lr1v.png",              imageAlt: "Silk Serum Complex",              initialQuantity: 1
            },
            {
              id: "3",              name: "Velvet Matte Lipstick",              price: "$48.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: "$65.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="bento-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureBento
          title="Premium Services"
          description="Discover our exclusive beauty treatments designed to enhance your natural elegance"
          tag="Expertise"
          tagIcon={Star}
          features={[
            {
              title: "Beauty Consultation",              description: "Expert analysis and personalized beauty recommendations",              bentoComponent: "icon-info-cards",              items: [
                { icon: Zap, label: "Instant Results", value: "Visible enhancement" },
                { icon: Shield, label: "Premium Quality", value: "Luxury brands" }
              ]
            },
            {
              title: "Makeup Artistry",              description: "Professional makeup application for all occasions",              bentoComponent: "reveal-icon",              icon: Sparkles
            },
            {
              title: "Skincare Treatments",              description: "Advanced facial treatments using premium technologies",              bentoComponent: "3d-stack-cards",              items: [
                { icon: Droplet, title: "Hydration", subtitle: "Deep Moisture", detail: "Intensive hydrating therapy" },
                { icon: Sun, title: "Brightening", subtitle: "Radiant Glow", detail: "Luminosity treatment" },
                { icon: Heart, title: "Anti-Aging", subtitle: "Renewal", detail: "Rejuvenating therapy" }
              ]
            },
            {
              title: "Beauty Enhancements",              description: "Specialized treatments and beauty services",              bentoComponent: "marquee",              centerIcon: Heart,
              variant: "text",              texts: ["Brow Design", "Lash Services", "Beauty Care", "Consultation"]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="appointment" data-section="appointment">
        <ContactSplit
          tag="Reserve"
          tagIcon={Calendar}
          title="Schedule Your Beauty Experience"
          description="Book your personalized session with our beauty experts. Choose your preferred service and time. We'll confirm your appointment within 24 hours."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Akrk3jRMuRcbCJKPZq8TEjwqVG/uploaded-1773315384693-g8rb1jbw.png?_wi=2"
          imageAlt="Schedule your appointment"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Reserve Now"
          termsText="We respect your privacy. Your details are confidential and used only for appointment confirmation."
        />
      </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="Trusted by Discerning Beauty Enthusiasts"
          cardTag="Client Stories"
          cardTagIcon={Heart}
          cardAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

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