<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              brand: {
                50: '#f0f9ff',
                100: '#e0f2fe',
                500: '#0ea5e9',
                600: '#0284c7',
                700: '#0369a1',
                800: '#075985',
                900: '#0c4a6e',
              }
            }
          }
        }
      }
    </script>
</head>
<body <?php body_class('min-h-screen bg-slate-50 text-slate-800 flex flex-col font-sans'); ?>>
<?php wp_body_open(); ?>

<!-- Top Utility Strip -->
<div class="bg-slate-900 text-slate-300 text-xs py-2 border-b border-slate-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
    <div class="flex items-center gap-4">
      <div class="flex items-center gap-1.5 text-sky-400 font-medium">
        <span class="w-2 h-2 rounded-full bg-sky-400 animate-pulse"></span>
        <span>Mechtal Facility Management System</span>
      </div>
      <span class="text-slate-600 hidden sm:inline">|</span>
      <div className="hidden sm:flex items-center gap-1.5 text-slate-400">
        <a href="tel:+918220322997" class="hover:text-white transition-colors">
          24/7 Priority Helpline: <strong class="text-slate-200">+91 8220322997</strong>
        </a>
      </div>
    </div>

    <div class="flex items-center gap-3">
      <div class="hidden sm:flex items-center gap-2 text-slate-400">
        <i data-lucide="mail" class="w-3.5 h-3.5 text-sky-400"></i>
        <span>mechtalfms@gmail.com</span>
      </div>
    </div>
  </div>
</div>

<!-- Main Top Header -->
<header class="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b border-sky-100 shadow-xs">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between gap-6 min-h-[64px] sm:min-h-[70px] py-2">
      
      <!-- Brand Logo -->
      <a href="<?php echo esc_url(home_url('/')); ?>" class="shrink-0 inline-flex items-center mr-4 group">
        <?php if (has_custom_logo()) : ?>
          <?php the_custom_logo(); ?>
        <?php else : ?>
          <img 
            src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/mechtal_header_logo_hd.png'); ?>" 
            alt="Mechtal Smart Facility Management & Water Solutions" 
            class="h-8 sm:h-9 md:h-10 w-auto max-w-[150px] sm:max-w-[180px] object-contain transition-opacity group-hover:opacity-90"
          />
        <?php endif; ?>
      </a>

      <!-- Desktop Navigation Menu -->
      <nav class="hidden lg:flex items-center gap-7 text-sm font-semibold text-slate-700">
        <a href="<?php echo esc_url(home_url('/#services')); ?>" class="hover:text-sky-600 transition-colors">Specialized Services</a>
        <a href="<?php echo esc_url(home_url('/#tank-process')); ?>" class="hover:text-sky-600 transition-colors">6-Stage Tank Process</a>
        <a href="<?php echo esc_url(home_url('/#diagnostic')); ?>" class="hover:text-sky-600 transition-colors">Water TDS Diagnostic</a>
        <a href="<?php echo esc_url(home_url('/#contact')); ?>" class="hover:text-sky-600 transition-colors">Contact</a>
      </nav>

      <!-- Right Call & Book Buttons -->
      <div class="hidden sm:flex items-center gap-3">
        <a 
          href="tel:+918220322997"
          class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold text-sky-700 bg-sky-50 hover:bg-sky-100 border border-sky-200 transition-colors"
        >
          <i data-lucide="phone" class="w-4 h-4 text-sky-600"></i>
          <span>+91 8220322997</span>
        </a>

        <button 
          type="button"
          onclick="window.mechtalOpenBookingModal('tank', 'Tank Cleaning', 'Standard', 999)"
          class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-xs font-extrabold text-white bg-sky-600 hover:bg-sky-500 active:bg-sky-700 shadow-md shadow-sky-600/25 transition-all cursor-pointer"
        >
          <i data-lucide="calendar" class="w-4 h-4"></i>
          <span>Book Appointment</span>
        </button>
      </div>

      <!-- Mobile Hamburger Button -->
      <button 
        type="button" 
        id="mobile-menu-toggle"
        class="lg:hidden p-2 rounded-xl text-slate-600 hover:text-slate-900 hover:bg-slate-100 transition-colors"
      >
        <i data-lucide="menu" class="w-6 h-6"></i>
      </button>

    </div>
  </div>

  <!-- Mobile Dropdown Menu -->
  <div id="mobile-menu" class="hidden lg:hidden bg-white border-b border-sky-100 px-4 py-4 space-y-3">
    <a href="<?php echo esc_url(home_url('/#services')); ?>" class="block font-semibold text-slate-700 py-1">Specialized Services</a>
    <a href="<?php echo esc_url(home_url('/#tank-process')); ?>" class="block font-semibold text-slate-700 py-1">6-Stage Tank Process</a>
    <a href="<?php echo esc_url(home_url('/#diagnostic')); ?>" class="block font-semibold text-slate-700 py-1">Water TDS Diagnostic</a>
    <a href="<?php echo esc_url(home_url('/bookings-dashboard')); ?>" class="block font-semibold text-emerald-600 py-1">Bookings Dashboard</a>
    <a href="<?php echo esc_url(home_url('/#contact')); ?>" class="block font-semibold text-slate-700 py-1">Contact</a>
    <div class="pt-3 border-t border-slate-100 flex flex-col gap-2">
      <a href="tel:+918220322997" class="text-center font-bold text-sky-700 bg-sky-50 py-2.5 rounded-xl border border-sky-200">
        Call +91 8220322997
      </a>
      <button 
        type="button"
        onclick="window.mechtalOpenBookingModal('tank', 'Tank Cleaning', 'Standard', 999)"
        class="w-full text-center font-bold text-white bg-sky-600 py-2.5 rounded-xl"
      >
        Book Appointment
      </button>
    </div>
  </div>
</header>
