<?php
/**
 * Shared <head> + site header. Calling page must set $seo (array for seo_meta)
 * before including this file. Optional: $bodyClass, $extraSchema (string).
 */
require_once __DIR__ . '/functions.php';
require_once __DIR__ . '/seo.php';
$seo = $seo ?? [];
$bodyClass = $bodyClass ?? '';
$langNames = ['en' => 'EN', 'fr' => 'FR', 'rw' => 'RW'];
$favicon = favicon_asset();
?>
<!doctype html>
<html lang="<?= e(current_lang()) ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= seo_meta($seo) ?>
<?php if ($favicon): ?>
<link rel="icon" href="/<?= e($favicon) ?>" type="<?= e(mime_for_favicon($favicon)) ?>">
<?php else: ?>
<link rel="icon" href="/assets/icons/favicon.svg" type="image/svg+xml">
<?php endif; ?>
<link rel="preload" href="/assets/fonts/Inter-Variable-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/PlayfairDisplay-Variable-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/assets/css/fonts.css">
<link rel="stylesheet" href="/assets/css/variables.css">
<link rel="stylesheet" href="/assets/css/base.css">
<link rel="stylesheet" href="/assets/css/components.css">
<link rel="stylesheet" href="/assets/css/utilities.css">
<link rel="stylesheet" href="/assets/css/animations.css">
<link rel="stylesheet" href="/assets/css/theme.php">
<?= schema_organization() ?>
<?= isset($extraSchema) ? $extraSchema : '' ?>
</head>
<body class="<?= e($bodyClass) ?>">
<a href="#main" class="skip-link">Skip to main content</a>

<?php if (!has_chosen_lang()): ?>
<div class="lang-picker-overlay" id="langPickerOverlay">
  <div class="lang-picker-card">
    <h2><?= e(t('lang_picker.title')) ?></h2>
    <p class="text-muted"><?= e(t('lang_picker.subtitle')) ?></p>
    <div class="lang-picker-options">
      <a href="/api/set-lang.php?lang=en&redirect=<?= urlencode(current_path()) ?>" class="lang-picker-option"><span>🇬🇧</span> English</a>
      <a href="/api/set-lang.php?lang=fr&redirect=<?= urlencode(current_path()) ?>" class="lang-picker-option"><span>🇫🇷</span> Français</a>
      <a href="/api/set-lang.php?lang=rw&redirect=<?= urlencode(current_path()) ?>" class="lang-picker-option"><span>🇷🇼</span> Kinyarwanda</a>
    </div>
  </div>
</div>
<?php endif; ?>

<header class="site-header" id="siteHeader">
  <div class="container">
    <a href="/" class="brand">
      <?php if ($logo = brand_asset('logo')): ?>
        <img src="/<?= e($logo) ?>" alt="<?= e(SITE_NAME) ?>" class="brand-logo-img">
      <?php else: ?>
        <span class="brand-mark">KY</span>
        <span class="brand-name">Kigali Yacu<small>Properties</small></span>
      <?php endif; ?>
    </a>

    <nav class="main-nav" id="mainNav" aria-label="Primary">
      <ul>
        <li><a href="/" class="nav-link <?= is_active('/') && current_path() === '/' ? 'active' : '' ?>"><?= e(t('nav.home')) ?></a></li>
        <li class="has-mega">
          <a href="/properties" class="nav-link <?= is_active('/properties') ? 'active' : '' ?>"><?= e(t('nav.properties')) ?></a>
          <div class="mega-panel">
            <div>
              <a href="/properties?status=sale"><strong><?= e(t('nav.for_sale')) ?></strong></a>
              <a href="/properties?status=rent"><strong><?= e(t('nav.for_rent')) ?></strong></a>
              <a href="/properties?featured=1"><?= e(t('nav.featured_listings')) ?></a>
              <a href="/compare"><?= e(t('nav.compare_listings')) ?></a>
              <a href="/saved"><?= e(t('nav.saved_homes')) ?></a>
            </div>
            <div>
              <a href="/category/modern-villas">Modern Villas</a>
              <a href="/category/family-houses">Family Houses</a>
              <a href="/category/apartments">Apartments</a>
              <a href="/category/townhouses">Townhouses</a>
              <a href="/category/penthouses">Penthouses</a>
            </div>
            <div>
              <a href="/category/residential-land">Residential Land</a>
              <a href="/category/office-space">Office Space</a>
              <a href="/category/retail-space">Retail Space</a>
              <a href="/category/warehouses-industrial">Warehouses</a>
              <a href="/properties"><?= e(t('nav.view_all_categories')) ?> →</a>
            </div>
          </div>
        </li>
        <li><a href="/investment-locations" class="nav-link <?= is_active('/investment-locations') || is_active('/district') ? 'active' : '' ?>"><?= e(t('nav.investment_locations')) ?></a></li>
        <li><a href="/new-development" class="nav-link <?= is_active('/new-development') ? 'active' : '' ?>"><?= e(t('nav.new_development')) ?></a></li>
        <li><a href="/buy-and-build" class="nav-link <?= is_active('/buy-and-build') ? 'active' : '' ?>"><?= e(t('nav.buy_build')) ?></a></li>
        <li><a href="/services" class="nav-link <?= is_active('/services') ? 'active' : '' ?>"><?= e(t('nav.services')) ?></a></li>
        <li class="has-mega">
          <a href="/about" class="nav-link <?= is_active('/about') ? 'active' : '' ?>"><?= e(t('nav.about')) ?></a>
          <div class="mega-panel" style="grid-template-columns: 200px;">
            <div>
              <a href="/about"><?= e(t('nav.our_story')) ?></a>
              <a href="/blog"><?= e(t('nav.blog')) ?></a>
              <a href="/news"><?= e(t('nav.news')) ?></a>
              <a href="/faq"><?= e(t('nav.faq')) ?></a>
              <a href="/procurement"><?= e(t('nav.procurement')) ?></a>
            </div>
          </div>
        </li>
        <li><a href="/contact" class="nav-link <?= is_active('/contact') ? 'active' : '' ?>"><?= e(t('nav.contact')) ?></a></li>
      </ul>
      <div class="hide-desktop" style="margin-top:var(--space-6);">
        <a href="/vip-alerts" class="btn btn-accent btn-block"><?= e(t('cta.join_vip_alerts')) ?></a>
      </div>
    </nav>

    <div class="nav-actions">
      <div class="lang-switch has-mega">
        <button type="button" class="btn-icon-only" style="border:1px solid var(--color-border);width:auto;padding:0 var(--space-3);font-size:var(--fs-xs);font-weight:700;" aria-label="Change language"><?= e($langNames[current_lang()]) ?></button>
        <div class="mega-panel" style="grid-template-columns:140px;padding:var(--space-3);">
          <div>
            <a href="/api/set-lang.php?lang=en&redirect=<?= urlencode(current_path()) ?>">English</a>
            <a href="/api/set-lang.php?lang=fr&redirect=<?= urlencode(current_path()) ?>">Français</a>
            <a href="/api/set-lang.php?lang=rw&redirect=<?= urlencode(current_path()) ?>">Kinyarwanda</a>
          </div>
        </div>
      </div>
      <a href="/saved" class="btn-icon-only hide-mobile" aria-label="<?= e(t('nav.saved_homes')) ?>" style="border:1px solid var(--color-border);"><?= icon('heart', 18) ?></a>
      <a href="/vip-alerts" class="btn btn-outline btn-sm hide-mobile"><?= e(t('nav.vip_alerts')) ?></a>
      <a href="<?= e(tel_link()) ?>" class="btn btn-primary btn-sm hide-mobile"><?= icon('phone', 14) ?> <?= e(t('nav.call_us')) ?></a>
      <button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="mainNav" aria-label="Toggle menu"><span></span></button>
    </div>
  </div>
</header>

<main id="main">
