<?php
require_once 'app/helpers/auth.php';
initSessionConfig();

$isLoggedIn = isset($_SESSION['user_id']);
$primaryLink = $isLoggedIn ? 'dashboard.php' : 'login.php';
$primaryText = $isLoggedIn ? 'Open Dashboard' : 'Sign In';
$companyLogos = glob(__DIR__ . '/uploads/company/company_logo_*.png');
$logoPath = $companyLogos ? 'uploads/company/' . basename(end($companyLogos)) : '';
$hasLogo = $logoPath !== '';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Fleet Operations Management brings vehicles, drivers, maintenance, fuel, compliance, reports, and administration into one operational dashboard.">
    <title>Fleet Operations Management</title>
    <link rel="preload" as="image" href="assets/img/logo_landing-hero-fleet.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --ink: #102033;
            --muted: #667085;
            --line: #dce3ed;
            --surface: #f5f8fb;
            --navy: #071629;
            --blue: #ff4a0a;
            --green: #11875d;
            --amber: #b97000;
            --brand-navy: var(--navy);
            --brand-blue: var(--blue);
            --brand-green: var(--green);
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            color: var(--ink);
            background: #ffffff;
        }

        a {
            text-decoration: none;
        }

        .landing-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 20;
            border-bottom: 1px solid rgba(255, 255, 255, 0.16);
            background: rgba(7, 22, 41, 0.82);
            backdrop-filter: blur(16px);
        }

        .brand-mark {
            width: 42px;
            height: 42px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: #ffffff;
            color: var(--blue);
            flex: 0 0 42px;
        }

        .brand-mark img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.78);
            font-weight: 600;
            font-size: 0.94rem;
        }

        .nav-link:hover {
            color: #ffffff;
        }

        .btn-landing {
            border-radius: 8px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-weight: 700;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .btn-light-landing {
            background: #ffffff;
            color: var(--navy);
            border: 1px solid #ffffff;
        }

        .btn-light-landing:hover {
            background: #edf4ff;
            border-color: #edf4ff;
            color: var(--navy);
        }

        .btn-outline-landing {
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.42);
            background: rgba(255, 255, 255, 0.08);
        }

        .btn-outline-landing:hover {
            color: #ffffff;
            border-color: #ffffff;
            background: rgba(255, 255, 255, 0.16);
        }

        .hero {
            min-height: 86vh;
            padding: 7.5rem 0 4.5rem;
            color: #ffffff;
            position: relative;
            display: flex;
            align-items: center;
            background-image:
                linear-gradient(90deg, rgba(7, 22, 41, 0.96) 0%, rgba(7, 22, 41, 0.82) 42%, rgba(7, 22, 41, 0.24) 100%),
                url("assets/img/logo_landing-hero-fleet.png");
            background-size: cover;
            background-position: center;
        }

        .hero::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 120px;
            background: linear-gradient(180deg, rgba(245, 248, 251, 0), var(--surface));
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 760px;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            min-height: 34px;
            padding: 0.35rem 0.7rem;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.86rem;
            font-weight: 700;
        }

        .hero h1 {
            margin: 1.25rem 0 1rem;
            font-size: clamp(2.7rem, 6vw, 5.8rem);
            line-height: 0.98;
            font-weight: 800;
            letter-spacing: 0;
        }

        .hero-copy {
            max-width: 620px;
            color: rgba(255, 255, 255, 0.82);
            font-size: 1.12rem;
            line-height: 1.7;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.8rem;
            margin-top: 2rem;
        }

        .hero-metrics {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.75rem;
            max-width: 670px;
            margin-top: 2.5rem;
        }

        .metric-tile {
            min-height: 104px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 8px;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(14px);
        }

        .metric-value {
            font-size: 1.7rem;
            line-height: 1;
            font-weight: 800;
        }

        .metric-label {
            margin-top: 0.5rem;
            color: rgba(255, 255, 255, 0.74);
            font-size: 0.88rem;
        }

        .section-band {
            padding: 5rem 0;
            background: #ffffff;
        }

        .section-band.muted {
            background: var(--surface);
        }

        .section-kicker {
            color: var(--blue);
            font-weight: 800;
            font-size: 0.86rem;
            text-transform: uppercase;
        }

        .section-title {
            margin: 0.5rem 0 0;
            font-size: clamp(2rem, 4vw, 3.2rem);
            line-height: 1.08;
            font-weight: 800;
            letter-spacing: 0;
        }

        .section-copy {
            color: var(--muted);
            font-size: 1rem;
            line-height: 1.7;
        }

        .module-card {
            display: block;
            height: 100%;
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 1.2rem;
            background: #ffffff;
            color: var(--ink);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .module-card:hover,
        .module-card:focus-visible {
            transform: translateY(-4px);
            border-color: #b9c9dd;
            color: var(--ink);
            box-shadow: 0 18px 40px rgba(16, 32, 51, 0.09);
        }

        .module-card:focus-visible {
            outline: 3px solid rgba(29, 78, 216, 0.26);
            outline-offset: 3px;
        }

        .module-icon {
            width: 46px;
            height: 46px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            color: var(--blue);
            background: #fff0e8;
            font-size: 1.35rem;
        }

        .module-card h3 {
            margin-bottom: 0.45rem;
            font-size: 1.05rem;
            font-weight: 800;
        }

        .module-card p {
            margin: 0;
            color: var(--muted);
            line-height: 1.65;
        }

        .module-link {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            margin-top: 1rem;
            color: var(--blue);
            font-weight: 800;
            font-size: 0.9rem;
        }

        .operations-panel {
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #ffffff;
            box-shadow: 0 24px 70px rgba(16, 32, 51, 0.11);
            overflow: hidden;
        }

        .panel-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.2rem;
            color: #ffffff;
            background: var(--navy);
        }

        .panel-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1px;
            background: var(--line);
        }

        .panel-cell {
            min-height: 132px;
            padding: 1.1rem;
            background: #ffffff;
        }

        .panel-cell strong {
            display: block;
            font-size: 1.9rem;
            line-height: 1;
        }

        .panel-cell span {
            display: block;
            margin-top: 0.55rem;
            color: var(--muted);
        }

        .progress-track {
            height: 8px;
            margin-top: 1rem;
            border-radius: 8px;
            overflow: hidden;
            background: #e7edf5;
        }

        .progress-fill {
            height: 100%;
            border-radius: 8px;
        }

        .workflow-list {
            display: grid;
            gap: 0.85rem;
        }

        .workflow-item {
            display: grid;
            grid-template-columns: 48px 1fr;
            gap: 1rem;
            align-items: start;
            padding: 1.15rem;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #ffffff;
        }

        .workflow-icon {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            background: var(--navy);
            font-size: 1.25rem;
        }

        .workflow-item h3 {
            margin: 0 0 0.25rem;
            font-size: 1rem;
            font-weight: 800;
        }

        .workflow-item p {
            margin: 0;
            color: var(--muted);
            line-height: 1.65;
        }

        .cta-band {
            padding: 4.5rem 0;
            color: #ffffff;
            background: var(--navy);
        }

        .footer-band {
            padding: 1.4rem 0;
            color: #637083;
            background: #ffffff;
            border-top: 1px solid var(--line);
        }

        .landing-nav {
            background: rgba(255, 255, 255, 0.94);
            border-bottom: 1px solid rgba(220, 227, 237, 0.85);
        }

        .landing-nav .text-white {
            color: var(--ink) !important;
        }

        .landing-nav .nav-menu {
            display: flex;
            align-items: center;
            gap: 1.35rem;
        }

        .landing-nav .nav-menu a {
            color: #344054;
            font-size: 0.94rem;
            font-weight: 700;
        }

        .landing-nav .nav-menu a:hover {
            color: var(--blue);
        }

        .landing-nav .btn-light-landing {
            color: #ffffff;
            background: var(--blue);
            border-color: var(--blue);
        }

        .landing-nav .btn-light-landing:hover {
            color: #ffffff;
            background: #cc3500;
            border-color: #cc3500;
        }

        .hero {
            min-height: 92vh;
            padding: 8rem 0 5rem;
            background-image:
                linear-gradient(90deg, rgba(7, 22, 41, 0.97) 0%, rgba(7, 22, 41, 0.78) 45%, rgba(7, 22, 41, 0.22) 100%),
                url("assets/img/logo_landing-hero-fleet.png");
        }

        .mobility-hero-content {
            position: relative;
            z-index: 2;
            max-width: 760px;
        }

        .mobility-hero-content h1 {
            margin: 1.2rem 0 1rem;
            font-size: clamp(3rem, 7vw, 6.4rem);
            line-height: 0.96;
            font-weight: 800;
            letter-spacing: 0;
        }

        .mobility-hero-copy {
            max-width: 650px;
            color: rgba(255, 255, 255, 0.84);
            font-size: 1.12rem;
            line-height: 1.75;
        }

        .mobility-kicker {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            min-height: 36px;
            padding: 0.4rem 0.75rem;
            border-radius: 8px;
            color: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(255, 255, 255, 0.28);
            background: rgba(255, 255, 255, 0.1);
            font-size: 0.88rem;
            font-weight: 800;
        }

        .hero-stat-grid {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.75rem;
            max-width: 720px;
            margin-top: 2.4rem;
        }

        .hero-stat {
            min-height: 106px;
            padding: 1rem;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(14px);
        }

        .hero-stat strong {
            display: block;
            font-size: 1.65rem;
            line-height: 1;
        }

        .hero-stat span {
            display: block;
            margin-top: 0.55rem;
            color: rgba(255, 255, 255, 0.74);
            font-size: 0.9rem;
            line-height: 1.45;
        }

        .intro-image {
            min-height: 430px;
            border-radius: 8px;
            overflow: hidden;
            background:
                linear-gradient(180deg, rgba(7, 22, 41, 0.04), rgba(7, 22, 41, 0.12)),
                url("assets/img/logo_landing-hero-fleet.png");
            background-size: cover;
            background-position: center;
        }

        .intro-list {
            display: grid;
            gap: 0.8rem;
            margin-top: 1.4rem;
        }

        .intro-list div {
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
            color: #344054;
            line-height: 1.6;
        }

        .intro-list i {
            color: var(--green);
            margin-top: 0.2rem;
        }

        .solution-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            border-top: 1px solid var(--line);
            border-left: 1px solid var(--line);
            background: #ffffff;
        }

        .solution-item {
            min-height: 270px;
            padding: 1.5rem;
            border-right: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            background: #ffffff;
        }

        .solution-index {
            color: var(--blue);
            font-size: 2.3rem;
            line-height: 1;
            font-weight: 800;
        }

        .solution-item h3 {
            margin: 1.15rem 0 0.6rem;
            font-size: 1.12rem;
            font-weight: 800;
        }

        .solution-item p {
            margin: 0;
            color: var(--muted);
            line-height: 1.7;
        }

        .module-card.featured {
            overflow: hidden;
            padding: 0;
        }

        .module-visual {
            height: 142px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            background: var(--navy);
            font-size: 2.4rem;
        }

        .module-card.featured.fleet-card .module-visual {
            background: var(--navy);
        }

        .module-card.featured.maintenance-card .module-visual {
            background: var(--blue);
        }

        .module-card.featured.fuel-card .module-visual {
            background: var(--green);
        }

        .module-card.featured.compliance-card .module-visual {
            background: var(--amber);
        }

        .module-body {
            padding: 1.2rem;
        }

        .operations-band {
            color: #ffffff;
            background: var(--navy);
            padding: 4.8rem 0;
        }

        .ops-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(255, 255, 255, 0.18);
        }

        .ops-cell {
            min-height: 168px;
            padding: 1.2rem;
            background: #0d1a2d;
        }

        .ops-cell i {
            color: #7dd3fc;
            font-size: 1.5rem;
        }

        .ops-cell strong {
            display: block;
            margin-top: 1.1rem;
            font-size: 1.05rem;
        }

        .ops-cell span {
            display: block;
            margin-top: 0.5rem;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
        }

        .footer-main {
            padding: 3rem 0;
            background: #ffffff;
            border-top: 1px solid var(--line);
        }

        .footer-title {
            color: var(--ink);
            font-weight: 800;
            margin-bottom: 0.8rem;
        }

        .footer-links {
            display: grid;
            gap: 0.45rem;
        }

        .footer-links a,
        .footer-links span {
            color: var(--muted);
            font-size: 0.94rem;
        }

        .footer-bottom {
            padding: 1rem 0;
            color: #718096;
            border-top: 1px solid var(--line);
            background: var(--surface);
            font-size: 0.92rem;
        }

        @media (max-width: 991.98px) {
            .landing-nav .nav-menu {
                display: none !important;
            }

            .hero {
                min-height: auto;
                padding-top: 6.8rem;
                background-position: 62% center;
            }

            .hero-metrics {
                grid-template-columns: 1fr;
            }

            .hero-stat-grid,
            .solution-grid,
            .ops-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .intro-image {
                min-height: 320px;
            }
        }

        @media (max-width: 767.98px) {
            .hero h1 {
                font-size: 3rem;
            }

            .mobility-hero-content h1 {
                font-size: 3.1rem;
            }

            .hero-actions .btn-landing {
                width: 100%;
            }

            .hero-stat-grid,
            .solution-grid,
            .ops-grid {
                grid-template-columns: 1fr;
            }

            .panel-grid {
                grid-template-columns: 1fr;
            }

            .section-band {
                padding: 3.8rem 0;
            }
        }
    </style>
</head>
<body>
    
    <nav class="landing-nav">
        <div class="container py-3">
            <div class="d-flex align-items-center justify-content-between gap-3">
                <a class="d-flex align-items-center gap-2 text-white" href="index.php" aria-label="Fleet Operations home">
                    <span class="brand-mark">
                        <?php if ($hasLogo): ?>
                            <img src="<?php echo htmlspecialchars($logoPath, ENT_QUOTES); ?>" alt="">
                        <?php else: ?>
                            <i class="bi bi-truck-front-fill"></i>
                        <?php endif; ?>
                    </span>
                    <span class="fw-bold">Fleet Operations</span>
                </a>

                <div class="nav-menu" aria-label="Primary navigation">
                    <a href="#solutions">Solutions</a>
                    <a href="#platform">Platform</a>
                    <a href="#operations">Operations</a>
                    <a href="#contact">Contact</a>
                </div>
            
                <a class="btn btn-light-landing btn-landing" href="<?php echo htmlspecialchars($primaryLink, ENT_QUOTES); ?>">
                    <i class="bi bi-box-arrow-in-right"></i>
                    <span><?php echo htmlspecialchars($primaryText, ENT_QUOTES); ?></span>
                </a>
            </div>
        </div>
    </nav>

    <main>
        <section class="hero">
            <div class="container">
                <div class="mobility-hero-content">
                    <div class="mobility-kicker">
                        <i class="bi bi-lightning-charge-fill"></i>
                        Fleet, mobility, and workshop control
                    </div>
                    <h1>Move every vehicle with confidence.</h1>
                    <p class="mobility-hero-copy">
                        A complete fleet operations workspace for vehicle records, driver management, fuel control,
                        maintenance workflows, compliance renewals, logistics requests, approvals, and management reports.
                    </p>
                    <div class="hero-actions">
                        <a class="btn btn-light-landing btn-landing" href="<?php echo htmlspecialchars($primaryLink, ENT_QUOTES); ?>">
                            <i class="bi bi-speedometer2"></i>
                            <span><?php echo htmlspecialchars($primaryText, ENT_QUOTES); ?></span>
                        </a>
                        <a class="btn btn-outline-landing btn-landing" href="#solutions">
                            <i class="bi bi-arrow-down-circle"></i>
                            <span>Explore Solutions</span>
                        </a>
                    </div>
                </div>

                <div class="hero-stat-grid" aria-label="Platform highlights">
                    <div class="hero-stat">
                        <strong>360&deg;</strong>
                        <span>Fleet visibility from asset registration to final reporting.</span>
                    </div>
                    <div class="hero-stat">
                        <strong>16</strong>
                        <span>Maintenance workflow stages for controlled repair delivery.</span>
                    </div>
                    <div class="hero-stat">
                        <strong>1</strong>
                        <span>Workspace for operations, compliance, finance, and audit teams.</span>
                    </div>
                </div>
            </div>
        </section>

        <section class="section-band muted" id="intro">
            <div class="container">
                <div class="row g-5 align-items-center">
                    <div class="col-lg-6">
                        <div class="intro-image" role="img" aria-label="Fleet vehicles managed through the operations platform"></div>
                    </div>
                    <div class="col-lg-6">
                        <div class="section-kicker">Introduction</div>
                        <h2 class="section-title">Built for practical fleet management.</h2>
                        <p class="section-copy mt-3">
                            This system brings the daily realities of fleet work into one clear operating layer:
                            requests, assignments, document renewals, workshop jobs, fuel usage, supplier records,
                            and approvals all move through connected modules.
                        </p>
                        <div class="intro-list">
                            <div><i class="bi bi-check2-circle"></i><span>Centralize vehicle, driver, supplier, workshop, and compliance data.</span></div>
                            <div><i class="bi bi-check2-circle"></i><span>Control maintenance decisions with RFQs, inspections, requisitions, and audit trails.</span></div>
                            <div><i class="bi bi-check2-circle"></i><span>Give managers the reports they need without chasing spreadsheets across teams.</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="section-band" id="solutions">
            <div class="container">
                <div class="row align-items-end mb-4 g-3">
                    <div class="col-lg-7">
                        <div class="section-kicker">Solutions</div>
                        <h2 class="section-title">Fleet operations, broken into clear workstreams.</h2>
                    </div>
                    <div class="col-lg-5">
                        <p class="section-copy mb-0">
                            Inspired by modern mobility service pages, this presents the platform as a suite
                            of practical services for organizations running vehicles every day.
                        </p>
                    </div>
                </div>

                <div class="solution-grid">
                    <div class="solution-item">
                        <div class="solution-index">01</div>
                        <h3>Vehicle and driver administration</h3>
                        <p>Maintain clean records for assets, drivers, ownership, assignments, licenses, profiles, and operating status.</p>
                    </div>
                    <div class="solution-item">
                        <div class="solution-index">02</div>
                        <h3>Maintenance and workshop control</h3>
                        <p>Move jobs from complaint to work order, quote, approval, workshop execution, inspection, closure, and payment.</p>
                    </div>
                    <div class="solution-item">
                        <div class="solution-index">03</div>
                        <h3>Fuel and card management</h3>
                        <p>Track fuel vouchers, fuel cards, requests, approvals, vehicle usage, and consumption exceptions.</p>
                    </div>
                    <div class="solution-item">
                        <div class="solution-index">04</div>
                        <h3>Compliance renewals</h3>
                        <p>Monitor licenses, insurance, permits, issuing offices, vendors, expiry dates, costs, and renewal history.</p>
                    </div>
                    <div class="solution-item">
                        <div class="solution-index">05</div>
                        <h3>Logistics requests</h3>
                        <p>Request vehicles, review approvals, assign assets and drivers, and use recommendations for better allocation.</p>
                    </div>
                    <div class="solution-item">
                        <div class="solution-index">06</div>
                        <h3>Reports and audit</h3>
                        <p>Review TCO, driver scorecards, fuel reports, compliance exposure, audit logs, and operating performance.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="section-band muted" id="platform">
            <div class="container">
                <div class="row mb-4 align-items-end">
                    <div class="col-lg-7">
                        <div class="section-kicker">Platform</div>
                        <h2 class="section-title">Core modules for the fleet team.</h2>
                    </div>
                    <div class="col-lg-5">
                        <p class="section-copy mb-0">
                            Each module is designed around a real operational responsibility, so users can move
                            quickly from record keeping to action.
                        </p>
                    </div>
                </div>
                <div class="row g-3">
                    <div class="col-md-6 col-xl-3">
                        <div class="module-card featured fleet-card">
                            <div class="module-visual"><i class="bi bi-truck"></i></div>
                            <div class="module-body">
                                <h3>Fleet</h3>
                                <p>Vehicles, drivers, insurance, incidents, GPS tracking, profiles, and assignments.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3">
                        <div class="module-card featured maintenance-card">
                            <div class="module-visual"><i class="bi bi-tools"></i></div>
                            <div class="module-body">
                                <h3>Maintenance</h3>
                                <p>Service schedules, work orders, RFQs, job orders, workshops, parts, and tyres.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3">
                        <div class="module-card featured fuel-card">
                            <div class="module-visual"><i class="bi bi-fuel-pump"></i></div>
                            <div class="module-body">
                                <h3>Fuel</h3>
                                <p>Fuel vouchers, cards, approvals, setup records, and consumption review.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3">
                        <div class="module-card featured compliance-card">
                            <div class="module-visual"><i class="bi bi-shield-check"></i></div>
                            <div class="module-body">
                                <h3>Compliance</h3>
                                <p>Document renewals, regulatory dates, issuing authorities, vendors, and reports.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="operations-band" id="operations">
            <div class="container">
                <div class="row g-4 align-items-end mb-4">
                    <div class="col-lg-7">
                        <div class="section-kicker text-info">Operations</div>
                        <h2 class="section-title">Designed for controlled decisions.</h2>
                    </div>
                    <div class="col-lg-5">
                        <p class="mb-0" style="color: rgba(255,255,255,0.72); line-height: 1.75;">
                            Role permissions, workflow templates, action comments, alerts, and audit history keep
                            operational movement visible and accountable.
                        </p>
                    </div>
                </div>

                <div class="ops-grid">
                    <div class="ops-cell">
                        <i class="bi bi-diagram-3"></i>
                        <strong>Workflow approvals</strong>
                        <span>Route requests and job actions through the right people.</span>
                    </div>
                    <div class="ops-cell">
                        <i class="bi bi-bell"></i>
                        <strong>Alerts</strong>
                        <span>Track expiring documents, pending actions, and delivery status.</span>
                    </div>
                    <div class="ops-cell">
                        <i class="bi bi-robot"></i>
                        <strong>AI insights</strong>
                        <span>Surface maintenance, utilization, fuel, driver, and route signals.</span>
                    </div>
                    <div class="ops-cell">
                        <i class="bi bi-clock-history"></i>
                        <strong>Audit logs</strong>
                        <span>Review user activity, approval comments, and process history.</span>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <footer class="footer-main" id="contact">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-5">
                    <a class="d-inline-flex align-items-center gap-2 text-dark mb-3" href="index.php" aria-label="Fleet Operations home">
                        <span class="brand-mark">
                            <?php if ($hasLogo): ?>
                                <img src="<?php echo htmlspecialchars($logoPath, ENT_QUOTES); ?>" alt="">
                            <?php else: ?>
                                <i class="bi bi-truck-front-fill"></i>
                            <?php endif; ?>
                        </span>
                        <span class="fw-bold">Fleet Operations</span>
                    </a>
                    <p class="section-copy mb-0">
                        A practical fleet management workspace for organizations that need cleaner records,
                        faster approvals, and stronger operational oversight.
                    </p>
                </div>
                <div class="col-6 col-lg-2">
                    <div class="footer-title">Modules</div>
                    <div class="footer-links">
                        <a href="#platform">Fleet</a>
                        <a href="#platform">Maintenance</a>
                        <a href="#platform">Fuel</a>
                        <a href="#platform">Compliance</a>
                    </div>
                </div>
                <div class="col-6 col-lg-2">
                    <div class="footer-title">Workflows</div>
                    <div class="footer-links">
                        <a href="#solutions">Vehicle requests</a>
                        <a href="#solutions">Approvals</a>
                        <a href="#operations">Audit</a>
                        <a href="#operations">Insights</a>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="footer-title">Access</div>
                    <div class="footer-links">
                        <a href="<?php echo htmlspecialchars($primaryLink, ENT_QUOTES); ?>"><?php echo htmlspecialchars($primaryText, ENT_QUOTES); ?></a>
                        <span>Role-based permissions</span>
                        <span>Dashboard and reports</span>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <div class="footer-bottom">
        <div class="container">
            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2">
                <span>&copy; <?php echo date('Y'); ?> Fleet Operations Management</span>
                <span>Vehicles | Drivers | Maintenance | Compliance | Fuel</span>
            </div>
        </div>
    </div>
</body>
</html>
