"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import { Zap, Scissors, Waves, User } from "lucide-react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="medium"
        background="floatingGradient"
        cardStyle="solid"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            navItems={[
              { name: "Home", id: "hero" },
              { name: "Services", id: "services" },
              { name: "Team", id: "team" },
              { name: "Reviews", id: "reviews" },
            ]}
            brandName="The Porch"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardScroll
            background={{ variant: "gradient-bars" }}
            title="Crispy Cuts. Real People. Every Time."
            description="Experience the ultimate grooming standard at The Porch Barbershop. Where luxury meets craftsmanship."
            imageSrc="http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg"
            imageAlt="luxury barbershop interior dark theme"
            buttons={[{ text: "Book Appointment", href: "#contact" }]}
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardFourteen
            useInvertedBackground={true}
            title="The Porch Standard"
            tag="Excellence"
            metrics={[
              { id: "m1", value: "7+", description: "Years of Craft" },
              { id: "m2", value: "4.9", description: "Google Rating" },
              { id: "m3", value: "500+", description: "Happy Clients" },
            ]}
            metricsAnimation="slide-up"
          />
        </div>

        <div id="about" data-section="about">
          <TextSplitAbout
            useInvertedBackground={false}
            title="More Than A Haircut"
            description={[
              "Founded on the principles of community and precision, The Porch Barbershop is built for those who value authenticity.",              "From the moment you walk in, you're not just a client, you're part of the neighborhood."]}
          />
        </div>

        <div id="services" data-section="services">
          <FeatureCardTwentySix
            textboxLayout="default"
            useInvertedBackground={true}
            features={[
              { title: "Precision Fade", description: "The cleanest fades in town.", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg" },
              { title: "Classic Haircut", description: "Timeless styles for everyone.", buttonIcon: Scissors, imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg" },
              { title: "Beard Trim", description: "Sculpted to perfection.", buttonIcon: Waves, imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-male-sunglasses-with-tattoo-his-arm_613910-12144.jpg" },
              { title: "Kids Cut", description: "Style for the young ones.", buttonIcon: User, imageSrc: "http://img.b2bpic.net/free-photo/happy-handsome-african-american-tattooed-man-with-stylish-hair-beard-white-shirt-holding-hand-his-chin_613910-6571.jpg" },
            ]}
            title="Our Signature Services"
            description="A curated list of grooming services performed by master barbers."
          />
        </div>

        <div id="team" data-section="team">
          <TeamCardTwo
            animationType="slide-up"
            textboxLayout="split"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            members={[
              { id: "1", name: "Louie", role: "Master Barber", description: "The veteran with 10 years experience.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-male-sunglasses-with-tattoo-his-arm_613910-12144.jpg" },
              { id: "2", name: "Gus", role: "Senior Barber", description: "Precision fade expert.", imageSrc: "http://img.b2bpic.net/free-photo/happy-handsome-african-american-tattooed-man-with-stylish-hair-beard-white-shirt-holding-hand-his-chin_613910-6571.jpg" },
              { id: "3", name: "Jesus", role: "Barber", description: "Fresh and stylish cuts.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-barber-shop_1157-21514.jpg" },
            ]}
            title="Meet The Crew"
            description="Our barbers are master craftsmen."
          />
        </div>

        <div id="reviews" data-section="reviews">
          <TestimonialCardTwelve
            useInvertedBackground={true}
            testimonials={[
              { id: "1", name: "John D.", imageSrc: "http://img.b2bpic.net/free-photo/funny-worker-amusing-colleague-office-telling-joke_482257-102093.jpg" },
              { id: "2", name: "Mike R.", imageSrc: "http://img.b2bpic.net/free-photo/looking-proud-confident-cool-cheeky-arrogant-smiling-feeling-successful_1194-400217.jpg" },
              { id: "3", name: "Sam K.", imageSrc: "http://img.b2bpic.net/free-photo/energized-good-looking-assured-successful-man-with-beard-blue-eyes-stylish-formal-suit-showing-thumbs-up-being-assured-plan-work-great-standing-self-assured-against-gray-wall_176420-22712.jpg" },
              { id: "4", name: "David W.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-getting-haircut_23-2149220536.jpg" },
              { id: "5", name: "Brian L.", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205917.jpg" },
              { id: "6", name: "Chris B.", imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-wearing-white-shirt-looking-smiling-confident-showing-ok-sign-standing-pink-wall_141793-55819.jpg" },
            ]}
            cardTitle="Client Voices"
            cardTag="4.9 Stars"
            cardAnimation="slide-up"
          />
        </div>

        <div id="social" data-section="social">
          <SocialProofOne
            textboxLayout="default"
            useInvertedBackground={false}
            names={["Google", "Yelp", "StyleSeat", "Instagram", "Facebook", "TikTok", "Local Magazine"]}
            title="Quality Assured"
            description="Trusted by grooming enthusiasts across the region."
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplit
            useInvertedBackground={true}
            background={{ variant: "plain" }}
            tag="Booking"
            title="Book Your Seat"
            description="Ready to get the freshest cut in town? Fill out the form and we'll reach out to confirm your slot."
            imageSrc="http://img.b2bpic.net/free-photo/different-razors-table_23-2147736988.jpg"
            mediaAnimation="slide-up"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBase
            columns={[
              { title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#services" }, { label: "Team", href: "#team" }] },
              { title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] },
              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] },
            ]}
            logoText="The Porch"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
