"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="compact"
        sizing="large"
        background="noiseDiagonalGradient"
        cardStyle="layered-gradient"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Services",
          id: "services",
        },
        {
          name: "Team",
          id: "team",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Golden Crown"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-animated",
      }}
      title="Timeless Grooming. Masterfully Crafted."
      description="Experience the classic art of barbering at Golden Crown. From precision cuts to traditional shaves, we redefine your style."
      buttons={[
        {
          text: "Book Now",
          href: "#contact",
        },
      ]}
      carouselItems={[
        {
          id: "1",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-female-hairdresser-washing-bearded-men-s-hair-before-haircut-saloon_613910-5446.jpg?_wi=1",
          imageAlt: "barber shop interior modern classic",
        },
        {
          id: "2",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-disposable-razors_23-2147787979.jpg",
          imageAlt: "barber tools organized professional",
        },
        {
          id: "3",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-wrapping-customer-towels-barbershop_23-2147737011.jpg",
          imageAlt: "barbershop decor vintage feel",
        },
        {
          id: "4",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-his-hair-cut_23-2148256900.jpg",
          imageAlt: "barber using trimmer fade",
        },
        {
          id: "5",
          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-bath-concept-accessories_23-2148419338.jpg",
          imageAlt: "barber cape scissors comb",
        },
        {
          id: "6",
          imageSrc: "http://img.b2bpic.net/free-photo/wide-angle-shot-wooden-construction-surrounded-by-buildings_181624-12724.jpg",
          imageAlt: "barber shop exterior classic",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="The Golden Standard of Grooming"
      description="With over 15 years of experience, we pride ourselves on delivering a master-class experience that combines old-world technique with modern style."
      metrics={[
        {
          value: "15k+",
          title: "Cuts Performed",
        },
        {
          value: "98%",
          title: "Client Satisfaction",
        },
        {
          value: "5",
          title: "Master Barbers",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-getting-groomed_23-2149220567.jpg"
      imageAlt="barber shop master at work"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyNine
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={true}
      features={[
        {
          title: "Precision Cuts",
          description: "Tailored cuts for every hair type.",
          imageSrc: "http://img.b2bpic.net/free-photo/different-razors-table_23-2147736988.jpg",
          titleImageSrc: "http://img.b2bpic.net/free-photo/hair-brush-pins-copy-space_23-2148352961.jpg",
          buttonText: "View",
        },
        {
          title: "Royal Shave",
          description: "Classic hot towel shave.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6357.jpg",
          titleImageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-18295.jpg",
          buttonText: "View",
        },
        {
          title: "Beard Styling",
          description: "Perfectly defined edges.",
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-male-self-care-setting-still-life_23-2150326559.jpg",
          titleImageSrc: "http://img.b2bpic.net/free-photo/crop-hands-trimming-beard-man_23-2147778822.jpg",
          buttonText: "View",
        },
        {
          title: "Grey Blending",
          description: "Natural, subtle concealment.",
          imageSrc: "http://img.b2bpic.net/free-photo/faceless-woman-cutting-beard-man_23-2147778905.jpg",
          titleImageSrc: "http://img.b2bpic.net/free-photo/young-confident-blonde-male-barber-uniform-holds-face-trimming-beard-with-hair-clipper-isolated-green-space-with-copy-space_141793-60152.jpg",
          buttonText: "View",
        },
        {
          title: "Head Spa",
          description: "Relaxing scalp treatment.",
          imageSrc: "http://img.b2bpic.net/free-photo/person-enjoying-scalp-massage-spa_23-2151454773.jpg",
          titleImageSrc: "http://img.b2bpic.net/free-photo/man-giving-himself-scalp-massage_23-2151307466.jpg",
          buttonText: "View",
        },
        {
          title: "Edge Ups",
          description: "Sharp lines guaranteed.",
          imageSrc: "http://img.b2bpic.net/free-photo/headshot-hipster-fashionable-man-with-long-red-beard-stylish-haircut-having-angry-unhappy-facial-expression-scowling-frowning-while-posing-against-blank-blackboard-with-arms-crossed_273609-6377.jpg",
          titleImageSrc: "http://img.b2bpic.net/free-photo/groomed-bearded-man-with-tattooes-is-posing-dark-photo-studio_613910-15016.jpg",
          buttonText: "View",
        },
      ]}
      title="Our Signature Services"
      description="Precision and care in every detail."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardEleven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      groups={[
        {
          id: "g1",
          groupTitle: "Senior Barbers",
          members: [
            {
              id: "m1",
              title: "John Doe",
              subtitle: "Master Barber",
              detail: "15+ years experience.",
              imageSrc: "http://img.b2bpic.net/free-photo/guy-white-shirt-with-red-tie-bow_158595-143.jpg",
            },
            {
              id: "m2",
              title: "Jane Smith",
              subtitle: "Senior Stylist",
              detail: "Expert in modern fades.",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-two-male-barbers-looking-camera_23-2147839857.jpg",
            },
            {
              id: "m3",
              title: "Mike Ross",
              subtitle: "Barber Specialist",
              detail: "Beard grooming aficionado.",
              imageSrc: "http://img.b2bpic.net/free-photo/concentrated-young-barber-wearing-uniform-glasses-holding-teaser-comb-hair-trimmer-trimming-his-own-beard-with-closed-eyes-isolated-blue-background_141793-134233.jpg",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-female-hairdresser-washing-bearded-men-s-hair-before-haircut-saloon_613910-5446.jpg?_wi=2",
          imageAlt: "barber portrait professional smiling",
        },
      ]}
      title="Meet Your Barbers"
      description="Passionate experts behind the chair."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "me1",
          value: "100%",
          description: "Commitment to hygiene.",
        },
        {
          id: "me2",
          value: "30min",
          description: "Avg service time.",
        },
        {
          id: "me3",
          value: "20+",
          description: "Local community awards.",
        },
      ]}
      title="Our Impact"
      description="Why we are the city's preferred choice."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Robert B.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-bearded-young-man-from-spain-elegant-gray-shirt_181624-58370.jpg",
        },
        {
          id: "t2",
          name: "Michael S.",
          imageSrc: "http://img.b2bpic.net/free-photo/man-giving-thumbs-up-holding-trimmer_23-2148389897.jpg",
        },
        {
          id: "t3",
          name: "David W.",
          imageSrc: "http://img.b2bpic.net/free-photo/person-suffering-from-emotional-numbness_23-2151089771.jpg",
        },
        {
          id: "t4",
          name: "Chris P.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-waitress_107420-12324.jpg",
        },
        {
          id: "t5",
          name: "James L.",
          imageSrc: "http://img.b2bpic.net/free-photo/lady-summer-cafe-woman-sitting-table-famale-with-cute-dog_1157-41816.jpg",
        },
      ]}
      cardTitle="Client Voices"
      cardTag="Reviews"
      cardAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",
          title: "Do I need an appointment?",
          content: "Yes, we recommend booking online to guarantee your spot.",
        },
        {
          id: "f2",
          title: "What products do you use?",
          content: "We use premium, locally sourced grooming products.",
        },
        {
          id: "f3",
          title: "Do you accept walk-ins?",
          content: "Occasionally, but priority goes to appointments.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-man-looking-mirror_23-2149141781.jpg"
      title="Common Questions"
      description="Everything you need to know."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Book Your Visit"
      description="Get ready for a premium experience."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Name",
        },
        {
          name: "email",
          type: "email",
          placeholder: "Email Address",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186473.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="Golden Crown"
      copyrightText="© 2025 Golden Crown Barber Shop"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
