"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 { Award, CheckCircle, Globe, HelpCircle, Heart, Leaf, Mail, Shield, Sparkles, Star, 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
          brandName="Luminous Skin"
          navItems={[
            { name: "About", id: "about" },
            { name: "Products", id: "products" },
            { name: "Benefits", id: "benefits" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Shop Now", href: "products" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Luminous Skin"
          description="Discover radiant, healthy skin with our premium skincare collection. Crafted with natural ingredients and dermatologist-backed science for visible results."
          buttons={[
            { text: "Explore Products", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://img.b2bpic.net/free-photo/young-woman-close-up-holding-moisturizer-demonstrates_651396-1781.jpg"
          imageAlt="Luxury skincare products and natural ingredients"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Pure ingredients meet" },
            { type: "image", src: "https://img.b2bpic.net/free-photo/minimalistic-science-banner-with-sample_23-2149431127.jpg", alt: "Natural skincare ingredients" },
            { type: "text", content: "scientific precision" }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Our Story", href: "about" },
            { text: "Shop Collection", href: "products" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Our Signature Collection"
          description="Handcrafted formulas featuring plant-based actives and proven skincare science for transformative results."
          tag="Best Sellers"
          tagIcon={Sparkles}
          products={[
            {
              id: "1",              name: "Radiant Renewal Serum",              price: "$68",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-plant-selfcare-products_23-2149249586.jpg",              imageAlt: "Radiant Renewal Serum bottle"
            },
            {
              id: "2",              name: "Hydration Luxe Cream",              price: "$85",              imageSrc: "https://img.b2bpic.net/free-photo/selfcare-products-with-flower-arrangement_23-2149249543.jpg",              imageAlt: "Hydration Luxe Cream jar"
            },
            {
              id: "3",              name: "Gentle Purity Cleanser",              price: "$52",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-skin-regeneration-products_23-2151242151.jpg",              imageAlt: "Gentle Purity Cleanser bottle"
            }
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="benefits" data-section="benefits">
        <FeatureBento
          title="Why Choose Luminous Skin"
          description="Experience the difference with clinically-proven ingredients and sustainable beauty practices."
          tag="Our Expertise"
          tagIcon={Award}
          features={[
            {
              title: "Natural Ingredients",              description: "Sourced from organic farms, our botanical extracts are gentle yet powerful for all skin types.",              bentoComponent: "globe"
            },
            {
              title: "Dermatologist Tested",              description: "Every formula is developed with dermatologists to ensure safety and efficacy.",              bentoComponent: "icon-info-cards",              items: [
                { icon: Shield, label: "Hypoallergenic", value: "100%" },
                { icon: CheckCircle, label: "Tested", value: "Clinical" },
                { icon: Sparkles, label: "Results", value: "Visible" }
              ]
            },
            {
              title: "Sustainable Beauty",              description: "Eco-friendly packaging and ethical sourcing practices for conscious beauty lovers.",              bentoComponent: "orbiting-icons",              centerIcon: Leaf,
              items: [
                { icon: Zap, ring: 1 },
                { icon: Heart, ring: 2 },
                { icon: Star, ring: 3 }
              ]
            },
            {
              title: "Visible Results",              description: "See improvements in skin texture, hydration, and radiance within two weeks of consistent use.",              bentoComponent: "line-chart"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Luminous Skin has completely transformed my skincare routine. After just three weeks, my skin feels incredibly soft and hydrated. The natural ingredients work beautifully without any irritation. I've recommended it to all my friends!"
          rating={5}
          author="Sarah Mitchell, Beauty Influencer"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg", alt: "Sarah Mitchell" },
            { src: "https://img.b2bpic.net/free-photo/woman-with-big-smile-her-face-after-big-shopping_329181-18748.jpg", alt: "Jessica Chen" },
            { src: "https://img.b2bpic.net/free-photo/close-up-woman-talking-phone_23-2149002414.jpg", alt: "Emily Rodriguez" },
            { src: "https://img.b2bpic.net/free-photo/portrait-beautiful-woman-with-shopping-bags_329181-18722.jpg", alt: "Lisa Thompson" },
            { src: "https://img.b2bpic.net/free-photo/smiley-woman-posing-her-home_23-2148708980.jpg", alt: "Amanda Davis" },
            { src: "https://img.b2bpic.net/free-photo/portrait-business-woman-smiling_23-2148352574.jpg", alt: "Rachel Brown" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Common Skincare Questions"
          description="Find answers to frequently asked questions about our products, ingredients, and skincare routines."
          tag="Support"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "How long does it take to see results?",              content: "Most customers notice improvements in skin texture and hydration within 2-3 weeks of consistent daily use. For more significant results like reduced fine lines and improved firmness, allow 6-8 weeks."
            },
            {
              id: "2",              title: "Is this suitable for sensitive skin?",              content: "Yes! Our products are dermatologist-tested and hypoallergenic. We use only gentle, natural ingredients that are less likely to cause irritation. If you have specific sensitivities, please review the ingredient list or contact our support team."
            },
            {
              id: "3",              title: "Can I use multiple products together?",              content: "Absolutely! Our skincare products are formulated to work synergistically. Follow this routine: cleanser → serum → moisturizer. Apply each product to clean skin and allow time for absorption between steps."
            },
            {
              id: "4",              title: "Are your products cruelty-free?",              content: "Yes, all Luminous Skin products are 100% cruelty-free and not tested on animals. We partner with suppliers who share our commitment to ethical and sustainable practices."
            },
            {
              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, we'll provide a full refund—no questions asked. We want you to love your skin!"
            },
            {
              id: "6",              title: "Do you ship internationally?",              content: "Yes! We ship to over 50 countries worldwide. International orders typically arrive within 7-14 business days. Shipping costs are calculated at checkout based on your location."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/high-angle-cream-container-plant_23-2148899420.jpg"
          imageAlt="Skincare routine and beauty tips"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          mediaPosition="left"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          tagIcon={Mail}
          title="Glow with Luminous Updates"
          description="Subscribe to receive skincare tips, exclusive product launches, and special offers directly to your inbox."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to our Terms and Privacy Policy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Luminous Skin"
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Products", href: "/products" },
                { label: "Best Sellers", href: "/best-sellers" },
                { label: "New Arrivals", href: "/new" },
                { label: "Bundles", href: "/bundles" }
              ]
            },
            {
              title: "Learn",              items: [
                { label: "Skincare Guide", href: "/guide" },
                { label: "Ingredient Benefits", href: "/ingredients" },
                { label: "Reviews", href: "/reviews" },
                { label: "Blog", href: "/blog" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Contact", href: "/contact" },
                { label: "Sustainability", href: "/sustainability" },
                { label: "Careers", href: "/careers" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Shipping Info", href: "/shipping" },
                { label: "Returns", href: "/returns" }
              ]
            }
          ]}
          copyrightText="© 2024 Luminous Skin | Premium Natural Skincare"
        />
      </div>
    </ThemeProvider>
  );
}