{% extends "base.html" %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section bg-primary text-white py-5" role="banner">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold mb-4">
                    PrismaOS
                    <span class="text-warning">Accessible</span> Mobile OS
                </h1>
                <p class="lead mb-4">
                    An innovative open-source mobile operating system built on Red Hat Linux foundations, 
                    designed specifically to provide exceptional accessibility features for users with disabilities.
                </p>
                <div class="hero-actions">
                    <a href="{{ url_for('features') }}" class="btn btn-warning btn-lg me-3">
                        <i class="fas fa-universal-access" aria-hidden="true"></i>
                        Explore Features
                    </a>
                    <a href="{{ url_for('technical') }}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-download" aria-hidden="true"></i>
                        Technical Docs
                    </a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-image text-center">
                    <!-- SVG illustration of mobile device with accessibility symbols -->
                    <svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="hero-illustration-title">
                        <title id="hero-illustration-title">PrismaOS mobile device with accessibility features</title>
                        <!-- Mobile device outline -->
                        <rect x="140" y="40" width="120" height="220" rx="20" fill="#ffffff" stroke="#333" stroke-width="2"/>
                        <!-- Screen -->
                        <rect x="150" y="60" width="100" height="180" rx="10" fill="#e9ecef"/>
                        <!-- Accessibility symbols -->
                        <circle cx="200" cy="120" r="15" fill="#ffc107"/>
                        <text x="200" y="125" text-anchor="middle" fill="#212529" font-size="12" font-family="Arial">♿</text>
                        <!-- Signal waves for audio -->
                        <path d="M120 140 Q130 130 140 140 Q130 150 120 140" stroke="#28a745" stroke-width="2" fill="none"/>
                        <path d="M260 140 Q270 130 280 140 Q270 150 260 140" stroke="#28a745" stroke-width="2" fill="none"/>
                        <!-- Voice/sound indicators -->
                        <circle cx="100" cy="140" r="3" fill="#17a2b8"/>
                        <circle cx="300" cy="140" r="3" fill="#17a2b8"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- PrismaOS Brand Banner -->
<section class="brand-banner py-4 bg-light" role="banner">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 text-center">
                <div class="brand-showcase d-flex align-items-center justify-content-center">
                    <img src="{{ url_for('static', filename='images/prismaos-logo.png') }}" 
                         alt="PrismaOS - Built on Linux Open Source Foundation" 
                         class="brand-banner-logo">
                    <div class="brand-info ms-4">
                        <p class="mb-1 text-muted small">Powered by</p>
                        <p class="mb-0 fw-bold text-primary">Linux Open Source Foundation</p>
                        <p class="mb-0 text-muted small">Red Hat Enterprise Architecture</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Key Features Overview -->
<section class="features-overview py-5" id="overview">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Accessibility First Design</h2>
                <p class="lead text-muted">PrismaOS is built from the ground up with accessibility as a core principle, not an afterthought.</p>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="feature-card h-100 text-center p-4 border rounded-3">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-deaf fa-3x text-primary" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">For Deaf Users</h3>
                    <p class="text-muted">Advanced closed captioning, visual notifications, sign language recognition, and customizable haptic feedback.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="feature-card h-100 text-center p-4 border rounded-3">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-blind fa-3x text-primary" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">For Blind Users</h3>
                    <p class="text-muted">Advanced text-to-speech, comprehensive voice commands, audio descriptions, and optimized gesture controls.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="feature-card h-100 text-center p-4 border rounded-3">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-cogs fa-3x text-primary" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Universal Design</h3>
                    <p class="text-muted">Adaptive interfaces, accessibility profiles, sensory substitution, and AI-powered assistance.</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="feature-card h-100 text-center p-4 border rounded-3">
                    <div class="feature-icon mb-3">
                        <i class="fab fa-redhat fa-3x text-primary" aria-hidden="true"></i>
                    </div>
                    <h3 class="h5 fw-bold">Red Hat Foundation</h3>
                    <p class="text-muted">Built on the stability and security of Red Hat Linux for enterprise-grade mobile experience.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Architecture Overview -->
<section class="architecture-section bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Core Architecture</h2>
                <p class="lead text-muted">PrismaOS is structured with several key layers designed for maximum accessibility and performance.</p>
            </div>
        </div>
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="architecture-layers">
                    <div class="layer-item mb-4 p-3 bg-white rounded shadow-sm">
                        <h4 class="h6 fw-bold text-primary mb-2">
                            <i class="fas fa-layer-group" aria-hidden="true"></i>
                            Developer SDK
                        </h4>
                        <p class="mb-0 text-muted">Allowing third-party developers to create accessible applications</p>
                    </div>
                    <div class="layer-item mb-4 p-3 bg-white rounded shadow-sm">
                        <h4 class="h6 fw-bold text-success mb-2">
                            <i class="fas fa-microchip" aria-hidden="true"></i>
                            Hardware Abstraction Layer
                        </h4>
                        <p class="mb-0 text-muted">Enabling compatibility with various smartphone hardware</p>
                    </div>
                    <div class="layer-item mb-4 p-3 bg-white rounded shadow-sm">
                        <h4 class="h6 fw-bold text-warning mb-2">
                            <i class="fas fa-universal-access" aria-hidden="true"></i>
                            Accessibility Framework
                        </h4>
                        <p class="mb-0 text-muted">The cornerstone of PrismaOS's unique value proposition</p>
                    </div>
                    <div class="layer-item mb-4 p-3 bg-white rounded shadow-sm">
                        <h4 class="h6 fw-bold text-info mb-2">
                            <i class="fas fa-mobile-alt" aria-hidden="true"></i>
                            Mobile UI Layer
                        </h4>
                        <p class="mb-0 text-muted">Providing a touch-friendly interface optimized for smartphone use</p>
                    </div>
                    <div class="layer-item p-3 bg-white rounded shadow-sm">
                        <h4 class="h6 fw-bold text-danger mb-2">
                            <i class="fab fa-redhat" aria-hidden="true"></i>
                            Red Hat Linux Base
                        </h4>
                        <p class="mb-0 text-muted">Leveraging the stability and security of Red Hat's enterprise-grade Linux distribution</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="architecture-diagram text-center">
                    <!-- Simplified architecture diagram -->
                    <svg width="350" height="400" viewBox="0 0 350 400" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="architecture-title">
                        <title id="architecture-title">PrismaOS Architecture Layers Diagram</title>
                        <!-- SDK Layer -->
                        <rect x="25" y="30" width="300" height="60" rx="5" fill="#0d6efd" stroke="#333"/>
                        <text x="175" y="65" text-anchor="middle" fill="white" font-size="14" font-family="Arial">Developer SDK</text>
                        
                        <!-- Hardware Layer -->
                        <rect x="25" y="110" width="300" height="60" rx="5" fill="#198754" stroke="#333"/>
                        <text x="175" y="145" text-anchor="middle" fill="white" font-size="14" font-family="Arial">Hardware Abstraction</text>
                        
                        <!-- Accessibility Layer -->
                        <rect x="25" y="190" width="300" height="60" rx="5" fill="#ffc107" stroke="#333"/>
                        <text x="175" y="225" text-anchor="middle" fill="#333" font-size="14" font-family="Arial">Accessibility Framework</text>
                        
                        <!-- UI Layer -->
                        <rect x="25" y="270" width="300" height="60" rx="5" fill="#0dcaf0" stroke="#333"/>
                        <text x="175" y="305" text-anchor="middle" fill="#333" font-size="14" font-family="Arial">Mobile UI Layer</text>
                        
                        <!-- Base Layer -->
                        <rect x="25" y="350" width="300" height="40" rx="5" fill="#dc3545" stroke="#333"/>
                        <text x="175" y="375" text-anchor="middle" fill="white" font-size="14" font-family="Arial">Red Hat Linux Base</text>
                        
                        <!-- Connection lines -->
                        <line x1="175" y1="90" x2="175" y2="110" stroke="#666" stroke-width="2"/>
                        <line x1="175" y1="170" x2="175" y2="190" stroke="#666" stroke-width="2"/>
                        <line x1="175" y1="250" x2="175" y2="270" stroke="#666" stroke-width="2"/>
                        <line x1="175" y1="330" x2="175" y2="350" stroke="#666" stroke-width="2"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="cta-section bg-primary text-white py-5">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8">
                <h2 class="display-5 fw-bold mb-4">Join the PrismaOS Community</h2>
                <p class="lead mb-4">
                    Help us build the most accessible mobile operating system. Whether you're a developer, 
                    accessibility expert, or someone passionate about inclusive technology, we welcome your contribution.
                </p>
                <div class="cta-actions">
                    <a href="{{ url_for('community') }}" class="btn btn-warning btn-lg me-3">
                        <i class="fas fa-users" aria-hidden="true"></i>
                        Join Community
                    </a>
                    <a href="{{ url_for('sdk') }}" class="btn btn-outline-light btn-lg">
                        <i class="fas fa-code" aria-hidden="true"></i>
                        Start Developing
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Latest Updates -->
<section class="updates-section py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2 class="display-5 fw-bold">Latest Updates</h2>
                <p class="lead text-muted">Stay informed about PrismaOS development progress</p>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <article class="update-card h-100 p-4 border rounded-3">
                    <div class="update-meta mb-3">
                        <span class="badge bg-primary">Development</span>
                        <small class="text-muted ms-2">July 2025</small>
                    </div>
                    <h3 class="h5 fw-bold">Foundation Phase Progress</h3>
                    <p class="text-muted">Initial adaptation of Red Hat Linux kernel for mobile hardware completed. Focus on real-time accessibility processing capabilities.</p>
                    <a href="{{ url_for('roadmap') }}" class="btn btn-outline-primary btn-sm">Read More</a>
                </article>
            </div>
            <div class="col-md-4">
                <article class="update-card h-100 p-4 border rounded-3">
                    <div class="update-meta mb-3">
                        <span class="badge bg-success">Community</span>
                        <small class="text-muted ms-2">June 2025</small>
                    </div>
                    <h3 class="h5 fw-bold">Accessibility Testing Program</h3>
                    <p class="text-muted">Launched beta testing program with disability advocacy groups to ensure our accessibility features meet real-world needs.</p>
                    <a href="{{ url_for('community') }}" class="btn btn-outline-success btn-sm">Join Testing</a>
                </article>
            </div>
            <div class="col-md-4">
                <article class="update-card h-100 p-4 border rounded-3">
                    <div class="update-meta mb-3">
                        <span class="badge bg-warning">SDK</span>
                        <small class="text-muted ms-2">May 2025</small>
                    </div>
                    <h3 class="h5 fw-bold">Developer SDK Alpha Release</h3>
                    <p class="text-muted">First alpha version of the PrismaOS SDK available for developers interested in creating accessible mobile applications.</p>
                    <a href="{{ url_for('sdk') }}" class="btn btn-outline-warning btn-sm">Download SDK</a>
                </article>
            </div>
        </div>
    </div>
</section>
{% endblock %}