"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 { Leaf, Globe, Heart, Zap, Shield, Star, Mail, HelpCircle, 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: "Products", id: "products" },
            { name: "About", id: "about" },
            { name: "Blog", id: "blog" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Shop Now", href: "products" }}
          brandName="Radiance"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Radiance"
          description="Discover the power of nature's most luxurious skincare ingredients. Transform your skin with our premium, science-backed formulations crafted for radiant beauty."
          buttons={[
            { text: "Explore Products", href: "products" },
            { text: "Learn Our Story", href: "about" }
          ]}
          background={{ variant: "aurora" }}
          imageSrc="http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238252.jpg"
          imageAlt="Botanical skincare ingredients"
          mediaAnimation="slide-up"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Clean beauty meets" },
            { type: "image", src: "http://img.b2bpic.net/free-photo/close-up-aromatic-purple-tea-buds_23-2148349663.jpg", alt: "Rose ingredient" },
            { type: "text", content: "scientific innovation" }
          ]}
          buttons={[
            { text: "Our Ingredients", href: "#features" }
          ]}
          useInvertedBackground={true}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Best-Selling Collections"
          description="Handcrafted formulations featuring premium botanical extracts and proven actives for visible results."
          tag="New Arrivals"
          tagIcon={Sparkles}
          products={[
            {
              id: "1",              name: "Luminous Serum",              price: "$68",              imageSrc: "http://img.b2bpic.net/free-photo/clear-glass-dropper-bottle-with-white-label-silver-cap_9975-133614.jpg",              imageAlt: "Luminous Serum bottle"
            },
            {
              id: "2",              name: "Hydra Moisturizer",              price: "$54",              imageSrc: "http://img.b2bpic.net/free-photo/luxury-cream-jar-silk-fabric_9975-134546.jpg",              imageAlt: "Hydra Moisturizer jar"
            },
            {
              id: "3",              name: "SPF Guardian",              price: "$46",              imageSrc: "http://img.b2bpic.net/free-photo/sunhat-sunscreen-bottle-rake-shovel-toy-against-colored-backdrop_23-2148154013.jpg",              imageAlt: "SPF Guardian sunscreen"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          tagAnimation="slide-up"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Why Choose Radiance"
          description="Our commitment to quality, sustainability, and visible results sets us apart in the skincare industry."
          features={[
            {
              title: "Natural Ingredients",              description: "100% botanical extracts sourced from sustainable farms worldwide.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Leaf, label: "Organic", value: "100%" },
                { icon: Globe, label: "Sustainable", value: "Certified" },
                { icon: Heart, label: "Cruelty-Free", value: "Verified" }
              ]
            },
            {
              title: "Visible Results",              description: "Dermatologist-tested formulas that deliver transformative skincare benefits.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Global Impact",              description: "Our skincare reaches beauty enthusiasts in over 50 countries worldwide.",              bentoComponent: "globe"
            },
            {
              title: "Smart Skincare",              description: "AI-powered recommendations tailored to your unique skin type and concerns.",              bentoComponent: "orbiting-icons",              centerIcon: Sparkles,
              items: [
                { icon: Zap, ring: 1 },
                { icon: Shield, ring: 2 },
                { icon: Star, ring: 3 }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="split"
          useInvertedBackground={true}
          tagAnimation="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Radiance transformed my skin completely. After just three weeks, my complexion is noticeably brighter and more radiant. I absolutely love these products and recommend them to everyone!"
          rating={5}
          author="Sophie Chen, Beauty Influencer"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "Sophie Chen" },
            { src: "http://img.b2bpic.net/free-photo/woman-with-blond-short-hair-tanned-smiling-cute-gazing-camera-with-friendly_176420-44610.jpg", alt: "Customer review" },
            { src: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "Customer review" },
            { src: "http://img.b2bpic.net/free-photo/close-up-beautiful-woman-posing_23-2148677662.jpg", alt: "Customer review" }
          ]}
          useInvertedBackground={false}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Skincare Questions Answered"
          description="Everything you need to know about our products, ingredients, and skincare routines."
          tag="Help"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "How often should I use these products?",              content: "For best results, use our serum twice daily (morning and night) and the moisturizer once daily. SPF should be applied daily in the morning, every 2 hours if outdoors."
            },
            {
              id: "2",              title: "Are your products suitable for sensitive skin?",              content: "Yes! All our formulations are hypoallergenic and dermatologist-tested. We recommend performing a patch test first if you have extremely sensitive skin."
            },
            {
              id: "3",              title: "What is your return policy?",              content: "We offer a 60-day money-back guarantee on all products. If you are not satisfied, simply contact our customer service team for a full refund."
            },
            {
              id: "4",              title: "Do you offer international shipping?",              content: "We ship to over 50 countries worldwide! International orders typically arrive within 7-14 business days. Shipping costs vary by location."
            },
            {
              id: "5",              title: "Can I use multiple products together?",              content: "Absolutely! Our products are designed to work together. We recommend the routine: cleanse, serum, moisturize, and SPF during the day."
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/view-beautiful-black-woman-watching-laptop_197531-33099.jpg"
          imageAlt="Skincare routine setup"
          mediaPosition="left"
          mediaAnimation="slide-up"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          tagAnimation="slide-up"
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          tagIcon={Mail}
          title="Glow Insider Benefits"
          description="Join our community and receive exclusive skincare tips, early product access, and special offers delivered to your inbox."
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime. Check our Privacy Policy for details."
          tagAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Radiance"
          columns={[
            {
              title: "Product",              items: [
                { label: "Shop All", href: "#products" },
                { label: "New Arrivals", href: "#products" },
                { label: "Best Sellers", href: "#products" },
                { label: "Gift Sets", href: "#products" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Story", href: "#about" },
                { label: "Sustainability", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "#contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Returns", href: "#" },
                { label: "Track Order", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Pinterest", href: "https://pinterest.com" },
                { label: "TikTok", href: "https://tiktok.com" }
              ]
            }
          ]}
          copyrightText="© 2025 Radiance Skincare. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
