{% extends "base.html" %}

{% block content %}
<!-- Community Hero -->
<section class="community-hero bg-gradient-primary text-white py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <h1 class="display-4 fw-bold mb-4">
                    <i class="fas fa-users" aria-hidden="true"></i>
                    Join Our Community
                </h1>
                <p class="lead">
                    Connect with developers, accessibility experts, and users building the future of inclusive mobile technology
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Community Statistics -->
<section class="community-stats py-5">
    <div class="container">
        <div class="row g-4 text-center">
            <div class="col-md-3">
                <div class="stat-card p-4">
                    <div class="stat-icon mb-3">
                        <i class="fas fa-users fa-3x text-primary" aria-hidden="true"></i>
                    </div>
                    <h3 class="h2 fw-bold mb-2">1,200+</h3>
                    <p class="text-muted">Community Members</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card p-4">
                    <div class="stat-icon mb-3">
                        <i class="fas fa-code fa-3x text-success" aria-hidden="true"></i>
                    </div>
                    <h3 class="h2 fw-bold mb-2">350+</h3>
                    <p class="text-muted">Developers</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card p-4">
                    <div class="stat-icon mb-3">
                        <i class="fas fa-universal-access fa-3x text-warning" aria-hidden="true"></i>
                    </div>
                    <h3 class="h2 fw-bold mb-2">180+</h3>
                    <p class="text-muted">Accessibility Experts</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card p-4">
                    <div class="stat-icon mb-3">
                        <i class="fas fa-globe fa-3x text-info" aria-hidden="true"></i>
                    </div>
                    <h3 class="h2 fw-bold mb-2">45+</h3>
                    <p class="text-muted">Countries</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Community Platforms -->
<section class="community-platforms bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Connect With Us</h2>
                <p class="lead text-muted">Join our community across multiple platforms</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6 col-lg-4">
                <div class="platform-card h-100 p-4 bg-white border rounded-3 text-center">
                    <div class="platform-icon mb-3">
                        <i class="fab fa-discord fa-4x text-primary" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Discord Server</h3>
                    <p class="text-muted mb-4">Real-time chat, voice channels, and community events. Accessible with screen readers and keyboard navigation.</p>
                    <div class="platform-stats mb-3">
                        <span class="badge bg-success">800+ Members</span>
                        <span class="badge bg-info ms-2">Active Daily</span>
                    </div>
                    <a href="#" class="btn btn-primary" aria-label="Join our Discord server">
                        <i class="fab fa-discord" aria-hidden="true"></i>
                        Join Discord
                    </a>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4">
                <div class="platform-card h-100 p-4 bg-white border rounded-3 text-center">
                    <div class="platform-icon mb-3">
                        <i class="fab fa-github fa-4x text-dark" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">GitHub Repository</h3>
                    <p class="text-muted mb-4">Contribute to the codebase, report issues, and collaborate on development with full accessibility testing.</p>
                    <div class="platform-stats mb-3">
                        <span class="badge bg-warning">2.1k Stars</span>
                        <span class="badge bg-danger ms-2">340 Forks</span>
                    </div>
                    <a href="#" class="btn btn-dark" aria-label="View our GitHub repository">
                        <i class="fab fa-github" aria-hidden="true"></i>
                        View on GitHub
                    </a>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-4">
                <div class="platform-card h-100 p-4 bg-white border rounded-3 text-center">
                    <div class="platform-icon mb-3">
                        <i class="fas fa-comments fa-4x text-success" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Community Forum</h3>
                    <p class="text-muted mb-4">Discuss accessibility best practices, get help with development, and share your experiences.</p>
                    <div class="platform-stats mb-3">
                        <span class="badge bg-primary">450+ Topics</span>
                        <span class="badge bg-secondary ms-2">3.2k Posts</span>
                    </div>
                    <a href="#" class="btn btn-success" aria-label="Visit our community forum">
                        <i class="fas fa-comments" aria-hidden="true"></i>
                        Visit Forum
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Community Programs -->
<section class="community-programs py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Community Programs</h2>
                <p class="lead text-muted">Get involved in our initiatives to advance accessibility in mobile technology</p>
            </div>
        </div>
        
        <div class="row g-4">
            <!-- Beta Testing Program -->
            <div class="col-lg-6">
                <div class="program-card h-100 p-4 border rounded-3">
                    <div class="program-header mb-4">
                        <div class="d-flex align-items-center">
                            <div class="program-icon me-3">
                                <i class="fas fa-vial fa-2x text-primary" aria-hidden="true"></i>
                            </div>
                            <div>
                                <h3 class="h5 fw-bold mb-1">Beta Testing Program</h3>
                                <span class="badge bg-primary">Active Recruitment</span>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted mb-4">
                        Help us test PrismaOS accessibility features with real users. We especially welcome testers 
                        with disabilities to ensure our features meet actual needs.
                    </p>
                    <div class="program-benefits mb-4">
                        <h4 class="h6 fw-bold mb-3">Benefits:</h4>
                        <ul class="list-unstyled">
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                Early access to new features
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                Direct input on accessibility improvements
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                Beta tester recognition program
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                Accessibility consulting opportunities
                            </li>
                        </ul>
                    </div>
                    <a href="#" class="btn btn-primary">Apply to Beta Test</a>
                </div>
            </div>
            
            <!-- Developer Mentorship -->
            <div class="col-lg-6">
                <div class="program-card h-100 p-4 border rounded-3">
                    <div class="program-header mb-4">
                        <div class="d-flex align-items-center">
                            <div class="program-icon me-3">
                                <i class="fas fa-graduation-cap fa-2x text-success" aria-hidden="true"></i>
                            </div>
                            <div>
                                <h3 class="h5 fw-bold mb-1">Developer Mentorship</h3>
                                <span class="badge bg-success">Open Applications</span>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted mb-4">
                        Connect with experienced developers and accessibility experts. Learn best practices 
                        for building inclusive applications and contribute to open source projects.
                    </p>
                    <div class="program-benefits mb-4">
                        <h4 class="h6 fw-bold mb-3">Program Features:</h4>
                        <ul class="list-unstyled">
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                1-on-1 mentoring sessions
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                Code review and feedback
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                Accessibility workshops
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                Open source contribution guidance
                            </li>
                        </ul>
                    </div>
                    <a href="#" class="btn btn-success">Join Mentorship</a>
                </div>
            </div>
            
            <!-- Accessibility Advocacy -->
            <div class="col-lg-6">
                <div class="program-card h-100 p-4 border rounded-3">
                    <div class="program-header mb-4">
                        <div class="d-flex align-items-center">
                            <div class="program-icon me-3">
                                <i class="fas fa-bullhorn fa-2x text-warning" aria-hidden="true"></i>
                            </div>
                            <div>
                                <h3 class="h5 fw-bold mb-1">Accessibility Advocacy</h3>
                                <span class="badge bg-warning">Always Open</span>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted mb-4">
                        Help spread awareness about digital accessibility and inclusive design. 
                        Speak at conferences, write articles, and educate the tech community.
                    </p>
                    <div class="program-benefits mb-4">
                        <h4 class="h6 fw-bold mb-3">Opportunities:</h4>
                        <ul class="list-unstyled">
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                Conference speaking opportunities
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                Blog writing and content creation
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                Workshop facilitation
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                Community outreach programs
                            </li>
                        </ul>
                    </div>
                    <a href="#" class="btn btn-warning">Become an Advocate</a>
                </div>
            </div>
            
            <!-- Research Collaboration -->
            <div class="col-lg-6">
                <div class="program-card h-100 p-4 border rounded-3">
                    <div class="program-header mb-4">
                        <div class="d-flex align-items-center">
                            <div class="program-icon me-3">
                                <i class="fas fa-microscope fa-2x text-info" aria-hidden="true"></i>
                            </div>
                            <div>
                                <h3 class="h5 fw-bold mb-1">Research Collaboration</h3>
                                <span class="badge bg-info">Academic Partners</span>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted mb-4">
                        Collaborate with universities and research institutions on accessibility research projects. 
                        Contribute to academic papers and advance the field of assistive technology.
                    </p>
                    <div class="program-benefits mb-4">
                        <h4 class="h6 fw-bold mb-3">Research Areas:</h4>
                        <ul class="list-unstyled">
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                AI-powered accessibility features
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                Voice recognition improvements
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                Haptic feedback systems
                            </li>
                            <li class="mb-2">
                                <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                User experience studies
                            </li>
                        </ul>
                    </div>
                    <a href="#" class="btn btn-info">Join Research</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Community Events -->
<section class="community-events bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Upcoming Events</h2>
                <p class="lead text-muted">Join our community events and learn from experts</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-4">
                <article class="event-card h-100 p-4 bg-white border rounded-3">
                    <div class="event-date mb-3">
                        <div class="d-flex align-items-center text-primary">
                            <i class="fas fa-calendar-alt me-2" aria-hidden="true"></i>
                            <strong>July 15, 2025</strong>
                        </div>
                    </div>
                    <h3 class="h5 fw-bold mb-3">Monthly Accessibility Meetup</h3>
                    <p class="text-muted mb-3">
                        Virtual meetup discussing latest accessibility trends, featuring guest speakers 
                        from leading accessibility organizations.
                    </p>
                    <div class="event-details mb-3">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-clock text-muted me-2" aria-hidden="true"></i>
                            <span class="small">2:00 PM - 4:00 PM EDT</span>
                        </div>
                        <div class="d-flex align-items-center">
                            <i class="fas fa-video text-muted me-2" aria-hidden="true"></i>
                            <span class="small">Virtual Event (Discord)</span>
                        </div>
                    </div>
                    <a href="#" class="btn btn-outline-primary">Register Now</a>
                </article>
            </div>
            
            <div class="col-lg-4">
                <article class="event-card h-100 p-4 bg-white border rounded-3">
                    <div class="event-date mb-3">
                        <div class="d-flex align-items-center text-success">
                            <i class="fas fa-calendar-alt me-2" aria-hidden="true"></i>
                            <strong>July 22, 2025</strong>
                        </div>
                    </div>
                    <h3 class="h5 fw-bold mb-3">Accessibility Testing Workshop</h3>
                    <p class="text-muted mb-3">
                        Hands-on workshop teaching developers how to test applications with 
                        screen readers and other assistive technologies.
                    </p>
                    <div class="event-details mb-3">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-clock text-muted me-2" aria-hidden="true"></i>
                            <span class="small">10:00 AM - 2:00 PM EDT</span>
                        </div>
                        <div class="d-flex align-items-center">
                            <i class="fas fa-laptop text-muted me-2" aria-hidden="true"></i>
                            <span class="small">Interactive Workshop</span>
                        </div>
                    </div>
                    <a href="#" class="btn btn-outline-success">Join Workshop</a>
                </article>
            </div>
            
            <div class="col-lg-4">
                <article class="event-card h-100 p-4 bg-white border rounded-3">
                    <div class="event-date mb-3">
                        <div class="d-flex align-items-center text-warning">
                            <i class="fas fa-calendar-alt me-2" aria-hidden="true"></i>
                            <strong>August 5, 2025</strong>
                        </div>
                    </div>
                    <h3 class="h5 fw-bold mb-3">PrismaOS Developer Conference</h3>
                    <p class="text-muted mb-3">
                        Annual conference featuring talks from core developers, accessibility experts, 
                        and community members building amazing accessible apps.
                    </p>
                    <div class="event-details mb-3">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-clock text-muted me-2" aria-hidden="true"></i>
                            <span class="small">9:00 AM - 6:00 PM EDT</span>
                        </div>
                        <div class="d-flex align-items-center">
                            <i class="fas fa-users text-muted me-2" aria-hidden="true"></i>
                            <span class="small">Multi-track Conference</span>
                        </div>
                    </div>
                    <a href="#" class="btn btn-outline-warning">Learn More</a>
                </article>
            </div>
        </div>
    </div>
</section>

<!-- Newsletter Signup -->
<section class="newsletter-signup py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h2 class="display-5 fw-bold mb-4">Stay Connected</h2>
                <p class="lead text-muted mb-4">
                    Get the latest updates on PrismaOS development, community events, and accessibility news
                </p>
                <form method="POST" action="{{ url_for('newsletter_signup') }}" class="newsletter-form">
                    {{ csrf_token() }}
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <div class="input-group input-group-lg">
                                <input type="email" 
                                       class="form-control" 
                                       name="email" 
                                       placeholder="Enter your email address" 
                                       aria-label="Email address for community newsletter"
                                       required>
                                <button class="btn btn-primary" type="submit">
                                    <i class="fas fa-envelope" aria-hidden="true"></i>
                                    Subscribe
                                </button>
                            </div>
                            <div class="form-text mt-2">
                                Join 1,200+ community members receiving weekly updates
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- Community Guidelines -->
<section class="community-guidelines bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Community Guidelines</h2>
                <p class="lead text-muted">Building an inclusive and respectful community for everyone</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="guidelines-content bg-white p-5 rounded-3 border">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="guideline-item">
                                <h3 class="h5 fw-bold text-success mb-3">
                                    <i class="fas fa-heart" aria-hidden="true"></i>
                                    Be Inclusive and Respectful
                                </h3>
                                <p class="text-muted">
                                    Welcome people of all backgrounds, abilities, and experience levels. 
                                    Use respectful language and consider the accessibility needs of others.
                                </p>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="guideline-item">
                                <h3 class="h5 fw-bold text-primary mb-3">
                                    <i class="fas fa-hands-helping" aria-hidden="true"></i>
                                    Help and Support Others
                                </h3>
                                <p class="text-muted">
                                    Share your knowledge, answer questions, and help newcomers get started. 
                                    Everyone's contribution makes our community stronger.
                                </p>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="guideline-item">
                                <h3 class="h5 fw-bold text-warning mb-3">
                                    <i class="fas fa-search" aria-hidden="true"></i>
                                    Search Before Asking
                                </h3>
                                <p class="text-muted">
                                    Check existing discussions and documentation before posting questions. 
                                    This helps keep our channels organized and useful for everyone.
                                </p>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="guideline-item">
                                <h3 class="h5 fw-bold text-info mb-3">
                                    <i class="fas fa-shield-alt" aria-hidden="true"></i>
                                    Keep It Safe and Legal
                                </h3>
                                <p class="text-muted">
                                    No harassment, spam, or inappropriate content. Follow platform rules 
                                    and respect privacy. Report violations to moderators.
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-4">
                        <a href="#" class="btn btn-outline-primary">Read Full Guidelines</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}