"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import AboutMetric from '@/components/sections/about/AboutMetric';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactText from '@/components/sections/contact/ContactText';
import { Star, MapPin, Phone } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmallSizeLargeTitles"
        background="none"
        cardStyle="glass-depth"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Home", id: "hero" },
        { name: "About", id: "experience" },
        { name: "Services", id: "services" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="Jeff & Company"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardScroll
      background={{ variant: "plain" }}
      title="Jeff & Company Grooming"
      description="Calm, Gentle Grooming Your Pet Will Love. A trusted, 5-star grooming experience designed to keep your pet relaxed, comfortable, and looking their best."
      tag="⭐ 5.0 Rated Grooming Service"
      buttons={[
        { text: "Book Now", href: "/contact" },
        { text: "Call Now", href: "tel:07598206450" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/adorable-pet-enjoying-spa-day-illustration_23-2151841570.jpg"
      imageAlt="Professional pet groomer smiling with a happy groomed dog"
      tagIcon={Star}
    />
  </div>

  <div id="experience" data-section="experience">
      <AboutMetric
      title="About Our Gentle Approach"
      metrics={[
        { icon: Star, label: "Rating", value: "5.0 Star" },
        { icon: MapPin, label: "Location", value: "Ruislip" },
        { icon: Phone, label: "Support", value: "07598 206450" },
      ]}
      metricsAnimation="slide-up"
      useInvertedBackground={false}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      title="Our Services"
      description="Comprehensive, stress-free grooming packages tailored to your pet's temperament."
      features={[
        { title: "Full Groom", description: "Complete wash, cut, and style.", imageSrc: "http://img.b2bpic.net/free-vector/several-flat-pet-store-elements_23-2147569069.jpg" },
        { title: "Puppy Pamper", description: "Gentle introduction for new pets.", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cute-dog-close-up_23-2148949388.jpg" },
        { title: "Maintenance", description: "Keep them clean between grooms.", imageSrc: "http://img.b2bpic.net/free-photo/yorkshire-terrier-getting-procedure-groomer-salon-young-woman-white-tshirt-combing-little-dog-yorkshire-terrier-puppy-blue-table_1157-51439.jpg" },
      ]}
    />
  </div>

  <div id="trust" data-section="trust">
      <TestimonialCardSix
      animationType="slide-up"
      title="What Pet Owners Say"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        { id: "1", name: "Sarah J.", handle: "@puppyowner", testimonial: "The best grooming experience in Ruislip!" },
        { id: "2", name: "Mark D.", handle: "@client", testimonial: "So patient with my nervous dog." },
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      text="Ready to pamper your pet? Book your appointment today and see the difference a calm, loving touch makes."
      background={{ variant: "plain" }}
      buttons={[{ text: "Call 07598 206450", href: "tel:07598206450" }]}
      useInvertedBackground={false}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Jeff & Company"
      columns={[
        { title: "Location", items: [{ label: "Ruislip, Greater London", href: "#" }] },
        { title: "Contact", items: [{ label: "07598 206450", href: "tel:07598206450" }] },
        { title: "Hours", items: [{ label: "Mon-Fri: 9-5", href: "#" }] },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}