import React, { useEffect } from 'react';
import $ from 'jquery';
import Navbar from '../Layouts/Navbar';
import Footer from '../Layouts/Footer';
// Note: Adjusted import path assuming Navbar/Footer are one level up and over
import HeroSection from './Sections/HeroSection';
import AboutSection from './Sections/AboutSection';
import CurrentPrograms from './Sections/CurrentPrograms';
import GallerySection from './Sections/GallerySection';
import BlogSection from './Sections/BlogSection';
import CTASection from '../Layouts/Cta';

const Index = () => {
  useEffect(() => {
    // Example jQuery: Fade in the hero content on load
    // Keep this selector aligned with HeroSection.jsx
    $('.hero-content-wrapper').hide().fadeIn(1500);

    // Smooth scroll for nav links using jQuery
    $('.nav-link').on('click', function(event) {
      if (this.hash !== "") {
        event.preventDefault();
        const hash = this.hash;
        $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 800);
      }
    });
  }, []);

  return (
    <div className="home-wrapper">
      <Navbar />
      <main>
        <HeroSection />
        <AboutSection />
        <CurrentPrograms />
        <GallerySection />
        <BlogSection />
        <CTASection />
      </main>
      <Footer />
    </div>
  );
};

export default Index;
