"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Award, Scissors, Users, Zap, Star } 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: "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, 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: "http://img.b2bpic.net/free-photo/modern-luxury-furniture-adorns-comfortable-home-interior-generated-by-ai_188544-29070.jpg?_wi=1", imageAlt: "barber shop interior vintage style" },
        { name: "Mike T.", handle: "@miket", testimonial: "The classic shave experience here is unmatched.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4205.jpg?_wi=1", imageAlt: "barber shop interior vintage style" },
        { name: "Chris B.", handle: "@chrisb", testimonial: "Super professional staff and great atmosphere.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/using-towel-beard-aged-male-barbershop_23-2148181892.jpg?_wi=1", imageAlt: "barber shop interior vintage style" },
        { name: "David L.", handle: "@dl4life", testimonial: "Finally found my permanent barber spot.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/high-angle-items-spa-therapy_23-2148290933.jpg?_wi=1", imageAlt: "barber shop interior vintage style" },
        { name: "Alex P.", handle: "@alexp", testimonial: "Exceptional attention to detail. Highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-trimming-moustache-client_23-2147778835.jpg?_wi=1", imageAlt: "barber shop interior vintage style" }
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/modern-luxury-furniture-adorns-comfortable-home-interior-generated-by-ai_188544-29070.jpg?_wi=2"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506339.jpg", alt: "Front view of baber shop chiar" },
        { src: "http://img.b2bpic.net/free-photo/barbershop-washbasin-with-professional-chairs_23-2148298338.jpg", alt: "Barbershop washbasin with professional chairs" },
        { src: "http://img.b2bpic.net/free-photo/close-up-expensive-barber-shop-chair_23-2148256916.jpg", alt: "Close-up expensive barber shop chair" },
        { src: "http://img.b2bpic.net/free-photo/comfortable-old-fashioned-chair-rustic-antique-elegance-indoors-generated-by-ai_188544-29043.jpg", alt: "Comfortable old fashioned chair" },
        { src: "http://img.b2bpic.net/free-photo/barber-man-apron-holding-scissors-comb-making-stop-gesture-with-hands-standing-orange-background_141793-67572.jpg", alt: "Barber man in apron" }
      ]}
      avatarText="Join 5,000+ satisfied clients"
      marqueeItems={[
        { type: "text", text: "PRECISION CUTS" },
        { type: "text", text: "TRADITIONAL SHAVES" },
        { type: "text", text: "MODERN GROOMING" },
        { type: "text", text: "PREMIUM CARE" },
        { type: "text", text: "LEGENDARY SERVICE" }
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Our Legacy"
      metrics={[
        { icon: Award, label: "Years Experience", value: "15+" },
        { icon: Users, label: "Happy Clients", value: "5000+" },
        { icon: Scissors, label: "Expert Barbers", value: "8" }
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySix
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        { title: "Precision Cuts", description: "Classic and modern styles customized to your hair texture.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4205.jpg?_wi=2", buttonIcon: Scissors },
        { title: "Classic Shaves", description: "Hot towel treatment and traditional straight razor shave.", imageSrc: "http://img.b2bpic.net/free-photo/using-towel-beard-aged-male-barbershop_23-2148181892.jpg?_wi=2", buttonIcon: Zap },
        { title: "Premium Products", description: "High-quality pomades, oils, and balms for home maintenance.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-items-spa-therapy_23-2148290933.jpg?_wi=2", buttonIcon: Star },
        { title: "Beard Sculpting", description: "Professional beard shape-up and grooming for refined looks.", imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-trimming-moustache-client_23-2147778835.jpg?_wi=2", buttonIcon: Award }
      ]}
      title="Mastery in Every Service"
      description="We specialize in precision grooming for the modern gentleman."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        { id: "p1", name: "Signature Pomade", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/impressed-slavic-middle-aged-male-barber-uniform-holding-water-spray-bottle-isolated-orange-wall_141793-82847.jpg" },
        { id: "p2", name: "Beard Oil", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-bottle-oils-with-pipette_23-2148317664.jpg" },
        { id: "p3", name: "Barber Scissors", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/set-razors-table_23-2147736987.jpg" },
        { id: "p4", name: "Aftershave Balm", price: "$22", imageSrc: "http://img.b2bpic.net/free-photo/man-doing-his-face-care-routine_23-2149288066.jpg" },
        { id: "p5", name: "Shaving Brush", price: "$30", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-shaving-objects_23-2148121997.jpg" },
        { id: "p6", name: "Styling Clay", price: "$22", imageSrc: "http://img.b2bpic.net/free-photo/containers-with-cosmetics_23-2147803536.jpg" }
      ]}
      title="Shop Our Essentials"
      description="Professional products curated by our experts."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        { id: "basic", badge: "Essential", price: "$35", subtitle: "Precision Cut", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Consultation", "Haircut", "Style"] },
        { id: "pro", badge: "Most Popular", price: "$55", subtitle: "Legends Experience", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Haircut & Shave", "Beard Trim", "Hot Towel", "Premium Products"] },
        { id: "premium", badge: "VIP", price: "$75", subtitle: "Ultimate Grooming", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Full Grooming", "Scalp Massage", "Face Treatment", "Priority Booking"] }
      ]}
      title="Transparent Pricing"
      description="Choose the service that fits your needs."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      members={[
        { id: "m1", name: "Marcus V.", role: "Master Barber", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-caucasian-male-barber-wearing-glasses-wavy-hair-band-uniform-holding-hair-clippers-isolated-crimson-background-with-copy-space_141793-31955.jpg" },
        { id: "m2", name: "Daniel S.", role: "Senior Stylist", imageSrc: "http://img.b2bpic.net/free-photo/client-barber-greeting-each-other-barbershop_23-2148181951.jpg" },
        { id: "m3", name: "Leo C.", role: "Barber Expert", imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg" }
      ]}
      title="Our Experts"
      description="Meet the artisans behind the chair."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        { id: "t1", name: "Liam K.", role: "Architect", company: "DesignCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/expressive-middle-aged-woman-posing_344912-2831.jpg" },
        { id: "t2", name: "Ethan M.", role: "Consultant", company: "BizLab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-half-his-face-wearing-different-clothes_23-2148784403.jpg" },
        { id: "t3", name: "Noah J.", role: "Designer", company: "CreativeStudio", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-male-sitting-chair_329181-1673.jpg" },
        { id: "t4", name: "Mason T.", role: "Executive", company: "CorpGroup", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-sunbathed-fashion-man-model-wearing-white-shirt-clothes-posing-street_158538-2385.jpg" },
        { id: "t5", name: "Lucas P.", role: "Tech Lead", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-6221.jpg" }
      ]}
      kpiItems={[
        { value: "4.9/5", label: "Avg Rating" },
        { value: "100+", label: "Daily Clients" },
        { value: "10k+", label: "Cuts Per Year" }
      ]}
      title="Hear From Our Legends"
      description="Join our community of satisfied clients."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        { id: "f1", title: "Do I need an appointment?", content: "We recommend booking ahead to guarantee your preferred time, but walk-ins are welcome if space is available." },
        { id: "f2", title: "What payment methods are accepted?", content: "We accept all major credit cards, digital wallets, and cash." },
        { id: "f3", title: "Is parking available?", content: "Yes, complimentary parking is available behind the shop for all our clients." }
      ]}
      sideTitle="Questions?"
      sideDescription="We've got you covered."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{ variant: "plain" }}
      tag="Visit Us"
      title="Book Your Appointment"
      description="Ready for a legendary transformation? Contact us today."
      imageSrc="http://img.b2bpic.net/free-photo/young-man-barber-s-shop-getting-his-beard-trimmed_23-2149186493.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        { items: [{ label: "Services", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Location", href: "#contact" }] },
        { items: [{ label: "About", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
      ]}
      logoText="LEGENDS"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
