<?php
// session_start(); 
?>

<!-- Top Bar - Utility Links -->
<div class="top-bar d-none d-md-block">
	<div class="container">
		<div class="d-flex justify-content-between align-items-center py-1">
			<!-- Left Links -->
			<div class="top-links">
				<a href="#"><i class="fa fa-phone me-1"></i> Call:
					<?php
					$phone1 = get_setting('support_phone', '0206994579');
					$phone2 = get_setting('support_phone_2', '');
					echo htmlentities($phone1 . ($phone2 ? ' | ' . $phone2 : ''));
					?></a>
				<span class="divider">|</span>
				<a href="about-us.php">About Us</a>
				<span class="divider">|</span>
				<a href="contact-us.php">Contact</a>
				<span class="divider">|</span>
				<a href="vendor-login.php">Vendor Login</a>
			</div>

			<!-- Right Links -->
			<div class="top-links">
				<?php if (strlen($_SESSION['login'])): ?>
					<a href="#"><i class="fa fa-user me-1"></i> Welcome,
						<?php echo htmlentities($_SESSION['username']); ?></a>
					<span class="divider">|</span>
					<a href="logout.php"><i class="fa fa-sign-out me-1"></i> Logout</a>
				<?php else: ?>
					<a href="login.php"><i class="fa fa-sign-in me-1"></i> Login</a>
					<span class="divider">|</span>
					<a href="signup.php"><i class="fa fa-user-plus me-1"></i> Register</a>
				<?php endif; ?>
			</div>
		</div>
	</div>
</div>

<style>
	/* Top Bar Styling */
	.top-bar {
		background: #f9f9f9;
		/* Soft White */
		color: #333;
		/* Dark Text */
		font-size: 11px;
		/* Sleeker font size */
		border-bottom: 1px solid #eee;
	}

	.top-bar .top-links a {
		color: #555;
		text-decoration: none;
		transition: color 0.2s;
		font-weight: 500;
	}

	.top-bar .top-links a:hover {
		color: var(--am-primary);
	}

	.top-bar .divider {
		color: #ddd;
		margin: 0 10px;
	}
</style>