<!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="<?= isset($metaDescription) ? htmlspecialchars($metaDescription) : 'Zabibu Residence - Premium Rental Management in Tanzania' ?>">
<meta name="keywords" content="rental, property, Tanzania, apartments, Dar es Salaam, Zabibu Residence">
<meta property="og:title" content="<?= isset($title) ? htmlspecialchars($title) : APP_NAME ?>">
<meta property="og:description" content="Premium Rental Management System - Tanzania">
<meta property="og:image" content="<?= APP_URL ?>/assets/images/logos/logo.png">
<meta name="theme-color" content="#1a3c5e">
<link rel="manifest" href="<?= APP_URL ?>/manifest.json">
<title><?= isset($title) ? htmlspecialchars($title) : APP_NAME ?></title>

<!-- Bootstrap 5.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link href="<?= APP_URL ?>/assets/css/style.css?v=<?= time() ?>" rel="stylesheet">
<link href="<?= APP_URL ?>/assets/css/landing.css?v=<?= time() ?>" rel="stylesheet">
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm" id="mainNav">
  <div class="container">
    <a class="navbar-brand d-flex align-items-center gap-2" href="<?= APP_URL ?>/">
      <div class="logo-icon"><i class="bi bi-buildings-fill text-primary fs-3"></i></div>
      <div>
        <span class="fw-800 text-primary fs-5 d-block lh-1">Zabibu</span>
        <span class="fw-400 text-muted small">Residence</span>
      </div>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mx-auto gap-1">
        <li class="nav-item"><a class="nav-link fw-500" href="<?= APP_URL ?>/">Home</a></li>
        <li class="nav-item"><a class="nav-link fw-500" href="<?= APP_URL ?>/residences">Properties</a></li>
        <li class="nav-item"><a class="nav-link fw-500" href="<?= APP_URL ?>/search">Search</a></li>
        <li class="nav-item"><a class="nav-link fw-500" href="<?= APP_URL ?>/about">About</a></li>
        <li class="nav-item"><a class="nav-link fw-500" href="<?= APP_URL ?>/contact">Contact</a></li>
      </ul>
      <div class="d-flex align-items-center gap-2">
        <?php if (isset($_SESSION['user_id'])): ?>
          <a href="<?= APP_URL . (in_array($_SESSION['user_role'],['tenant']) ? '/tenant' : '/admin') ?>" class="btn btn-sm btn-outline-primary">
            <i class="bi bi-grid me-1"></i>Dashboard
          </a>
          <a href="<?= APP_URL ?>/logout" class="btn btn-sm btn-outline-danger">
            <i class="bi bi-box-arrow-right me-1"></i>Logout
          </a>
        <?php else: ?>
          <a href="<?= APP_URL ?>/login" class="btn btn-sm btn-outline-primary">Login</a>
          <a href="<?= APP_URL ?>/register" class="btn btn-sm btn-primary">Register</a>
        <?php endif; ?>
      </div>
    </div>
  </div>
</nav>

<!-- Flash Messages -->
<?php 
use App\Helpers\Helper;
$flash = Helper::getFlash();
if ($flash): ?>
<div class="container mt-2">
  <div class="alert alert-<?= $flash['type'] ?> alert-dismissible fade show" role="alert">
    <?= $flash['message'] ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
</div>
<?php endif; ?>

<!-- Page Content -->
<?= $content ?>

<!-- Footer -->
<footer class="bg-dark text-white pt-5 pb-3" style="margin-top:0;border-top:4px solid #1a3c5e">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-4">
        <a href="<?= APP_URL ?>/" class="d-flex align-items-center gap-2 text-decoration-none mb-3">
          <i class="bi bi-buildings-fill text-primary fs-2"></i>
          <div>
            <div class="fw-700 text-white fs-5 lh-1">Zabibu Residence</div>
            <div class="text-muted small">Your Home, Our Priority</div>
          </div>
        </a>
        <p class="text-muted small">Premium rental residence management platform serving Tanzania. Find your perfect home with ease.</p>
        <div class="d-flex gap-2 mt-3">
          <a href="#" class="btn btn-sm btn-outline-light rounded-circle"><i class="bi bi-facebook"></i></a>
          <a href="#" class="btn btn-sm btn-outline-light rounded-circle"><i class="bi bi-twitter-x"></i></a>
          <a href="#" class="btn btn-sm btn-outline-light rounded-circle"><i class="bi bi-instagram"></i></a>
          <a href="#" class="btn btn-sm btn-outline-light rounded-circle"><i class="bi bi-whatsapp"></i></a>
          <a href="#" class="btn btn-sm btn-outline-light rounded-circle"><i class="bi bi-youtube"></i></a>
        </div>
      </div>
      <div class="col-lg-2 col-6">
        <h6 class="fw-600 text-white mb-3">Quick Links</h6>
        <ul class="list-unstyled small">
          <li><a href="<?= APP_URL ?>/" class="text-muted text-decoration-none">Home</a></li>
          <li><a href="<?= APP_URL ?>/residences" class="text-muted text-decoration-none">Properties</a></li>
          <li><a href="<?= APP_URL ?>/search" class="text-muted text-decoration-none">Search</a></li>
          <li><a href="<?= APP_URL ?>/about" class="text-muted text-decoration-none">About Us</a></li>
          <li><a href="<?= APP_URL ?>/contact" class="text-muted text-decoration-none">Contact</a></li>
        </ul>
      </div>
      <div class="col-lg-2 col-6">
        <h6 class="fw-600 text-white mb-3">Property Types</h6>
        <ul class="list-unstyled small">
          <li><a href="<?= APP_URL ?>/search?type=1" class="text-muted text-decoration-none">Apartments</a></li>
          <li><a href="<?= APP_URL ?>/search?type=2" class="text-muted text-decoration-none">Houses</a></li>
          <li><a href="<?= APP_URL ?>/search?type=3" class="text-muted text-decoration-none">Villas</a></li>
          <li><a href="<?= APP_URL ?>/search?type=4" class="text-muted text-decoration-none">Studios</a></li>
          <li><a href="<?= APP_URL ?>/search?type=5" class="text-muted text-decoration-none">Hostels</a></li>
        </ul>
      </div>
      <div class="col-lg-4">
        <h6 class="fw-600 text-white mb-3">Contact Us</h6>
        <ul class="list-unstyled small text-muted">
          <li class="mb-2 d-flex gap-2">
            <i class="bi bi-geo-alt-fill text-primary mt-1 flex-shrink-0"></i>
            <span>Plot 45, Msasani Peninsula, Kinondoni,<br>Dar es Salaam, Tanzania</span>
          </li>
          <li class="mb-2">
            <i class="bi bi-telephone-fill text-primary me-2"></i>
            <a href="tel:+255222000001" class="text-muted text-decoration-none">+255 22 200 0001</a>
          </li>
          <li class="mb-2">
            <i class="bi bi-phone-fill text-primary me-2"></i>
            <a href="tel:+255784000001" class="text-muted text-decoration-none">+255 784 000 001</a>
            <span class="badge bg-success ms-1" style="font-size:0.65rem">WhatsApp</span>
          </li>
          <li class="mb-2">
            <i class="bi bi-telephone-fill text-primary me-2"></i>
            <a href="tel:+255712000002" class="text-muted text-decoration-none">+255 712 000 002</a>
          </li>
          <li class="mb-2">
            <i class="bi bi-envelope-fill text-primary me-2"></i>
            <a href="mailto:info@zabiburesidence.co.tz" class="text-muted text-decoration-none">info@zabiburesidence.co.tz</a>
          </li>
          <li class="mb-2">
            <i class="bi bi-envelope-fill text-primary me-2"></i>
            <a href="mailto:support@zabiburesidence.co.tz" class="text-muted text-decoration-none">support@zabiburesidence.co.tz</a>
          </li>
          <li class="mb-3">
            <i class="bi bi-clock-fill text-primary me-2"></i>
            Mon – Fri: 8:00 AM – 6:00 PM<br>
            <span style="margin-left:1.4rem">Sat: 9:00 AM – 2:00 PM</span>
          </li>
        </ul>
        <a href="https://wa.me/255784000001" target="_blank" class="btn btn-sm btn-success mb-3">
          <i class="bi bi-whatsapp me-1"></i>Chat on WhatsApp
        </a>
        <form action="<?= APP_URL ?>/newsletter" method="POST">
          <?= \App\Helpers\Helper::csrf() ?>
          <div class="input-group input-group-sm">
            <input type="email" name="email" class="form-control" placeholder="Subscribe to newsletter" required>
            <button class="btn btn-primary" type="submit">Go</button>
          </div>
        </form>
      </div>
    </div>
    <hr class="border-secondary mt-4">
    <div class="row align-items-center">
      <div class="col-md-6 small text-muted text-center text-md-start">
        &copy; <?= date('Y') ?> Zabibu Residence. All rights reserved.
      </div>
      <div class="col-md-6 small text-muted text-center text-md-end">
        Tanzania | TZS | PHP <?= PHP_MAJOR_VERSION ?>.<?= PHP_MINOR_VERSION ?>
      </div>
    </div>
  </div>
</footer>

<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<!-- Custom JS -->
<script src="<?= APP_URL ?>/assets/js/app.js"></script>

</body>
</html>
