{% extends "base.html" %}

{% block title %}Home - College Management System{% endblock %}

{% block content %}
<section class="hero">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1>College Management <span style="color: #ffd700;">System</span></h1>
                <p>Government Polytechnic Himatnagar - Secure OTP-based authentication for teachers and students. Manage admissions, marks, and academic records with complete IP tracking and security.</p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="{{ url_for('teacher_login') }}" class="btn btn-hero">
                        <i class="fas fa-chalkboard-teacher me-2"></i>Teacher Login
                    </a>
                    <a href="{{ url_for('student_login') }}" class="btn btn-outline-light btn-lg rounded-pill px-4">
                        <i class="fas fa-user-graduate me-2"></i>Student Login
                    </a>
                </div>
            </div>
            <div class="col-lg-6 text-center mt-5 mt-lg-0">
                <div style="font-size: 200px; opacity: 0.2;">
                    <i class="fas fa-university"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Choose Your Role</h2>
            <p class="text-muted">Secure access with OTP verification</p>
        </div>
        <div class="row g-4 justify-content-center">
            <div class="col-md-5">
                <a href="{{ url_for('teacher_login') }}" class="role-card role-teacher d-block">
                    <div style="font-size: 60px; margin-bottom: 20px;">
                        <i class="fas fa-chalkboard-teacher"></i>
                    </div>
                    <h3 class="fw-bold">Teacher / Admin</h3>
                    <p class="mb-3 opacity-75">Register new students, add marks, view all records, and manage academic data with secure OTP login.</p>
                    <span class="btn btn-light rounded-pill px-4" style="color: var(--primary);">
                        <i class="fas fa-arrow-right me-2"></i>Login as Teacher
                    </span>
                </a>
            </div>
            <div class="col-md-5">
                <a href="{{ url_for('student_login') }}" class="role-card role-student d-block">
                    <div style="font-size: 60px; margin-bottom: 20px;">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                    <h3 class="fw-bold">Student</h3>
                    <p class="mb-3 opacity-75">View your marks, academic progress, and personal dashboard with secure OTP-based login.</p>
                    <span class="btn btn-light rounded-pill px-4" style="color: #f5576c;">
                        <i class="fas fa-arrow-right me-2"></i>Login as Student
                    </span>
                </a>
            </div>
        </div>
    </div>
</section>

<section class="py-5" style="background: white;">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">System Features</h2>
            <p class="text-muted">Everything you need for college management</p>
        </div>
        <div class="row g-4">
            <div class="col-md-3">
                <div class="dashboard-card text-center h-100">
                    <div class="stat-icon blue mx-auto">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h5>OTP Security</h5>
                    <p class="text-muted small">Two-factor authentication for all users</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="dashboard-card text-center h-100">
                    <div class="stat-icon green mx-auto">
                        <i class="fas fa-user-plus"></i>
                    </div>
                    <h5>Student Admission</h5>
                    <p class="text-muted small">Teachers can add new students</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="dashboard-card text-center h-100">
                    <div class="stat-icon orange mx-auto">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h5>Marks Management</h5>
                    <p class="text-muted small">Add and view marks with analytics</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="dashboard-card text-center h-100">
                    <div class="stat-icon purple mx-auto">
                        <i class="fas fa-fingerprint"></i>
                    </div>
                    <h5>IP Tracking</h5>
                    <p class="text-muted small">Every login tracked with IP & time</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}