"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { CheckCircle, Globe, Heart, Sparkles, Shield } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="LUMIÈRE"
          navItems={[
            { name: "Products", id: "products" },
            { name: "About", id: "about" },
            { name: "Benefits", id: "features" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Shop Now",            href: "products"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="LUMIÈRE"
          description="Radiant skin starts with the right care. Discover our award-winning skincare collection crafted with nature's finest ingredients and scientific innovation."
          buttons={[
            { text: "Explore Products", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
          background={{ variant: "aurora" }}
          imageSrc="https://img.b2bpic.net/free-photo/unlabeled-beauty-skincare-products-bathroom_53876-134411.jpg"
          imageAlt="Luxurious skincare products and beauty essentials"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Pure ingredients for" },
            { type: "image", src: "https://img.b2bpic.net/free-photo/unlabeled-beauty-skincare-products-bathroom_53876-134411.jpg", alt: "Premium skincare" },
            { type: "text", content: "radiant, healthy skin" }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Our Story", href: "#" },
            { text: "Shop Collection", href: "products" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Featured Skincare Collection"
          description="Handpicked essentials for your daily beauty routine. Each product is formulated with premium ingredients to deliver visible results."
          products={[
            {
              id: "1",              name: "Glow Hydrating Moisturizer",              price: "$65",              imageSrc: "https://img.b2bpic.net/free-photo/flat-lay-body-cream-arrangement-marble-background_23-2148241866.jpg",              imageAlt: "Glow Hydrating Moisturizer"
            },
            {
              id: "2",              name: "Radiance Vitamin C Serum",              price: "$75",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-close-up-holding-moisturizer-demonstrates_651396-1781.jpg",              imageAlt: "Radiance Vitamin C Serum"
            },
            {
              id: "3",              name: "Pure Cleanser",              price: "$45",              imageSrc: "https://img.b2bpic.net/free-photo/woman-bathrobe-applying-cream-face_651396-848.jpg",              imageAlt: "Pure Cleanser"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          tag="Best Sellers"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Why Choose LUMIÈRE"
          description="Experience the difference that premium skincare makes with our clinically-proven formulations and natural ingredients."
          features={[
            {
              title: "Natural Ingredients",              description: "Sourced from sustainable farms worldwide",              bentoComponent: "globe"
            },
            {
              title: "Cruelty-Free",              description: "100% vegan and ethically produced",              bentoComponent: "reveal-icon",              icon: Heart
            },
            {
              title: "Clinical Results",              description: "Dermatologist tested and proven effective",              bentoComponent: "icon-info-cards",              items: [
                { icon: CheckCircle, label: "Hydration", value: "+95%" },
                { icon: Sparkles, label: "Radiance", value: "+88%" },
                { icon: Shield, label: "Protection", value: "+92%" }
              ]
            },
            {
              title: "Fast Results",              description: "Visible improvements in just 2 weeks",              bentoComponent: "animated-bar-chart"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="LUMIÈRE transformed my skincare routine completely. My skin has never looked better—it's clearer, more radiant, and feels incredibly nourished. I'm obsessed with every product!"
          rating={5}
          author="Sarah Mitchell, Beauty Influencer"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg", alt: "Customer testimonial" },
            { src: "https://img.b2bpic.net/free-photo/close-up-good-looking-smiling-friendly-female-trainee-ready-tackle-assignments-smiling-broadly-feeling-lucky-day-work-self-assured-encouraged-achieve-success-goal-white-wall_176420-35567.jpg", alt: "Customer testimonial" },
            { src: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "Customer testimonial" },
            { src: "https://img.b2bpic.net/free-photo/blond-business-woman-blue-shirt_23-2148095792.jpg", alt: "Customer testimonial" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Skincare Questions Answered"
          description="Everything you need to know about our products and skincare routine recommendations."
          faqs={[
            {
              id: "1",              title: "How long before I see results?",              content: "Most customers notice visible improvements within 2-3 weeks of consistent use. For optimal results, we recommend using our complete routine for 8 weeks. Results vary by skin type and individual factors."
            },
            {
              id: "2",              title: "Is LUMIÈRE suitable for sensitive skin?",              content: "Yes! Our products are hypoallergenic and dermatologist-tested. However, we recommend doing a patch test first. If you have severe sensitivity, consult with a dermatologist before use."
            },
            {
              id: "3",              title: "Are your products vegan and cruelty-free?",              content: "Absolutely. All LUMIÈRE products are 100% vegan and cruelty-free. We're certified by leading ethical beauty organizations and support sustainable sourcing practices."
            },
            {
              id: "4",              title: "What is your return policy?",              content: "We offer a 60-day money-back guarantee on all products. If you're not completely satisfied, simply return your purchase for a full refund—no questions asked."
            },
            {
              id: "5",              title: "Can I use multiple products together?",              content: "Yes! Our products are designed to work synergistically. We recommend our curated routines based on your skin type. Check our website for personalized routine guides."
            },
            {
              id: "6",              title: "Where are your products made?",              content: "Our products are manufactured in Switzerland using pharmaceutical-grade standards. We maintain strict quality control to ensure purity and efficacy in every bottle."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/macadamia-body-lotion-skin-cream_1150-42813.jpg"
          imageAlt="Woman enjoying skincare routine"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Glow With LUMIÈRE"
          description="Join our community of skincare enthusiasts and get exclusive tips, new product launches, and special discounts delivered to your inbox."
          tagIcon={Sparkles}
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="invertDefault"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime. Check our privacy policy for details."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="LUMIÈRE"
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Products", href: "#products" },
                { label: "Skincare Routine", href: "#products" },
                { label: "Bundle Deals", href: "#products" },
                { label: "New Arrivals", href: "#products" }
              ]
            },
            {
              title: "Learn",              items: [
                { label: "Skincare Guide", href: "#" },
                { label: "Ingredients", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Testimonials", href: "#testimonials" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Sustainability", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "#faq" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" },
                { label: "Track Order", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 LUMIÈRE Skincare. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}