"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactText from '@/components/sections/contact/ContactText';
import { Calendar, Phone } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="large"
        background="aurora"
        cardStyle="gradient-mesh"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "home"},
        {
          name: "About",          id: "about"},
        {
          name: "Services",          id: "services"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="P.Cutz"
    />
  </div>

  <div id="home" data-section="home">
      <HeroLogo
      logoText="P.Cutz Barber Shop"
      description="Experience the sharpest cuts and finest grooming in the city. Where tradition meets modern style."
      buttons={[
        {
          text: "Book Appointment",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506206.jpg"
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",          content: "Mastering the Art of Grooming"},
        {
          type: "image",          src: "http://img.b2bpic.net/free-psd/barbershop-template-design_23-2151586247.jpg",          alt: "Barber tools"},
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[
        {
          id: "classic",          title: "Classic Cut",          price: "$35",          period: "per session",          features: [
            "Haircut & Wash",            "Hot Towel",            "Neck Shave"],
          button: {
            text: "Book Now",            href: "#contact"},
        },
        {
          id: "beard",          title: "Beard Sculpting",          price: "$25",          period: "per session",          features: [
            "Beard Trim",            "Line Up",            "Beard Oil Application"],
          button: {
            text: "Book Now",            href: "#contact"},
        },
        {
          id: "full",          title: "The Full P.Cutz",          price: "$55",          period: "per session",          features: [
            "Haircut",            "Beard Trim",            "Straight Razor Shave"],
          button: {
            text: "Book Now",            href: "#contact"},
        },
      ]}
      title="Our Services"
      description="Premium grooming solutions for the modern man."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "John D.",          role: "Client",          company: "Local Regular",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205927.jpg"},
        {
          id: "2",          name: "Mike S.",          role: "Client",          company: "Professional",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/people-happiness-emotions-concept-smiling-joyful-young-male-with-attractive-look-dressed-casual-white-t-shirt-looks-gladfully-aside-poses-against-studio-background-with-copy-space_273609-3426.jpg"},
        {
          id: "3",          name: "Alex R.",          role: "Client",          company: "Visitor",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-handsome-smiling-model-sexy-stylish-man-dressed-shirt-jeans-fashion-hipster-male-posing-near-white-wall-studio-isolated_158538-26713.jpg"},
      ]}
      title="What Our Clients Say"
      description="Hear why P.Cutz is the top rated shop in the neighborhood."
    />
  </div>

  <div id="contact-direct" data-section="contact-direct">
      <ContactText 
        text="Ready for a fresh look? Book your session with our master barbers today."
        background={{ variant: "downward-rays-static" }}
        useInvertedBackground={false}
        buttons={[{ text: "Call Now", href: "tel:+15550123456" }]}
      />
  </div>

  <div id="contact" data-section="contact">
      <ContactFaq
      animationType="slide-up"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "Do I need an appointment?",          content: "We accept walk-ins, but appointments are recommended."},
        {
          id: "q2",          title: "What payment methods do you accept?",          content: "We accept cash and all major credit cards."},
      ]}
      ctaTitle="Visit Us Today"
      ctaDescription="Get your fresh cut at P.Cutz. We are located in the heart of the city."
      ctaButton={{
        text: "Get Directions",        href: "#"}}
      ctaIcon={Calendar}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      columns={[
        {
          title: "P.Cutz",          items: [
            {
              label: "About",              href: "#about"},
            {
              label: "Services",              href: "#services"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy Policy",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 P.Cutz Barber Shop"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}