"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import Link from "next/link";
import { Sparkles, Shield, Zap, Users, Star, Clock, Heart, Award } from "lucide-react";
import { useState } from "react";

const navItems = [
  { name: "Home", id: "/" },
  { name: "Services", id: "/services" },
  { name: "Membership", id: "/membership" },
  { name: "Assessment", id: "#fitness-assessment" },
  { name: "Contact", id: "/contact" },
];

const footerColumns = [
  {
    items: [
      { label: "Home", href: "/" },
      { label: "Services", href: "/services" },
      { label: "About Us", href: "/about" },
      { label: "Contact", href: "/contact" },
    ],
  },
  {
    items: [
      { label: "Membership Plans", href: "/membership" },
      { label: "Personal Training", href: "/services" },
      { label: "Nutrition", href: "/services" },
      { label: "Testimonials", href: "/" },
    ],
  },
  {
    items: [
      { label: "📍 Location", href: "https://maps.google.com/?q=90+Feet+Road+Dharavi+Mumbai+400017" },
      { label: "📞 +91-XXXX-XXXXX", href: "tel:+919876543210" },
      { label: "📧 info@ignitefitness.com", href: "mailto:info@ignitefitness.com" },
      { label: "Open Till 12 AM", href: "/" },
    ],
  },
  {
    items: [
      { label: "Privacy Policy", href: "/" },
      { label: "Terms & Conditions", href: "/" },
      { label: "Membership Agreement", href: "/" },
      { label: "FAQs", href: "/" },
    ],
  },
];

export default function HomePage() {
  const [weight, setWeight] = useState("");
  const [fitnessGoal, setFitnessGoal] = useState("");
  const [hoursPerWeek, setHoursPerWeek] = useState("");
  const [assessmentComplete, setAssessmentComplete] = useState(false);

  const handleSubmitAssessment = (e: React.FormEvent) => {
    e.preventDefault();
    if (weight && fitnessGoal && hoursPerWeek) {
      setAssessmentComplete(true);
      setTimeout(() => {
        setAssessmentComplete(false);
        setWeight("");
        setFitnessGoal("");
        setHoursPerWeek("");
      }, 2000);
    }
  };

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="outline"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems.map((item) => ({
            name: item.name,
            id: item.id,
          }))}
          button={{ text: "Book Free Trial", href: "/contact" }}
          brandName="Ignite Fitness Club"
        />
      </div>

      <div id="hero" data-section="hero" className="w-full py-20">
        <HeroBillboard
          title="Dharavi's Premium Gym Experience"
          description="New Equipment. Expert Trainers. Real Transformations. Join 500+ members who've transformed their fitness journey at Ignite Fitness Club."
          background={{ variant: "sparkles-gradient" }}
          tag="⭐ 5.0 Rating | 26+ Reviews"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "🔥 Book Free Trial", href: "/contact" },
            { text: "📞 Call Now", href: "tel:+919876543210" },
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/sport-fitness-health-exercise-bikes-fitness-center_613910-20283.jpg?_wi=1"
          imageAlt="Ignite Fitness Club premium gym interior with modern equipment"
          mediaAnimation="slide-up"
          avatars={[
            {
              src: "http://img.b2bpic.net/free-photo/young-adult-doing-indoor-sport-gym_23-2149205542.jpg",              alt: "Certified trainer"
            },
            {
              src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-gym_23-2149049763.jpg",              alt: "Happy member"
            },
            {
              src: "http://img.b2bpic.net/free-photo/afro-american-sportsman-getting-ready-training_342744-655.jpg",              alt: "Transformed member"
            },
          ]}
          avatarText="Trusted by 500+ fitness enthusiasts in Dharavi"
        />
      </div>

      <div id="metrics" data-section="metrics" className="w-full py-16">
        <MetricCardOne
          title="Why Choose Ignite Fitness Club"
          description="Trust indicators backed by real numbers and quality service"
          tag="Trust Indicators"
          tagIcon={Shield}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "500",              title: "Active Members",              description: "Growing fitness community in Dharavi",              icon: Users,
            },
            {
              id: "2",              value: "26",              title: "5-Star Reviews",              description: "Premium gym experience verified",              icon: Star,
            },
            {
              id: "3",              value: "100%",              title: "New Equipment",              description: "Latest fitness technology available",              icon: Zap,
            },
            {
              id: "4",              value: "12",              title: "Open Till Midnight",              description: "Flexible training hours for professionals",              icon: Clock,
            },
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features" className="w-full py-20">
        <FeatureCardSeven
          title="Complete Fitness Solutions"
          description="Everything you need to achieve your fitness goals in one premium facility"
          tag="Our Services"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              id: 1,
              title: "Weight Training",              description: "State-of-the-art strength training equipment with personalized guidance from certified trainers. Build muscle and increase power.",              imageSrc: "http://img.b2bpic.net/free-photo/still-life-gym-equipment_23-2148197736.jpg?_wi=1"
            },
            {
              id: 2,
              title: "Cardio Excellence",              description: "Premium cardio machines including treadmills, ellipticals, and rowing machines. Improve endurance and heart health.",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-gym-fitnes_624325-2383.jpg?_wi=1"
            },
            {
              id: 3,
              title: "Personal Training",              description: "One-on-one coaching with certified fitness professionals. Customized workout plans tailored to your goals.",              imageSrc: "http://img.b2bpic.net/free-photo/young-sports-people-training-morning-gym_1157-32133.jpg?_wi=1"
            },
            {
              id: 4,
              title: "Fitness Testing",              description: "Comprehensive fitness assessments and body composition analysis. Track progress with scientific precision.",              imageSrc: "http://img.b2bpic.net/free-photo/female-athlete-doing-physical-effort-stepper-doctor-follows-her-sports-laboratory_482257-31674.jpg"
            },
            {
              id: 5,
              title: "Nutrition Counseling",              description: "Expert nutrition guidance and meal planning. Achieve your fitness goals with the right dietary support.",              imageSrc: "http://img.b2bpic.net/free-photo/healthy-menu-recipe-food-diet_53876-122837.jpg"
            },
          ]}
          textboxLayout="default"
          animationType="blur-reveal"
          buttons={[{ text: "Learn More", href: "/services" }]}
          buttonAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="about" data-section="about" className="w-full py-16">
        <TestimonialAboutCard
          tag="Premium Experience"
          tagIcon={Award}
          tagAnimation="slide-up"
          title="Quality Crowd. Energetic Environment. Real Results."
          description="Rahul Sharma"
          subdescription="Member since 2023 | Body Transformation Athlete"
          icon={Heart}
          imageSrc="http://img.b2bpic.net/free-photo/slim-sexy-blonde-young-sportswoman-with-athletic-body-pumped-press-poses-gym-looking-camera-black-sportswear-full-length-portrait_7502-8729.jpg"
          imageAlt="Member transformation success story"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="fitness-assessment" data-section="fitness-assessment" className="w-full py-20">
        <div className="mx-auto max-w-4xl px-6">
          <div className="mb-12 text-center">
            <h2 className="mb-4 text-4xl font-bold md:text-5xl">Personalized Fitness Assessment</h2>
            <p className="text-lg text-foreground/80">Let us understand your fitness goals and create a personalized plan for you</p>
          </div>

          <div className="mx-auto max-w-2xl rounded-lg bg-card p-8 shadow-lg">
            {assessmentComplete ? (
              <div className="text-center">
                <div className="mb-4 text-5xl">✅</div>
                <h3 className="mb-2 text-2xl font-bold text-primary-cta">Assessment Submitted!</h3>
                <p className="text-foreground/80">Thank you for completing your fitness assessment. Our trainers will review your information and reach out soon with a personalized plan.</p>
              </div>
            ) : (
              <form onSubmit={handleSubmitAssessment} className="space-y-6">
                <div>
                  <label className="mb-2 block text-sm font-semibold text-foreground">
                    Current Weight (kg)
                  </label>
                  <input
                    type="number"
                    step="0.1"
                    placeholder="Enter your weight"
                    value={weight}
                    onChange={(e) => setWeight(e.target.value)}
                    className="w-full rounded-lg border border-accent bg-background px-4 py-3 text-foreground placeholder-foreground/50 focus:border-primary-cta focus:outline-none"
                    required
                  />
                </div>

                <div>
                  <label className="mb-2 block text-sm font-semibold text-foreground">
                    Fitness Goal
                  </label>
                  <select
                    value={fitnessGoal}
                    onChange={(e) => setFitnessGoal(e.target.value)}
                    className="w-full rounded-lg border border-accent bg-background px-4 py-3 text-foreground focus:border-primary-cta focus:outline-none"
                    required
                  >
                    <option value="">Select your primary goal</option>
                    <option value="weight-loss">Weight Loss</option>
                    <option value="muscle-gain">Muscle Gain</option>
                    <option value="strength">Build Strength</option>
                    <option value="endurance">Improve Endurance</option>
                    <option value="general-fitness">General Fitness</option>
                    <option value="flexibility">Increase Flexibility</option>
                  </select>
                </div>

                <div>
                  <label className="mb-2 block text-sm font-semibold text-foreground">
                    Hours Devoted to Fitness Per Week
                  </label>
                  <input
                    type="number"
                    step="0.5"
                    placeholder="e.g., 3.5"
                    value={hoursPerWeek}
                    onChange={(e) => setHoursPerWeek(e.target.value)}
                    className="w-full rounded-lg border border-accent bg-background px-4 py-3 text-foreground placeholder-foreground/50 focus:border-primary-cta focus:outline-none"
                    required
                  />
                </div>

                <button
                  type="submit"
                  className="w-full rounded-lg bg-primary-cta px-6 py-3 font-semibold text-primary-cta-text transition-all hover:opacity-90"
                >
                  Submit Assessment
                </button>
              </form>
            )}
          </div>
        </div>
      </div>

      <div id="testimonials" data-section="testimonials" className="w-full py-20">
        <TestimonialCardTen
          title="Testimonials from Our Community"
          description="Real transformations from real members of Ignite Fitness Club"
          tag="Member Success Stories"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          testimonials={[
            {
              id: "1",              title: "Lost 15kg in 3 Months",              quote: "The trainers at IFC are incredibly motivating. They designed a perfect plan for my weight loss journey and I saw results within weeks. The clean environment and quality crowd kept me motivated throughout.",              name: "Priya Desai",              role: "Marketing Executive",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-successful-businesswoman-looking-into-camera-sitting-restaurant-business-lady-with-stylish-hairstyle-wears-elegant-suit-business-meeting-attractive-appearance_8353-12611.jpg",              imageAlt: "Priya Desai transformation"
            },
            {
              id: "2",              title: "Built Muscle & Confidence",              quote: "As a beginner, I was intimidated. But the certified trainers made me feel comfortable and guided me through every step. The quality of equipment and people here is unmatched in Dharavi.",              name: "Arjun Patel",              role: "Software Developer",              imageSrc: "http://img.b2bpic.net/free-photo/brutal-muscular-male-with-crossed-arms-dressed-blue-t-shirt-grey-background_613910-10043.jpg",              imageAlt: "Arjun Patel muscle building journey"
            },
            {
              id: "3",              title: "Perfect Balance of Fitness",              quote: "I love the 24-hour access and flexible timings. The nutrition counseling helped me understand the science behind fitness. IFC is not just a gym, it's a complete wellness center.",              name: "Anjali Verma",              role: "Entrepreneur",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg",              imageAlt: "Anjali Verma fitness journey"
            },
            {
              id: "4",              title: "Best Investment I Made",              quote: "Six months at IFC completely changed my lifestyle. The trainers pushed me to my limits in the best way possible. The community vibe is energetic and supportive.",              name: "Vikram Singh",              role: "Banker",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              imageAlt: "Vikram Singh fitness transformation"
            },
            {
              id: "5",              title: "Exceeded All Expectations",              quote: "Coming from a fancy Mumbai gym, I was skeptical. But IFC has premium equipment, expert trainers, and genuine members. The pricing is unbeatable for the quality offered.",              name: "Neha Kapoor",              role: "HR Manager",              imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",              imageAlt: "Neha Kapoor premium gym experience"
            },
            {
              id: "6",              title: "Consistent Results",              quote: "The structured programs and professional coaching made all the difference. I transformed from sedentary to athletic in just one year. Highly recommend IFC to anyone serious about fitness.",              name: "Rohan Gupta",              role: "Business Analyst",              imageSrc: "http://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg",              imageAlt: "Rohan Gupta fitness achievement"
            },
          ]}
        />
      </div>

      <div id="cta-section" data-section="cta-section" className="w-full py-20">
        <HeroBillboard
          title="Start Your Fitness Transformation Today"
          description="Book your free fitness assessment and consultation. Limited membership slots available this month. Join 500+ members already transforming their lives."
          background={{ variant: "animated-grid" }}
          tag="Limited Time Offer"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            { text: "📝 Get Free Trial Form", href: "/contact" },
            { text: "☎️ Call Now - +91-XXXX-XXXXX", href: "tel:+919876543210" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer" className="w-full py-12">
        <FooterLogoEmphasis
          columns={footerColumns}
          logoText="Ignite Fitness Club"
        />
      </div>
    </ThemeProvider>
  );
}
