{% extends "base.html" %}

{% block title %}A+ Academy - Premium Tutoring for Grade 10-12{% endblock %}

{% block content %}
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <span class="section-label">Welcome to A+ Academy</span>
                <h1 class="hero-title">Unlock Your Academic Potential</h1>
                <p class="hero-subtitle">Expert tutoring in Science and Computer Applications Technology for Grade 10-12 students.</p>
                <div class="d-flex gap-3 flex-wrap">
                    <a href="{{ url_for('main.contact') }}" class="soft-btn">
                        <i class="bi bi-calendar-check"></i>
                        Book a Session
                    </a>
                    <a href="{{ url_for('main.subjects') }}" class="soft-btn soft-btn-outline">
                        <i class="bi bi-book"></i>
                        View Subjects
                    </a>
                </div>
            </div>
            <div class="col-lg-6 d-none d-lg-block">
                <div class="soft-card p-5 text-center" style="background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white;">
                    <i class="bi bi-mortarboard-fill" style="font-size: 5rem;"></i>
                    <h3 class="mt-4">Start Your Journey</h3>
                    <p class="opacity-75">Personalized learning paths for your success</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container py-5">
        <div class="section-header">
            <span class="section-label">Why Choose Us</span>
            <h2 class="section-title">Excellence in Education</h2>
        </div>
        <!-- Cards Section -->
        <div class="row g-4">
            <div class="col-md-4">
                <div class="soft-card p-4 text-center" data-bs-toggle="modal" data-bs-target="#expertTutorsModal" style="cursor: pointer;">
                    <div class="subject-icon mx-auto">
                        <i class="bi bi-person-workspace"></i>
                    </div>
                    <h4>Expert Tutors</h4>
                    <p class="text-muted">Qualified educators with years of experience</p>
                    <small class="text-primary">Click for details →</small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="soft-card p-4 text-center" data-bs-toggle="modal" data-bs-target="#smallGroupsModal" style="cursor: pointer;">
                    <div class="subject-icon mx-auto">
                        <i class="bi bi-people-fill"></i>
                    </div>
                    <h4>Small Groups</h4>
                    <p class="text-muted">Personalized attention for better learning</p>
                    <small class="text-primary">Click for details →</small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="soft-card p-4 text-center" data-bs-toggle="modal" data-bs-target="#flexibleScheduleModal" style="cursor: pointer;">
                    <div class="subject-icon mx-auto">
                        <i class="bi bi-calendar-week"></i>
                    </div>
                    <h4>Flexible Schedule</h4>
                    <p class="text-muted">Weekend and after-school sessions</p>
                    <small class="text-primary">Click for details →</small>
                </div>
            </div>
        </div>

        <!-- Modals -->
        <!-- Expert Tutors Modal -->
        <div class="modal fade" id="expertTutorsModal" tabindex="-1" aria-labelledby="expertTutorsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="expertTutorsModalLabel">
                            <i class="bi bi-person-workspace me-2"></i>Expert Tutors
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <h6>How We Ensure Quality Education</h6>
                        <ul class="list-unstyled mt-3">
                            <li class="mb-2 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Rigorous Selection:</strong> <br>All tutors undergo comprehensive background checks and teaching assessments</li>
                            <li class="mb-2 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Certified Professionals:</strong> Minimum bachelor's degree in subject area with teaching credentials</li>
                            <li class="mb-2 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Ongoing Training:</strong> <br>Monthly workshops on latest teaching methodologies and curriculum updates</li>
                            <li class="mb-2 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Performance Tracking:</strong> <br>Regular evaluations based on student progress and feedback</li>
                            <li class="mb-2 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Subject Specialists:</strong> <br>Tutors matched to their areas of expertise for maximum impact</li>
                        </ul>
                        <hr>
                        <div class="alert alert-info mt-3">
                            <small><i class="bi bi-info-circle me-1"></i> Average 8+ years teaching experience per tutor</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <a href="{{ url_for('main.contact') }}" class="btn btn-primary">Meet Our Tutors</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Small Groups Modal -->
        <div class="modal fade" id="smallGroupsModal" tabindex="-1" aria-labelledby="smallGroupsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="smallGroupsModalLabel">
                            <i class="bi bi-people-fill me-2"></i>Small Groups
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <h6>Personalized Learning Environment</h6>
                        <ul class="list-unstyled mt-3">
                            <li class="mb-2 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Optimal Size:</strong> <br>Maximum 6 students per group to ensure individual attention</li>
                            <li class="mb-2 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Peer Learning:</strong> <br>Collaborative environment encourages questions and discussion</li>
                            <li class="mb-2 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Customized Pace:</strong> <br>Tutors adjust speed based on group comprehension levels</li>
                            <li class="mb-2 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Regular Assessments:</strong> <br>Weekly progress checks to identify and address gaps</li>
                            <li class="mb-2 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>One-on-One Time:</strong> <br>Dedicated minutes for individual doubt clearing each session</li>
                        </ul>
                        <hr>
                        <div class="alert alert-info mt-3">
                            <small><i class="bi bi-info-circle me-1"></i> 3:1 student success rate improvement compared to large classes</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <a href="{{ url_for('main.subjects') }}" class="btn btn-primary">View Group Sessions</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Flexible Schedule Modal -->
        <div class="modal fade" id="flexibleScheduleModal" tabindex="-1" aria-labelledby="flexibleScheduleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="flexibleScheduleModalLabel">
                            <i class="bi bi-calendar-week me-2"></i>Flexible Schedule
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <h6>Learning That Fits Your Life</h6>
                        <ul class="list-unstyled mt-3">
                            <li class="mb-1 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Weekend Sessions:</strong> <br>Saturday and Sunday classes available morning through evening</li>
                            <li class="mb-1 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>After-School Programs:</strong> <br>4:00 PM - 8:00 PM slots on weekdays</li>
                            <li class="mb-1 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Holiday Intensives:</strong> <br>Special accelerated programs during school breaks</li>
                            <li class="mb-1 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Online Options:</strong> <br>Virtual sessions for remote learning with same quality</li>
                            <li class="mb-1 alert alert-success"><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Easy Rescheduling:</strong> <br>Swap sessions with 24-hour notice at no extra cost</li>
                        </ul>
                        <hr>
                        <div class="alert alert-info mt-3">
                            <small><i class="bi bi-info-circle me-1"></i> Open 6 days a week with morning, afternoon, and evening batches</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <a href="{{ url_for('main.contact') }}" class="btn btn-primary">Book a Session</a>
                    </div>
                </div>
            </div>
        </div>    
    </div>
</section>

<section class="py-5" style="background: white;">
    <div class="container py-5">
        <div class="section-header">
            <span class="section-label">Our Programs</span>
            <h2 class="section-title">Subjects We Offer</h2>
        </div>
        <div class="row g-4">
            <div class="col-lg-3 col-md-6">
                <div class="subject-card">
                    <div class="subject-icon">
                        <i class="bi bi-1-circle-fill"></i>
                    </div>
                    <h4>Grade 10</h4>
                    <p class="text-muted">Foundation-building in core subjects</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="subject-card">
                    <div class="subject-icon">
                        <i class="bi bi-2-circle-fill"></i>
                    </div>
                    <h4>Grade 11</h4>
                    <p class="text-muted">Advanced concepts and preparation</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="subject-card">
                    <div class="subject-icon">
                        <i class="bi bi-3-circle-fill"></i>
                    </div>
                    <h4>Grade 12</h4>
                    <p class="text-muted">Matric preparation and revision</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="subject-card">
                    <div class="subject-icon">
                        <i class="bi bi-arrow-clockwise"></i>
                    </div>
                    <h4>Rewrite</h4>
                    <p class="text-muted">Second chance for matriculants</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}