<?php include('auth_guard.php'); ?><?php
include("config.php");

// 1. Visitor count update karein
mysqli_query($conn, "UPDATE site_visitors SET visit_count = visit_count + 1 WHERE id = 1");

// 2. Naya total count fetch karein
$res = mysqli_query($conn, "SELECT visit_count FROM site_visitors WHERE id = 1");
$row = mysqli_fetch_assoc($res);
$total_visitors = $row ? $row['visit_count'] : 0;
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - Hamna Shahzadi</title>

    <!-- ICONS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    
    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <style>
        /* VISITOR COUNTER STYLING */
        .visitor-bar {
            background: #1e293b;
            color: #38bdf8;
            text-align: right;
            padding: 8px 50px;
            font-size: 14px;
            font-weight: bold;
            border-bottom: 1px solid #334155;
            font-family: 'Segoe UI', sans-serif;
        }
        .visitor-bar span {
            color: #fbbf24;
            margin-left: 5px;
            font-size: 16px;
        }

        /* NAVIGATION STYLING */
        nav {
            display: flex; justify-content: space-between; align-items: center;
            padding: 15px 50px; background: #1e293b;
        }
        nav ul { display: flex; list-style: none; gap: 20px; align-items: center; }
        nav ul li a { color: white; text-decoration: none; font-weight: bold; transition: 0.3s; }
        nav ul li a:hover { color: #38bdf8; }

        .luxury-nav-item {
            color: #fbbf24 !important;
            border: 2px solid #fbbf24;
            padding: 6px 15px;
            border-radius: 20px;
            display: flex; align-items: center; gap: 8px;
        }
        .luxury-nav-item:hover {
            background: #fbbf24; color: #1e293b !important;
            box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
        }
        .luxury-icon { animation: rotate 3s linear infinite; }
        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        /* BASE HERO & SECTIONS */
        .hero { display: flex; align-items: center; justify-content: space-between; padding: 50px; background: #0f172a; min-height: 80vh; }
        .hero .left { flex: 1; }
        .hero .right img { width: 300px; height: 300px; border-radius: 50%; border: 5px solid #38bdf8; object-fit: cover; }
        section { padding: 80px 50px; border-bottom: 1px solid #334155; }
        .card { background: #1e293b; padding: 20px; border-radius: 10px; margin-bottom: 20px; border-left: 5px solid #38bdf8; }
        h1, h2 { color: #38bdf8; }
        .contact { color: #cbd5e1; margin-top: 20px; }
        .icons a { color: #38bdf8; font-size: 25px; margin-right: 15px; transition: 0.3s; }
        .icons a:hover { color: #fbbf24; transform: scale(1.2); }
		
		.cv-nav-item {
    color: #38bdf8 !important; /* Sky Blue Color */
    font-weight: bold;
    border: 1px solid #38bdf8;
    padding: 5px 15px;
    border-radius: 20px; /* Thora rounded look ke liye */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.cv-nav-item:hover {
    background: #38bdf8;
    color: #0f172a !important; /* Dark color on hover */
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}

.cv-nav-item i {
    font-size: 14px;
}
    </style>
</head>
<body>

<!-- TOP VISITOR BAR -->
<div class="visitor-bar">
    <i class="fas fa-eye"></i> Total Visitors: <span><?php echo number_format($total_visitors); ?></span>
</div>

<!-- NAVBAR -->
<nav>
    <h2>BSCSF24M51</h2>
    <ul>
	<li>
            <a href="cv_dashboard.php" class="cv-nav-item">
                <i class="fas fa-file-alt"></i> My CV
            </a>
        </li>
        <li><a href="login.php">Login</a></li>
        <li><a href="signup.php">Signup</a></li>
        
        <!-- Logout Button -->
       <li> <a href="logout.php" style="color: #ff4d4d; text-decoration: none; font-weight: bold; border: 1px solid #ff4d4d; padding: 5px 15px; border-radius: 5px; transition: 0.3s;">
            <i class="fas fa-sign-out-alt"></i> Logout
        </a> </li>
   
        <li><a href="tutorials.html">Tutorials</a></li>
        <li><a href="gallery.php">Gallery</a></li>
        <li><a href="remoteapp.php">jQuery Persona</a></li>
        <li><a href="generate_barcode.php">BAR-CODE generator</a></li>
       
        <li><a href="group_chat.php">BGROUP CHAT</a></li>
            <li><a href="all_dbusers.php">ALL_DB_USERS</a></li>
		<li><a href="#about">About</a></li>
        <li>
            <a href="luxury_sites.php" class="luxury-nav-item">
                <span class="luxury-icon">🌍</span> Luxury Sites
            </a>
        </li>
    </ul>
</nav>

<!-- HERO SECTION -->
<section class="hero">
    <div class="left">
        <h1>Hamna Shahzadi</h1>
        <h3>BS Computer Science Student</h3>
        <p>BSCS STUDENT | WEB DEVELOPER | LEARNING AI/ML</p>
        <p class="contact">
            Email: bscsf24m51@bgnu.edu.pk <br>
            Mobile: 03XXXXXXXXX
        </p>
        <div class="icons">
            <a href="https://github.com/Hamna-sheikh" target="_blank"><i class="fab fa-github"></i></a>
            <a href="https://www.linkedin.com/in/hamna-sheikh-a1a8a733a" target="_blank"><i class="fab fa-linkedin"></i></a>
            <a href="https://youtube.com/@sheikh7s" target="_blank"><i class="fab fa-youtube"></i></a>
        </div>
    </div>
    <div class="right">
        <img src="upload/hamna.jpg" alt="Profile Picture">
    </div>
</section>

<!-- ABOUT -->
<section id="about">
    <h2>About Me</h2>
    <p>A 4th-semester Computer Science student looking to apply basic programming and web development knowledge. I have a keen interest in learning how websites work and am currently practicing through small academic projects. My goal is to improve my basic skills in coding and database management.</p> 
</section>

<!-- EDUCATION, SKILLS & PROJECTS (Include these sections as per your original file) -->
<section id="education">
    <h2>Education</h2>
    <div class="card">
        <h3>BS Computer Science</h3>
        <p>Baba Guru Nanak University — 4th Semester</p>
    </div>
    <!-- Add more education cards here -->
</section>

<!-- CONTACT -->
<section id="contact">
    <h2>Contact</h2>
    <div class="card">
        <p>Email: bscsf24m51@bgnu.edu.pk</p>
        <p>Phone: 03XXXXXXXXX</p>
    </div>
</section>

</body>
</html>