"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Mail, Leaf, Droplet, Sprout, Wind, ArrowRight, Sparkles, ShieldCheck, Truck } from "lucide-react";

export default function SkincareTemplatePage() {
    return (
        <ThemeProvider
            defaultButtonVariant="hover-bubble"
            defaultTextAnimation="reveal-blur"
            borderRadius="rounded"
            contentWidth="small"
            sizing="largeSmallSizeLargeTitles"
            background="fluid"
            cardStyle="glass-depth"
            primaryButtonStyle="primary-glow"
            secondaryButtonStyle="glass"
            headingFontWeight="extrabold"
        >
            <div id="nav" data-section="nav">
                <NavbarStyleCentered
                    brandName="Luminé Skincare"
                    navItems={[
                        { name: "Products", id: "products" },
                        { name: "About", id: "about" },
                        { name: "Benefits", id: "benefits" },
                        { name: "Reviews", id: "reviews" },
                        { name: "Contact", id: "contact" }
                    ]}
                    button={{ text: "Shop Now", href: "#products" }}
                />
            </div>

            <div id="hero" data-section="hero">
                <HeroCarouselLogo
                    logoText="Luminé"
                    description="Experience the next generation of botanical beauty. Curated formulas that transform your skin naturally."
                    slides={[
                        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/hero.webp", imageAlt: "Natural botanical extract" },
                        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp", imageAlt: "Product showcase" }
                    ]}
                    buttons={[{ text: "Discover Range", href: "#products" }]}
                />
            </div>

            <div id="about" data-section="about">
                <MediaAbout
                    title="Pure Skincare, Defined"
                    description="Luminé brings together traditional plant-based rituals with modern clinical research to provide holistic skin solutions."
                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image4.webp"
                    useInvertedBackground={true}
                />
            </div>

            <div id="products" data-section="products">
                <ProductCardThree
                    title="Curated Essentials"
                    description="Our collection of high-performance skincare."
                    gridVariant="asymmetric-60-wide-40-narrow"
                    animationType="slide-up"
                    textboxLayout="default"
                    useInvertedBackground={false}
                    products={[
                        { id: "1", name: "Hydrating Moisturizer", price: "$68", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp", initialQuantity: 1 },
                        { id: "2", name: "Radiance Serum", price: "$85", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image3.webp", initialQuantity: 1 },
                        { id: "3", name: "Purifying Face Mask", price: "$52", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image1.webp", initialQuantity: 1 }
                    ]}
                />
            </div>

            <div id="benefits" data-section="benefits">
                <FeatureCardTwentySix
                    title="The Luminé Difference"
                    description="Engineered for efficacy, inspired by nature."
                    useInvertedBackground={true}
                    textboxLayout="default"
                    features={[
                        { title: "Ethical Sourcing", description: "Certified cruelty-free ingredients.", buttonIcon: Leaf, buttonHref: "#" },
                        { title: "Dermatologist Approved", description: "Clinical testing at every stage.", buttonIcon: ShieldCheck, buttonHref: "#" },
                        { title: "Global Logistics", description: "Delivered to your door worldwide.", buttonIcon: Truck, buttonHref: "#" },
                        { title: "Active Botanicals", description: "Concentrated plant extracts for results.", buttonIcon: Sprout, buttonHref: "#" }
                    ]}
                />
            </div>

            <div id="reviews" data-section="reviews">
                <TestimonialCardFifteen
                    testimonial="The best change I ever made to my routine. My skin is glowing again!"
                    rating={5}
                    author="Elena R., Verified Customer"
                    avatars={[{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif", alt: "Customer" }]}
                    ratingAnimation="slide-up"
                    avatarsAnimation="slide-up"
                    useInvertedBackground={false}
                />
            </div>

            <div id="faq" data-section="faq">
                <FaqSplitText
                    sideTitle="Need Assistance?"
                    sideDescription="Our experts are here to help you build the perfect skincare routine."
                    faqs={[
                        { id: "1", title: "How do I choose the right product?", content: "Try our quick skin-type questionnaire for personalized recommendations." },
                        { id: "2", title: "Do you ship internationally?", content: "Yes, we ship to over 150+ countries worldwide." }
                    ]}
                    faqsAnimation="slide-up"
                    useInvertedBackground={true}
                />
            </div>

            <div id="contact" data-section="contact">
                <ContactSplitForm
                    title="Join the Circle"
                    description="Stay updated on new releases and exclusive skin tips."
                    useInvertedBackground={false}
                    inputs={[
                        { name: "name", type: "text", placeholder: "Full Name" },
                        { name: "email", type: "email", placeholder: "Email Address" }
                    ]}
                    textarea={{ name: "message", placeholder: "Questions about your routine?" }}
                />
            </div>

            <div id="footer" data-section="footer">
                <FooterSimple
                    columns={[
                        { title: "Shop", items: [{ label: "Collection", href: "#products" }, { label: "Best Sellers", href: "#products" }] },
                        { title: "Help", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
                    ]}
                    bottomLeftText="© 2025 Luminé"
                    bottomRightText="Privacy Policy"
                />
            </div>
        </ThemeProvider>
    );
}