{% extends 'main/base.html' %}
{% load static %}

{% block title %}Innovation Hub - Monaco Institute{% endblock %}

{% block content %}

<!-- Page Header -->
<section class="page-header" style="background: linear-gradient(135deg, #1a3a6b 0%, #2563a8 100%); padding: 60px 0; color: white;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h1 class="fw-bold mb-2" style="font-family: 'Montserrat', sans-serif; font-size: 38px;">
                    <i class="fas fa-lightbulb me-3" style="color: #f59e0b;"></i>Innovation Hub
                </h1>
                <p class="mb-0" style="font-size: 18px; opacity: 0.9;">Showcasing the creativity and ingenuity of Monaco Institute students</p>
            </div>
            <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-lg-end mb-0" style="background: transparent;">
                        <li class="breadcrumb-item"><a href="{% url 'home' %}" style="color: rgba(255,255,255,0.75);">Home</a></li>
                        <li class="breadcrumb-item active" style="color: white;">Innovation Hub</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>

<!-- Intro Section -->
<section class="py-5" style="background: #f8faff;">
    <div class="container">
        <div class="row justify-content-center text-center mb-5">
            <div class="col-lg-8">
                <span class="badge mb-3 px-3 py-2" style="background: #e8f0fe; color: #1a3a6b; font-size: 13px; border-radius: 20px;">
                    <i class="fas fa-rocket me-1"></i> Student Projects
                </span>
                <h2 class="fw-bold mb-3" style="font-family: 'Montserrat', sans-serif; color: #1a3a6b; font-size: 32px;">
                    Where Ideas Come to Life
                </h2>
                <p class="text-muted" style="font-size: 16px; line-height: 1.8;">
                    The Monaco Institute Innovation Hub is a platform dedicated to celebrating the brilliant minds of our students.
                    From software applications to business solutions, our students are building the future of Uganda and beyond.
                </p>
            </div>
        </div>

        <!-- Stats Row -->
        <div class="row g-4 mb-5">
            <div class="col-6 col-md-3">
                <div class="text-center p-4 rounded-3 shadow-sm" style="background: white; border-top: 4px solid #2563a8;">
                    <div class="fw-bold mb-1" style="font-size: 36px; color: #2563a8; font-family: 'Montserrat', sans-serif;">50+</div>
                    <div class="text-muted" style="font-size: 14px;">Student Projects</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="text-center p-4 rounded-3 shadow-sm" style="background: white; border-top: 4px solid #f59e0b;">
                    <div class="fw-bold mb-1" style="font-size: 36px; color: #f59e0b; font-family: 'Montserrat', sans-serif;">12+</div>
                    <div class="text-muted" style="font-size: 14px;">Award Winners</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="text-center p-4 rounded-3 shadow-sm" style="background: white; border-top: 4px solid #10b981;">
                    <div class="fw-bold mb-1" style="font-size: 36px; color: #10b981; font-family: 'Montserrat', sans-serif;">8+</div>
                    <div class="text-muted" style="font-size: 14px;">Categories</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="text-center p-4 rounded-3 shadow-sm" style="background: white; border-top: 4px solid #8b5cf6;">
                    <div class="fw-bold mb-1" style="font-size: 36px; color: #8b5cf6; font-family: 'Montserrat', sans-serif;">3+</div>
                    <div class="text-muted" style="font-size: 14px;">Years Running</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Projects -->
<section class="py-5">
    <div class="container">
        <div class="row mb-4 align-items-center">
            <div class="col">
                <h3 class="fw-bold mb-0" style="font-family: 'Montserrat', sans-serif; color: #1a3a6b;">
                    <i class="fas fa-star me-2" style="color: #f59e0b;"></i>Featured Innovations
                </h3>
            </div>
        </div>

        <!-- Category Filter Tabs -->
        <ul class="nav nav-pills mb-4 gap-2 flex-wrap" id="projectTabs">
            <li class="nav-item">
                <button class="nav-link active px-4" data-category="all" onclick="filterProjects('all', this)"
                    style="background: #1a3a6b; color: white; border-radius: 25px; border: none; font-size: 13px;">
                    All Projects
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link px-4" data-category="software" onclick="filterProjects('software', this)"
                    style="background: #f0f4ff; color: #1a3a6b; border-radius: 25px; border: none; font-size: 13px;">
                    Software & Apps
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link px-4" data-category="business" onclick="filterProjects('business', this)"
                    style="background: #f0f4ff; color: #1a3a6b; border-radius: 25px; border: none; font-size: 13px;">
                    Business Solutions
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link px-4" data-category="design" onclick="filterProjects('design', this)"
                    style="background: #f0f4ff; color: #1a3a6b; border-radius: 25px; border: none; font-size: 13px;">
                    Design & Media
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link px-4" data-category="research" onclick="filterProjects('research', this)"
                    style="background: #f0f4ff; color: #1a3a6b; border-radius: 25px; border: none; font-size: 13px;">
                    Research
                </button>
            </li>
        </ul>

        <!-- Projects Grid -->
        <div class="row g-4" id="projectsGrid">

            <!-- Project Card 1 -->
            <div class="col-md-6 col-lg-4 project-card" data-category="software">
                <div class="card h-100 border-0 shadow-sm rounded-3 overflow-hidden" style="transition: transform 0.3s, box-shadow 0.3s;">
                    <div class="position-relative" style="height: 200px; background: linear-gradient(135deg, #1a3a6b, #2563a8); display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-mobile-alt" style="font-size: 60px; color: rgba(255,255,255,0.3);"></i>
                        <span class="position-absolute top-0 end-0 m-3 badge" style="background: #f59e0b; font-size: 11px;">Software & Apps</span>
                    </div>
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-2" style="color: #1a3a6b; font-family: 'Montserrat', sans-serif;">Campus Connect App</h5>
                        <p class="text-muted mb-3" style="font-size: 14px; line-height: 1.6;">
                            A mobile application that connects Monaco Institute students with campus resources, timetables, and announcements in real-time.
                        </p>
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; background: #e8f0fe; flex-shrink: 0;">
                                <i class="fas fa-user" style="font-size: 12px; color: #2563a8;"></i>
                            </div>
                            <div>
                                <div style="font-size: 13px; font-weight: 600; color: #333;">John Mukasa</div>
                                <div style="font-size: 12px; color: #888;">Diploma in Computer Science</div>
                            </div>
                        </div>
                        <div class="d-flex gap-2 flex-wrap">
                            <span class="badge" style="background: #e8f0fe; color: #2563a8; font-size: 11px; font-weight: 500;">Android</span>
                            <span class="badge" style="background: #e8f0fe; color: #2563a8; font-size: 11px; font-weight: 500;">Java</span>
                            <span class="badge" style="background: #e8f0fe; color: #2563a8; font-size: 11px; font-weight: 500;">Firebase</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Project Card 2 -->
            <div class="col-md-6 col-lg-4 project-card" data-category="business">
                <div class="card h-100 border-0 shadow-sm rounded-3 overflow-hidden" style="transition: transform 0.3s, box-shadow 0.3s;">
                    <div class="position-relative" style="height: 200px; background: linear-gradient(135deg, #065f46, #10b981); display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-chart-line" style="font-size: 60px; color: rgba(255,255,255,0.3);"></i>
                        <span class="position-absolute top-0 end-0 m-3 badge" style="background: #f59e0b; font-size: 11px;">Business Solutions</span>
                    </div>
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-2" style="color: #1a3a6b; font-family: 'Montserrat', sans-serif;">AgriMarket Platform</h5>
                        <p class="text-muted mb-3" style="font-size: 14px; line-height: 1.6;">
                            An online marketplace connecting local farmers directly with buyers, eliminating middlemen and increasing farmer profits by up to 40%.
                        </p>
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; background: #d1fae5; flex-shrink: 0;">
                                <i class="fas fa-user" style="font-size: 12px; color: #10b981;"></i>
                            </div>
                            <div>
                                <div style="font-size: 13px; font-weight: 600; color: #333;">Sarah Nakato</div>
                                <div style="font-size: 12px; color: #888;">Diploma in Business Administration</div>
                            </div>
                        </div>
                        <div class="d-flex gap-2 flex-wrap">
                            <span class="badge" style="background: #d1fae5; color: #065f46; font-size: 11px; font-weight: 500;">E-Commerce</span>
                            <span class="badge" style="background: #d1fae5; color: #065f46; font-size: 11px; font-weight: 500;">Django</span>
                            <span class="badge" style="background: #d1fae5; color: #065f46; font-size: 11px; font-weight: 500;">Mobile Money</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Project Card 3 -->
            <div class="col-md-6 col-lg-4 project-card" data-category="software">
                <div class="card h-100 border-0 shadow-sm rounded-3 overflow-hidden" style="transition: transform 0.3s, box-shadow 0.3s;">
                    <div class="position-relative" style="height: 200px; background: linear-gradient(135deg, #4c1d95, #8b5cf6); display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-brain" style="font-size: 60px; color: rgba(255,255,255,0.3);"></i>
                        <span class="position-absolute top-0 end-0 m-3 badge" style="background: #f59e0b; font-size: 11px;">Software & Apps</span>
                        <span class="position-absolute top-0 start-0 m-3 badge" style="background: #ef4444; font-size: 11px;"><i class="fas fa-trophy me-1"></i>Award Winner</span>
                    </div>
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-2" style="color: #1a3a6b; font-family: 'Montserrat', sans-serif;">EduBot AI Tutor</h5>
                        <p class="text-muted mb-3" style="font-size: 14px; line-height: 1.6;">
                            An AI-powered tutoring chatbot that helps students with coursework, answers questions, and provides personalized learning paths.
                        </p>
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; background: #ede9fe; flex-shrink: 0;">
                                <i class="fas fa-user" style="font-size: 12px; color: #8b5cf6;"></i>
                            </div>
                            <div>
                                <div style="font-size: 13px; font-weight: 600; color: #333;">David Ssemakula</div>
                                <div style="font-size: 12px; color: #888;">Certificate in ICT</div>
                            </div>
                        </div>
                        <div class="d-flex gap-2 flex-wrap">
                            <span class="badge" style="background: #ede9fe; color: #4c1d95; font-size: 11px; font-weight: 500;">Python</span>
                            <span class="badge" style="background: #ede9fe; color: #4c1d95; font-size: 11px; font-weight: 500;">AI/ML</span>
                            <span class="badge" style="background: #ede9fe; color: #4c1d95; font-size: 11px; font-weight: 500;">NLP</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Project Card 4 -->
            <div class="col-md-6 col-lg-4 project-card" data-category="design">
                <div class="card h-100 border-0 shadow-sm rounded-3 overflow-hidden" style="transition: transform 0.3s, box-shadow 0.3s;">
                    <div class="position-relative" style="height: 200px; background: linear-gradient(135deg, #92400e, #f59e0b); display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-palette" style="font-size: 60px; color: rgba(255,255,255,0.3);"></i>
                        <span class="position-absolute top-0 end-0 m-3 badge" style="background: #f59e0b; font-size: 11px;">Design & Media</span>
                    </div>
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-2" style="color: #1a3a6b; font-family: 'Montserrat', sans-serif;">Uganda Heritage Brand Kit</h5>
                        <p class="text-muted mb-3" style="font-size: 14px; line-height: 1.6;">
                            A comprehensive visual identity system celebrating Ugandan culture, designed for use by local businesses and NGOs.
                        </p>
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; background: #fef3c7; flex-shrink: 0;">
                                <i class="fas fa-user" style="font-size: 12px; color: #f59e0b;"></i>
                            </div>
                            <div>
                                <div style="font-size: 13px; font-weight: 600; color: #333;">Grace Namukasa</div>
                                <div style="font-size: 12px; color: #888;">Certificate in Graphic Design</div>
                            </div>
                        </div>
                        <div class="d-flex gap-2 flex-wrap">
                            <span class="badge" style="background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 500;">Adobe Illustrator</span>
                            <span class="badge" style="background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 500;">Figma</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Project Card 5 -->
            <div class="col-md-6 col-lg-4 project-card" data-category="research">
                <div class="card h-100 border-0 shadow-sm rounded-3 overflow-hidden" style="transition: transform 0.3s, box-shadow 0.3s;">
                    <div class="position-relative" style="height: 200px; background: linear-gradient(135deg, #0c4a6e, #0ea5e9); display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-microscope" style="font-size: 60px; color: rgba(255,255,255,0.3);"></i>
                        <span class="position-absolute top-0 end-0 m-3 badge" style="background: #f59e0b; font-size: 11px;">Research</span>
                    </div>
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-2" style="color: #1a3a6b; font-family: 'Montserrat', sans-serif;">Digital Literacy in Rural Uganda</h5>
                        <p class="text-muted mb-3" style="font-size: 14px; line-height: 1.6;">
                            A research study examining barriers to digital literacy in rural communities and proposing actionable solutions for ICT adoption.
                        </p>
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; background: #e0f2fe; flex-shrink: 0;">
                                <i class="fas fa-user" style="font-size: 12px; color: #0ea5e9;"></i>
                            </div>
                            <div>
                                <div style="font-size: 13px; font-weight: 600; color: #333;">Peter Ochieng</div>
                                <div style="font-size: 12px; color: #888;">Diploma in Business IT</div>
                            </div>
                        </div>
                        <div class="d-flex gap-2 flex-wrap">
                            <span class="badge" style="background: #e0f2fe; color: #0c4a6e; font-size: 11px; font-weight: 500;">Research</span>
                            <span class="badge" style="background: #e0f2fe; color: #0c4a6e; font-size: 11px; font-weight: 500;">Data Analysis</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Project Card 6 -->
            <div class="col-md-6 col-lg-4 project-card" data-category="business">
                <div class="card h-100 border-0 shadow-sm rounded-3 overflow-hidden" style="transition: transform 0.3s, box-shadow 0.3s;">
                    <div class="position-relative" style="height: 200px; background: linear-gradient(135deg, #7f1d1d, #ef4444); display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-store" style="font-size: 60px; color: rgba(255,255,255,0.3);"></i>
                        <span class="position-absolute top-0 end-0 m-3 badge" style="background: #f59e0b; font-size: 11px;">Business Solutions</span>
                        <span class="position-absolute top-0 start-0 m-3 badge" style="background: #ef4444; font-size: 11px;"><i class="fas fa-trophy me-1"></i>Award Winner</span>
                    </div>
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-2" style="color: #1a3a6b; font-family: 'Montserrat', sans-serif;">SmartPOS for SMEs</h5>
                        <p class="text-muted mb-3" style="font-size: 14px; line-height: 1.6;">
                            A lightweight point-of-sale system designed for small and medium enterprises in Uganda, with offline capability and mobile money integration.
                        </p>
                        <div class="d-flex align-items-center gap-2 mb-3">
                            <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px; background: #fee2e2; flex-shrink: 0;">
                                <i class="fas fa-user" style="font-size: 12px; color: #ef4444;"></i>
                            </div>
                            <div>
                                <div style="font-size: 13px; font-weight: 600; color: #333;">Mary Apio</div>
                                <div style="font-size: 12px; color: #888;">Diploma in Accounting & IT</div>
                            </div>
                        </div>
                        <div class="d-flex gap-2 flex-wrap">
                            <span class="badge" style="background: #fee2e2; color: #7f1d1d; font-size: 11px; font-weight: 500;">React</span>
                            <span class="badge" style="background: #fee2e2; color: #7f1d1d; font-size: 11px; font-weight: 500;">Node.js</span>
                            <span class="badge" style="background: #fee2e2; color: #7f1d1d; font-size: 11px; font-weight: 500;">SQLite</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- Submit Your Project CTA -->
<section class="py-5" style="background: linear-gradient(135deg, #1a3a6b 0%, #2563a8 100%);">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-7">
                <i class="fas fa-rocket mb-3" style="font-size: 48px; color: #f59e0b;"></i>
                <h3 class="fw-bold text-white mb-3" style="font-family: 'Montserrat', sans-serif; font-size: 28px;">
                    Have an Innovation to Share?
                </h3>
                <p class="mb-4" style="color: rgba(255,255,255,0.85); font-size: 16px; line-height: 1.7;">
                    Are you a Monaco Institute student with a project, app, or business idea? Submit your innovation to be featured on this page and inspire your fellow students.
                </p>
                <a href="{% url 'contact' %}" class="btn btn-lg px-5 py-3 fw-bold me-3"
                    style="background: #f59e0b; color: white; border: none; border-radius: 6px; font-size: 15px;">
                    <i class="fas fa-paper-plane me-2"></i>Submit Your Project
                </a>
                <a href="{% url 'admissions' %}" class="btn btn-lg px-5 py-3 fw-bold"
                    style="background: transparent; color: white; border: 2px solid rgba(255,255,255,0.5); border-radius: 6px; font-size: 15px;">
                    <i class="fas fa-graduation-cap me-2"></i>Join Monaco Institute
                </a>
            </div>
        </div>
    </div>
</section>

{% endblock %}

{% block extra_css %}
<style>
.project-card .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
}
.nav-pills .nav-link.active {
    background: #1a3a6b !important;
    color: white !important;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
function filterProjects(category, btn) {
    // Update button styles
    document.querySelectorAll('#projectTabs .nav-link').forEach(b => {
        b.style.background = '#f0f4ff';
        b.style.color = '#1a3a6b';
    });
    btn.style.background = '#1a3a6b';
    btn.style.color = 'white';

    // Filter cards
    document.querySelectorAll('.project-card').forEach(card => {
        if (category === 'all' || card.dataset.category === category) {
            card.style.display = '';
        } else {
            card.style.display = 'none';
        }
    });
}
</script>
{% endblock %}