"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Star, ArrowRight } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="largeSmall"
        background="grid"
        cardStyle="glass-elevated"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "Services",          id: "services"},
        {
          name: "About",          id: "about"},
        {
          name: "Reviews",          id: "reviews"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="Talk of the Town"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "gradient-bars"}}
      title="Look Good. Feel Amazing."
      description="Lubbock's Most Loved Hair Salon | 4.7 Stars"
      buttons={[
        {
          text: "Book Your Appointment",          href: "tel:+18067622871"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/hair-salon-workplace_23-2148108753.jpg"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230955.jpg",          alt: "Woman getting treatment at hairdresser shop"},
        {
          src: "http://img.b2bpic.net/free-photo/blonde-woman-getting-her-hair-done_23-2148108777.jpg",          alt: "Blonde woman getting her hair done"},
        {
          src: "http://img.b2bpic.net/free-photo/beauty-slim-african-american-model-wear-black-blouse-green-long-legs-pants-posed-chinese-cafe_627829-5911.jpg",          alt: "Beauty slim african american model"},
        {
          src: "http://img.b2bpic.net/free-photo/winter-sports-equipment-complex_482257-76748.jpg",          alt: "Winter sports equipment at complex"},
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_93675-133804.jpg",          alt: "Beautiful woman smiling"},
      ]}
      avatarText="Join our 500+ happy clients"
      marqueeItems={[
        {
          type: "text",          text: "Expert Stylists"},
        {
          type: "text-icon",          text: "4.7 Stars Rated",          icon: Star,
        },
        {
          type: "text",          text: "Open Mon-Sat"},
        {
          type: "text",          text: "Family Friendly"},
        {
          type: "text",          text: "Professional Quality"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={false}
      title="About Us"
      description="Talk of the Town Hair Salon has been serving Lubbock with love and style. Rated 4.7 stars by our happy clients."
      bulletPoints={[
        {
          title: "Expert Styling",          description: "Years of experience delivering exceptional hair care."},
        {
          title: "Warm Atmosphere",          description: "Experience comfort and professional hospitality."},
        {
          title: "Top-Rated Quality",          description: "Consistently rated 4.7 stars by our community."},
        {
          title: "Local Favorite",          description: "Proudly serving the Lubbock area with passion."},
        {
          title: "Modern Tools",          description: "Using high-end equipment for best results."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/elegant-hotel-reception-lobby_482257-76206.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentySix
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Blow Dry",          description: "Professional sleek blow out.",          imageSrc: "http://img.b2bpic.net/free-photo/crop-hairdresser-styling-customer_23-2147769853.jpg",          buttonIcon: ArrowRight,
        },
        {
          title: "Box Braids",          description: "Expert braiding styles.",          imageSrc: "http://img.b2bpic.net/free-photo/girl-shaking-her-pink-braided-hair_53876-137584.jpg",          buttonIcon: ArrowRight,
        },
        {
          title: "Hair Coloring",          description: "Vibrant and healthy color.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229745.jpg",          buttonIcon: ArrowRight,
        },
        {
          title: "Short Curly Styles",          description: "Defining your curls perfectly.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-done-beauty-salon_23-2149167405.jpg",          buttonIcon: ArrowRight,
        },
        {
          title: "Styling Consultation",          description: "Personalized advice for your hair type.",          imageSrc: "http://img.b2bpic.net/free-photo/vertical-closeup-shot-hairdresser-blow-drying-woman-s-short-hair-beauty-salon_181624-20887.jpg",          buttonIcon: ArrowRight,
        },
      ]}
      title="Our Services"
      description="Tailored hair care services for your unique style."
    />
  </div>

  <div id="reviews" data-section="reviews">
      <TestimonialCardTen
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          title: "Great Experience",          quote: "Talk of the Town is the best salon in Lubbock! Always love my hair.",          name: "Sarah J.",          role: "Client",          imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-singing_1187-3682.jpg"},
        {
          id: "2",          title: "Professional Styling",          quote: "The staff here are so welcoming and talented. Highly recommend.",          name: "Michael R.",          role: "Client",          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-taking-care-her-client_23-2149319771.jpg"},
        {
          id: "3",          title: "Lovely Salon",          quote: "Warm atmosphere and fantastic color work. Truly local favorite.",          name: "Emily K.",          role: "Client",          imageSrc: "http://img.b2bpic.net/free-photo/young-female-with-pinkish-hair-posing_344912-857.jpg"},
        {
          id: "4",          title: "Top Quality",          quote: "My braids were perfect and the service was quick!",          name: "David L.",          role: "Client",          imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg"},
        {
          id: "5",          title: "Highly Recommend",          quote: "Always leave feeling great. Best salon in town.",          name: "Jessica M.",          role: "Client",          imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-pajamas-while-sitting-bed_273609-13213.jpg"},
      ]}
      title="Client Reviews"
      description="Rated 4.7 stars / 19 reviews"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "gradient-bars"}}
      text="Visit us at 510 E 23rd St, Lubbock TX 79404. Call Now to Book: +1 806-762-2871. Open until 2pm."
      buttons={[
        {
          text: "Call Now to Book",          href: "tel:+18067622871"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Talk of the Town"
      leftLink={{
        text: "Privacy Policy",        href: "#"}}
      rightLink={{
        text: "Terms of Service",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
