"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Bell, Calendar, CalendarCheck, ChartLine, CreditCard, Crown, Diamond, MessageSquare, Scissors, Settings, ShieldCheck, Signal, Sparkles, User, Users, Wallet } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="large"
        background="fluid"
        cardStyle="layered-gradient"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#hero"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Metrics",          id: "#metrics"},
        {
          name: "Testimonials",          id: "#testimonials"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/gradient-colored-hair-salon-logo-template-dark-background_23-2148848045.jpg"
      logoAlt="CUTLAB Logo"
      brandName="CUTLAB"
      button={{
        text: "Reserve Your Moment",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="CUTLAB"
      description="Experience the future of premium barbering through seamless technology and world-class craftsmanship. Book your appointment in seconds—where luxury meets convenience."
      buttons={[
        {
          text: "Reserve Your Moment",          href: "#contact"},
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/from-hands-shaving-neck_23-2147778916.jpg",          imageAlt: "Luxurious barber shop interior with client receiving a haircut"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/cafe-beautiful-business-african-american_1303-1338.jpg",          imageAlt: "Stylist using a tablet for booking in a high-end salon"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/beauty-woman-bathrobe-with-towel-her-head-using-smartphone_1153-4078.jpg",          imageAlt: "CUTLAB mobile app interface on a screen"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-pink-blue-lights-background_1017-2786.jpg",          imageAlt: "Abstract data network visualization"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-bath-concept-accessories_23-2148419347.jpg",          imageAlt: "Premium grooming tools with CUTLAB app on smartphone"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/blond-ethnic-coworkers-doing-selfie-workplace_23-2148180695.jpg",          imageAlt: "Satisfied clients exiting a luxury salon"},
      ]}
      autoplayDelay={4000}
      showDimOverlay={true}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="Unparalleled Grooming, Elevated Experience"
      description={[
        "CUTLAB reimagines the traditional salon experience by fusing precision craftsmanship with cutting-edge technology. Our platform connects you with elite barbers and stylists who master their art, ensuring every visit is not just an appointment, but a signature luxury event tailored to your personal style.",        "We understand that your time is precious. That's why we've engineered a booking system that is as seamless and sophisticated as the services we represent. From instant scheduling to personalized preferences, every detail is designed to deliver unparalleled convenience and satisfaction, reflecting our commitment to innovation and prestige."]}
      buttons={[
        {
          text: "Discover Our Story",          href: "#about"},
        {
          text: "Meet the Artisans",          href: "#team"},
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBento
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Instant Booking & Management",          description: "Schedule, reschedule, or cancel appointments with unparalleled ease directly from your device. Our intuitive interface mirrors the simplicity of leading tech platforms, putting you in control.",          bentoComponent: "phone",          statusIcon: Signal,
          alertIcon: Bell,
          alertTitle: "Appointment Reminder",          alertMessage: "Your 3 PM haircut with Alex is coming up soon. See you there!",          apps: [
            {
              name: "Calendar",              icon: Calendar,
            },
            {
              name: "Messages",              icon: MessageSquare,
            },
            {
              name: "Settings",              icon: Settings,
            },
            {
              name: "Wallet",              icon: Wallet,
            },
            {
              name: "CUTLAB",              icon: Scissors,
            },
            {
              name: "Profile",              icon: User,
            },
            {
              name: "Services",              icon: Sparkles,
            },
            {
              name: "Stylists",              icon: Users,
            },
          ]
        },
        {
          title: "Personalized Preferences",          description: "Your grooming, your way. Store your favorite services, stylists, and unique preferences for a consistently tailored experience every time you book.",          bentoComponent: "media-stack",          items: [
            {
              imageSrc: "http://img.b2bpic.net/free-vector/gradient-colored-hair-salon-logo-template-dark-background_23-2148848045.jpg",              imageAlt: "Client profile interface"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-doing-make-up_23-2149190642.jpg",              imageAlt: "Personalized service options"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-holding-smartphone_23-2149636262.jpg",              imageAlt: "Stylist notes and history"},
          ]
        },
        {
          title: "Seamless Workflow for Artisans",          description: "Empower your business with tools designed to optimize operations, elevate client relationships, and enhance your luxury brand. Focus on your craft, we handle the rest.",          bentoComponent: "orbiting-icons",          centerIcon: Settings,
          items: [
            {
              icon: CalendarCheck,
              ring: 1,
              duration: 15,
            },
            {
              icon: CreditCard,
              ring: 1,
              duration: 10,
            },
            {
              icon: Users,
              ring: 1,
              duration: 20,
            },
            {
              icon: ChartLine,
              ring: 2,
              duration: 25,
            },
            {
              icon: MessageSquare,
              ring: 2,
              duration: 18,
            },
            {
              icon: ShieldCheck,
              ring: 2,
              duration: 12,
            },
          ]
        },
      ]}
      title="Innovation at Your Fingertips"
      description="Experience a booking platform designed with the modern professional and luxury enthusiast in mind. From effortless scheduling to personalized service, CUTLAB delivers an unmatched digital grooming journey."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Driving Growth with Precision"
      tag="Our Impact"
      metrics={[
        {
          id: "1",          value: "100K+",          description: "Appointments Booked"},
        {
          id: "2",          value: "98%",          description: "Client Satisfaction"},
        {
          id: "3",          value: "500+",          description: "Elite Stylists"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={true}
      testimonial="CUTLAB has completely transformed my grooming routine. The ease of booking and the quality of stylists available are unmatched. It truly feels like a luxury service at every touchpoint. Highly recommend for anyone who values their time and appearance."
      rating={5}
      author="Marcus Thorne, Tech CEO"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/close-up-woman-wearing-glasses_23-2148815602.jpg",          alt: "Sarah Johnson"},
        {
          src: "http://img.b2bpic.net/free-photo/plus-size-hispanic-man-with-beard-standing-yellow-background-with-hand-chin-thinking-about-question-pensive-expression-smiling-with-thoughtful-face-doubt-concept_839833-31022.jpg",          alt: "Michael Chen"},
        {
          src: "http://img.b2bpic.net/free-photo/3d-cartoon-style-character_23-2151034128.jpg",          alt: "Emily Rodriguez"},
        {
          src: "http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-combing-his-beard-with-confident-expression-standing-orange-wall_141793-48428.jpg",          alt: "David Kim"},
        {
          src: "http://img.b2bpic.net/free-photo/joyful-excited-curly-dark-skinned-woman-oversized-white-jacket-smiles-sincerely-looks-front-cuts-peace-lace-cozy-designer-office_197531-24102.jpg",          alt: "Jessica Lee"},
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Linear",        "Stripe",        "Apple",        "The Gentleman's Parlour",        "Elite Style Studio",        "Precision Cuts Club",        "The Modern Shave",        "BarberTech Solutions"]}
      title="Trusted by Elite Salons & Industry Leaders"
      description="Our platform is the choice for premium establishments and discerning clients who demand the best in technology and luxury service."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "starter",          badge: "Essential",          badgeIcon: Sparkles,
          price: "$99/month",          subtitle: "Perfect for independent stylists and small studios.",          buttons: [
            {
              text: "Start Free Trial",              href: "#"},
          ],
          features: [
            "Basic Appointment Scheduling",            "Client Management (Up to 100)",            "Single User License",            "Standard Analytics"],
        },
        {
          id: "professional",          badge: "Most Popular",          badgeIcon: Crown,
          price: "$249/month",          subtitle: "Ideal for growing salons with a dedicated team.",          buttons: [
            {
              text: "Get Started",              href: "#"},
          ],
          features: [
            "Advanced Scheduling & Reminders",            "Unlimited Client Management",            "Up to 5 User Licenses",            "Detailed Business Analytics",            "Online Booking Portal"],
        },
        {
          id: "enterprise",          badge: "Ultimate",          badgeIcon: Diamond,
          price: "Custom",          subtitle: "For multi-location luxury brands and large-scale operations.",          buttons: [
            {
              text: "Contact Sales",              href: "#contact"},
          ],
          features: [
            "Customizable Enterprise Solutions",            "Dedicated Account Manager",            "Unlimited User Licenses",            "Advanced API Integrations",            "24/7 Priority Support"],
        },
      ]}
      title="Plans for Every Premium Establishment"
      description="Elevate your salon's operations and brand with CUTLAB's tailored solutions, designed for growth, efficiency, and unparalleled client experiences."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",          title: "How does CUTLAB ensure a luxury booking experience?",          content: "Our platform is designed with an intuitive, minimalist interface inspired by leading tech brands. We partner only with top-tier salons and stylists, ensuring that the digital experience matches the premium quality of service you receive in person."},
        {
          id: "faq2",          title: "Can I easily reschedule or cancel appointments?",          content: "Yes, CUTLAB offers a frictionless booking management system. You can effortlessly modify your appointments directly from your account in seconds, reflecting our commitment to time efficiency and convenience."},
        {
          id: "faq3",          title: "What makes CUTLAB different from other booking platforms?",          content: "CUTLAB stands apart by merging award-winning SaaS excellence with a luxury lifestyle brand aesthetic. We focus on innovation, prestige, and a visually stunning experience, specifically catering to affluent professionals and style-conscious individuals."},
        {
          id: "faq4",          title: "Is CUTLAB suitable for salon owners to manage their business?",          content: "Absolutely. CUTLAB provides powerful, yet easy-to-use tools for salon operators to streamline their booking, client management, and analytics, helping them elevate their brand positioning and compete effectively in the luxury market."},
        {
          id: "faq5",          title: "Is my personal data secure with CUTLAB?",          content: "Data security and privacy are paramount at CUTLAB. We employ advanced encryption and adhere to the highest industry standards to protect your personal information and booking history, ensuring your peace of mind."},
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to common questions about CUTLAB's platform, booking process, and premium services."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient"}}
      tag="Connect With Us"
      title="Reserve Your Moment of Perfection"
      description="Ready to experience the future of luxury grooming? Join CUTLAB and transform your booking experience today. Our team is here to assist you."
      imageSrc="http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg"
      imageAlt="Luxurious barber station with digital overlay"
      mediaAnimation="slide-up"
      mediaPosition="right"
      inputPlaceholder="Enter your email"
      buttonText="Get Exclusive Access"
      termsText="By clicking Get Exclusive Access you're confirming that you agree with our Terms and Conditions and Privacy Policy."
      onSubmit={(email) => console.log('Email submitted:', email)}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Platform",          items: [
            {
              label: "Features",              href: "#features"},
            {
              label: "Pricing",              href: "#pricing"},
            {
              label: "How It Works",              href: "#about"},
            {
              label: "Security",              href: "#"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Team",              href: "#team"},
            {
              label: "Careers",              href: "#"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          title: "Resources",          items: [
            {
              label: "Blog",              href: "#"},
            {
              label: "Help Center",              href: "#faq"},
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
          ],
        },
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/gradient-colored-hair-salon-logo-template-dark-background_23-2148848045.jpg"
      logoAlt="CUTLAB Logo"
      logoText="CUTLAB"
      copyrightText="© 2024 CUTLAB. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
