"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="largeSizeMediumTitles"
        background="none"
        cardStyle="solid"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Home", id: "home" },
        { name: "About", id: "about" },
        { name: "Pricing", id: "pricing" },
        { name: "Testimonials", id: "testimonial" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="FlawLikeMigo"
    />
  </div>

  <div id="home" data-section="home">
      <HeroCarouselLogo
      logoText="FlawLikeMigo"
      description="Serving Buda, Kyle, and the greater Austin area—elevating your style with precision."
      buttons={[
        { text: "Book Appointment", href: "#contact" },
      ]}
      slides={[
        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXcDHoKBX1pK6RdszTOwD4Yhel/uploaded-1774639907880-qdv0qs1a.jpg" },
        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXcDHoKBX1pK6RdszTOwD4Yhel/uploaded-1774639907880-gfi2j7xb.jpg" }
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="The Migo Touch"
      tag="Come get right, best in the city I don’t sell the cut I sell an experience"
      description="FlawLikeMigo is a young, precision-focused barber based in Buda and Kyle, Texas—just a 15-minute drive from Austin. With years of experience behind the chair, we are dedicated to providing more than just a haircut; we curate a premium grooming experience designed to leave you feeling sharp, confident, and ready for anything."
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BXcDHoKBX1pK6RdszTOwD4Yhel/uploaded-1774640146026-zf8iucja.jpg"
      videoSrc="https://www.w3schools.com/howto/img_video.mp4?_wi=2"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "p2",          badge: "Classic",          price: "$35",          subtitle: "Haircut with Eyebrows",          buttons: [{ text: "Book", href: "#contact" }],
          features: ["Precision Haircut", "Eyebrow Grooming", "Line-up"],
        },
        {
          id: "p1",          badge: "Signature",          price: "$45",          subtitle: "Full service hair cut with design, black mask, and eyebrows",          buttons: [{ text: "Book", href: "#contact" }],
          features: ["Precision Haircut", "Custom Design", "Black Mask Treatment", "Eyebrow Grooming"],
        },
        {
          id: "p3",          badge: "Complete",          price: "$50",          subtitle: "Full Grooming",          buttons: [{ text: "Book", href: "#contact" }],
          features: ["Signature Cut", "Beard Trim", "Facial Treatment"],
        },
      ]}
      title="Services & Pricing"
      description="Select the service that fits your style."
    />
  </div>

  <div id="testimonial" data-section="testimonial">
      <TestimonialCardTwo
      animationType="blur-reveal"
      textboxLayout="split"
      useInvertedBackground={false}
      title="Client Reviews"
      description="What our community has to say about the Migo experience."
      testimonials={[]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      tag="Book Now"
      title="Schedule Your Visit"
      description="Ready to get fresh? Reach out and let's get you on the schedule."
      background={{ variant: "plain" }}
      useInvertedBackground={false}
      mediaPosition="right"
      imageSrc="http://img.b2bpic.net/free-photo/tools-from-barbershop-wooden-background_1303-10377.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        { title: "Navigation", items: [{ label: "Home", href: "#home" }, { label: "Pricing", href: "#pricing" }] },
        { title: "Connect", items: [{ label: "Instagram", href: "https://instagram.com" }, { label: "Terms", href: "#" }] }
      ]}
      logoText="FlawLikeMigo"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}