<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= isset($title) ? htmlspecialchars($title) : APP_NAME ?></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<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">
<link href="<?= APP_URL ?>/assets/css/style.css" rel="stylesheet">
<style>
.auth-page { min-height: 100vh; display: flex; }
.auth-left {
  flex: 1; background: linear-gradient(135deg, #0f2744 0%, #1a3c5e 60%, #1e4976 100%);
  display: flex; flex-direction: column; justify-content: center; padding: 3rem;
  position: relative; overflow: hidden;
}
.auth-left::before {
  content: ''; position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=1200&q=60') center/cover;
  opacity: 0.1;
}
.auth-left-content { position: relative; z-index: 1; }
.auth-right {
  width: 480px; display: flex; flex-direction: column;
  justify-content: center; padding: 3rem; background: #fff;
  overflow-y: auto;
}
.auth-logo { margin-bottom: 2.5rem; }
.auth-title { font-size: 1.6rem; font-weight: 800; color: #1e293b; margin-bottom: 0.3rem; }
.auth-subtitle { color: #64748b; font-size: 0.9rem; margin-bottom: 2rem; }
.auth-divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
.auth-divider span { font-size: 0.8rem; color: #94a3b8; font-weight: 500; }
@media (max-width: 768px) { .auth-left { display: none; } .auth-right { width: 100%; padding: 2rem 1.5rem; } }
</style>
</head>
<body>
<div class="auth-page">
  <!-- Left Panel -->
  <div class="auth-left d-none d-md-flex">
    <div class="auth-left-content">
      <a href="<?= APP_URL ?>/" class="d-flex align-items-center gap-2 text-decoration-none mb-5">
        <i class="bi bi-buildings-fill text-white" style="font-size:2.5rem"></i>
        <div>
          <div class="fw-800 text-white fs-4 lh-1">Zabibu</div>
          <div style="color:rgba(255,255,255,0.7);font-size:0.9rem">Residence</div>
        </div>
      </a>
      <h2 style="font-family:'Playfair Display',serif;color:#fff;font-size:2.2rem;font-weight:700;margin-bottom:1rem">
        Your Home,<br><span style="color:#e8a020">Our Priority</span>
      </h2>
      <p style="color:rgba(255,255,255,0.75);max-width:380px;font-size:1rem;margin-bottom:2.5rem">
        Tanzania's most trusted rental management platform. Manage properties, tenants, payments, and more — all in one place.
      </p>
      <div style="display:grid;gap:1rem">
        <?php foreach ([
          ['bi-shield-check','Secure & encrypted','Bank-grade security for your data'],
          ['bi-phone','Mobile payments','Pay rent via M-Pesa, Airtel, Tigo'],
          ['bi-graph-up','Real-time reports','Track revenue and occupancy live'],
        ] as $f): ?>
        <div style="display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,0.08);border-radius:12px;padding:0.9rem 1.1rem">
          <i class="bi <?= $f[0] ?>" style="font-size:1.3rem;color:#e8a020;flex-shrink:0"></i>
          <div>
            <div style="color:#fff;font-weight:600;font-size:0.9rem"><?= $f[1] ?></div>
            <div style="color:rgba(255,255,255,0.6);font-size:0.78rem"><?= $f[2] ?></div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>

  <!-- Right Panel -->
  <div class="auth-right">
    <?php
    use App\Helpers\Helper;
    $flash = Helper::getFlash();
    if ($flash): ?>
    <div class="alert alert-<?= $flash['type'] ?> alert-dismissible fade show mb-3" role="alert">
      <?= $flash['message'] ?>
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <?php endif; ?>
    <?= $content ?>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</body>
</html>
