<?php
declare(strict_types=1);

/*
|--------------------------------------------------------------------------
| SMI Student Gateway
|--------------------------------------------------------------------------
*/

require_once __DIR__ . '/includes/config.php';
require_once __DIR__ . '/includes/db.php';
require_once __DIR__ . '/includes/functions.php';
require_once __DIR__ . '/includes/student-auth.php';
require_once __DIR__ . '/includes/admin-auth.php';
require_once __DIR__ . '/includes/teacher-auth.php';
require_once __DIR__ . '/includes/lang.php';

/*
|--------------------------------------------------------------------------
| Redirect Logged Users
|--------------------------------------------------------------------------
*/

if (isStudentLoggedIn()) {

    redirectTo('student/dashboard.php');
}

if (isTeacherLoggedIn()) {

    redirectTo('teacher/dashboard.php');
}

if (isAdminLoggedIn()) {

    redirectTo('admin/dashboard.php');
}

?>

<!DOCTYPE html>
<html
lang="<?php echo e($currentLang); ?>"
dir="<?php echo e(currentDirection()); ?>">

<head>

<meta charset="UTF-8">

<meta
name="viewport"
content="width=device-width, initial-scale=1.0">

<title>

    <?php echo e(APP_NAME); ?>

</title>

<link
rel="preconnect"
href="https://fonts.googleapis.com">

<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin>

<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
rel="stylesheet">

<link
rel="stylesheet"
href="assets/css/style.css">

<style>

body{

    background:
    linear-gradient(
        135deg,
        #eff6ff,
        #f8fafc
    );

    overflow-x:hidden;
}

.hero-section{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    padding:40px 0;
}

.hero-pattern{

    position:absolute;

    inset:0;

    background-image:
        radial-gradient(
            rgba(37,99,235,0.08) 1px,
            transparent 1px
        );

    background-size:30px 30px;

    opacity:0.7;
}

.hero-container{

    position:relative;

    z-index:2;

    width:min(1350px,92%);

    display:grid;

    grid-template-columns:1.1fr 0.9fr;

    gap:40px;

    align-items:center;
}

.hero-left{

    padding-right:20px;
}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#dbeafe;

    color:#1d4ed8;

    padding:14px 20px;

    border-radius:999px;

    font-weight:900;

    margin-bottom:24px;
}

.hero-title{

    font-size:68px;

    line-height:1.08;

    font-weight:900;

    margin-bottom:24px;

    color:#0f172a;
}

.hero-title span{

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.hero-description{

    font-size:18px;

    line-height:2;

    color:#475569;

    margin-bottom:34px;

    max-width:760px;
}

.hero-actions{

    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 30px;

    border-radius:22px;

    font-weight:900;

    transition:0.25s;
}

.hero-btn:hover{

    transform:translateY(-3px);
}

.hero-btn-primary{

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:#fff;

    box-shadow:
        0 20px 40px rgba(37,99,235,0.25);
}

.hero-btn-light{

    background:#fff;

    color:#0f172a;

    border:1px solid #e2e8f0;
}

.hero-right{

    position:relative;
}

.preview-card{

    background:#fff;

    border-radius:40px;

    padding:34px;

    border:1px solid #e2e8f0;

    box-shadow:
        0 30px 70px rgba(15,23,42,0.12);

    position:relative;

    overflow:hidden;
}

.preview-card::before{

    content:'';

    position:absolute;

    top:-80px;
    right:-80px;

    width:220px;
    height:220px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,0.08),
            rgba(124,58,237,0.08)
        );
}

.preview-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;
}

.preview-logo{

    display:flex;

    align-items:center;

    gap:14px;
}

.logo-box{

    width:58px;
    height:58px;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:900;
}

.preview-logo h3{

    font-size:24px;

    font-weight:900;
}

.preview-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-bottom:24px;
}

.preview-box{

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:24px;

    padding:24px;
}

.preview-box h4{

    color:#64748b;

    margin-bottom:12px;

    font-size:14px;
}

.preview-box .number{

    font-size:34px;

    font-weight:900;

    color:#0f172a;
}

.preview-progress{

    background:#f1f5f9;

    border-radius:999px;

    overflow:hidden;

    height:16px;

    margin-top:14px;
}

.preview-progress span{

    display:block;

    height:100%;

    border-radius:999px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    width:84%;
}

.preview-stats{

    display:grid;

    gap:16px;
}

.preview-stat{

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:22px;

    padding:18px 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.preview-stat strong{

    font-size:15px;
}

.preview-stat span{

    font-weight:900;

    color:#2563eb;
}

.lang-switch{

    position:absolute;

    top:24px;
    right:24px;

    display:flex;

    gap:10px;
}

.lang-switch a{

    background:#fff;

    border:1px solid #e2e8f0;

    color:#0f172a;

    padding:10px 16px;

    border-radius:14px;

    font-weight:800;
}

.lang-switch a.active{

    background:#2563eb;

    color:#fff;
}

.footer-note{

    margin-top:30px;

    color:#64748b;

    font-size:14px;

    line-height:1.9;
}

@media(max-width:1100px){

    .hero-container{

        grid-template-columns:1fr;
    }

    .hero-left{

        padding-right:0;
    }

    .hero-title{

        font-size:52px;
    }
}

@media(max-width:700px){

    .hero-title{

        font-size:38px;
    }

    .hero-description{

        font-size:16px;
    }

    .preview-grid{

        grid-template-columns:1fr;
    }

    .hero-actions{

        flex-direction:column;
    }

    .hero-btn{

        width:100%;
    }

    .lang-switch{

        top:18px;
        right:18px;
    }
}

</style>

</head>

<body>

<div class="hero-section">

    <div class="hero-pattern"></div>

    <div class="lang-switch">

        <a
        href="?lang=en"
        class="<?php echo $currentLang === 'en' ? 'active' : ''; ?>">
            EN
        </a>

        <a
        href="?lang=ar"
        class="<?php echo $currentLang === 'ar' ? 'active' : ''; ?>">
            AR
        </a>

    </div>

    <div class="hero-container">

        <div class="hero-left">

            <div class="hero-badge">

                🚀
                SMI Cognitive Academic System

            </div>

            <h1 class="hero-title">

                Build a
                <span>
                    Faster Brain
                </span>

                Through English Training

            </h1>

            <p class="hero-description">

                The SMI Student Gateway is an advanced academic and cognitive platform
                that combines English learning, academic performance,
                cognitive acceleration, fluency development,
                shadowing systems, obstacle-removal training,
                attendance tracking, intelligent grading,
                and professional progress reports.

            </p>

            <div class="hero-actions">

                <a
                href="login.php"
                class="hero-btn hero-btn-primary">

                    Student Login

                </a>

                <a
                href="teacher/login.php"
                class="hero-btn hero-btn-light">

                    Teacher Portal

                </a>

            </div>

            <div class="footer-note">

                © <?php echo date('Y'); ?>
                SMI Institute —
                Student Gateway System

            </div>

        </div>

        <div class="hero-right">

            <div class="preview-card">

                <div class="preview-header">

                    <div class="preview-logo">

                        <div class="logo-box">
                            S
                        </div>

                        <div>

                            <h3>
                                SMI Gateway
                            </h3>

                            <p style="color:#64748b;">
                                Cognitive Academic System
                            </p>

                        </div>

                    </div>

                </div>

                <div class="preview-grid">

                    <div class="preview-box">

                        <h4>
                            Cognitive Progress
                        </h4>

                        <div class="number">
                            84%
                        </div>

                        <div class="preview-progress">
                            <span></span>
                        </div>

                    </div>

                    <div class="preview-box">

                        <h4>
                            Academic Grade
                        </h4>

                        <div class="number">
                            A+
                        </div>

                        <div class="preview-progress">
                            <span style="width:94%;"></span>
                        </div>

                    </div>

                </div>

                <div class="preview-stats">

                    <div class="preview-stat">

                        <strong>
                            Shadowing System
                        </strong>

                        <span>
                            Active
                        </span>

                    </div>

                    <div class="preview-stat">

                        <strong>
                            Vocabulary Training
                        </strong>

                        <span>
                            1,240 Words
                        </span>

                    </div>

                    <div class="preview-stat">

                        <strong>
                            Cognitive Fluency
                        </strong>

                        <span>
                            Advanced
                        </span>

                    </div>

                    <div class="preview-stat">

                        <strong>
                            Attendance Stability
                        </strong>

                        <span>
                            96%
                        </span>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<script src="assets/js/app.js"></script>

</body>
</html>