"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Sparkles, Leaf, Beaker, Award, Heart, Mail, Check, Star, CheckCircle, HelpCircle } from "lucide-react";

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmall"
      background="fluid"
      cardStyle="glass-elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="LuxeHair"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Products", id: "/products" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" },
          ]}
          button={{
            text: "Shop Now",            href: "/products"
          }}
          animateOnLoad={true}
        />
      </div>

      {/* Hero Section */}
      <div id="hero" data-section="hero" className="relative min-h-screen">
        <HeroBillboardTestimonial
          background={{ variant: "plain" }}
          title="Elevate Your Hair Care Journey"
          description="Discover our premium natural hair products and revolutionary 100% natural and capsule-based coloring systems. Crafted for excellence, designed for everyone."
          tag="Premium Hair Care"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/woman-washing-head-hairsalon_1157-27181.jpg"
          imageAlt="Premium hair care products and natural coloring systems"
          mediaAnimation="slide-up"
          testimonials={[
            {
              name: "Sofia Martinez",              handle: "Salon Owner, Madrid",              testimonial: "The results are absolutely stunning. My clients love the natural finish and how their hair feels after using these products.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-caucasian-woman-black-medical-uniform-standing-studio-competent-female-cosmetologist-holding-arms-crossed-grey-background_7502-9241.jpg",              imageAlt: "Sofia Martinez"
            },
            {
              name: "Elena Rossi",              handle: "Beauty Influencer, Milan",              testimonial: "Finally, a coloring system that doesn't compromise hair health. The capsule technology is a game-changer for my community.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-looking-camera-home_1301-4258.jpg",              imageAlt: "Elena Rossi"
            },
            {
              name: "Isabella Bianchi",              handle: "Professional Stylist, Rome",              testimonial: "My clients see visible improvements in just one treatment. The 100% natural formula is what they've been asking for.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-black-sweater-standing-posing_114579-81883.jpg",              imageAlt: "Isabella Bianchi"
            },
          ]}
          buttons={[
            { text: "Shop Natural Hair Color", href: "/products" },
            { text: "Learn More", href: "#about" },
          ]}
          buttonAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      {/* About Section */}
      <div id="about" data-section="about" className="py-16 lg:py-24">
        <SplitAbout
          title="Our Heritage in Premium Hair Care"
          description="For over a decade, we've been crafting exceptional hair care solutions that honor both nature and science. Our commitment to purity and innovation drives every product we create."
          tag="Our Story"
          tagIcon={Leaf}
          tagAnimation="opacity"
          bulletPoints={[
            {
              title: "100% Natural Formula System",              description: "Our flagship natural coloring system uses only plant-based ingredients, preserving hair integrity while delivering stunning color.",              icon: Leaf,
            },
            {
              title: "Patented Capsule Technology",              description: "Our proprietary capsule-based coloring system ensures precision, consistency, and zero waste in application.",              icon: Beaker,
            },
            {
              title: "Professional & Consumer Trusted",              description: "Used by top salons worldwide and trusted by beauty professionals and individual enthusiasts alike.",              icon: Award,
            },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/composition-spa-bathroom-elements_23-2147999953.jpg?_wi=1"
          imageAlt="LuxeHair heritage and product craftsmanship"
          mediaAnimation="opacity"
          imagePosition="right"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      {/* Features Section */}
      <div id="features" data-section="features" className="py-16 lg:py-24">
        <FeatureCardTwentyFive
          title="Why Choose LuxeHair"
          description="Experience the perfect blend of nature and innovation"
          tag="Our Advantages"
          tagIcon={Check}
          tagAnimation="slide-up"
          features={[
            {
              title: "100% Natural Coloring",              description: "Pure botanical extracts deliver rich, lasting color without ammonia or harsh chemicals. Your hair stays healthy and vibrant.",              icon: Leaf,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/colored-cloths-arrangement-with-natural-pigments_23-2148734437.jpg?_wi=1",                  imageAlt: "Natural coloring process"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/indoor-fashion-lifestyle-portrait-young-fresh-amazing-woman-posing-bed-wearing-seductive-lingerie-relaxing-having-fun-morning-time_291049-528.jpg?_wi=1",                  imageAlt: "Beautiful natural color results"
                },
              ],
            },
            {
              title: "Capsule Innovation",              description: "Our patented capsule system guarantees consistent application, minimal waste, and professional results every time.",              icon: Beaker,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-white-pill-plastic-blister-pack_9975-133834.jpg?_wi=1",                  imageAlt: "Capsule technology system"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229745.jpg?_wi=1",                  imageAlt: "Precision capsule application"
                },
              ],
            },
            {
              title: "Professional-Grade Quality",              description: "Salon-trusted formulations that deliver results professionals rely on, now available for home and professional use.",              icon: Sparkles,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/woman-donating-hair-cancer_657883-597.jpg?_wi=1",                  imageAlt: "Professional salon application"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668446.jpg?_wi=1",                  imageAlt: "Expert results showcase"
                },
              ],
            },
            {
              title: "Hair Health First",              description: "Formulated with nourishing oils and botanicals that strengthen and protect your hair while coloring beautifully.",              icon: Heart,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-plump-woman-loving-her-body_23-2149180813.jpg",                  imageAlt: "Hair health improvement"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/rear-view-beautiful-brunette-woman-with-golden-tan-wearing-bikini-standing-profile-green-leaves_197531-22588.jpg",                  imageAlt: "Nourished, vibrant hair"
                },
              ],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Products Section */}
      <div id="products" data-section="products" className="py-16 lg:py-24">
        <ProductCardThree
          title="Our Product Range"
          description="Explore our carefully curated collection of natural and innovative hair care solutions"
          tag="Shop Premium Products"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          products={[
            {
              id: "natural-color-deep-brown",              name: "Natural Color System - Deep Brown",              price: "€89.00",              imageSrc: "http://img.b2bpic.net/free-photo/wave-sandstone-rock-formations-arizona-united-states_181624-44179.jpg?_wi=1",              imageAlt: "Natural Color System - Deep Brown",              initialQuantity: 1,
            },
            {
              id: "natural-color-blonde",              name: "Natural Color System - Golden Blonde",              price: "€89.00",              imageSrc: "http://img.b2bpic.net/free-vector/cosmetics-beauty-product-bottles-advertising-banner_33099-1799.jpg?_wi=1",              imageAlt: "Natural Color System - Golden Blonde",              initialQuantity: 1,
            },
            {
              id: "capsule-auburn",              name: "Capsule Color System - Auburn",              price: "€79.00",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-pills_23-2148533046.jpg?_wi=1",              imageAlt: "Capsule Color System - Auburn",              initialQuantity: 1,
            },
            {
              id: "premium-shampoo",              name: "Premium Botanical Shampoo",              price: "€45.00",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-beauty-selfcare-treatment_23-2149238253.jpg?_wi=1",              imageAlt: "Premium Botanical Shampoo",              initialQuantity: 1,
            },
            {
              id: "color-treatment",              name: "Color-Protecting Treatment Mask",              price: "€55.00",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-hair-slugging-night-routine_23-2150396588.jpg?_wi=1",              imageAlt: "Color-Protecting Treatment Mask",              initialQuantity: 1,
            },
            {
              id: "starter-kit",              name: "Starter Luxury Kit",              price: "€199.00",              imageSrc: "http://img.b2bpic.net/free-photo/bottom-view-men-cologne-box-heart-shaped-box-flowers-table_140725-144825.jpg?_wi=1",              imageAlt: "Starter Luxury Kit with complete range",              initialQuantity: 1,
            },
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      {/* Testimonials Section */}
      <div id="testimonials" data-section="testimonials" className="py-16 lg:py-24">
        <TestimonialCardSixteen
          title="Loved by Professionals & Consumers"
          description="Real stories from real people who've transformed their hair care routine with LuxeHair"
          tag="Client Success"
          tagIcon={Star}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Marco Colombo",              role: "Salon Owner",              company: "Studio Marco - Milan",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/handsome-male-entrepreneur-wearing-white-shirt-posing-standing-with-crossed-arms-indoors_7502-9695.jpg?_wi=1",              imageAlt: "Marco Colombo"
            },
            {
              id: "2",              name: "Giulia Rossi",              role: "Hair Stylist",              company: "Bella Salon - Rome",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-glad-pretty-woman-dark-sweater-standing-near-lamps_114579-81875.jpg?_wi=1",              imageAlt: "Giulia Rossi"
            },
            {
              id: "3",              name: "Alessandra Bianchi",              role: "Beauty Enthusiast",              company: "Self-employed",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-outdoors_624325-862.jpg?_wi=1",              imageAlt: "Alessandra Bianchi"
            },
            {
              id: "4",              name: "Lorenzo Rossi",              role: "Salon Manager",              company: "Premium Hair Studio - Venice",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-man-suit-cloakroom_171337-19180.jpg",              imageAlt: "Lorenzo Rossi"
            },
          ]}
          kpiItems={[
            { value: "15,000+", label: "Satisfied Customers" },
            { value: "98%", label: "Satisfaction Rate" },
            { value: "500+", label: "Professional Salons" },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Social Proof Section */}
      <div id="social-proof" data-section="social-proof" className="py-12 lg:py-16">
        <SocialProofOne
          title="Trusted by Leading Brands & Professionals"
          description="Our products are preferred by top salons and beauty brands across Europe"
          tag="Trusted Partners"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          names={[
            "Premium Salon Network",            "Beauty Professional Guild",            "Natural Beauty Collective",            "European Hair Experts",            "Luxury Beauty Institute",            "Professional Stylists Association",            "Eco Beauty Alliance"
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          speed={35}
          showCard={true}
        />
      </div>

      {/* Contact CTA Section */}
      <div id="contact-cta" data-section="contact-cta" className="py-16 lg:py-24">
        <ContactCTA
          tag="Get in Touch"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Ready to Transform Your Hair Care Routine?"
          description="Whether you're a salon professional looking to elevate your services or an individual seeking premium natural products, we're here to help. Reach out today and discover the LuxeHair difference."
          buttons={[
            { text: "Contact Sales", href: "/contact" },
            { text: "Shop Collections", href: "/products" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "gradient-bars" }}
          useInvertedBackground={true}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer" className="py-12 lg:py-16">
        <FooterSimple
          columns={[
            {
              title: "Product",              items: [
                { label: "Natural Color System", href: "/products" },
                { label: "Capsule Technology", href: "/products" },
                { label: "Hair Care Range", href: "/products" },
                { label: "Collections", href: "/products" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Story", href: "/about" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" },
              ],
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" },
              ],
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookies", href: "#" },
                { label: "Sustainability", href: "#" },
              ],
            },
          ]}
          bottomLeftText="© 2025 LuxeHair. All rights reserved."
          bottomRightText="Crafted with care for hair that matters."
        />
      </div>
    </ThemeProvider>
  );
}