"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="largeSmall"
        background="fluid"
        cardStyle="layered-gradient"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Tutorials",
          id: "features",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="HairStudio"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{
        variant: "gradient-bars",
      }}
      title="Mastering the Art of Hair"
      description="Expert styling tutorials, modern trends, and professional care advice to help you express your unique style every single day."
      buttons={[
        {
          text: "Explore Tutorials",
          href: "#features",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/beautiful-woman-standing-against-wall_107420-94692.jpg"
      imageAlt="Professional hairstyle editorial"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/black-woman-s-portrait-dramma-look_633478-1621.jpg",
          alt: "Black woman's portrait dramma look",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-inside-portrait-adorable-lovely-woman-with-dark-lipstick-posing-studio_291650-430.jpg",
          alt: "Close up inside portrait of adorable lovely woman with dark lipstick posing in studio",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-happy-smiling-businesswoman-isolated-white-background_231208-10224.jpg",
          alt: "Portrait of young happy smiling businesswoman, isolated on white background",
        },
        {
          src: "http://img.b2bpic.net/free-photo/studio-portrait-blonde-female-dressed-white-t-shirt-waistcoat-grey-background_613910-9333.jpg",
          alt: "Studio portrait of blonde female dressed in white t shirt and waistcoat over grey background.",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-woman-model-holding-book-red-wall_114579-56021.jpg",
          alt: "Young woman model holding a book on a red wall. ",
        },
      ]}
      avatarText="Join our community of over 5,000+ hair enthusiasts."
      marqueeItems={[
        {
          type: "text",
          text: "Professional Techniques",
        },
        {
          type: "text",
          text: "Daily Hair Care",
        },
        {
          type: "text",
          text: "Latest Color Trends",
        },
        {
          type: "text",
          text: "Salon Quality Results",
        },
        {
          type: "text",
          text: "Expert Styling Advice",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={true}
      tag="Professional Stylist"
      title="Beyond the Chair"
      description="With over a decade of experience, I translate runway styles into wearable looks."
      subdescription="My passion lies in blending artistry with hair health to help you feel your best."
      icon={Sparkles}
      imageSrc="http://img.b2bpic.net/free-photo/elegant-smiling-woman-is-trying-beautiful-necklace-posh-jewellery-shop_613910-20742.jpg"
      mediaAnimation="slide-up"
      imageAlt="Professional hair stylist smiling"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardEight
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Precision Cuts",
          description: "Mastering angles and layering.",
          imageSrc: "http://img.b2bpic.net/free-photo/modern-redhead-non-binary-person_23-2148760601.jpg",
        },
        {
          title: "Intricate Styling",
          description: "Updos and professional braiding.",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-dreadlocks-girl-working-computer-back-view_169016-17893.jpg",
        },
        {
          title: "Hair Texture",
          description: "Smoothing and volume control.",
          imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-washed-hairdresser_23-2150771292.jpg",
        },
      ]}
      title="Essential Techniques"
      description="Learn the professional foundations required to create salon-quality looks at home."
    />
  </div>

  <div id="blog" data-section="blog">
      <BlogCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      title="Latest Trends"
      description="Stay ahead of the curve with our curated hairstyle guides and seasonal inspiration."
      blogs={[
        {
          id: "1",
          category: "Tutorials",
          title: "The Messy Bun Reimagined",
          excerpt: "Elevate your daily look.",
          imageSrc: "http://img.b2bpic.net/free-photo/stunning-woman-talks-phone_1304-5082.jpg",
          authorName: "Jane Doe",
          authorAvatar: "http://img.b2bpic.net/free-photo/girl-curly-hairstyle-checking-haircut-fixing-curls-near-mirror-before-return-boyfriend-have-romantic-dinner-smiling-broadly-feel-happy_176420-44744.jpg",
          date: "2023-10-01",
        },
        {
          id: "2",
          category: "Color",
          title: "Modern Balayage Trends",
          excerpt: "Natural sun-kissed hair.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-transgender-person-wearing-green-wig-front-view_23-2148827051.jpg",
          authorName: "Jane Doe",
          authorAvatar: "http://img.b2bpic.net/free-photo/smiling-young-beautiful-female-barber-uniform-showing-okay-gesture-isolated-pink-background_141793-118849.jpg",
          date: "2023-10-05",
        },
        {
          id: "3",
          category: "Seasonal",
          title: "Summer Wave Guide",
          excerpt: "Beach-ready in minutes.",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-black-costume-lady-with-halloween-makeup_1157-41132.jpg",
          authorName: "Jane Doe",
          authorAvatar: "http://img.b2bpic.net/free-photo/charming-smiling-lady-with-long-wavy-dark-hair-is-touching-hair-looking-camera-home_291650-2384.jpg",
          date: "2023-10-10",
        },
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah",
          date: "2023-09",
          title: "Excellent",
          quote: "My hair has never looked healthier.",
          tag: "Regular",
          avatarSrc: "http://img.b2bpic.net/free-photo/incredible-stylish-smiling-woman-with-vine-lipstick-wearing-white-jacket-posing-beige-wall-prepping-party-isolated-wall_291650-217.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-standing-against-wall_107420-94692.jpg",
          imageAlt: "happy client professional salon",
        },
        {
          id: "2",
          name: "Maria",
          date: "2023-09",
          title: "Amazing",
          quote: "The balayage work is incredible.",
          tag: "Regular",
          avatarSrc: "http://img.b2bpic.net/free-photo/young-beautiful-plump-woman-loving-her-body_23-2149180813.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/elegant-smiling-woman-is-trying-beautiful-necklace-posh-jewellery-shop_613910-20742.jpg",
          imageAlt: "happy client professional salon",
        },
        {
          id: "3",
          name: "Lucy",
          date: "2023-09",
          title: "Best",
          quote: "Expert advice, friendly atmosphere.",
          tag: "Regular",
          avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-getting-her-hair-dyed-by-hairdresser-home_23-2148817234.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/modern-redhead-non-binary-person_23-2148760601.jpg",
          imageAlt: "happy client professional salon",
        },
        {
          id: "4",
          name: "Emma",
          date: "2023-09",
          title: "Wonderful",
          quote: "Love the styling tips provided.",
          tag: "Regular",
          avatarSrc: "http://img.b2bpic.net/free-photo/woman-latino-hair-salon_23-2150286043.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-dreadlocks-girl-working-computer-back-view_169016-17893.jpg",
          imageAlt: "happy client professional salon",
        },
        {
          id: "5",
          name: "Grace",
          date: "2023-09",
          title: "Top",
          quote: "Highly recommended salon services.",
          tag: "Regular",
          avatarSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-holding-brush_23-2148784359.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-washed-hairdresser_23-2150771292.jpg",
          imageAlt: "happy client professional salon",
        },
      ]}
      title="Client Stories"
      description="See why our clients choose us for their hair transformation journeys."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",
          title: "How often should I trim?",
          content: "Every 6-8 weeks is ideal.",
        },
        {
          id: "f2",
          title: "What products are best?",
          content: "Depends on your hair type.",
        },
        {
          id: "f3",
          title: "How to manage frizz?",
          content: "Moisturizing is the key step.",
        },
      ]}
      sideTitle="Expert Answers"
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      text="Ready for your hair journey? Book your consultation today."
      buttons={[
        {
          text: "Contact Us",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="HairStudio"
      copyrightText="© 2025 HairStudio Inc. All Rights Reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
