"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 { Droplets, Earth, HelpCircle, Leaf, Mail, Shield, Sparkles } from 'lucide-react';

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

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Luminé"
          description="Experience the transformative power of nature-inspired skincare. Crafted with the finest botanicals and scientifically-proven ingredients to reveal your most radiant complexion."
          buttons={[
            { text: "Discover Collection", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="http://img.b2bpic.net/free-photo/luxury-cream-jar-silk-fabric_9975-134546.jpg"
          imageAlt="Luxury skincare products"
          mediaAnimation="slide-up"
          frameStyle="card"
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Skincare rooted in" },
            { type: "image", src: "http://img.b2bpic.net/free-photo/natural-spas-ingredients-white-wooden-background_23-2148031318.jpg", alt: "Natural ingredients" },
            { type: "text", content: "and science" }
          ]}
          buttons={[
            { text: "Our Story", href: "#" },
            { text: "Our Ingredients", href: "#" }
          ]}
          useInvertedBackground={false}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Our Bestsellers"
          description="Discover the skincare essentials that have transformed thousands of complexions. Each product is meticulously formulated to deliver visible results."
          tag="Curated Collection"
          tagIcon={Sparkles}
          products={[
            {
              id: "1",              name: "Radiant Serum",              price: "$58",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242151.jpg",              imageAlt: "Radiant Serum bottle"
            },
            {
              id: "2",              name: "Luxe Moisturizer",              price: "$72",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-hand-holding-face-cream-container_23-2148213310.jpg",              imageAlt: "Luxe Moisturizer jar"
            },
            {
              id: "3",              name: "UV Protect SPF 50",              price: "$44",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-skincare-product-beach_23-2150167919.jpg",              imageAlt: "UV Protect Sunscreen"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          tagAnimation="blur-reveal"
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Why Choose Luminé"
          description="We combine cutting-edge skincare science with time-honored botanical wisdom to create products that truly work."
          features={[
            {
              title: "Clean Ingredients",              description: "100% natural and organic botanicals without harsh chemicals",              bentoComponent: "icon-info-cards",              items: [
                { icon: Leaf, label: "Organic", value: "100%" },
                { icon: Shield, label: "Safe", value: "Dermatology tested" },
                { icon: Sparkles, label: "Pure", value: "No parabens" }
              ]
            },
            {
              title: "Results-Driven",              description: "Visible improvements in skin texture and radiance",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Global Trust",              description: "Trusted by beauty enthusiasts worldwide",              bentoComponent: "globe"
            },
            {
              title: "Sustainability",              description: "Eco-friendly packaging and ethical sourcing",              bentoComponent: "3d-task-list",              items: [
                { icon: Leaf, label: "Recyclable packaging", time: "100%" },
                { icon: Droplets, label: "Water conscious", time: "Minimal waste" },
                { icon: Earth, label: "Ethical sourcing", time: "Fair trade" }
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          tagAnimation="blur-reveal"
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Luminé has completely transformed my skin. After just four weeks, my complexion is visibly clearer, more radiant, and the texture is incredibly smooth. I've never experienced results this remarkable from any skincare brand before."
          rating={5}
          author="Sarah Mitchell, Beauty Editor"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "Sarah Mitchell" },
            { src: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "Customer testimonial" },
            { src: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "Customer testimonial" },
            { src: "http://img.b2bpic.net/free-photo/woman-with-blond-short-hair-tanned-smiling-cute-gazing-camera-with-friendly_176420-44610.jpg", alt: "Customer testimonial" }
          ]}
          ratingAnimation="blur-reveal"
          avatarsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Get answers to common questions about our skincare products, ingredients, and usage."
          tag="Help Center"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "What is the best way to use Luminé products?",              content: "For optimal results, cleanse your face with warm water, then apply our Radiant Serum to damp skin. Follow with the Luxe Moisturizer to lock in hydration. Always finish with UV Protect SPF 50 during the day. Use morning and evening for best results."
            },
            {
              id: "2",              title: "Are Luminé products suitable for sensitive skin?",              content: "Yes! All Luminé products are dermatology tested and formulated without harsh chemicals, parabens, or sulfates. However, we recommend performing a patch test first. If you have specific sensitivities, consult with our skincare specialists."
            },
            {
              id: "3",              title: "How long before I see results?",              content: "Most customers notice visible improvements in skin texture and radiance within 2-4 weeks of consistent use. For deeper concerns like fine lines, results typically appear within 6-8 weeks as the skin undergoes its natural renewal cycle."
            },
            {
              id: "4",              title: "Can I use Luminé products with other brands?",              content: "Absolutely. Our products are designed to work seamlessly with other skincare lines. However, we recommend avoiding mixing too many active ingredients at once to prevent irritation. Start with one Luminé product and gradually introduce others."
            },
            {
              id: "5",              title: "What is your return policy?",              content: "We offer a 60-day satisfaction guarantee. If you're not completely happy with your purchase, simply return the product for a full refund—no questions asked. We want you to feel confident in your skincare investment."
            },
            {
              id: "6",              title: "Are your ingredients truly organic?",              content: "Yes, all Luminé products are made with 100% organic and natural botanicals. We source from certified organic farms and partner with ethical suppliers worldwide. Every ingredient is carefully selected for both efficacy and purity."
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/beautiful-woman-applying-moisturizer-her-face-bathroom_637285-3386.jpg"
          imageAlt="Skincare routine"
          mediaAnimation="slide-up"
          mediaPosition="left"
          faqsAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          tagAnimation="blur-reveal"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Join the Luminé Community"
          description="Subscribe to receive exclusive skincare tips, early access to new products, and special offers tailored to your skin type."
          tagIcon={Mail}
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to receive personalized skincare recommendations."
          tagAnimation="blur-reveal"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Luminé"
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Products", href: "#products" },
                { label: "Serums", href: "#" },
                { label: "Moisturizers", href: "#" },
                { label: "Sun Care", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Story", href: "#" },
                { label: "Ingredients", href: "#" },
                { label: "Sustainability", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "#contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Returns", href: "#" },
                { label: "Shipping", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Luminé Skincare. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
