"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, Heart, Flower2, Zap, Star, Mail, Award } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLargeSizeMediumTitles"
      background="fluid"
      cardStyle="gradient-mesh"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="LUXE Skin"
          navItems={[
            { name: "Products", id: "products" },
            { name: "About", id: "about" },
            { name: "Benefits", id: "benefits" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Radiant Skin Begins Here"
          description="Discover our award-winning skincare collection designed to transform your complexion. Premium ingredients, luxurious textures, and visible results in just weeks."
          tag="Premium Skincare"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          imageSrc="http://img.b2bpic.net/free-photo/high-angle-plant-selfcare-products_23-2149249586.jpg"
          imageAlt="Luxury skincare products collection"
          buttons={[
            { text: "Shop Now", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Our Story"
          tagIcon={Heart}
          tagAnimation="slide-up"
          title="Crafted with passion for your skin's transformation"
          description="Founded by dermatologists"
          subdescription="LUXE Skin Research Lab"
          icon={Flower2}
          imageSrc="http://img.b2bpic.net/free-photo/young-caucasian-woman-is-sitting-bed-looking-mirror-skin-care-products-nearby_1268-21221.jpg"
          imageAlt="Skincare ritual and beauty routine"
          mediaAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="benefits" data-section="benefits">
        <FeatureCardNine
          title="Experience Skincare Innovation"
          description="Each product is scientifically formulated to deliver visible results"
          tag="Advanced Formulations"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Deep Hydration",              description: "Advanced moisture-lock technology penetrates 5 layers deep for plump, dewy skin that lasts all day.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/beauty-salon-booking-app_23-2148561343.jpg?_wi=1" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/ui-design-concept-mobile-phone_1284-45230.jpg?_wi=1" }
            },
            {
              id: 2,
              title: "Anti-Aging Magic",              description: "Potent peptide complex smooths fine lines and boosts collagen production for firmer, younger-looking skin.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/beauty-salon-booking-app_23-2148561343.jpg?_wi=2" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/ui-design-concept-mobile-phone_1284-45230.jpg?_wi=2" }
            },
            {
              id: 3,
              title: "Radiance Restoration",              description: "Vitamin C-enriched serum brightens dull complexion and fades dark spots for a luminous, even-toned glow.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-vector/beauty-salon-booking-app_23-2148561343.jpg?_wi=3" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/ui-design-concept-mobile-phone_1284-45230.jpg?_wi=3" }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          buttons={[
            { text: "Explore Collection", href: "products" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Bestselling Products"
          description="Handpicked favorites loved by skincare enthusiasts worldwide"
          tag="Best Sellers"
          tagIcon={Star}
          tagAnimation="slide-up"
          products={[
            {
              id: "1",              name: "Luminous Vitamin C Serum",              price: "$68.00",              imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottles-stones-light-background_185193-162140.jpg",              imageAlt: "Vitamin C Serum bottle"
            },
            {
              id: "2",              name: "Hydra-Silk Moisturizer",              price: "$82.00",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-hand-holding-face-cream-container_23-2148213310.jpg",              imageAlt: "Hydrating face cream jar"
            },
            {
              id: "3",              name: "Gentle Purifying Cleanser",              price: "$52.00",              imageSrc: "http://img.b2bpic.net/free-photo/close-beauty-portrait-topless-woman-with-perfect-skin-natural-makeup-removing-cotton-pads-white-backgroundx9_343596-8002.jpg",              imageAlt: "Facial cleanser bottle"
            },
            {
              id: "4",              name: "Revitalizing Sheet Mask",              price: "$35.00",              imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-facial-mask-looking-camera-white-background-cosmetic-procedure-beauty-spa_1258-104475.jpg",              imageAlt: "Premium sheet mask pack"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          buttons={[
            { text: "View All Products", href: "#" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Loved by Beauty Enthusiasts"
          description="Real results from real customers who transformed their skin"
          tag="Customer Reviews"
          tagIcon={Heart}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sofia Martinez",              handle: "@sofiaglow",              testimonial: "My skin has never looked better! The serum completely transformed my complexion in just 4 weeks. I'm obsessed!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-brunette-female-blue-shirt-grey-background_613910-7970.jpg?_wi=1",              imageAlt: "Sofia Martinez"
            },
            {
              id: "2",              name: "Emma Thompson",              handle: "@emmbeauty",              testimonial: "Finally found a skincare line that actually delivers. No irritation, just pure radiance. Highly recommend!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-brunette-female-blue-shirt-grey-background_613910-7970.jpg?_wi=2",              imageAlt: "Emma Thompson"
            },
            {
              id: "3",              name: "Jessica Lee",              handle: "@jessicaskin",              testimonial: "The moisturizer is absolutely divine. My skin feels like silk and looks incredibly plump and hydrated.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg",              imageAlt: "Jessica Lee"
            },
            {
              id: "4",              name: "Aurora Chen",              handle: "@auroraglow",              testimonial: "Worth every penny! My sensitive skin finally has a routine that doesn't cause breakouts. Game changer!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-beautiful-grey-dress_1303-13054.jpg",              imageAlt: "Aurora Chen"
            },
            {
              id: "5",              name: "Madison Brooks",              handle: "@madisonbeauty",              testimonial: "The entire collection is phenomenal. My skin tone is more even and my pores are visibly smaller.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-studio-portrait-smiling-blonde-female-pink-jacket_613910-12467.jpg",              imageAlt: "Madison Brooks"
            },
            {
              id: "6",              name: "Olivia White",              handle: "@oliviaskin",              testimonial: "Best investment I've made for my skin. The glow is real and my friends keep asking what I'm using!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-blonde-woman_1301-6639.jpg",              imageAlt: "Olivia White"
            }
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "Shop Our Bestsellers", href: "products" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Leading Beauty Brands"
          description="Our formulations are featured and recommended by industry professionals worldwide"
          tag="Industry Leaders"
          tagIcon={Award}
          tagAnimation="slide-up"
          names={[
            "Vogue Beauty",            "Elle Magazine",            "Harper's Bazaar",            "Allure",            "Marie Claire",            "W Magazine",            "InStyle",            "Cosmopolitan"
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          speed={50}
          showCard={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Get in Touch"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Ready to Glow?"
          description="Join thousands of satisfied customers who've discovered their best skin. Subscribe to our newsletter for exclusive offers and skincare tips."
          buttons={[
            { text: "Subscribe Now", href: "#" },
            { text: "Contact Us", href: "#" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="LUXE Skin"
          copyrightText="© 2025 LUXE Skin. All rights reserved."
          columns={[
            {
              title: "Products",              items: [
                { label: "Serums", href: "#" },
                { label: "Moisturizers", href: "#" },
                { label: "Cleansers", href: "#" },
                { label: "Masks", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "#" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" },
                { label: "Track Order", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
