"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { CheckCircle, Sparkles } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="inset"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Glow"
          navItems={[
            { name: "Products", id: "products" },
            { name: "About", id: "about" },
            { name: "Benefits", id: "features" },
            { name: "Stories", id: "testimonials" }
          ]}
          button={{ text: "Shop Now", href: "#products" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Glow"
          description="Pure skincare crafted with intention. Naturally radiant skin starts with clean ingredients and thoughtful science."
          buttons={[
            { text: "Explore Collection", href: "#products" },
            { text: "Learn More", href: "#about" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          imageSrc="http://img.b2bpic.net/free-photo/high-angle-plant-selfcare-products_23-2149249586.jpg"
          imageAlt="Premium skincare products"
          mediaAnimation="opacity"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Skincare Reimagined"
          description={[
            "We believe great skin isn't complicated. Our science-backed formulas combine nature's most potent ingredients with dermatological expertise to create products that actually work.",            "Every product is thoughtfully crafted, carefully tested, and designed to deliver visible results without compromising on ingredient transparency or environmental responsibility."
          ]}
          buttons={[
            { text: "Our Story", href: "#about" }
          ]}
          buttonAnimation="slide-up"
          showBorder={false}
          useInvertedBackground={false}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Our Collection"
          description="Expertly formulated skincare essentials for every skin type"
          tag="Best Sellers"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              brand: "Glow",              name: "Radiant Serum",              price: "$48.00",              rating: 5,
              reviewCount: "328",              imageSrc: "http://img.b2bpic.net/free-photo/liquid-facial-skin-care-product-white-background-isolated_169016-26671.jpg",              imageAlt: "Radiant Serum bottle"
            },
            {
              id: "2",              brand: "Glow",              name: "Renewal Cream",              price: "$62.00",              rating: 5,
              reviewCount: "412",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-hand-holding-face-cream-container_23-2148213310.jpg",              imageAlt: "Renewal Cream jar"
            },
            {
              id: "3",              brand: "Glow",              name: "Gentle Cleanser",              price: "$35.00",              rating: 5,
              reviewCount: "267",              imageSrc: "http://img.b2bpic.net/free-photo/macadamia-body-lotion-skin-cream_1150-42811.jpg",              imageAlt: "Gentle Cleanser"
            }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree
          title="Why Choose Glow"
          description="Naturally inspired, scientifically proven skincare"
          tag="Benefits"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          features={[
            {
              id: "01",              title: "Clean Ingredients",              description: "No harmful chemicals, parabens, or synthetic additives. Just pure, natural goodness.",              imageSrc: "http://img.b2bpic.net/free-photo/spa-beauty-treatment-copy-space_23-2148677964.jpg",              imageAlt: "Clean ingredients"
            },
            {
              id: "02",              title: "Dermatologist Tested",              description: "Developed with dermatologists and tested on sensitive skin for safety and efficacy.",              imageSrc: "http://img.b2bpic.net/free-photo/scientist-examining-substance-petri-dish-while-conducting-virus-research_181624-1110.jpg",              imageAlt: "Dermatologist testing"
            },
            {
              id: "03",              title: "Visible Results",              description: "Clinically proven to reduce fine lines, improve texture, and enhance radiance within weeks.",              imageSrc: "http://img.b2bpic.net/free-photo/happy-serene-young-woman-with-beautiful-olive-skin-curly-hair-ideal-skin-brown-eyes-studio_633478-1098.jpg",              imageAlt: "Skincare results"
            },
            {
              id: "04",              title: "Eco-Conscious",              description: "Sustainably sourced ingredients and recyclable packaging for a better planet.",              imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-plant-save-environment-campaign_53876-129571.jpg",              imageAlt: "Eco-friendly packaging"
            }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Glow has completely transformed my skincare routine. My skin has never looked or felt better. The results are noticeable within just two weeks, and I love knowing exactly what I'm putting on my face."
          rating={5}
          author="Maya Rodriguez, Skincare Enthusiast"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Maya Rodriguez" },
            { src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer" },
            { src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer" },
            { src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer" },
            { src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer" },
            { src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "Customer" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Common Questions"
          description="Everything you need to know about Glow skincare"
          tag="FAQ"
          tagAnimation="slide-up"
          textboxLayout="default"
          mediaAnimation="opacity"
          faqsAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/caucasian-blonde-girl-applies-anti-aging-cream-skin-aging-her-mother-s-face-indoors-concept-natural-cosmetics-wrinkle-smoothing_197531-31469.jpg"
          imageAlt="Skincare consultation"
          mediaPosition="left"
          faqs={[
            {
              id: "1",              title: "Are Glow products suitable for sensitive skin?",              content: "Yes, all Glow products are dermatologist-tested and formulated without harsh chemicals, making them ideal for sensitive skin. We recommend starting with our Gentle Cleanser and Renewal Cream."
            },
            {
              id: "2",              title: "How long before I see results?",              content: "Most customers notice visible improvements within 2-3 weeks of consistent use. For best results, use our complete routine morning and evening."
            },
            {
              id: "3",              title: "Can I use these products with other skincare brands?",              content: "Absolutely! Glow products work well with other quality skincare. However, we recommend our full collection for optimal results and to avoid ingredient conflicts."
            },
            {
              id: "4",              title: "Are your products cruelty-free and vegan?",              content: "Yes, all Glow products are cruelty-free and formulated without animal-derived ingredients, though some products may contain honey or beeswax."
            }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactCTA
          tag="Ready to Glow?"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          title="Start Your Skincare Journey Today"
          description="Join thousands of people experiencing radiant, healthy skin with Glow. Get 15% off your first order with code GLOW15."
          buttons={[
            { text: "Shop Collection", href: "#products" },
            { text: "Subscribe & Save", href: "#products" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/beauty-vlogger-preparing-video-blog_23-2148916315.jpg"
          imageAlt="Skincare lifestyle"
          logoText="Glow"
          copyrightText="© 2025 Glow Skincare. All rights reserved."
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Products", href: "#products" },
                { label: "Serums", href: "#products" },
                { label: "Creams", href: "#products" },
                { label: "Bundles", href: "#products" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact-cta" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "#faq" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" },
                { label: "Privacy Policy", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
