"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="compact"
        sizing="mediumSizeLargeTitles"
        background="circleGradient"
        cardStyle="gradient-mesh"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Services",
          id: "services",
        },
        {
          name: "Reviews",
          id: "reviews",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Moses Fade Master"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "gradient-bars",
      }}
      title="London's Sharpest Fades"
      description="Where precision meets culture. Rated 4.9 stars by 974 clients on Google."
      buttons={[
        {
          text: "Book Your Cut",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-barber-shop_23-2149141768.jpg"
      mediaAnimation="blur-reveal"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg",
          alt: "Full shot man getting haircut",
        },
        {
          src: "http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg",
          alt: "Full body portrait of a stylish male who himself shaving while sitting on a barber chair in a hairdressing salon.",
        },
        {
          src: "http://img.b2bpic.net/free-photo/hairclips-scissors-bag_23-2147778856.jpg",
          alt: "Hairclips and scissors in bag",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-man-looking-mirror_23-2149220563.jpg",
          alt: "Close up man looking in mirror",
        },
        {
          src: "http://img.b2bpic.net/free-photo/full-shot-man-barber-shop_23-2149141768.jpg",
          alt: "luxury barbershop interior dark",
        },
      ]}
      avatarText="Join 10,000+ satisfied clients"
      marqueeItems={[
        {
          type: "text",
          text: "Precision Cutting",
        },
        {
          type: "text",
          text: "Expert Fades",
        },
        {
          type: "text",
          text: "Afro Hair Specialist",
        },
        {
          type: "text",
          text: "Luxury Experience",
        },
        {
          type: "text",
          text: "London's Best",
        },
      ]}
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "⭐ 4.9 Rating",
        "974 Google Reviews",
        "Never let me down",
        "My barber for 3 years",
        "Flies in from US",
        "Best in London",
      ]}
      title="Trusted by the Best"
      description="See why clients fly across the globe for a fade."
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardSix
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "Classic Fade",
          description: "The foundation of our reputation.",
          imageSrc: "http://img.b2bpic.net/free-photo/professional-tattooer-prepearing-doing-tattoo-by-tattoo-machine-spending-time-modern-tattoo-studio_574295-665.jpg",
        },
        {
          title: "Skin Fade",
          description: "Precision blended to the scalp.",
          imageSrc: "http://img.b2bpic.net/free-photo/group-students-sitting-sofa-resting-cafe-work-with-laptop-common-project_613910-5930.jpg",
        },
        {
          title: "Scissors Cut",
          description: "Classic tailoring for a modern look.",
          imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg",
        },
        {
          title: "Shape Up",
          description: "Crisp lines that define your face.",
          imageSrc: "http://img.b2bpic.net/free-photo/reflection-male-client-grooming-his-beard-mirror_23-2147839835.jpg",
        },
        {
          title: "Beard Trim",
          description: "Sculpted grooming for the modern gentleman.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-shirtless-fatty-bearded-male-grey-background_613910-623.jpg",
        },
      ]}
      title="Expert Services"
      description="Crafting your look with unparalleled precision."
    />
  </div>

  <div id="why-moses" data-section="why-moses">
      <FeatureCardSix
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Efficient Barbers",
          description: "Professional quality, no long waits.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-sunbathed-fashion-man-model-wearing-white-shirt-clothes-posing-street_158538-2376.jpg",
        },
        {
          title: "Welcoming Vibe",
          description: "Specialized expertise in Afro hair.",
          imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-posing-camera_23-2148242765.jpg",
        },
        {
          title: "Consistent Quality",
          description: "Reliable excellence every single visit.",
          imageSrc: "http://img.b2bpic.net/free-photo/perfect-man_1098-14126.jpg",
        },
        {
          title: "Trusted Globally",
          description: "Clients travel from the US just for our touch.",
          imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94772.jpg",
        },
        {
          title: "Luxury Standard",
          description: "Unmatched salon environment.",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg",
        },
      ]}
      title="Why Choose Moses"
      description="Experience that sets the bar in London."
    />
  </div>

  <div id="reviews" data-section="reviews">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",
          name: "Jeff",
          date: "2024",
          title: "US Client",
          quote: "I fly in from the US just to get my cut here. Nothing else compares.",
          tag: "Loyal",
          avatarSrc: "http://img.b2bpic.net/free-photo/hairdresser-senior-client-evaluating-work_23-2148181903.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-barber-shop_23-2149141768.jpg",
          imageAlt: "sharp fade hairstyle male portrait",
        },
        {
          id: "2",
          name: "Gurau",
          date: "2024",
          title: "Loyal Regular",
          quote: "My barber for 3 years. Consistent excellence every time.",
          tag: "Regular",
          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-male-with-haircut-dressed-shirt-jacket-with-backpack-standing-park_613910-19391.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/crop-hairdresser-holding-mousse-near-customer_23-2147778807.jpg",
          imageAlt: "sharp fade hairstyle male portrait",
        },
        {
          id: "3",
          name: "Akinbiyi",
          date: "2024",
          title: "Happy Client",
          quote: "Best barbershop in London. Definitely recommend for Afro hair care.",
          tag: "Expertise",
          avatarSrc: "http://img.b2bpic.net/free-photo/shaving-process-small-dog-sits-table-dog-shaved-by-professional_1157-48807.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/positive-blond-bearded-male-dressed-plaid-shirt-denim-jacket-posing-grey-vignette-background_613910-11758.jpg",
          imageAlt: "sharp fade hairstyle male portrait",
        },
        {
          id: "4",
          name: "Sarah",
          date: "2024",
          title: "Regular",
          quote: "Never lets me down, always keeps the look crisp and clean.",
          tag: "Pro",
          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-man-close-up-hard-light_1321-499.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg",
          imageAlt: "sharp fade hairstyle male portrait",
        },
        {
          id: "5",
          name: "Marcus",
          date: "2024",
          title: "Visitor",
          quote: "Welcoming atmosphere and skilled hands. Truly a cut above the rest.",
          tag: "Vibe",
          avatarSrc: "http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/hairclips-scissors-bag_23-2147778856.jpg",
          imageAlt: "sharp fade hairstyle male portrait",
        },
      ]}
      title="Voices of the Chair"
      description="What our clients say about their experience."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Ready to Look Your Best?"
      description="Call us to book your appointment at our Kilburn location."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
          required: true,
        },
        {
          name: "phone",
          type: "tel",
          placeholder: "Phone Number",
          required: true,
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/shaving-process-small-dog-sits-table-dog-shaved-by-professional_1157-48807.jpg"
      buttonText="Call 07450 393875"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Moses Fade Master"
      columns={[
        {
          title: "Navigation",
          items: [
            {
              label: "Home",
              href: "#hero",
            },
            {
              label: "Services",
              href: "#services",
            },
            {
              label: "Reviews",
              href: "#reviews",
            },
          ],
        },
        {
          title: "Location",
          items: [
            {
              label: "226 Kilburn High Rd",
              href: "#",
            },
            {
              label: "London NW6 4JP",
              href: "#",
            },
          ],
        },
        {
          title: "Contact",
          items: [
            {
              label: "07450 393875",
              href: "tel:07450393875",
            },
          ],
        },
      ]}
      copyrightText="© 2025 Moses Fade Master. 226 Kilburn High Rd, London."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
