"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
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 TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="largeSizeMediumTitles"
        background="floatingGradient"
        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: "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="http://img.b2bpic.net/free-photo/medium-shot-man-getting-groomed-salon_23-2149220574.jpg?_wi=2"
      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">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",          name: "James R.",          handle: "@jamesr",          testimonial: "Best fade I've had in years. Migo is a perfectionist.",          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-sitting-isolated-grey_171337-10568.jpg?_wi=1"},
        {
          id: "t2",          name: "Marcus W.",          handle: "@m_w",          testimonial: "Clean, sharp, and consistent. The service is always top tier.",          imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-handsome-barber-holding-hair-clippers-winner-cup-isolated-olive-green_141793-84218.jpg"},
        {
          id: "t3",          name: "David L.",          handle: "@dl_styles",          testimonial: "Top quality service. I walk out feeling like a new man every time.",          imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-giving-haircut-customer_23-2148506233.jpg"}
      ]}
      title="What Clients Say"
      description="Don't just take our word for it."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Schedule Your Visit (512-504-6134)"
      description="Ready to get fresh? Reach out and let's get you on the schedule."
      inputs={[
        { name: "name", type: "text", placeholder: "Your Name", required: true },
        { name: "email", type: "email", placeholder: "Your Email", required: true },
      ]}
      textarea={{
        name: "message",        placeholder: "Which service do you need?",        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/tools-from-barbershop-wooden-background_1303-10377.jpg"
      mediaAnimation="slide-up"
      videoSrc="https://www.w3schools.com/howto/img_video.mp4?_wi=3"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="FlawLikeMigo"
      leftLink={{ text: "Instagram", href: "https://instagram.com" }}
      rightLink={{ text: "Terms of Service", href: "#" }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}