"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, Zap } 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: "Benefits", id: "benefits" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Shop Now", href: "products" }}
          brandName="Radiant Skin"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Radiant Skin"
          description="Discover the power of nature-inspired skincare. Our premium formulations harness the finest natural ingredients to reveal your most radiant, glowing complexion."
          buttons={[
            { text: "Explore Products", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="http://img.b2bpic.net/free-photo/indoor-shot-pleased-curly-haired-woman-puts-green-hydrogel-patches-eyes-rejuvenate-skin-smiles-tenderly-poses-bare-shoulders-isolated-beige-studio-background-beauty-concept_273609-59328.jpg"
          imageAlt="Premium skincare products and natural ingredients"
          frameStyle="card"
          mediaAnimation="slide-up"
          buttonAnimation="slide-up"
          ariaLabel="Skincare brand hero section"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Pure beauty starts with" },
            { type: "image", src: "http://img.b2bpic.net/free-photo/indoor-shot-pleased-curly-haired-woman-puts-green-hydrogel-patches-eyes-rejuvenate-skin-smiles-tenderly-poses-bare-shoulders-isolated-beige-studio-background-beauty-concept_273609-59328.jpg", alt: "Natural skincare" },
            { type: "text", content: "nature's finest ingredients" }
          ]}
          buttons={[
            { text: "Discover Our Story", href: "#contact" }
          ]}
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Our Signature Collection"
          description="Carefully crafted skincare essentials designed to transform your daily routine into a moment of luxury and self-care."
          products={[
            {
              id: "1",              name: "Luminous Serum",              price: "$58",              imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-serum-bottle-hand-orange-background_185193-162127.jpg",              imageAlt: "Luminous Serum bottle"
            },
            {
              id: "2",              name: "Deep Moisture Cream",              price: "$72",              imageSrc: "http://img.b2bpic.net/free-photo/woman-caring-her-skin-standing-near-mirror-bathroom_1301-3694.jpg",              imageAlt: "Deep Moisture Cream jar"
            },
            {
              id: "3",              name: "Pure Radiance Cleanser",              price: "$42",              imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-spa-essentials-background-home-decor_53876-128208.jpg",              imageAlt: "Pure Radiance Cleanser"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="benefits" data-section="benefits">
        <FeatureBento
          title="Why Choose Radiant Skin"
          description="Experience the difference that premium natural ingredients and scientific innovation can make in your skincare journey."
          features={[
            {
              title: "Natural Ingredients",              description: "Sourced from sustainable farms worldwide",              bentoComponent: "globe"
            },
            {
              title: "Clinically Proven",              description: "Dermatologist tested and approved",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Cruelty-Free",              description: "100% ethical and vegan formulations",              bentoComponent: "marquee",              centerIcon: Leaf,
              variant: "text",              texts: ["No animal testing", "100% vegan", "Eco-friendly packaging", "Sustainable sourcing"]
            },
            {
              title: "Results You'll See",              description: "Visible improvement in 4 weeks",              bentoComponent: "line-chart"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Radiant Skin has completely transformed my complexion. After just three weeks, my skin feels more hydrated, looks brighter, and has that natural glow I've been searching for. I'm obsessed and will never use anything else."
          rating={5}
          author="Emma Richardson, Wellness Coach"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "Emma Richardson" },
            { 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: "Jessica Lee" },
            { src: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg", alt: "Amanda Grace" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about our products, ingredients, and skincare philosophy."
          faqs={[
            {
              id: "1",              title: "How long does it take to see results?",              content: "Most customers notice visible improvements in skin texture and hydration within 2-3 weeks. For more significant results like reduced fine lines and improved firmness, we recommend 8-12 weeks of consistent use. Every skin type is different, so individual results may vary."
            },
            {
              id: "2",              title: "Are your products suitable for sensitive skin?",              content: "Yes! All our formulations are hypoallergenic and dermatologist-tested. However, if you have very sensitive skin or specific allergies, we recommend reviewing our ingredient list or consulting with a dermatologist before use. We also offer a patch test recommendation on our website."
            },
            {
              id: "3",              title: "What makes your ingredients natural?",              content: "We source our botanical extracts, oils, and plant-based compounds from certified organic farms. Our formulations contain no synthetic chemicals, parabens, sulfates, or artificial fragrances. We believe that what you put on your skin should be as pure as what you put in your body."
            },
            {
              id: "4",              title: "Can I use multiple products together?",              content: "Absolutely! We recommend a simple routine: cleanse, apply serum, and moisturize. Our products are designed to work synergistically. For best results, apply products in order from lightest to thickest consistency, allowing each to absorb before applying the next."
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/beautiful-woman-doing-self-care-treatment-home_23-2148974362.jpg"
          imageAlt="Natural skincare routine"
          mediaAnimation="slide-up"
          mediaPosition="left"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Stay Connected"
          title="Join Our Beauty Community"
          description="Subscribe to receive exclusive skincare tips, new product launches, and special offers delivered straight to your inbox."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime. We send skincare tips and product updates weekly."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Radiant Skin"
          columns={[
            {
              title: "Shop",              items: [
                { label: "Products", href: "#products" },
                { label: "Bundles", href: "#products" },
                { label: "Best Sellers", href: "#products" }
              ]
            },
            {
              title: "About",              items: [
                { label: "Our Story", href: "#about" },
                { label: "Ingredients", href: "#benefits" },
                { label: "Sustainability", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQs", href: "#faq" },
                { label: "Contact Us", href: "#contact" },
                { label: "Shipping & Returns", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Radiant Skin. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
