import React, { useState } from 'react';
import { X, Menu, Heart, BookOpen, Briefcase, Users, Award, DollarSign, Mail, Phone, MapPin, Facebook, Twitter, Instagram, ChevronRight, ArrowRight } from 'lucide-react';

export default function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('home');
  
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  const navigateTo = (tab) => {
    setActiveTab(tab);
    setIsMenuOpen(false);
    window.scrollTo(0, 0);
  };

  return (
    <div className="font-inter min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <img 
              src="https://sitebrew.ai/f/ECS%20Logo%20ALT%201-W12f.jpeg" 
              alt="ECS Logo" 
              className="h-12 w-auto"
            />
            <span className="text-2xl font-bold text-gray-800 hidden md:block">ECS</span>
          </div>
          
          {/* Desktop Navigation */}
          <nav className="hidden md:flex space-x-8">
            <button 
              onClick={() => navigateTo('home')}
              className={`font-medium ${activeTab === 'home' ? 'text-[#FF6B6B]' : 'text-gray-600 hover:text-gray-900'}`}
            >
              Home
            </button>
            <button 
              onClick={() => navigateTo('about')}
              className={`font-medium ${activeTab === 'about' ? 'text-[#FF6B6B]' : 'text-gray-600 hover:text-gray-900'}`}
            >
              About Us
            </button>
            <button 
              onClick={() => navigateTo('services')}
              className={`font-medium ${activeTab === 'services' ? 'text-[#FF6B6B]' : 'text-gray-600 hover:text-gray-900'}`}
            >
              Services
            </button>
            <button 
              onClick={() => navigateTo('get-involved')}
              className={`font-medium ${activeTab === 'get-involved' ? 'text-[#FF6B6B]' : 'text-gray-600 hover:text-gray-900'}`}
            >
              Get Involved
            </button>
            <button 
              onClick={() => navigateTo('contact')}
              className={`font-medium ${activeTab === 'contact' ? 'text-[#FF6B6B]' : 'text-gray-600 hover:text-gray-900'}`}
            >
              Contact
            </button>
          </nav>
          
          <button 
            onClick={() => navigateTo('donate')}
            className="hidden md:block bg-[#FF6B6B] hover:bg-[#ff5252] text-white font-medium py-2 px-6 rounded-full transition duration-300"
          >
            Donate Now
          </button>
          
          {/* Mobile Menu Button */}
          <button 
            onClick={toggleMenu}
            className="md:hidden text-gray-600 focus:outline-none"
          >
            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
        
        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden bg-white py-4 px-4 shadow-lg">
            <nav className="flex flex-col space-y-4">
              <button 
                onClick={() => navigateTo('home')}
                className={`font-medium text-left py-2 ${activeTab === 'home' ? 'text-[#FF6B6B]' : 'text-gray-600'}`}
              >
                Home
              </button>
              <button 
                onClick={() => navigateTo('about')}
                className={`font-medium text-left py-2 ${activeTab === 'about' ? 'text-[#FF6B6B]' : 'text-gray-600'}`}
              >
                About Us
              </button>
              <button 
                onClick={() => navigateTo('services')}
                className={`font-medium text-left py-2 ${activeTab === 'services' ? 'text-[#FF6B6B]' : 'text-gray-600'}`}
              >
                Services
              </button>
              <button 
                onClick={() => navigateTo('get-involved')}
                className={`font-medium text-left py-2 ${activeTab === 'get-involved' ? 'text-[#FF6B6B]' : 'text-gray-600'}`}
              >
                Get Involved
              </button>
              <button 
                onClick={() => navigateTo('contact')}
                className={`font-medium text-left py-2 ${activeTab === 'contact' ? 'text-[#FF6B6B]' : 'text-gray-600'}`}
              >
                Contact
              </button>
              <button 
                onClick={() => navigateTo('donate')}
                className="bg-[#FF6B6B] hover:bg-[#ff5252] text-white font-medium py-3 px-6 rounded-full transition duration-300 text-center"
              >
                Donate Now
              </button>
            </nav>
          </div>
        )}
      </header>

      {/* Main Content */}
      <main>
        {activeTab === 'home' && <HomePage navigateTo={navigateTo} />}
        {activeTab === 'about' && <AboutPage navigateTo={navigateTo} />}
        {activeTab === 'services' && <ServicesPage navigateTo={navigateTo} />}
        {activeTab === 'get-involved' && <GetInvolvedPage navigateTo={navigateTo} />}
        {activeTab === 'donate' && <DonatePage navigateTo={navigateTo} />}
        {activeTab === 'contact' && <ContactPage navigateTo={navigateTo} />}
      </main>

      {/* Footer */}
      <footer className="bg-gray-800 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <img 
                  src="https://sitebrew.ai/f/ECS%20Logo%20ALT%201-W12f.jpeg" 
                  alt="ECS Logo" 
                  className="h-12 w-auto bg-white rounded-full p-1"
                />
                <span className="text-xl font-bold">ECS</span>
              </div>
              <p className="text-gray-300 mb-4">Empowering our community, one step at a time.</p>
              <div className="flex space-x-4">
                <a href="#" className="text-gray-300 hover:text-white transition duration-300">
                  <Facebook size={20} />
                </a>
                <a href="#" className="text-gray-300 hover:text-white transition duration-300">
                  <Twitter size={20} />
                </a>
                <a href="#" className="text-gray-300 hover:text-white transition duration-300">
                  <Instagram size={20} />
                </a>
              </div>
            </div>
            
            <div>
              <h3 className="text-lg font-semibold mb-4">Quick Links</h3>
              <ul className="space-y-2">
                <li><button onClick={() => navigateTo('home')} className="text-gray-300 hover:text-white transition duration-300">Home</button></li>
                <li><button onClick={() => navigateTo('about')} className="text-gray-300 hover:text-white transition duration-300">About Us</button></li>
                <li><button onClick={() => navigateTo('services')} className="text-gray-300 hover:text-white transition duration-300">Services</button></li>
                <li><button onClick={() => navigateTo('get-involved')} className="text-gray-300 hover:text-white transition duration-300">Get Involved</button></li>
                <li><button onClick={() => navigateTo('donate')} className="text-gray-300 hover:text-white transition duration-300">Donate</button></li>
              </ul>
            </div>
            
            <div>
              <h3 className="text-lg font-semibold mb-4">Services</h3>
              <ul className="space-y-2">
                <li><button onClick={() => navigateTo('services')} className="text-gray-300 hover:text-white transition duration-300">Counseling Services</button></li>
                <li><button onClick={() => navigateTo('services')} className="text-gray-300 hover:text-white transition duration-300">Academic Support</button></li>
                <li><button onClick={() => navigateTo('services')} className="text-gray-300 hover:text-white transition duration-300">Vocational Training</button></li>
                <li><button onClick={() => navigateTo('services')} className="text-gray-300 hover:text-white transition duration-300">Mentorship</button></li>
                <li><button onClick={() => navigateTo('services')} className="text-gray-300 hover:text-white transition duration-300">After-School Programs</button></li>
              </ul>
            </div>
            
            <div>
              <h3 className="text-lg font-semibold mb-4">Contact Us</h3>
              <ul className="space-y-3">
                <li className="flex items-start space-x-3">
                  <MapPin size={20} className="flex-shrink-0 mt-1" />
                  <span>123 Community Lane, Anytown, USA 12345</span>
                </li>
                <li className="flex items-center space-x-3">
                  <Phone size={20} className="flex-shrink-0" />
                  <span>(555) 123-4567</span>
                </li>
                <li className="flex items-center space-x-3">
                  <Mail size={20} className="flex-shrink-0" />
                  <span>info@ecscommunity.org</span>
                </li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; {new Date().getFullYear()} ECS Community Services. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}

// Home Page Component
function HomePage({ navigateTo }) {
  return (
    <div>
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-[#4ECDC4] to-[#FF6B6B] text-white py-20">
        <div className="container mx-auto px-4 flex flex-col items-center text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">Empowering Our Community, One Step at a Time</h1>
          <p className="text-xl md:text-2xl mb-8 max-w-3xl">Building stronger futures through counseling, education, and community support.</p>
          <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
            <button 
              onClick={() => navigateTo('get-involved')}
              className="bg-white text-[#FF6B6B] hover:bg-gray-100 font-semibold py-3 px-8 rounded-full transition duration-300 text-lg"
            >
              Get Involved
            </button>
            <button 
              onClick={() => navigateTo('donate')}
              className="bg-[#FFD166] text-gray-800 hover:bg-[#ffc233] font-semibold py-3 px-8 rounded-full transition duration-300 text-lg"
            >
              Donate Now
            </button>
          </div>
        </div>
      </section>
      
      {/* Introduction Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 mb-8 md:mb-0 md:pr-8">
              <img 
                src="https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" 
                alt="Community members working together" 
                className="rounded-lg shadow-lg w-full h-auto object-cover"
              />
            </div>
            <div className="md:w-1/2">
              <h2 className="text-3xl font-bold mb-4 text-gray-800">Welcome to ECS</h2>
              <p className="text-gray-600 mb-6 text-lg">
                At ECS, we believe in the power of community to transform lives. Our holistic approach combines counseling, education, and vocational training to help individuals and families thrive.
              </p>
              <p className="text-gray-600 mb-8 text-lg">
                For over a decade, we've been dedicated to creating positive change in our community, one person at a time.
              </p>
              <button 
                onClick={() => navigateTo('about')}
                className="flex items-center text-[#4ECDC4] hover:text-[#3dbdb5] font-medium transition duration-300"
              >
                Learn More <ChevronRight size={20} className="ml-1" />
              </button>
            </div>
          </div>
        </div>
      </section>
      
      {/* Services Section */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">Our Services</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              We offer a comprehensive range of services designed to support individuals and families at every stage of their journey.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg">
              <div className="bg-[#4ECDC4]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                <Heart className="text-[#4ECDC4]" size={28} />
              </div>
              <h3 className="text-xl font-semibold mb-3 text-gray-800">Counseling Services</h3>
              <p className="text-gray-600 mb-4">
                Professional counseling for individuals, groups, and families to address mental health needs and personal challenges.
              </p>
              <button 
                onClick={() => navigateTo('services')}
                className="text-[#4ECDC4] hover:text-[#3dbdb5] font-medium flex items-center transition duration-300"
              >
                Learn More <ChevronRight size={18} className="ml-1" />
              </button>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg">
              <div className="bg-[#FF6B6B]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                <BookOpen className="text-[#FF6B6B]" size={28} />
              </div>
              <h3 className="text-xl font-semibold mb-3 text-gray-800">Academic Support</h3>
              <p className="text-gray-600 mb-4">
                Tutoring, college readiness programs, and educational resources to help students succeed academically.
              </p>
              <button 
                onClick={() => navigateTo('services')}
                className="text-[#FF6B6B] hover:text-[#ff5252] font-medium flex items-center transition duration-300"
              >
                Learn More <ChevronRight size={18} className="ml-1" />
              </button>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg">
              <div className="bg-[#FFD166]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                <Briefcase className="text-[#FFD166]" size={28} />
              </div>
              <h3 className="text-xl font-semibold mb-3 text-gray-800">Vocational Training</h3>
              <p className="text-gray-600 mb-4">
                Job readiness programs, career workshops, and skills training to prepare individuals for meaningful employment.
              </p>
              <button 
                onClick={() => navigateTo('services')}
                className="text-[#FFD166] hover:text-[#ffc233] font-medium flex items-center transition duration-300"
              >
                Learn More <ChevronRight size={18} className="ml-1" />
              </button>
            </div>
          </div>
          
          <div className="text-center mt-12">
            <button 
              onClick={() => navigateTo('services')}
              className="bg-[#4ECDC4] hover:bg-[#3dbdb5] text-white font-medium py-3 px-8 rounded-full transition duration-300"
            >
              View All Services
            </button>
          </div>
        </div>
      </section>
      
      {/* Impact Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">Our Impact</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              We're proud of the difference we've made in our community. Here's a glimpse of our impact over the years.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6 text-center">
            <div className="p-6">
              <div className="text-4xl font-bold text-[#FF6B6B] mb-2">5,000+</div>
              <p className="text-gray-600">Individuals Counseled</p>
            </div>
            
            <div className="p-6">
              <div className="text-4xl font-bold text-[#4ECDC4] mb-2">1,200+</div>
              <p className="text-gray-600">Students Supported</p>
            </div>
            
            <div className="p-6">
              <div className="text-4xl font-bold text-[#FFD166] mb-2">800+</div>
              <p className="text-gray-600">Job Placements</p>
            </div>
            
            <div className="p-6">
              <div className="text-4xl font-bold text-[#FF6B6B] mb-2">10+</div>
              <p className="text-gray-600">Years of Service</p>
            </div>
          </div>
        </div>
      </section>
      
      {/* Testimonials Section */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">Success Stories</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              Hear from those whose lives have been transformed through our programs and services.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-white rounded-xl shadow-md p-8">
              <div className="flex items-center mb-6">
                <div className="w-16 h-16 bg-[#4ECDC4] rounded-full flex items-center justify-center text-white text-2xl font-bold mr-4">
                  JD
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-gray-800">John Doe</h3>
                  <p className="text-gray-500">Vocational Training Graduate</p>
                </div>
              </div>
              <p className="text-gray-600 italic">
                "The vocational training program at ECS completely changed my life. I went from struggling to find stable employment to landing a job I love with benefits. The staff truly cares about your success."
              </p>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-8">
              <div className="flex items-center mb-6">
                <div className="w-16 h-16 bg-[#FF6B6B] rounded-full flex items-center justify-center text-white text-2xl font-bold mr-4">
                  MS
                </div>
                <div>
                  <h3 className="text-xl font-semibold text-gray-800">Maria Smith</h3>
                  <p className="text-gray-500">Academic Support Participant</p>
                </div>
              </div>
              <p className="text-gray-600 italic">
                "The tutoring and college prep services at ECS helped me become the first person in my family to attend college. I'm now pursuing my dream of becoming a teacher to give back to my community."
              </p>
            </div>
          </div>
        </div>
      </section>
      
      {/* Call to Action */}
      <section className="py-16 bg-gradient-to-r from-[#4ECDC4] to-[#FF6B6B] text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6">Ready to Make a Difference?</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Join us in our mission to empower our community. Whether through volunteering, donating, or partnering with us, your support makes a meaningful impact.
          </p>
          <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
            <button 
              onClick={() => navigateTo('get-involved')}
              className="bg-white text-[#4ECDC4] hover:bg-gray-100 font-semibold py-3 px-8 rounded-full transition duration-300"
            >
              Get Involved
            </button>
            <button 
              onClick={() => navigateTo('donate')}
              className="bg-[#FFD166] text-gray-800 hover:bg-[#ffc233] font-semibold py-3 px-8 rounded-full transition duration-300"
            >
              Donate Now
            </button>
          </div>
        </div>
      </section>
      
      {/* Blog/News Preview */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="flex justify-between items-center mb-8">
            <h2 className="text-3xl font-bold text-gray-800">Latest News</h2>
            <button className="text-[#4ECDC4] hover:text-[#3dbdb5] font-medium flex items-center">
              View All <ChevronRight size={20} className="ml-1" />
            </button>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
              <img 
                src="https://images.unsplash.com/photo-1536337005238-94b997371b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" 
                alt="Community event" 
                className="w-full h-48 object-cover"
              />
              <div className="p-6">
                <p className="text-[#4ECDC4] font-medium mb-2">June 15, 2023</p>
                <h3 className="text-xl font-semibold mb-3 text-gray-800">Summer Youth Program Launches Next Month</h3>
                <p className="text-gray-600 mb-4">
                  Our annual summer youth program returns with new activities and opportunities for local youth.
                </p>
                <button className="text-[#4ECDC4] hover:text-[#3dbdb5] font-medium flex items-center">
                  Read More <ChevronRight size={18} className="ml-1" />
                </button>
              </div>
            </div>
            
            <div className="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
              <img 
                src="https://images.unsplash.com/photo-1560252829-804f1aedf1be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" 
                alt="Job fair" 
                className="w-full h-48 object-cover"
              />
              <div className="p-6">
                <p className="text-[#4ECDC4] font-medium mb-2">May 28, 2023</p>
                <h3 className="text-xl font-semibold mb-3 text-gray-800">Community Job Fair Connects 200+ to Employers</h3>
                <p className="text-gray-600 mb-4">
                  Our recent job fair successfully connected job seekers with local employers, resulting in numerous on-the-spot hires.
                </p>
                <button className="text-[#4ECDC4] hover:text-[#3dbdb5] font-medium flex items-center">
                  Read More <ChevronRight size={18} className="ml-1" />
                </button>
              </div>
            </div>
            
            <div className="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 hover:shadow-lg">
              <img 
                src="https://images.unsplash.com/photo-1491438590914-bc09fcaaf77a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" 
                alt="Fundraising event" 
                className="w-full h-48 object-cover"
              />
              <div className="p-6">
                <p className="text-[#4ECDC4] font-medium mb-2">May 10, 2023</p>
                <h3 className="text-xl font-semibold mb-3 text-gray-800">Annual Fundraiser Exceeds Goal by 50%</h3>
                <p className="text-gray-600 mb-4">
                  Thanks to our generous donors and community partners, we exceeded our fundraising goal, allowing us to expand our services.
                </p>
                <button className="text-[#4ECDC4] hover:text-[#3dbdb5] font-medium flex items-center">
                  Read More <ChevronRight size={18} className="ml-1" />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// About Page Component
function AboutPage({ navigateTo }) {
  return (
    <div>
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-[#4ECDC4] to-[#FF6B6B] text-white py-16">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">About ECS</h1>
          <p className="text-xl max-w-3xl mx-auto">
            Learn about our mission, vision, and the impact we're making in our community.
          </p>
        </div>
      </section>
      
      {/* Mission & Vision Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div>
              <h2 className="text-3xl font-bold mb-6 text-gray-800">Our Mission</h2>
              <p className="text-gray-600 text-lg mb-6">
                ECS is dedicated to empowering individuals and families through comprehensive support services that foster personal growth, educational advancement, and economic stability.
              </p>
              <p className="text-gray-600 text-lg">
                We strive to create a community where everyone has access to the resources, skills, and opportunities needed to thrive and reach their full potential.
              </p>
            </div>
            
            <div>
              <h2 className="text-3xl font-bold mb-6 text-gray-800">Our Vision</h2>
              <p className="text-gray-600 text-lg mb-6">
                We envision a vibrant, inclusive community where all members have the support and resources they need to overcome challenges, pursue their dreams, and contribute positively to society.
              </p>
              <p className="text-gray-600 text-lg">
                Through collaboration, innovation, and compassion, we aim to break cycles of disadvantage and build pathways to opportunity for generations to come.
              </p>
            </div>
          </div>
        </div>
      </section>
      
      {/* Values Section */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">Our Core Values</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              These principles guide our work and define our approach to serving our community.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg">
              <div className="bg-[#4ECDC4]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                <Heart className="text-[#4ECDC4]" size={28} />
              </div>
              <h3 className="text-xl font-semibold mb-3 text-gray-800">Compassion</h3>
              <p className="text-gray-600">
                We approach our work with empathy and understanding, recognizing the unique challenges and strengths of each individual we serve.
              </p>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg">
              <div className="bg-[#FF6B6B]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                <Users className="text-[#FF6B6B]" size={28} />
              </div>
              <h3 className="text-xl font-semibold mb-3 text-gray-800">Inclusion</h3>
              <p className="text-gray-600">
                We celebrate diversity and create welcoming spaces where all people feel valued, respected, and empowered to participate fully.
              </p>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg">
              <div className="bg-[#FFD166]/10 p-3 rounded-full w-14 h-14 flex items-center justify-center mb-4">
                <Award className="text-[#FFD166]" size={28} />
              </div>
              <h3 className="text-xl font-semibold mb-3 text-gray-800">Excellence</h3>
              <p className="text-gray-600">
                We are committed to delivering high-quality services and continuously improving our programs to better serve our community.
              </p>
            </div>
          </div>
        </div>
      </section>
      
      {/* History Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 mb-8 md:mb-0 md:pr-8">
              <h2 className="text-3xl font-bold mb-6 text-gray-800">Our History</h2>
              <p className="text-gray-600 text-lg mb-6">
                Founded in 2010 by a group of dedicated community leaders, ECS began as a small counseling center serving families in need. Over the years, we've expanded our services to address the evolving needs of our community.
              </p>
              <p className="text-gray-600 text-lg mb-6">
                From our humble beginnings with just three staff members and a handful of volunteers, we've grown to a team of over 30 professionals and 100+ volunteers serving thousands of individuals annually.
              </p>
              <p className="text-gray-600 text-lg">
                Throughout our growth, we've remained true to our founding mission of providing holistic support that addresses the root causes of challenges facing our community members.
              </p>
            </div>
            <div className="md:w-1/2">
              <img 
                src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" 
                alt="ECS team members" 
                className="rounded-lg shadow-lg w-full h-auto object-cover"
              />
            </div>
          </div>
        </div>
      </section>
      
      {/* What Sets Us Apart */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">What Sets Us Apart</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              Our unique approach combines several key elements that enable us to make a lasting difference.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg">
              <h3 className="text-xl font-semibold mb-3 text-gray-800">Holistic Approach</h3>
              <p className="text-gray-600">
                We address the whole person, recognizing that challenges in one area of life often affect others. Our integrated services provide comprehensive support.
              </p>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg">
              <h3 className="text-xl font-semibold mb-3 text-gray-800">Direct Services</h3>
              <p className="text-gray-600">
                We provide hands-on support rather than just referrals, ensuring that community members receive immediate, accessible assistance.
              </p>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-6 transition duration-300 hover:shadow-lg">
              <h3 className="text-xl font-semibold mb-3 text-gray-800">Community Impact</h3>
              <p className="text-gray-600">
                We measure our success not just by the number of people served, but by the lasting positive changes in our community's well-being and resilience.
              </p>
            </div>
          </div>
        </div>
      </section>
      
      {/* Team Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">Our Leadership Team</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              Meet the dedicated professionals guiding our organization's mission and vision.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="text-center">
              <div className="w-48 h-48 rounded-full overflow-hidden mx-auto mb-4">
                <img 
                  src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" 
                  alt="Sarah Johnson" 
                  className="w-full h-full object-cover"
                />
              </div>
              <h3 className="text-xl font-semibold text-gray-800">Sarah Johnson</h3>
              <p className="text-[#4ECDC4] font-medium">Executive Director</p>
            </div>
            
            <div className="text-center">
              <div className="w-48 h-48 rounded-full overflow-hidden mx-auto mb-4">
                <img 
                  src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" 
                  alt="Michael Rodriguez" 
                  className="w-full h-full object-cover"
                />
              </div>
              <h3 className="text-xl font-semibold text-gray-800">Michael Rodriguez</h3>
              <p className="text-[#FF6B6B] font-medium">Director of Programs</p>
            </div>
            
            <div className="text-center">
              <div className="w-48 h-48 rounded-full overflow-hidden mx-auto mb-4">
                <img 
                  src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1961&q=80" 
                  alt="Jennifer Lee" 
                  className="w-full h-full object-cover"
                />
              </div>
              <h3 className="text-xl font-semibold text-gray-800">Jennifer Lee</h3>
              <p className="text-[#4ECDC4] font-medium">Clinical Director</p>
            </div>
            
            <div className="text-center">
              <div className="w-48 h-48 rounded-full overflow-hidden mx-auto mb-4">
                <img 
                  src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" 
                  alt="David Thompson" 
                  className="w-full h-full object-cover"
                />
              </div>
              <h3 className="text-xl font-semibold text-gray-800">David Thompson</h3>
              <p className="text-[#FF6B6B] font-medium">Director of Development</p>
            </div>
          </div>
        </div>
      </section>
      
      {/* Call to Action */}
      <section className="py-16 bg-gradient-to-r from-[#4ECDC4] to-[#FF6B6B] text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6">Join Our Mission</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Be part of the positive change in our community. Together, we can create a brighter future for all.
          </p>
          <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
            <button 
              onClick={() => navigateTo('get-involved')}
              className="bg-white text-[#4ECDC4] hover:bg-gray-100 font-semibold py-3 px-8 rounded-full transition duration-300"
            >
              Get Involved
            </button>
            <button 
              onClick={() => navigateTo('donate')}
              className="bg-[#FFD166] text-gray-800 hover:bg-[#ffc233] font-semibold py-3 px-8 rounded-full transition duration-300"
            >
              Donate Now
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

// Services Page Component
function ServicesPage({ navigateTo }) {
  return (
    <div>
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-[#4ECDC4] to-[#FF6B6B] text-white py-16">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">Our Services</h1>
          <p className="text-xl max-w-3xl mx-auto">
            Comprehensive programs designed to support individuals and families at every stage of their journey.
          </p>
        </div>
      </section>
      
      {/* Services Overview */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">How We Help</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              Our holistic approach addresses the interconnected challenges facing our community members, providing support that leads to lasting positive change.
            </p>
          </div>
          
          {/* Counseling Services */}
          <div className="mb-16">
            <div className="flex flex-col md:flex-row items-center mb-8">
              <div className="md:w-1/3 mb-8 md:mb-0">
                <div className="bg-[#4ECDC4]/10 p-6 rounded-full w-32 h-32 flex items-center justify-center mx-auto">
                  <Heart className="text-[#4ECDC4]" size={64} />
                </div>
              </div>
              <div className="md:w-2/3">
                <h3 className="text-2xl font-bold mb-4 text-gray-800">Counseling Services</h3>
                <p className="text-gray-600 text-lg mb-6">
                  Our licensed counselors provide professional mental health support to help individuals and families navigate life's challenges, build resilience, and improve overall well-being.
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                  <div className="flex items-start">
                    <div className="bg-[#4ECDC4]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#4ECDC4]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Individual Counseling</h4>
                      <p className="text-gray-600">One-on-one support for personal challenges</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#4ECDC4]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#4ECDC4]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Group Counseling</h4>
                      <p className="text-gray-600">Peer support in a facilitated setting</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#4ECDC4]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#4ECDC4]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Family Counseling</h4>
                      <p className="text-gray-600">Strengthening family relationships</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#4ECDC4]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#4ECDC4]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Crisis Intervention</h4>
                      <p className="text-gray-600">Immediate support during difficult times</p>
                    </div>
                  </div>
                </div>
                <button 
                  onClick={() => navigateTo('get-involved')}
                  className="bg-[#4ECDC4] hover:bg-[#3dbdb5] text-white font-medium py-2 px-6 rounded-full transition duration-300 flex items-center"
                >
                  Apply for Services <ArrowRight size={18} className="ml-2" />
                </button>
              </div>
            </div>
          </div>
          
          {/* Academic Support */}
          <div className="mb-16">
            <div className="flex flex-col md:flex-row items-center mb-8">
              <div className="md:w-1/3 mb-8 md:mb-0 md:order-2">
                <div className="bg-[#FF6B6B]/10 p-6 rounded-full w-32 h-32 flex items-center justify-center mx-auto">
                  <BookOpen className="text-[#FF6B6B]" size={64} />
                </div>
              </div>
              <div className="md:w-2/3 md:order-1">
                <h3 className="text-2xl font-bold mb-4 text-gray-800">Academic Support</h3>
                <p className="text-gray-600 text-lg mb-6">
                  We provide educational resources and support to help students of all ages succeed academically and prepare for future educational opportunities.
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                  <div className="flex items-start">
                    <div className="bg-[#FF6B6B]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#FF6B6B]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Tutoring</h4>
                      <p className="text-gray-600">One-on-one and small group academic assistance</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#FF6B6B]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#FF6B6B]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Homework Help</h4>
                      <p className="text-gray-600">After-school support for daily assignments</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#FF6B6B]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#FF6B6B]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">College Readiness</h4>
                      <p className="text-gray-600">Application assistance and preparation</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#FF6B6B]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#FF6B6B]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Literacy Programs</h4>
                      <p className="text-gray-600">Reading and writing skill development</p>
                    </div>
                  </div>
                </div>
                <button 
                  onClick={() => navigateTo('get-involved')}
                  className="bg-[#FF6B6B] hover:bg-[#ff5252] text-white font-medium py-2 px-6 rounded-full transition duration-300 flex items-center"
                >
                  Apply for Services <ArrowRight size={18} className="ml-2" />
                </button>
              </div>
            </div>
          </div>
          
          {/* Vocational Training */}
          <div className="mb-16">
            <div className="flex flex-col md:flex-row items-center mb-8">
              <div className="md:w-1/3 mb-8 md:mb-0">
                <div className="bg-[#FFD166]/10 p-6 rounded-full w-32 h-32 flex items-center justify-center mx-auto">
                  <Briefcase className="text-[#FFD166]" size={64} />
                </div>
              </div>
              <div className="md:w-2/3">
                <h3 className="text-2xl font-bold mb-4 text-gray-800">Vocational Skills Training</h3>
                <p className="text-gray-600 text-lg mb-6">
                  Our vocational programs equip individuals with the skills, knowledge, and resources needed to secure and maintain meaningful employment.
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                  <div className="flex items-start">
                    <div className="bg-[#FFD166]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#FFD166]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Job Readiness</h4>
                      <p className="text-gray-600">Resume building and interview preparation</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#FFD166]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#FFD166]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Career Workshops</h4>
                      <p className="text-gray-600">Industry-specific training and networking</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#FFD166]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#FFD166]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Computer Skills</h4>
                      <p className="text-gray-600">Digital literacy for the modern workplace</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#FFD166]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#FFD166]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Job Placement</h4>
                      <p className="text-gray-600">Connections with local employers</p>
                    </div>
                  </div>
                </div>
                <button 
                  onClick={() => navigateTo('get-involved')}
                  className="bg-[#FFD166] hover:bg-[#ffc233] text-gray-800 font-medium py-2 px-6 rounded-full transition duration-300 flex items-center"
                >
                  Apply for Services <ArrowRight size={18} className="ml-2" />
                </button>
              </div>
            </div>
          </div>
          
          {/* Mentorship */}
          <div className="mb-16">
            <div className="flex flex-col md:flex-row items-center mb-8">
              <div className="md:w-1/3 mb-8 md:mb-0 md:order-2">
                <div className="bg-[#4ECDC4]/10 p-6 rounded-full w-32 h-32 flex items-center justify-center mx-auto">
                  <Users className="text-[#4ECDC4]" size={64} />
                </div>
              </div>
              <div className="md:w-2/3 md:order-1">
                <h3 className="text-2xl font-bold mb-4 text-gray-800">Community-Based Mentorship</h3>
                <p className="text-gray-600 text-lg mb-6">
                  Our mentorship programs connect youth and adults with positive role models who provide guidance, support, and encouragement.
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                  <div className="flex items-start">
                    <div className="bg-[#4ECDC4]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#4ECDC4]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Youth Mentoring</h4>
                      <p className="text-gray-600">One-on-one guidance for young people</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#4ECDC4]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#4ECDC4]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Peer Mentoring</h4>
                      <p className="text-gray-600">Support from those with shared experiences</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#4ECDC4]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#4ECDC4]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Group Mentoring</h4>
                      <p className="text-gray-600">Collective guidance and support</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#4ECDC4]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#4ECDC4]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Career Mentoring</h4>
                      <p className="text-gray-600">Professional development and networking</p>
                    </div>
                  </div>
                </div>
                <button 
                  onClick={() => navigateTo('get-involved')}
                  className="bg-[#4ECDC4] hover:bg-[#3dbdb5] text-white font-medium py-2 px-6 rounded-full transition duration-300 flex items-center"
                >
                  Apply for Services <ArrowRight size={18} className="ml-2" />
                </button>
              </div>
            </div>
          </div>
          
          {/* After-School Recreation */}
          <div>
            <div className="flex flex-col md:flex-row items-center mb-8">
              <div className="md:w-1/3 mb-8 md:mb-0">
                <div className="bg-[#FF6B6B]/10 p-6 rounded-full w-32 h-32 flex items-center justify-center mx-auto">
                  <Award className="text-[#FF6B6B]" size={64} />
                </div>
              </div>
              <div className="md:w-2/3">
                <h3 className="text-2xl font-bold mb-4 text-gray-800">After-School Recreation</h3>
                <p className="text-gray-600 text-lg mb-6">
                  Our recreational programs provide safe, engaging activities that promote physical health, creativity, and positive social interaction.
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                  <div className="flex items-start">
                    <div className="bg-[#FF6B6B]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#FF6B6B]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Sports Programs</h4>
                      <p className="text-gray-600">Team and individual athletic activities</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#FF6B6B]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#FF6B6B]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Arts & Crafts</h4>
                      <p className="text-gray-600">Creative expression and skill building</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#FF6B6B]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#FF6B6B]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Music & Dance</h4>
                      <p className="text-gray-600">Performing arts instruction and showcases</p>
                    </div>
                  </div>
                  <div className="flex items-start">
                    <div className="bg-[#FF6B6B]/10 p-2 rounded-full mr-3 mt-1">
                      <ChevronRight className="text-[#FF6B6B]" size={16} />
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-800">Community Events</h4>
                      <p className="text-gray-600">Celebrations and gatherings for all ages</p>
                    </div>
                  </div>
                </div>
                <button 
                  onClick={() => navigateTo('get-involved')}
                  className="bg-[#FF6B6B] hover:bg-[#ff5252] text-white font-medium py-2 px-6 rounded-full transition duration-300 flex items-center"
                >
                  Apply for Services <ArrowRight size={18} className="ml-2" />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Testimonials */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">Success Stories</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              Our services have made a meaningful difference in the lives of many community members.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white rounded-xl shadow-md p-8">
              <p className="text-gray-600 italic mb-6">
                "The counseling services at ECS helped me work through a difficult time in my life. My counselor was compassionate and supportive, giving me the tools I needed to move forward with confidence."
              </p>
              <div className="flex items-center">
                <div className="w-12 h-12 bg-[#4ECDC4] rounded-full flex items-center justify-center text-white text-lg font-bold mr-4">
                  AJ
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800">Alex J.</h3>
                  <p className="text-gray-500">Counseling Services Client</p>
                </div>
              </div>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-8">
              <p className="text-gray-600 italic mb-6">
                "The vocational training program gave me the skills and confidence I needed to start a new career. I'm now employed full-time with benefits for the first time in my life."
              </p>
              <div className="flex items-center">
                <div className="w-12 h-12 bg-[#FF6B6B] rounded-full flex items-center justify-center text-white text-lg font-bold mr-4">
                  TM
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800">Taylor M.</h3>
                  <p className="text-gray-500">Vocational Training Graduate</p>
                </div>
              </div>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-8">
              <p className="text-gray-600 italic mb-6">
                "My son has thrived in the after-school program. His grades have improved, he's made new friends, and he's discovered a passion for art that we're now encouraging at home."
              </p>
              <div className="flex items-center">
                <div className="w-12 h-12 bg-[#FFD166] rounded-full flex items-center justify-center text-white text-lg font-bold mr-4">
                  RL
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800">Robin L.</h3>
                  <p className="text-gray-500">Parent of Program Participant</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Call to Action */}
      <section className="py-16 bg-gradient-to-r from-[#4ECDC4] to-[#FF6B6B] text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6">Ready to Get Started?</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Our team is here to help you access the services that best meet your needs. Contact us today to learn more.
          </p>
          <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
            <button 
              onClick={() => navigateTo('get-involved')}
              className="bg-white text-[#4ECDC4] hover:bg-gray-100 font-semibold py-3 px-8 rounded-full transition duration-300"
            >
              Apply for Services
            </button>
            <button 
              onClick={() => navigateTo('contact')}
              className="bg-[#FFD166] text-gray-800 hover:bg-[#ffc233] font-semibold py-3 px-8 rounded-full transition duration-300"
            >
              Contact Us
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

// Get Involved Page Component
function GetInvolvedPage({ navigateTo }) {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    interest: 'volunteer',
    message: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Here you would typically send the form data to your backend
    alert('Thank you for your interest! We will contact you soon.');
    setFormData({
      name: '',
      email: '',
      phone: '',
      interest: 'volunteer',
      message: ''
    });
  };

  return (
    <div>
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-[#4ECDC4] to-[#FF6B6B] text-white py-16">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">Get Involved</h1>
          <p className="text-xl max-w-3xl mx-auto">
            Join us in making a positive difference in our community. There are many ways to contribute your time, talents, and resources.
          </p>
        </div>
      </section>
      
      {/* Ways to Get Involved */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">Ways to Make an Impact</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              Whether you have an hour a week or want to make a long-term commitment, there's a place for you at ECS.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white rounded-xl shadow-md p-8 transition duration-300 hover:shadow-lg">
              <div className="bg-[#4ECDC4]/10 p-4 rounded-full w-20 h-20 flex items-center justify-center mb-6">
                <Users className="text-[#4ECDC4]" size={40} />
              </div>
              <h3 className="text-2xl font-semibold mb-4 text-gray-800">Volunteer</h3>
              <p className="text-gray-600 mb-6">
                Share your time and talents to support our programs and services. We have opportunities for individuals with various skills and availability.
              </p>
              <ul className="space-y-3 mb-6">
                <li className="flex items-start">
                  <div className="bg-[#4ECDC4]/10 p-1 rounded-full mr-3 mt-1">
                    <ChevronRight className="text-[#4ECDC4]" size={14} />
                  </div>
                  <span className="text-gray-600">Program assistance</span>
                </li>
                <li className="flex items-start">
                  <div className="bg-[#4ECDC4]/10 p-1 rounded-full mr-3 mt-1">
                    <ChevronRight className="text-[#4ECDC4]" size={14} />
                  </div>
                  <span className="text-gray-600">Administrative support</span>
                </li>
                <li className="flex items-start">
                  <div className="bg-[#4ECDC4]/10 p-1 rounded-full mr-3 mt-1">
                    <ChevronRight className="text-[#4ECDC4]" size={14} />
                  </div>
                  <span className="text-gray-600">Special event planning</span>
                </li>
                <li className="flex items-start">
                  <div className="bg-[#4ECDC4]/10 p-1 rounded-full mr-3 mt-1">
                    <ChevronRight className="text-[#4ECDC4]" size={14} />
                  </div>
                  <span className="text-gray-600">Professional services</span>
                </li>
              </ul>
              <a href="#volunteer-form" className="text-[#4ECDC4] hover:text-[#3dbdb5] font-medium flex items-center">
                Learn More <ChevronRight size={18} className="ml-1" />
              </a>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-8 transition duration-300 hover:shadow-lg">
              <div className="bg-[#FF6B6B]/10 p-4 rounded-full w-20 h-20 flex items-center justify-center mb-6">
                <DollarSign className="text-[#FF6B6B]" size={40} />
              </div>
              <h3 className="text-2xl font-semibold mb-4 text-gray-800">Donate</h3>
              <p className="text-gray-600 mb-6">
                Your financial support helps us provide essential services to those in need. Every contribution, regardless of size, makes a difference.
              </p>
              <ul className="space-y-3 mb-6">
                <li className="flex items-start">
                  <div className="bg-[#FF6B6B]/10 p-1 rounded-full mr-3 mt-1">
                    <ChevronRight className="text-[#FF6B6B]" size={14} />
                  </div>
                  <span className="text-gray-600">One-time donations</span>
                </li>
                <li className="flex items-start">
                  <div className="bg-[#FF6B6B]/10 p-1 rounded-full mr-3 mt-1">
                    <ChevronRight className="text-[#FF6B6B]" size={14} />
                  </div>
                  <span className="text-gray-600">Monthly giving</span>
                </li>
                <li className="flex items-start">
                  <div className="bg-[#FF6B6B]/10 p-1 rounded-full mr-3 mt-1">
                    <ChevronRight className="text-[#FF6B6B]" size={14} />
                  </div>
                  <span className="text-gray-600">In-kind donations</span>
                </li>
                <li className="flex items-start">
                  <div className="bg-[#FF6B6B]/10 p-1 rounded-full mr-3 mt-1">
                    <ChevronRight className="text-[#FF6B6B]" size={14} />
                  </div>
                  <span className="text-gray-600">Legacy giving</span>
                </li>
              </ul>
              <button 
                onClick={() => navigateTo('donate')}
                className="text-[#FF6B6B] hover:text-[#ff5252] font-medium flex items-center"
              >
                Learn More <ChevronRight size={18} className="ml-1" />
              </button>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-8 transition duration-300 hover:shadow-lg">
              <div className="bg-[#FFD166]/10 p-4 rounded-full w-20 h-20 flex items-center justify-center mb-6">
                <Briefcase className="text-[#FFD166]" size={40} />
              </div>
              <h3 className="text-2xl font-semibold mb-4 text-gray-800">Partner</h3>
              <p className="text-gray-600 mb-6">
                Collaborate with us to create greater impact. We work with businesses, organizations, and community groups to address community needs.
              </p>
              <ul className="space-y-3 mb-6">
                <li className="flex items-start">
                  <div className="bg-[#FFD166]/10 p-1 rounded-full mr-3 mt-1">
                    <ChevronRight className="text-[#FFD166]" size={14} />
                  </div>
                  <span className="text-gray-600">Corporate sponsorships</span>
                </li>
                <li className="flex items-start">
                  <div className="bg-[#FFD166]/10 p-1 rounded-full mr-3 mt-1">
                    <ChevronRight className="text-[#FFD166]" size={14} />
                  </div>
                  <span className="text-gray-600">Program partnerships</span>
                </li>
                <li className="flex items-start">
                  <div className="bg-[#FFD166]/10 p-1 rounded-full mr-3 mt-1">
                    <ChevronRight className="text-[#FFD166]" size={14} />
                  </div>
                  <span className="text-gray-600">Event collaborations</span>
                </li>
                <li className="flex items-start">
                  <div className="bg-[#FFD166]/10 p-1 rounded-full mr-3 mt-1">
                    <ChevronRight className="text-[#FFD166]" size={14} />
                  </div>
                  <span className="text-gray-600">Resource sharing</span>
                </li>
              </ul>
              <a href="#volunteer-form" className="text-[#FFD166] hover:text-[#ffc233] font-medium flex items-center">
                Learn More <ChevronRight size={18} className="ml-1" />
              </a>
            </div>
          </div>
        </div>
      </section>
      
      {/* Volunteer Spotlight */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">Volunteer Spotlight</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              Meet some of the dedicated individuals who help make our work possible.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-white rounded-xl shadow-md overflow-hidden">
              <div className="md:flex">
                <div className="md:w-1/3">
                  <img 
                    src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" 
                    alt="Volunteer Lisa Chen" 
                    className="h-full w-full object-cover"
                  />
                </div>
                <div className="p-6 md:w-2/3">
                  <h3 className="text-xl font-semibold mb-2 text-gray-800">Lisa Chen</h3>
                  <p className="text-[#4ECDC4] font-medium mb-4">Tutoring Program Volunteer</p>
                  <p className="text-gray-600 mb-4">
                    "Volunteering with ECS has been incredibly rewarding. Seeing students gain confidence in their abilities and achieve their goals makes every hour worthwhile."
                  </p>
                  <p className="text-gray-600">
                    Lisa has volunteered with our tutoring program for 3 years, helping over 50 students improve their academic performance.
                  </p>
                </div>
              </div>
            </div>
            
            <div className="bg-white rounded-xl shadow-md overflow-hidden">
              <div className="md:flex">
                <div className="md:w-1/3">
                  <img 
                    src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" 
                    alt="Volunteer Marcus Johnson" 
                    className="h-full w-full object-cover"
                  />
                </div>
                <div className="p-6 md:w-2/3">
                  <h3 className="text-xl font-semibold mb-2 text-gray-800">Marcus Johnson</h3>
                  <p className="text-[#FF6B6B] font-medium mb-4">Career Mentor</p>
                  <p className="text-gray-600 mb-4">
                    "As someone who benefited from mentorship early in my career, I'm passionate about paying it forward. ECS provides the perfect platform to make a meaningful impact."
                  </p>
                  <p className="text-gray-600">
                    Marcus has mentored 15 job seekers over the past 2 years, helping them develop professional skills and secure employment.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Volunteer Form */}
      <section id="volunteer-form" className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold mb-4 text-gray-800">Get Started Today</h2>
              <p className="text-gray-600 text-lg">
                Fill out the form below to express your interest in volunteering, partnering, or learning more about our services.
              </p>
            </div>
            
            <form onSubmit={handleSubmit} className="bg-white rounded-xl shadow-md p-8">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                  <label htmlFor="name" className="block text-gray-700 font-medium mb-2">Name</label>
                  <input 
                    type="text" 
                    id="name" 
                    name="name" 
                    value={formData.name}
                    onChange={handleChange}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
                    required
                  />
                </div>
                <div>
                  <label htmlFor="email" className="block text-gray-700 font-medium mb-2">Email</label>
                  <input 
                    type="email" 
                    id="email" 
                    name="email" 
                    value={formData.email}
                    onChange={handleChange}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
                    required
                  />
                </div>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                  <label htmlFor="phone" className="block text-gray-700 font-medium mb-2">Phone (Optional)</label>
                  <input 
                    type="tel" 
                    id="phone" 
                    name="phone" 
                    value={formData.phone}
                    onChange={handleChange}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
                  />
                </div>
                <div>
                  <label htmlFor="interest" className="block text-gray-700 font-medium mb-2">I'm interested in:</label>
                  <select 
                    id="interest" 
                    name="interest" 
                    value={formData.interest}
                    onChange={handleChange}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
                    required
                  >
                    <option value="volunteer">Volunteering</option>
                    <option value="partner">Partnership Opportunities</option>
                    <option value="services">Accessing Services</option>
                    <option value="other">Other</option>
                  </select>
                </div>
              </div>
              
              <div className="mb-6">
                <label htmlFor="message" className="block text-gray-700 font-medium mb-2">Message</label>
                <textarea 
                  id="message" 
                  name="message" 
                  value={formData.message}
                  onChange={handleChange}
                  rows="4" 
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
                  required
                ></textarea>
              </div>
              
              <button 
                type="submit" 
                className="bg-[#4ECDC4] hover:bg-[#3dbdb5] text-white font-medium py-3 px-6 rounded-full transition duration-300"
              >
                Submit
              </button>
            </form>
          </div>
        </div>
      </section>
      
      {/* Corporate Partners */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">Our Partners</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              We're grateful for the support of these organizations that help make our work possible.
            </p>
          </div>
          
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 items-center">
            <div className="bg-white p-6 rounded-lg shadow-md flex items-center justify-center h-32">
              <div className="text-center text-gray-500 font-semibold">Company Logo 1</div>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md flex items-center justify-center h-32">
              <div className="text-center text-gray-500 font-semibold">Company Logo 2</div>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md flex items-center justify-center h-32">
              <div className="text-center text-gray-500 font-semibold">Company Logo 3</div>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md flex items-center justify-center h-32">
              <div className="text-center text-gray-500 font-semibold">Company Logo 4</div>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md flex items-center justify-center h-32">
              <div className="text-center text-gray-500 font-semibold">Company Logo 5</div>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md flex items-center justify-center h-32">
              <div className="text-center text-gray-500 font-semibold">Company Logo 6</div>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md flex items-center justify-center h-32">
              <div className="text-center text-gray-500 font-semibold">Company Logo 7</div>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md flex items-center justify-center h-32">
              <div className="text-center text-gray-500 font-semibold">Company Logo 8</div>
            </div>
          </div>
          
          <div className="text-center mt-12">
            <button 
              onClick={() => navigateTo('contact')}
              className="bg-[#FFD166] hover:bg-[#ffc233] text-gray-800 font-medium py-3 px-8 rounded-full transition duration-300"
            >
              Become a Partner
            </button>
          </div>
        </div>
      </section>
      
      {/* Call to Action */}
      <section className="py-16 bg-gradient-to-r from-[#4ECDC4] to-[#FF6B6B] text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6">Ready to Make a Difference?</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Your support helps us create positive change in our community. Join us today!
          </p>
          <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
            <a href="#volunteer-form" className="bg-white text-[#4ECDC4] hover:bg-gray-100 font-semibold py-3 px-8 rounded-full transition duration-300 text-center">
              Volunteer Now
            </a>
            <button 
              onClick={() => navigateTo('donate')}
              className="bg-[#FFD166] text-gray-800 hover:bg-[#ffc233] font-semibold py-3 px-8 rounded-full transition duration-300"
            >
              Donate Today
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

// Donate Page Component
function DonatePage({ navigateTo }) {
  const [donationAmount, setDonationAmount] = useState('50');
  const [customAmount, setCustomAmount] = useState('');
  const [donationType, setDonationType] = useState('one-time');
  
  const handleAmountSelect = (amount) => {
    setDonationAmount(amount);
    setCustomAmount('');
  };
  
  const handleCustomAmountChange = (e) => {
    setCustomAmount(e.target.value);
    setDonationAmount('custom');
  };
  
  const handleDonationTypeChange = (type) => {
    setDonationType(type);
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    const finalAmount = donationAmount === 'custom' ? customAmount : donationAmount;
    alert(`Thank you for your ${donationType} donation of $${finalAmount}!`);
  };

  return (
    <div>
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-[#4ECDC4] to-[#FF6B6B] text-white py-16">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">Support Our Mission</h1>
          <p className="text-xl max-w-3xl mx-auto">
            Your donation helps us provide essential services to those in need and create lasting positive change in our community.
          </p>
        </div>
      </section>
      
      {/* Donation Impact */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">Your Donation Makes a Difference</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              Every contribution, regardless of size, helps us provide vital services to our community members in need.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white rounded-xl shadow-md p-8 text-center">
              <div className="text-3xl font-bold text-[#4ECDC4] mb-4">$25</div>
              <p className="text-gray-600">
                Provides one hour of counseling services for an individual in crisis.
              </p>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-8 text-center">
              <div className="text-3xl font-bold text-[#FF6B6B] mb-4">$50</div>
              <p className="text-gray-600">
                Supplies educational materials for five students in our academic support program.
              </p>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-8 text-center">
              <div className="text-3xl font-bold text-[#FFD166] mb-4">$100</div>
              <p className="text-gray-600">
                Funds a week of after-school programming for a child in our community.
              </p>
            </div>
          </div>
        </div>
      </section>
      
      {/* Donation Form */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="bg-white rounded-xl shadow-md overflow-hidden">
              <div className="md:flex">
                <div className="md:w-1/2 bg-gradient-to-br from-[#4ECDC4] to-[#FF6B6B] p-8 text-white">
                  <h3 className="text-2xl font-bold mb-6">Why Donate?</h3>
                  <ul className="space-y-4">
                    <li className="flex items-start">
                      <div className="bg-white/20 p-1 rounded-full mr-3 mt-1">
                        <ChevronRight className="text-white" size={14} />
                      </div>
                      <span>Support essential community services</span>
                    </li>
                    <li className="flex items-start">
                      <div className="bg-white/20 p-1 rounded-full mr-3 mt-1">
                        <ChevronRight className="text-white" size={14} />
                      </div>
                      <span>Help individuals and families thrive</span>
                    </li>
                    <li className="flex items-start">
                      <div className="bg-white/20 p-1 rounded-full mr-3 mt-1">
                        <ChevronRight className="text-white" size={14} />
                      </div>
                      <span>Create positive change in your community</span>
                    </li>
                    <li className="flex items-start">
                      <div className="bg-white/20 p-1 rounded-full mr-3 mt-1">
                        <ChevronRight className="text-white" size={14} />
                      </div>
                      <span>Tax-deductible contribution</span>
                    </li>
                  </ul>
                  
                  <div className="mt-8">
                    <h4 className="font-semibold mb-2">Other Ways to Give:</h4>
                    <p className="mb-4">
                      For information about planned giving, stock donations, or corporate matching, please contact our development team.
                    </p>
                    <button 
                      onClick={() => navigateTo('contact')}
                      className="bg-white text-[#4ECDC4] hover:bg-gray-100 font-medium py-2 px-6 rounded-full transition duration-300"
                    >
                      Contact Us
                    </button>
                  </div>
                </div>
                
                <div className="md:w-1/2 p-8">
                  <h3 className="text-2xl font-bold mb-6 text-gray-800">Make a Donation</h3>
                  
                  <form onSubmit={handleSubmit}>
                    <div className="mb-6">
                      <label className="block text-gray-700 font-medium mb-2">Donation Type</label>
                      <div className="flex space-x-4">
                        <button 
                          type="button"
                          className={`flex-1 py-2 px-4 rounded-lg border ${donationType === 'one-time' ? 'bg-[#4ECDC4]/10 border-[#4ECDC4] text-[#4ECDC4]' : 'border-gray-300 text-gray-600'}`}
                          onClick={() => handleDonationTypeChange('one-time')}
                        >
                          One-Time
                        </button>
                        <button 
                          type="button"
                          className={`flex-1 py-2 px-4 rounded-lg border ${donationType === 'monthly' ? 'bg-[#4ECDC4]/10 border-[#4ECDC4] text-[#4ECDC4]' : 'border-gray-300 text-gray-600'}`}
                          onClick={() => handleDonationTypeChange('monthly')}
                        >
                          Monthly
                        </button>
                      </div>
                    </div>
                    
                    <div className="mb-6">
                      <label className="block text-gray-700 font-medium mb-2">Donation Amount</label>
                      <div className="grid grid-cols-3 gap-3 mb-3">
                        <button 
                          type="button"
                          className={`py-2 px-4 rounded-lg border ${donationAmount === '25' ? 'bg-[#4ECDC4]/10 border-[#4ECDC4] text-[#4ECDC4]' : 'border-gray-300 text-gray-600'}`}
                          onClick={() => handleAmountSelect('25')}
                        >
                          $25
                        </button>
                        <button 
                          type="button"
                          className={`py-2 px-4 rounded-lg border ${donationAmount === '50' ? 'bg-[#4ECDC4]/10 border-[#4ECDC4] text-[#4ECDC4]' : 'border-gray-300 text-gray-600'}`}
                          onClick={() => handleAmountSelect('50')}
                        >
                          $50
                        </button>
                        <button 
                          type="button"
                          className={`py-2 px-4 rounded-lg border ${donationAmount === '100' ? 'bg-[#4ECDC4]/10 border-[#4ECDC4] text-[#4ECDC4]' : 'border-gray-300 text-gray-600'}`}
                          onClick={() => handleAmountSelect('100')}
                        >
                          $100
                        </button>
                        <button 
                          type="button"
                          className={`py-2 px-4 rounded-lg border ${donationAmount === '250' ? 'bg-[#4ECDC4]/10 border-[#4ECDC4] text-[#4ECDC4]' : 'border-gray-300 text-gray-600'}`}
                          onClick={() => handleAmountSelect('250')}
                        >
                          $250
                        </button>
                        <button 
                          type="button"
                          className={`py-2 px-4 rounded-lg border ${donationAmount === '500' ? 'bg-[#4ECDC4]/10 border-[#4ECDC4] text-[#4ECDC4]' : 'border-gray-300 text-gray-600'}`}
                          onClick={() => handleAmountSelect('500')}
                        >
                          $500
                        </button>
                        <button 
                          type="button"
                          className={`py-2 px-4 rounded-lg border ${donationAmount === 'custom' ? 'bg-[#4ECDC4]/10 border-[#4ECDC4] text-[#4ECDC4]' : 'border-gray-300 text-gray-600'}`}
                          onClick={() => setDonationAmount('custom')}
                        >
                          Custom
                        </button>
                      </div>
                      
                      {donationAmount === 'custom' && (
                        <div className="mt-3">
                          <label htmlFor="customAmount" className="sr-only">Custom Amount</label>
                          <div className="relative">
                            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                              <span className="text-gray-500">$</span>
                            </div>
                            <input 
                              type="number" 
                              id="customAmount" 
                              value={customAmount}
                              onChange={handleCustomAmountChange}
                              className="pl-7 w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
                              placeholder="Enter amount"
                              min="1"
                              step="1"
                              required={donationAmount === 'custom'}
                            />
                          </div>
                        </div>
                      )}
                    </div>
                    
                    <div className="mb-6">
                      <label className="block text-gray-700 font-medium mb-2">Personal Information</label>
                      <div className="space-y-3">
                        <input 
                          type="text" 
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
                          placeholder="Full Name"
                          required
                        />
                        <input 
                          type="email" 
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
                          placeholder="Email Address"
                          required
                        />
                        <input 
                          type="tel" 
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
                          placeholder="Phone Number (Optional)"
                        />
                      </div>
                    </div>
                    
                    <button 
                      type="submit" 
                      className="w-full bg-[#4ECDC4] hover:bg-[#3dbdb5] text-white font-medium py-3 px-6 rounded-full transition duration-300"
                    >
                      Donate Now
                    </button>
                    
                    <p className="text-center text-gray-500 text-sm mt-4">
                      Your donation is secure and tax-deductible.
                    </p>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Testimonials */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">Donor Stories</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              Hear from those who support our mission and the impact they've helped create.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-gray-50 rounded-xl shadow-md p-8">
              <p className="text-gray-600 italic mb-6">
                "I've been donating to ECS for five years now, and I'm continually impressed by the tangible impact they make in our community. Their transparency about how funds are used gives me confidence that my donations are making a real difference."
              </p>
              <div className="flex items-center">
                <div className="w-12 h-12 bg-[#4ECDC4] rounded-full flex items-center justify-center text-white text-lg font-bold mr-4">
                  RB
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800">Robert B.</h3>
                  <p className="text-gray-500">Monthly Donor since 2018</p>
                </div>
              </div>
            </div>
            
            <div className="bg-gray-50 rounded-xl shadow-md p-8">
              <p className="text-gray-600 italic mb-6">
                "As a local business owner, I wanted to give back to the community that has supported us. Partnering with ECS through our corporate giving program has been a wonderful way to make a meaningful impact while engaging our employees in community service."
              </p>
              <div className="flex items-center">
                <div className="w-12 h-12 bg-[#FF6B6B] rounded-full flex items-center justify-center text-white text-lg font-bold mr-4">
                  JW
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800">Jennifer W.</h3>
                  <p className="text-gray-500">Corporate Partner</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Financial Transparency */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">Financial Transparency</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              We're committed to responsible stewardship of your donations and transparent reporting of our finances.
            </p>
          </div>
          
          <div className="bg-white rounded-xl shadow-md p-8 max-w-4xl mx-auto">
            <h3 className="text-xl font-semibold mb-6 text-gray-800">How Your Donation is Used</h3>
            
            <div className="mb-8">
              <div className="flex justify-between mb-2">
                <span className="font-medium">Program Services</span>
                <span className="font-medium">82%</span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-2.5">
                <div className="bg-[#4ECDC4] h-2.5 rounded-full" style={{ width: '82%' }}></div>
              </div>
            </div>
            
            <div className="mb-8">
              <div className="flex justify-between mb-2">
                <span className="font-medium">Administration</span>
                <span className="font-medium">10%</span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-2.5">
                <div className="bg-[#FFD166] h-2.5 rounded-full" style={{ width: '10%' }}></div>
              </div>
            </div>
            
            <div className="mb-8">
              <div className="flex justify-between mb-2">
                <span className="font-medium">Fundraising</span>
                <span className="font-medium">8%</span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-2.5">
                <div className="bg-[#FF6B6B] h-2.5 rounded-full" style={{ width: '8%' }}></div>
              </div>
            </div>
            
            <p className="text-gray-600 mb-6">
              ECS is committed to maximizing the impact of your donation. 82% of all funds go directly to program services that benefit our community members.
            </p>
            
            <div className="flex justify-center">
              <button className="text-[#4ECDC4] hover:text-[#3dbdb5] font-medium flex items-center">
                View Annual Report <ChevronRight size={18} className="ml-1" />
              </button>
            </div>
          </div>
        </div>
      </section>
      
      {/* Call to Action */}
      <section className="py-16 bg-gradient-to-r from-[#4ECDC4] to-[#FF6B6B] text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6">Together, We Can Make a Difference</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Your support helps us create a stronger, more resilient community where everyone has the opportunity to thrive.
          </p>
          <button 
            onClick={() => document.querySelector('#donation-form').scrollIntoView({ behavior: 'smooth' })}
            className="bg-[#FFD166] text-gray-800 hover:bg-[#ffc233] font-semibold py-3 px-8 rounded-full transition duration-300"
          >
            Donate Today
          </button>
        </div>
      </section>
    </div>
  );
}

// Contact Page Component
function ContactPage({ navigateTo }) {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Here you would typically send the form data to your backend
    alert('Thank you for your message! We will get back to you soon.');
    setFormData({
      name: '',
      email: '',
      subject: '',
      message: ''
    });
  };

  return (
    <div>
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-[#4ECDC4] to-[#FF6B6B] text-white py-16">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">Contact Us</h1>
          <p className="text-xl max-w-3xl mx-auto">
            Have questions or want to learn more about our services? We're here to help.
          </p>
        </div>
      </section>
      
      {/* Contact Information */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
            <div className="bg-gray-50 rounded-xl shadow-md p-8 text-center">
              <div className="bg-[#4ECDC4]/10 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-6">
                <MapPin className="text-[#4ECDC4]" size={28} />
              </div>
              <h3 className="text-xl font-semibold mb-3 text-gray-800">Visit Us</h3>
              <p className="text-gray-600">
                123 Community Lane<br />
                Anytown, USA 12345
              </p>
            </div>
            
            <div className="bg-gray-50 rounded-xl shadow-md p-8 text-center">
              <div className="bg-[#FF6B6B]/10 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-6">
                <Phone className="text-[#FF6B6B]" size={28} />
              </div>
              <h3 className="text-xl font-semibold mb-3 text-gray-800">Call Us</h3>
              <p className="text-gray-600">
                Main: (555) 123-4567<br />
                Support: (555) 987-6543
              </p>
            </div>
            
            <div className="bg-gray-50 rounded-xl shadow-md p-8 text-center">
              <div className="bg-[#FFD166]/10 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-6">
                <Mail className="text-[#FFD166]" size={28} />
              </div>
              <h3 className="text-xl font-semibold mb-3 text-gray-800">Email Us</h3>
              <p className="text-gray-600">
                info@ecscommunity.org<br />
                support@ecscommunity.org
              </p>
            </div>
          </div>
          
          <div className="flex flex-col md:flex-row bg-white rounded-xl shadow-md overflow-hidden">
            <div className="md:w-1/2 p-8">
              <h2 className="text-2xl font-bold mb-6 text-gray-800">Send Us a Message</h2>
              <form onSubmit={handleSubmit}>
                <div className="mb-4">
                  <label htmlFor="name" className="block text-gray-700 font-medium mb-2">Name</label>
                  <input 
                    type="text" 
                    id="name" 
                    name="name" 
                    value={formData.name}
                    onChange={handleChange}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
                    required
                  />
                </div>
                
                <div className="mb-4">
                  <label htmlFor="email" className="block text-gray-700 font-medium mb-2">Email</label>
                  <input 
                    type="email" 
                    id="email" 
                    name="email" 
                    value={formData.email}
                    onChange={handleChange}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
                    required
                  />
                </div>
                
                <div className="mb-4">
                  <label htmlFor="subject" className="block text-gray-700 font-medium mb-2">Subject</label>
                  <input 
                    type="text" 
                    id="subject" 
                    name="subject" 
                    value={formData.subject}
                    onChange={handleChange}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
                    required
                  />
                </div>
                
                <div className="mb-6">
                  <label htmlFor="message" className="block text-gray-700 font-medium mb-2">Message</label>
                  <textarea 
                    id="message" 
                    name="message" 
                    value={formData.message}
                    onChange={handleChange}
                    rows="5" 
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4ECDC4]"
                    required
                  ></textarea>
                </div>
                
                <button 
                  type="submit" 
                  className="bg-[#4ECDC4] hover:bg-[#3dbdb5] text-white font-medium py-3 px-6 rounded-full transition duration-300"
                >
                  Send Message
                </button>
              </form>
            </div>
            
            <div className="md:w-1/2 bg-gray-200">
              {/* This would be a map in a real implementation */}
              <div className="h-full flex items-center justify-center bg-gray-300">
                <div className="text-gray-500 text-center p-8">
                  <MapPin size={48} className="mx-auto mb-4" />
                  <p className="text-lg font-medium">Map would be displayed here</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* FAQ Section */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-800">Frequently Asked Questions</h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg">
              Find answers to common questions about our services and organization.
            </p>
          </div>
          
          <div className="max-w-3xl mx-auto">
            <div className="bg-white rounded-xl shadow-md p-6 mb-4">
              <h3 className="text-xl font-semibold mb-2 text-gray-800">How do I apply for services?</h3>
              <p className="text-gray-600">
                You can apply for services by filling out our online application form, calling our main office, or visiting us in person during business hours. Our staff will guide you through the process and help determine which services best meet your needs.
              </p>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-6 mb-4">
              <h3 className="text-xl font-semibold mb-2 text-gray-800">Are your services free?</h3>
              <p className="text-gray-600">
                Many of our services are provided at no cost to participants. Some specialized programs may have nominal fees, but we offer sliding scale options and scholarships to ensure that cost is not a barrier to accessing support.
              </p>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-6 mb-4">
              <h3 className="text-xl font-semibold mb-2 text-gray-800">How can I volunteer with ECS?</h3>
              <p className="text-gray-600">
                We welcome volunteers in various capacities. You can start by filling out our volunteer application form on the Get Involved page. Our volunteer coordinator will contact you to discuss opportunities that match your interests and availability.
              </p>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-6 mb-4">
              <h3 className="text-xl font-semibold mb-2 text-gray-800">Is my donation tax-deductible?</h3>
              <p className="text-gray-600">
                Yes, ECS is a registered 501(c)(3) nonprofit organization, and all donations are tax-deductible to the extent allowed by law. You will receive a receipt for your donation that can be used for tax purposes.
              </p>
            </div>
            
            <div className="bg-white rounded-xl shadow-md p-6">
              <h3 className="text-xl font-semibold mb-2 text-gray-800">Do you offer internship opportunities?</h3>
              <p className="text-gray-600">
                Yes, we offer internships for students in relevant fields such as social work, counseling, education, and nonprofit management. Please contact our office or check our website for current internship opportunities.
              </p>
            </div>
          </div>
        </div>
      </section>
      
      {/* Newsletter Signup */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto bg-gradient-to-r from-[#4ECDC4] to-[#FF6B6B] rounded-xl shadow-md p-8 text-white">
            <div className="text-center mb-6">
              <h2 className="text-3xl font-bold mb-4">Stay Connected</h2>
              <p className="text-lg">
                Subscribe to our newsletter to receive updates on our programs, events, and impact.
              </p>
            </div>
            
            <form className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
              <input 
                type="email" 
                className="flex-1 px-4 py-3 rounded-lg focus:outline-none"
                placeholder="Your email address"
                required
              />
              <button 
                type="submit" 
                className="bg-[#FFD166] text-gray-800 hover:bg-[#ffc233] font-medium py-3 px-6 rounded-lg transition duration-300"
              >
                Subscribe
              </button>
            </form>
            
            <p className="text-sm text-center mt-4">
              We respect your privacy and will never share your information with third parties.
            </p>
          </div>
        </div>
      </section>
      
      {/* Social Media */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6 text-gray-800">Connect With Us</h2>
          <p className="text-gray-600 max-w-2xl mx-auto mb-8 text-lg">
            Follow us on social media to stay updated on our programs, events, and community impact.
          </p>
          
          <div className="flex justify-center space-x-6">
            <a href="#" className="bg-[#4ECDC4] text-white p-4 rounded-full hover:bg-[#3dbdb5] transition duration-300">
              <Facebook size={24} />
            </a>
            <a href="#" className="bg-[#FF6B6B] text-white p-4 rounded-full hover:bg-[#ff5252] transition duration-300">
              <Twitter size={24} />
            </a>
            <a href="#" className="bg-[#FFD166] text-white p-4 rounded-full hover:bg-[#ffc233] transition duration-300">
              <Instagram size={24} />
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}