<?php
// Filename: about.php
require 'config.php';
requireLogin();

// --- DATA: TECH STACK ---
$tech_stack = [
    ['icon' => 'bi-filetype-php', 'name' => 'Vanilla PHP', 'color' => 'text-primary'],
    ['icon' => 'bi-database-fill', 'name' => 'MariaDB / MySQL', 'color' => 'text-warning'],
    ['icon' => 'bi-hdd-rack-fill', 'name' => 'Ubuntu Server', 'color' => 'text-danger'],
    ['icon' => 'bi-server', 'name' => 'Nginx', 'color' => 'text-success'],
    ['icon' => 'bi-shield-lock-fill', 'name' => 'Server Security', 'color' => 'text-dark'],
    ['icon' => 'bi-bootstrap-fill', 'name' => 'Bootstrap 5', 'color' => 'text-primary'],
];

// --- DATA: TIMELINE ---
$timeline = [
    [
        'year' => '2001',
        'title' => 'The Beginning',
        'desc' => 'Started career as an educator. Born in Sabah, raised in Terengganu, began teaching in Terengganu.'
    ],
    [
        'year' => '2001 - 2014',
        'title' => 'The Educator & Tech Enthusiast',
        'desc' => 'Served nearly 20 years as an ICT teacher. Moved from Terengganu to Pahang, then crossed to Sabah for 8 years.'
    ],
    [
        'year' => '2014 - 2016',
        'title' => 'The Speaker',
        'desc' => 'Active speaker at ICT events, delivering talks focusing on Server Security and infrastructure.'
    ],
    [
        'year' => '2015',
        'title' => 'Life Challenge: Stroke',
        'desc' => 'Suffered a stroke which required slowing down. A period of recovery and resilience.'
    ],
    [
        'year' => '2016',
        'title' => 'The Comeback',
        'desc' => 'Returned to action, slowly rebuilding momentum and continuing the passion for IT.'
    ],
    [
        'year' => '2022 - Present',
        'title' => 'The Survivor',
        'desc' => 'Diagnosed with cancer. Currently a survivor, back in Pahang, and actively developing systems like this one.'
    ]
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>About Me</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        :root { 
            --primary-grad: <?= getHeaderTheme() ?>; 
            --primary-color: #8B5CF6;
            --bg-color: #f8f9fd; 
            --text-dark: #1e293b;
            --text-gray: #64748b;
        }
        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--bg-color); padding-bottom: 90px; }
        
        /* HEADER - Adjusted padding-bottom to 130px to clear the image */
        .app-header { background: var(--primary-grad); padding: 30px 20px 130px 20px; border-radius: 0 0 35px 35px; color: white; text-align: center; }
        
        /* FLOATING CARD */
        .floating-card { background: white; margin: -60px 20px 20px 20px; border-radius: 24px; padding: 25px 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.08); position: relative; z-index: 10; }
        
        /* PROFILE IMAGE */
        .profile-img-container {
            width: 110px; height: 110px; 
            margin: -80px auto 15px auto; /* Pulled up 80px */
            border-radius: 50%; 
            padding: 4px; 
            background: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            position: relative; 
            z-index: 20;
        }
        .profile-img {
            width: 100%; height: 100%; 
            border-radius: 50%; 
            object-fit: cover; 
            background: #e2e8f0;
        }

        /* TECH BADGES */
        .tech-badge {
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 8px 12px;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 8px;
            transition: 0.2s;
        }
        .tech-badge:hover { transform: translateY(-2px); border-color: var(--primary-color); }

        /* TIMELINE */
        .timeline { border-left: 2px solid #e2e8f0; margin-left: 10px; padding-left: 20px; padding-top: 10px; }
        .timeline-item { position: relative; margin-bottom: 25px; }
        .timeline-item:last-child { margin-bottom: 0; }
        .timeline-dot { 
            width: 12px; height: 12px; 
            background: var(--primary-color); 
            border-radius: 50%; 
            position: absolute; 
            left: -27px; top: 5px; 
            border: 2px solid white;
            box-shadow: 0 0 0 2px #e2e8f0;
        }
        .timeline-year { font-size: 0.75rem; font-weight: 700; color: var(--primary-color); background: #f3e8ff; padding: 2px 8px; border-radius: 6px; display: inline-block; margin-bottom: 5px; }
        .timeline-title { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; }
        .timeline-desc { font-size: 0.85rem; color: var(--text-gray); line-height: 1.5; }

        /* BOTTOM NAV */
        .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: white; padding: 10px 30px 25px 30px; display: flex; justify-content: space-between; border-radius: 30px 30px 0 0; box-shadow: 0 -5px 20px rgba(0,0,0,0.05); z-index: 100; }
        .nav-btn { display: flex; flex-direction: column; align-items: center; color: #94a3b8; text-decoration: none; font-size: 0.7rem; font-weight: 600; }
        .nav-btn.active { color: var(--primary-color); }
        .nav-btn i { font-size: 1.4rem; margin-bottom: 4px; }
    </style>
</head>
<body>

    <div class="app-header">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <a href="dashboard.php" class="text-white"><i class="bi bi-arrow-left fs-4"></i></a>
            <div class="fw-bold fs-5">Profile</div>
            <div style="width: 24px;"></div>
        </div>
        <div class="opacity-75 small">About the Developer</div>
    </div>

    <div class="floating-card">
        <div class="profile-img-container">
            <img src="uploads/avatars/smd.jpeg" class="profile-img" alt="Shaiffulnizam Mohamad">
        </div>

        <div class="text-center mb-4">
            <h5 class="fw-bold text-dark mb-1">Shaiffulnizam Mohamad</h5>
            <div class="badge bg-primary bg-opacity-10 text-primary rounded-pill px-3 py-2 mb-2">Full Stack Developer & Educator</div>
            <p class="text-muted small px-2">
                TESL Graduate (UKM) <br> Born in Sabah &bull; Raised in Terengganu &bull; Based in Pahang
            </p>
        </div>

        <div class="mb-4">
            <h6 class="fw-bold text-dark mb-3 border-bottom pb-2"><i class="bi bi-cpu-fill me-2 text-primary"></i>Tech Stack</h6>
            <div class="d-flex flex-wrap gap-2">
                <?php foreach($tech_stack as $tech): ?>
                <div class="tech-badge">
                    <i class="bi <?= $tech['icon'] ?> <?= $tech['color'] ?>"></i> <?= $tech['name'] ?>
                </div>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="mb-4">
            <h6 class="fw-bold text-dark mb-3 border-bottom pb-2"><i class="bi bi-journal-bookmark-fill me-2 text-primary"></i>My Journey</h6>
            <div class="timeline">
                <?php foreach($timeline as $item): ?>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <span class="timeline-year"><?= $item['year'] ?></span>
                    <div class="timeline-title"><?= $item['title'] ?></div>
                    <div class="timeline-desc"><?= $item['desc'] ?></div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="bg-success bg-opacity-10 p-3 rounded-4 border border-success border-opacity-25 text-center">
            <i class="bi bi-heart-pulse-fill text-success fs-3 d-block mb-2"></i>
            <h6 class="fw-bold text-success mb-1">Resilience & Strength</h6>
            <p class="small text-muted mb-0">
                Stroke Survivor (2015) &bull; Cancer Fighter (2022)<br>
                <em>"Slow down, but never stop."</em>
            </p>
        </div>
    </div>

    <?php include 'menu.php'; ?>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>