{% extends "base.html" %}

{% block content %}
<!-- Contact Hero -->
<section class="contact-hero bg-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-envelope" aria-hidden="true"></i>
                    Contact Us
                </h1>
                <p class="lead">
                    Get in touch with the PrismaOS team. We're here to help with questions, 
                    feedback, and accessibility support.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Contact Options -->
<section class="contact-options py-5">
    <div class="container">
        <div class="row g-4 mb-5">
            <div class="col-md-6 col-lg-3">
                <div class="contact-option h-100 text-center p-4 border rounded-3">
                    <div class="option-icon mb-3">
                        <i class="fas fa-envelope fa-3x text-primary" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">General Inquiries</h3>
                    <p class="text-muted small">Questions about PrismaOS features and development</p>
                    <a href="mailto:info@prismaos.org" class="text-primary text-decoration-none">
                        info@prismaos.org
                    </a>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="contact-option h-100 text-center p-4 border rounded-3">
                    <div class="option-icon mb-3">
                        <i class="fas fa-universal-access fa-3x text-success" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Accessibility Support</h3>
                    <p class="text-muted small">Help with accessibility features and testing</p>
                    <a href="mailto:accessibility@prismaos.org" class="text-success text-decoration-none">
                        accessibility@prismaos.org
                    </a>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="contact-option h-100 text-center p-4 border rounded-3">
                    <div class="option-icon mb-3">
                        <i class="fas fa-code fa-3x text-warning" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Developer Support</h3>
                    <p class="text-muted small">SDK questions and technical assistance</p>
                    <a href="mailto:developers@prismaos.org" class="text-warning text-decoration-none">
                        developers@prismaos.org
                    </a>
                </div>
            </div>
            
            <div class="col-md-6 col-lg-3">
                <div class="contact-option h-100 text-center p-4 border rounded-3">
                    <div class="option-icon mb-3">
                        <i class="fas fa-newspaper fa-3x text-info" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Media & Press</h3>
                    <p class="text-muted small">Press inquiries and media relations</p>
                    <a href="mailto:press@prismaos.org" class="text-info text-decoration-none">
                        press@prismaos.org
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Form -->
<section class="contact-form-section bg-light py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="contact-form-card p-5 bg-white border rounded-3">
                    <div class="text-center mb-4">
                        <h2 class="h3 fw-bold">Send Us a Message</h2>
                        <p class="text-muted">
                            Fill out the form below and we'll get back to you within 24 hours. 
                            All fields marked with * are required.
                        </p>
                    </div>
                    
                    <form method="POST" action="{{ url_for('contact') }}" novalidate>
                        {{ form.hidden_tag() }}
                        
                        <div class="row g-3">
                            <!-- Name Field -->
                            <div class="col-md-6">
                                <label for="{{ form.name.id }}" class="form-label fw-bold">
                                    {{ form.name.label.text }} *
                                </label>
                                {{ form.name(class="form-control" + (" is-invalid" if form.name.errors else "")) }}
                                <div id="name-help" class="form-text">
                                    Enter your full name so we know how to address you
                                </div>
                                {% if form.name.errors %}
                                    <div class="invalid-feedback">
                                        {% for error in form.name.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <!-- Email Field -->
                            <div class="col-md-6">
                                <label for="{{ form.email.id }}" class="form-label fw-bold">
                                    {{ form.email.label.text }} *
                                </label>
                                {{ form.email(class="form-control" + (" is-invalid" if form.email.errors else "")) }}
                                <div id="email-help" class="form-text">
                                    We'll use this email to respond to your message
                                </div>
                                {% if form.email.errors %}
                                    <div class="invalid-feedback">
                                        {% for error in form.email.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <!-- Subject Field -->
                            <div class="col-12">
                                <label for="{{ form.subject.id }}" class="form-label fw-bold">
                                    {{ form.subject.label.text }} *
                                </label>
                                {{ form.subject(class="form-control" + (" is-invalid" if form.subject.errors else "")) }}
                                <div id="subject-help" class="form-text">
                                    Brief description of what your message is about
                                </div>
                                {% if form.subject.errors %}
                                    <div class="invalid-feedback">
                                        {% for error in form.subject.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <!-- Accessibility Needs Field -->
                            <div class="col-12">
                                <label for="{{ form.accessibility_needs.id }}" class="form-label fw-bold">
                                    {{ form.accessibility_needs.label.text }}
                                </label>
                                {{ form.accessibility_needs(class="form-select") }}
                                <div id="accessibility-help" class="form-text">
                                    Help us understand your accessibility needs so we can provide better support
                                </div>
                            </div>
                            
                            <!-- Message Field -->
                            <div class="col-12">
                                <label for="{{ form.message.id }}" class="form-label fw-bold">
                                    {{ form.message.label.text }} *
                                </label>
                                {{ form.message(class="form-control" + (" is-invalid" if form.message.errors else "")) }}
                                <div id="message-help" class="form-text">
                                    Please provide as much detail as possible. If reporting an accessibility issue, 
                                    include your device type, assistive technology used, and steps to reproduce the problem.
                                </div>
                                {% if form.message.errors %}
                                    <div class="invalid-feedback">
                                        {% for error in form.message.errors %}
                                            {{ error }}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <!-- Submit Button -->
                            <div class="col-12 text-center">
                                {{ form.submit(class="btn btn-primary btn-lg px-5") }}
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Accessibility Statement -->
<section class="accessibility-statement py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="statement-card p-5 bg-light border rounded-3">
                    <h2 class="h3 fw-bold text-center mb-4">Accessibility Statement</h2>
                    
                    <div class="row g-4">
                        <div class="col-md-6">
                            <h3 class="h5 fw-bold mb-3">Our Commitment</h3>
                            <p class="text-muted">
                                PrismaOS is committed to ensuring digital accessibility for all users, 
                                including those with disabilities. We continually improve the user experience 
                                for everyone and apply relevant accessibility standards.
                            </p>
                            
                            <h3 class="h5 fw-bold mb-3 mt-4">Compliance Status</h3>
                            <p class="text-muted">
                                This website is designed to conform with WCAG 2.1 Level AAA guidelines. 
                                We regularly audit our content and features to ensure compatibility with 
                                assistive technologies.
                            </p>
                        </div>
                        
                        <div class="col-md-6">
                            <h3 class="h5 fw-bold mb-3">Accessibility Features</h3>
                            <ul class="list-unstyled text-muted">
                                <li class="mb-2">
                                    <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                    Semantic HTML and ARIA labels
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                    Keyboard navigation support
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                    Screen reader compatibility
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                    High contrast mode
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                    Adjustable font sizes
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-check-circle text-success" aria-hidden="true"></i>
                                    Reduced motion options
                                </li>
                            </ul>
                            
                            <h3 class="h5 fw-bold mb-3 mt-4">Feedback</h3>
                            <p class="text-muted">
                                If you encounter any accessibility barriers, please contact us using the 
                                form above or email 
                                <a href="mailto:accessibility@prismaos.org" class="text-primary">
                                    accessibility@prismaos.org
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="faq-section py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Frequently Asked Questions</h2>
                <p class="lead text-muted">Quick answers to common questions</p>
            </div>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="accordion" id="faqAccordion">
                    <!-- FAQ Item 1 -->
                    <div class="accordion-item">
                        <h3 class="accordion-header" id="faq1">
                            <button class="accordion-button collapsed" 
                                    type="button" 
                                    data-bs-toggle="collapse" 
                                    data-bs-target="#faqCollapse1" 
                                    aria-expanded="false" 
                                    aria-controls="faqCollapse1">
                                How can I contribute to PrismaOS development?
                            </button>
                        </h3>
                        <div id="faqCollapse1" 
                             class="accordion-collapse collapse" 
                             aria-labelledby="faq1" 
                             data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>
                                    There are many ways to contribute to PrismaOS! You can contribute code through 
                                    our GitHub repository, help with accessibility testing, write documentation, 
                                    participate in community discussions, or help spread awareness about accessible technology.
                                </p>
                                <p>
                                    Visit our <a href="{{ url_for('community') }}">Community page</a> to learn more 
                                    about our various programs and how to get involved.
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- FAQ Item 2 -->
                    <div class="accordion-item">
                        <h3 class="accordion-header" id="faq2">
                            <button class="accordion-button collapsed" 
                                    type="button" 
                                    data-bs-toggle="collapse" 
                                    data-bs-target="#faqCollapse2" 
                                    aria-expanded="false" 
                                    aria-controls="faqCollapse2">
                                When will PrismaOS be available for download?
                            </button>
                        </h3>
                        <div id="faqCollapse2" 
                             class="accordion-collapse collapse" 
                             aria-labelledby="faq2" 
                             data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>
                                    PrismaOS is currently in active development. We're working through the foundation 
                                    phase and building core accessibility features. Check our 
                                    <a href="{{ url_for('roadmap') }}">Development Roadmap</a> for current progress 
                                    and timeline updates.
                                </p>
                                <p>
                                    Beta testing opportunities are available for community members. 
                                    Join our beta testing program to get early access to development builds.
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- FAQ Item 3 -->
                    <div class="accordion-item">
                        <h3 class="accordion-header" id="faq3">
                            <button class="accordion-button collapsed" 
                                    type="button" 
                                    data-bs-toggle="collapse" 
                                    data-bs-target="#faqCollapse3" 
                                    aria-expanded="false" 
                                    aria-controls="faqCollapse3">
                                What devices will support PrismaOS?
                            </button>
                        </h3>
                        <div id="faqCollapse3" 
                             class="accordion-collapse collapse" 
                             aria-labelledby="faq3" 
                             data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>
                                    PrismaOS is designed to work on a wide range of mobile hardware. 
                                    Our <a href="{{ url_for('technical') }}">Technical Documentation</a> 
                                    includes detailed system requirements and hardware compatibility information.
                                </p>
                                <p>
                                    We're focusing on ARM64 and x86_64 architectures with plans to support 
                                    both smartphones and tablets. Accessibility features will work across 
                                    all supported device types.
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- FAQ Item 4 -->
                    <div class="accordion-item">
                        <h3 class="accordion-header" id="faq4">
                            <button class="accordion-button collapsed" 
                                    type="button" 
                                    data-bs-toggle="collapse" 
                                    data-bs-target="#faqCollapse4" 
                                    aria-expanded="false" 
                                    aria-controls="faqCollapse4">
                                How can I report accessibility issues?
                            </button>
                        </h3>
                        <div id="faqCollapse4" 
                             class="accordion-collapse collapse" 
                             aria-labelledby="faq4" 
                             data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <p>
                                    We take accessibility issues very seriously. You can report issues by:
                                </p>
                                <ul>
                                    <li>Using the contact form above and selecting "Accessibility Requirements"</li>
                                    <li>Emailing us directly at accessibility@prismaos.org</li>
                                    <li>Creating an issue on our GitHub repository</li>
                                    <li>Posting in our community Discord server's accessibility channel</li>
                                </ul>
                                <p>
                                    Please include details about your assistive technology, device type, 
                                    and steps to reproduce the issue.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}