import React, { useEffect } from 'react';
import $ from 'jquery';
import Navbar from '../Layouts/Navbar';
import Footer from '../Layouts/Footer';
import HeaderCardSection from './Sections/HeaderCardSection';
import MissionVisionSection from './Sections/MissionVisionSection';
import ValuesSection from './Sections/ValuesSection';
import TrustDetailsSection from './Sections/TrustDetailsSection';
import GeneralObjectives from './Sections/GeneralObjectives';
import IncomeExpenditureSection from './Sections/IncomeExpenditureSection';
import CTASection from '../Layouts/Cta';
// Note: Adjusted import path assuming Navbar/Footer are one level up and over


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>
        <HeaderCardSection />
        <MissionVisionSection />
        <ValuesSection/>
        <TrustDetailsSection/>
        <GeneralObjectives />
        <IncomeExpenditureSection />
        <CTASection/>
      </main>
      <Footer />
    </div>
  );
};

export default Index;
