"use client";

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 { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, HelpCircle, Heart, Mail, Sparkles } 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
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Products", id: "products" },
            { name: "Features", id: "features" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Shop Now", href: "products" }}
          brandName="Radiance Skincare"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Radiance"
          description="Visibly healthier skin in 3 weeks. Imagine waking up to a complexion that feels renewed, looks radiant, and radiates confidence. Our meticulously formulated skincare collection combines pure botanical extracts with breakthrough scientific research to deliver the dramatic skin transformation you've been seeking."
          buttons={[
            { text: "Explore Collection", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="http://img.b2bpic.net/free-photo/young-woman-towel-ready-spa_1098-3103.jpg"
          imageAlt="Radiance skincare collection"
          frameStyle="card"
          mediaAnimation="slide-up"
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Crafted with" },
            { type: "image", src: "http://img.b2bpic.net/free-photo/spoons-full-spices-with-dry-leaves_23-2148211168.jpg", alt: "Natural ingredients" },
            { type: "text", content: "pure intention" }
          ]}
          buttons={[{ text: "Our Story", href: "#" }]}
          useInvertedBackground={true}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Our Signature Collection"
          description="Experience the transformation with our carefully curated skincare essentials. Each product is formulated to deliver visible results."
          tag="Premium Quality"
          tagIcon={Sparkles}
          products={[
            {
              id: "1",              name: "Hydrating Serum",              price: "$65",              imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-serum-bottle-hand-orange-background_185193-162127.jpg",              imageAlt: "Hydrating serum bottle"
            },
            {
              id: "2",              name: "Nourishing Cream",              price: "$55",              imageSrc: "http://img.b2bpic.net/free-photo/luxury-cream-jar-silk-fabric_9975-134546.jpg",              imageAlt: "Nourishing cream jar"
            },
            {
              id: "3",              name: "Gentle Cleanser",              price: "$45",              imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-spa-essentials-background-home-decor_53876-128208.jpg",              imageAlt: "Gentle cleanser bottle"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Why Choose Radiance"
          description="Discover the benefits that make our skincare collection stand apart from the rest."
          tag="Premium Benefits"
          tagIcon={Award}
          features={[
            {
              title: "Natural Ingredients",              description: "Sourced from the finest botanical gardens worldwide",              bentoComponent: "reveal-icon",              icon: Heart
            },
            {
              title: "Scientific Innovation",              description: "Backed by dermatological research and testing",              bentoComponent: "reveal-icon",              icon: Award
            },
            {
              title: "Visible Results",              description: "See improvements in skin texture and radiance",              bentoComponent: "reveal-icon",              icon: Sparkles
            },
            {
              title: "Cruelty-Free",              description: "100% ethical and sustainable practices",              bentoComponent: "reveal-icon",              icon: Heart
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          carouselMode="buttons"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Radiance has completely transformed my skincare routine. My skin feels more hydrated, radiant, and youthful than ever before. I'm obsessed!"
          rating={5}
          author="Emma Richardson, Beauty Influencer"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smil_1258-118692.jpg", alt: "Emma Richardson" },
            { src: "http://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smil_1258-118692.jpg", alt: "Customer testimonial" },
            { src: "http://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smil_1258-118692.jpg", alt: "Customer testimonial" },
            { src: "http://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smil_1258-118692.jpg", alt: "Customer testimonial" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to your most common skincare questions."
          tag="Support"
          tagIcon={HelpCircle}
          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 of consistent use. Full results typically appear after 6-8 weeks."
            },
            {
              id: "2",              title: "Are your products suitable for sensitive skin?",              content: "Yes! All our products are dermatologist-tested and formulated to be gentle on sensitive skin. We avoid harsh chemicals and common irritants."
            },
            {
              id: "3",              title: "Can I use all products together?",              content: "Absolutely. Our products are designed to work synergistically. We recommend: cleanser, serum, then cream for best results."
            },
            {
              id: "4",              title: "What is your return policy?",              content: "We offer a 30-day money-back guarantee. If you're not completely satisfied, simply return your products for a full refund."
            },
            {
              id: "5",              title: "Are your products cruelty-free?",              content: "Yes! We are 100% cruelty-free, vegan, and committed to ethical, sustainable practices."
            },
            {
              id: "6",              title: "Do you ship internationally?",              content: "Yes, we ship to over 50 countries worldwide. Shipping times vary by location, typically 5-10 business days."
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/facial-care_1098-12961.jpg"
          imageAlt="Skincare routine"
          mediaPosition="left"
          mediaAnimation="blur-reveal"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Join Our Beauty Community"
          description="Subscribe to receive exclusive skincare tips, special offers, and early access to new product launches."
          tagIcon={Mail}
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
        />
      </div>

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