<!-- Hero Section -->
  <section class="relative bg-gradient-to-r from-primary to-accent text-white overflow-hidden">
    <div class="absolute inset-0 bg-black opacity-20"></div>
    <div class="relative  mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
        <div>
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
            Empowering Youth Through <span class="text-secondary">Capacity Building</span>
          </h1>
          <p class="mt-4 text-lg md:text-xl">Connecting College with Community to create future leaders</p>
          <div class="mt-8 flex flex-col sm:flex-row gap-4">
            <button class="bg-secondary hover:bg-yellow-600 text-white py-3 px-6 rounded-full font-semibold flex items-center justify-center space-x-2 transition-colors shadow-lg">
              <i class="fa-solid fa-hand-holding-dollar"></i>
              <span>Donate Now</span>
            </button>
            <button class="bg-transparent border-2 border-white hover:bg-white hover:text-primary text-white py-3 px-6 rounded-full font-semibold flex items-center justify-center space-x-2 transition-colors">
              <i class="fa-solid fa-circle-play"></i>
              <span>Watch Video</span>
            </button>
          </div>
        </div>
        <div class="flex justify-center lg:justify-end">
          <div class="relative">
            <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Youth Empowerment" class="rounded-lg shadow-2xl max-w-full h-auto">
            <div class="absolute -bottom-6 -left-6 bg-white text-primary p-4 rounded-lg shadow-lg hidden md:block">
              <div class="text-3xl font-bold">500+</div>
              <div class="text-sm">Youths Empowered</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-16 bg-white transform skew-y-1 -mb-8"></div>
  </section>

  <!-- About Section -->
  <section class="py-16 bg-gray-50 relative">
    <div class=" mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900">About   <?= ucwords($profile['website_name']) ?>
</h2>
        <div class="w-24 h-1 bg-accent mx-auto mt-4"></div>
        <p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">We are a non-profit organization dedicated to empowering youth through education, skill development, and community engagement.</p>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        <div class="bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
          <div class="bg-primary rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
            <i class="fa-solid fa-graduation-cap text-white text-2xl"></i>
          </div>
          <h3 class="text-xl font-semibold text-gray-800">Education</h3>
          <p class="mt-2 text-gray-600">Providing quality education and learning resources to underprivileged youth.</p>
        </div>
        
        <div class="bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
          <div class="bg-accent rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
            <i class="fa-solid fa-briefcase text-white text-2xl"></i>
          </div>
          <h3 class="text-xl font-semibold text-gray-800">Skill Development</h3>
          <p class="mt-2 text-gray-600">Training programs to develop marketable skills for better employment opportunities.</p>
        </div>
        
        <div class="bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
          <div class="bg-secondary rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
            <i class="fa-solid fa-users text-white text-2xl"></i>
          </div>
          <h3 class="text-xl font-semibold text-gray-800">Community</h3>
          <p class="mt-2 text-gray-600">Building strong communities through youth engagement and volunteerism.</p>
        </div>
        
        <div class="bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
          <div class="bg-purple-600 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
            <i class="fa-solid fa-handshake text-white text-2xl"></i>
          </div>
          <h3 class="text-xl font-semibold text-gray-800">Partnerships</h3>
          <p class="mt-2 text-gray-600">Collaborating with organizations to maximize our impact and reach.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ Section -->
  <section class="py-16 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900">Frequently Asked Questions</h2>
        <div class="w-24 h-1 bg-primary mx-auto mt-4"></div>
        <p class="mt-4 text-lg text-gray-600">Find answers to common questions about our foundation and programs.</p>
      </div>
      
      <div class="space-y-4">
        <div class="border border-gray-200 rounded-lg">
          <button class="faq-question w-full text-left p-4 font-semibold text-gray-800 flex justify-between items-center">
            What is the mission of   <?= ucwords($profile['website_name']) ?>
?
            <i class="fa-solid fa-chevron-down transition-transform"></i>
          </button>
          <div class="faq-answer hidden p-4 pt-0 text-gray-600">
            Our mission is to empower youth through capacity building, education, and community engagement. We aim to bridge the gap between academic learning and practical skills needed in the workforce.
          </div>
        </div>
        
        <div class="border border-gray-200 rounded-lg">
          <button class="faq-question w-full text-left p-4 font-semibold text-gray-800 flex justify-between items-center">
            How can I get involved with your programs?
            <i class="fa-solid fa-chevron-down transition-transform"></i>
          </button>
          <div class="faq-answer hidden p-4 pt-0 text-gray-600">
            You can get involved by volunteering, participating in our workshops, or applying for our internship programs. Visit our "Join Us" page for more details on current opportunities.
          </div>
        </div>
        
        <div class="border border-gray-200 rounded-lg">
          <button class="faq-question w-full text-left p-4 font-semibold text-gray-800 flex justify-between items-center">
            Do you offer any scholarships or financial aid?
            <i class="fa-solid fa-chevron-down transition-transform"></i>
          </button>
          <div class="faq-answer hidden p-4 pt-0 text-gray-600">
            Yes, we offer scholarships and financial assistance to deserving students based on merit and financial need. Check our "Programs" section for current scholarship opportunities.
          </div>
        </div>
        
        <div class="border border-gray-200 rounded-lg">
          <button class="faq-question w-full text-left p-4 font-semibold text-gray-800 flex justify-between items-center">
            How can I donate to your foundation?
            <i class="fa-solid fa-chevron-down transition-transform"></i>
          </button>
          <div class="faq-answer hidden p-4 pt-0 text-gray-600">
            You can donate through our website using the "Donate" button, or contact us for information on other donation methods. All donations are tax-deductible.
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonials Section -->
  <section class="py-16 bg-gray-50 overflow-hidden">
    <div class=" mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <h2 class="text-3xl md:text-4xl font-bold text-gray-900">What People Say About Us</h2>
        <div class="w-24 h-1 bg-accent mx-auto mt-4"></div>
      </div>
      
      <div class="relative">
        <div class="testimonial-scroll flex space-x-6">
          <!-- Duplicate testimonials for seamless scroll -->
          <div class="flex space-x-6">
            <div class="bg-white p-6 rounded-lg shadow-md min-w-[300px] md:min-w-[400px]">
              <div class="flex items-center mb-4">
                <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Sarah Johnson" class="w-12 h-12 rounded-full object-cover">
                <div class="ml-4">
                  <h4 class="font-semibold text-gray-800">Sarah Johnson</h4>
                  <p class="text-sm text-gray-600">Former Intern</p>
                </div>
              </div>
              <p class="text-gray-600">"The internship program at   <?= ucwords($profile['website_name']) ?>
 transformed my career path. The hands-on experience and mentorship I received were invaluable."</p>
              <div class="mt-4 text-yellow-400">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
              </div>
            </div>
            
            <div class="bg-white p-6 rounded-lg shadow-md min-w-[300px] md:min-w-[400px]">
              <div class="flex items-center mb-4">
                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Michael Chen" class="w-12 h-12 rounded-full object-cover">
                <div class="ml-4">
                  <h4 class="font-semibold text-gray-800">Michael Chen</h4>
                  <p class="text-sm text-gray-600">Workshop Participant</p>
                </div>
              </div>
              <p class="text-gray-600">"The coding workshop helped me land my first job in tech. The instructors were knowledgeable and supportive throughout the learning process."</p>
              <div class="mt-4 text-yellow-400">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
              </div>
            </div>
            
            <div class="bg-white p-6 rounded-lg shadow-md min-w-[300px] md:min-w-[400px]">
              <div class="flex items-center mb-4">
                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Priya Patel" class="w-12 h-12 rounded-full object-cover">
                <div class="ml-4">
                  <h4 class="font-semibold text-gray-800">Priya Patel</h4>
                  <p class="text-sm text-gray-600">Volunteer</p>
                </div>
              </div>
              <p class="text-gray-600">"Volunteering with Webcodian has been a rewarding experience. I've seen firsthand how our programs change lives in the community."</p>
              <div class="mt-4 text-yellow-400">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star-half-stroke"></i>
              </div>
            </div>
          </div>
          
          <!-- Duplicate set for seamless scrolling -->
          <div class="flex space-x-6">
            <div class="bg-white p-6 rounded-lg shadow-md min-w-[300px] md:min-w-[400px]">
              <div class="flex items-center mb-4">
                <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Sarah Johnson" class="w-12 h-12 rounded-full object-cover">
                <div class="ml-4">
                  <h4 class="font-semibold text-gray-800">Sarah Johnson</h4>
                  <p class="text-sm text-gray-600">Former Intern</p>
                </div>
              </div>
              <p class="text-gray-600">"The internship program at   <?= ucwords($profile['website_name']) ?>
 transformed my career path. The hands-on experience and mentorship I received were invaluable."</p>
              <div class="mt-4 text-yellow-400">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
              </div>
            </div>
            
            <div class="bg-white p-6 rounded-lg shadow-md min-w-[300px] md:min-w-[400px]">
              <div class="flex items-center mb-4">
                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Michael Chen" class="w-12 h-12 rounded-full object-cover">
                <div class="ml-4">
                  <h4 class="font-semibold text-gray-800">Michael Chen</h4>
                  <p class="text-sm text-gray-600">Workshop Participant</p>
                </div>
              </div>
              <p class="text-gray-600">"The coding workshop helped me land my first job in tech. The instructors were knowledgeable and supportive throughout the learning process."</p>
              <div class="mt-4 text-yellow-400">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
              </div>
            </div>
            
            <div class="bg-white p-6 rounded-lg shadow-md min-w-[300px] md:min-w-[400px]">
              <div class="flex items-center mb-4">
                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Priya Patel" class="w-12 h-12 rounded-full object-cover">
                <div class="ml-4">
                  <h4 class="font-semibold text-gray-800">Priya Patel</h4>
                  <p class="text-sm text-gray-600">Volunteer</p>
                </div>
              </div>
              <p class="text-gray-600">"Volunteering with Webcodian has been a rewarding experience. I've seen firsthand how our programs change lives in the community."</p>
              <div class="mt-4 text-yellow-400">
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star"></i>
                <i class="fa-solid fa-star-half-stroke"></i>
              </div>
            </div>
          </div>
        </div>
        
        <!-- <div class="absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-gray-50 to-transparent z-10"></div>
        <div class="absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-gray-50 to-transparent z-10"></div> -->
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="py-16 gradient-bg text-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <h2 class="text-3xl md:text-4xl font-bold">Join Our Mission to Empower Youth</h2>
      <p class="mt-4 text-lg max-w-2xl mx-auto">Your support can make a difference in the lives of young people. Whether through volunteering, donations, or partnerships, you can help us create lasting change.</p>
      
      <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
        <button class="bg-secondary hover:bg-yellow-600 text-white py-3 px-6 rounded-full font-semibold flex items-center justify-center space-x-2 transition-colors shadow-lg">
          <i class="fa-solid fa-hand-holding-dollar"></i>
          <span>Donate Now</span>
        </button>
        <button class="bg-white hover:bg-gray-100 text-primary py-3 px-6 rounded-full font-semibold flex items-center justify-center space-x-2 transition-colors">
          <i class="fa-solid fa-user-plus"></i>
          <span>Become a Volunteer</span>
        </button>
      </div>
    </div>
  </section>




  // FAQ accordion
    const faqQuestions = document.querySelectorAll('.faq-question');
    
    faqQuestions.forEach(question => {
      question.addEventListener('click', () => {
        const answer = question.nextElementSibling;
        const icon = question.querySelector('i');
        
        // Toggle answer visibility
        answer.classList.toggle('hidden');
        
        // Rotate icon
        icon.classList.toggle('fa-chevron-down');
        icon.classList.toggle('fa-chevron-up');
        
        // Close other FAQ answers
        faqQuestions.forEach(otherQuestion => {
          if (otherQuestion !== question) {
            const otherAnswer = otherQuestion.nextElementSibling;
            const otherIcon = otherQuestion.querySelector('i');
            
            otherAnswer.classList.add('hidden');
            otherIcon.classList.remove('fa-chevron-up');
            otherIcon.classList.add('fa-chevron-down');
          }
        });
      });
    });