"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Activity, Award, CheckCircle } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeMediumTitles"
        background="noise"
        cardStyle="glass-elevated"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Services", id: "services" },
        { name: "Testimonials", id: "testimonials" },
        { name: "About", id: "about" },
        { name: "FAQ", id: "faq" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="POWER FITNESS VN"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDoubleCarousel
      background={{ variant: "rotated-rays-static" }}
      title="Fitness Center in CA 91402"
      description="Get professional coaching and personal training in a clean, welcoming space. I help you stay motivated and hit my goals."
      leftCarouselItems={[
        { imageSrc: "https://lh5.googleusercontent.com/p/AF1QipNlT_66s5e90m2y3-7l4Xy9F2N1wB8N28vEw3s5?_wi=1", imageAlt: "Gym equipment setup" },
        { imageSrc: "https://lh5.googleusercontent.com/p/AF1QipM55j_G0O21L1V_9W5Z4k3Jv2n6Q2S2Yn7rEa9V?_wi=1", imageAlt: "Gym training area" },
        { imageSrc: "https://lh5.googleusercontent.com/p/AF1QipO9r5S1N8Xn3M2T1x5E7y4Q9B0C8D6a7v4zJm2w?_wi=1", imageAlt: "Weight training station" },
      ]}
      rightCarouselItems={[
        { imageSrc: "https://lh5.googleusercontent.com/p/AF1QipN3j4v5M6z8X1C9T2Y0B6V8N7M4O1P9L3K5J7Q1", imageAlt: "Functional training zone" },
        { imageSrc: "https://lh5.googleusercontent.com/p/AF1QipL9k3J8M1N7B5V2X6C4Z0S1D9A7Q3W5E8R4T2Y0", imageAlt: "Gym atmosphere" },
        { imageSrc: "https://lh5.googleusercontent.com/p/AF1QipR7n2M5V9B1X3C6Z0L4K8J1H9G7F5D3S1A9Q8W4", imageAlt: "Coaching session" },
      ]}
      tag="⭐⭐⭐⭐⭐ 20 Google Reviews"
      buttons={[
        { text: "Claim My Free Trial", href: "#contact" },
        { text: "Start My Transformation", href: "#contact" },
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      negativeCard={{
        items: [
          "My gym routines can be confusing and lonely.",          "I waste hours on machines without seeing any real change.",          "Eating the wrong foods ruins all my hard work in the gym."],
      }}
      positiveCard={{
        items: [
          "Get personalized attention from a professional coach who builds a plan for me.",          "We provide nutritional help to ensure my food fuels my progress.",          "Train in a clean, professional, and supportive environment built for focus."],
      }}
      title="My Fitness Services"
      description="We offer personalized plans to help you reach your goals."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={true}
      title="What Members Say"
      description="See why locals trust Power Fitness VN."
      testimonials={[
        { id: "1", title: "Personal Training", quote: "If you’re looking for a gym where you truly feel supported and motivated, Power Fitness VN is a great choice.", name: "Yuridia Herrera", role: "Member", imageSrc: "https://lh5.googleusercontent.com/p/AF1QipM55j_G0O21L1V_9W5Z4k3Jv2n6Q2S2Yn7rEa9V?_wi=2" },
        { id: "2", title: "Professional Coaching", quote: "The environment is clean, professional and very welcoming, the trainer truly focus on personalised attention.", name: "Marina Sanchez", role: "Member", imageSrc: "https://lh5.googleusercontent.com/p/AF1QipNlT_66s5e90m2y3-7l4Xy9F2N1wB8N28vEw3s5?_wi=2" },
        { id: "3", title: "Results", quote: "Excellent service, personalized follow-up, professional coach, nutritional help.", name: "Gloria Molina", role: "Member", imageSrc: "https://lh5.googleusercontent.com/p/AF1QipO9r5S1N8Xn3M2T1x5E7y4Q9B0C8D6a7v4zJm2w?_wi=2" },
      ]}
    />
  </div>

  <div id="process" data-section="process">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
        { id: "1", value: "01", description: "Meet My Coach: Schedule a time to visit our Titus St location and discuss my goals." },
        { id: "2", value: "02", description: "Get My Plan: Receive a custom workout and nutrition strategy tailored to my body." },
        { id: "3", value: "03", description: "Reach My Goals: Train with expert guidance and see measurable results every week." },
      ]}
      title="My 3-Step Process"
      description="How I help you get started."
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="About Power Fitness VN"
      metrics={[
        { icon: Activity, label: "Personal Training", value: "100%" },
        { icon: Award, label: "Professional Coaches", value: "NASM/ACE" },
        { icon: CheckCircle, label: "Clean Facility", value: "Certified" },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      faqs={[
        { id: "f1", title: "What do I get in my free trial?", content: "You will get a tour of our facility and a brief consultation with a professional coach." },
        { id: "f2", title: "Is the nutrition plan included?", content: "Yes, we provide personalized nutritional help as part of our coaching program." },
        { id: "f3", title: "What are your hours?", content: "Monday – Saturday: 6:00 AM – 11:00 AM. Sunday: Closed." },
      ]}
      title="Common Questions"
      description="We are here to help."
      faqsAnimation="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      tag="Contact"
      title="Start My Results Today"
      description="Reach out and let us help you transform your health and wellness journey."
      buttons={[{ text: "Call Now", href: "tel:+17472546155" }]}
      useInvertedBackground={true}
      background={{ variant: "sparkles-gradient" }}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      logoText="POWER FITNESS VN"
      copyrightText="© 2025 POWER FITNESS VN. All rights reserved."
      columns={[
        {
          title: "Info",          items: [
            { label: "Home", href: "#hero" },
            { label: "Contact", href: "#contact" },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}