"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Scissors, Zap, Star, Award } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="mediumSizeLargeTitles"
        background="floatingGradient"
        cardStyle="gradient-radial"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        { name: "Home", id: "hero" },
        { name: "About", id: "about" },
        { name: "Services", id: "features" },
        { name: "Pricing", id: "pricing" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="LEGENDS"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardTestimonial
      useInvertedBackground={true}
      background={{ variant: "gradient-bars" }}
      title="Crafting Legends, One Cut at a Time."
      description="Welcome to Legends Barbershop in Alberton, South Africa, where traditional technique meets modern precision. Experience the ultimate grooming experience tailored to your style."
      testimonials={[
        { name: "James R.", handle: "@jr_style", testimonial: "Best haircut I've had in years. Legends never misses.", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/handsome-barber-cutting-hair-customer-barbershop_158538-4205.jpg?_wi=1" },
        { name: "Mike T.", handle: "@miket", testimonial: "The classic shave experience here is unmatched.", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/barber-using-razor-on-client_23-2148181892.jpg?_wi=1" }
      ]}
      imageSrc="https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=2"
      marqueeItems={[
        { type: "text", text: "PRECISION CUTS" },
        { type: "text", text: "TRADITIONAL SHAVES" },
        { type: "text", text: "LEGENDARY SERVICE" }
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="Our Legacy"
      description={["Established over 15 years ago, we bring together traditional barbering artistry with the modern standards of grooming excellence.", "Our mission is to provide an unmatched experience for every gentleman who steps into our shop."]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSix
      textboxLayout="default"
      useInvertedBackground={true}
      title="Mastery in Every Service"
      description="We specialize in precision grooming for the modern gentleman."
      features={[
        { title: "Precision Cuts", description: "Classic and modern styles customized to your hair texture.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-barber-cutting-hair-customer-barbershop_158538-4205.jpg?_wi=2" },
        { title: "Classic Shaves", description: "Hot towel treatment and traditional straight razor shave.", imageSrc: "https://img.b2bpic.net/free-photo/barber-using-razor-on-client_23-2148181892.jpg?_wi=2" },
        { title: "Premium Products", description: "High-quality pomades, oils, and balms for home maintenance.", imageSrc: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=3" },
        { title: "Beard Sculpting", description: "Professional beard shape-up and grooming for refined looks.", imageSrc: "https://img.b2bpic.net/free-photo/barber-trimming-beard_23-2147778835.jpg?_wi=2" }
      ]}
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      title="Transparent Pricing"
      description="Choose the service that fits your needs."
      plans={[
        { id: "basic", badge: "Essential", price: "R350", subtitle: "Precision Cut", buttons: [{ text: "Book Now" }], features: ["Haircut", "Style"] },
        { id: "pro", badge: "Most Popular", price: "R450", subtitle: "Legends Experience", buttons: [{ text: "Book Now" }], features: ["Haircut & Shave", "Beard Trim", "Hot Towel"] }
      ]}
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardTwo
      animationType="slide-up"
      gridVariant="three-columns-all-equal-width"
      textboxLayout="default"
      useInvertedBackground={false}
      title="Our Experts"
      description="Meet the artisans behind the chair."
      members={[
        { id: "m1", name: "Marcus V.", role: "Master Barber", description: "Leading our shop with 15 years of experience.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-barber-cutting-hair-customer-barbershop_158538-4205.jpg?_wi=3" },
        { id: "m2", name: "Daniel S.", role: "Senior Stylist", description: "Specialist in modern fades and styling.", imageSrc: "https://img.b2bpic.net/free-photo/barber-using-razor-on-client_23-2148181892.jpg?_wi=3" },
        { id: "m3", name: "Leo C.", role: "Barber Expert", description: "Classic shave and beard grooming expert.", imageSrc: "https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=10" }
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      title="Hear From Our Legends"
      description="Join our community of satisfied clients."
      testimonials={[
        { id: "t1", name: "Liam K.", handle: "@architect", testimonial: "Perfect cut every single time.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-barber-cutting-hair-customer-barbershop_158538-4205.jpg?_wi=4" },
        { id: "t2", name: "Ethan M.", handle: "@consultant", testimonial: "Highly professional atmosphere.", imageSrc: "https://img.b2bpic.net/free-photo/barber-using-razor-on-client_23-2148181892.jpg?_wi=4" }
      ]}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      useInvertedBackground={false}
      faqsAnimation="slide-up"
      textboxLayout="default"
      title="Questions?"
      description="We've got you covered with everything you need to know."
      faqs={[
        { id: "f1", title: "Do I need an appointment?", content: "We recommend booking ahead." },
        { id: "f2", title: "Is parking available?", content: "Yes, complimentary parking behind the shop." }
      ]}
      imageSrc="https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=12"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Book Your Appointment"
      description="Ready for a legendary transformation? Fill out the form below."
      inputs={[
          { name: "name", type: "text", placeholder: "Full Name" },
          { name: "email", type: "email", placeholder: "Email Address" }
      ]}
      imageSrc="https://img.b2bpic.net/free-photo/modern-barbershop-interior_23-2148290933.jpg?_wi=12"
    />
  </div>

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