<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= $title ?? 'On Call | Quality Self &bull; Rich & Royal | Premium Catering & Events' ?></title>
  <meta name="description" content="<?= $meta_description ?? 'South India\'s premium event planner and vegetarian catering services.' ?>">
  
  <!-- Tailwind CSS Play CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            saffron: {
              DEFAULT: '#e31e24',
              dark: '#b51217',
              light: '#ffebee',
            },
            gold: {
              DEFAULT: '#c99c33',
              dark: '#a87e24',
              light: '#fbf8f0',
            },
            cream: '#faf7f2',
            ivory: '#fdfdfb',
            charcoal: {
              DEFAULT: '#1a1a1a',
              light: '#4a4a4a',
              muted: '#7a7a7a',
            }
          },
          fontFamily: {
            title: ['Marcellus', 'serif'],
            body: ['Outfit', 'sans-serif'],
          },
          borderRadius: {
            sm: '8px',
            md: '16px',
            lg: '28px',
          }
        }
      }
    }
  </script>
  
  <!-- Global Stylesheet -->
  <link rel="stylesheet" href="<?= base_url('styles.css') ?>">
  
  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest"></script>
</head>
<body class="font-body bg-gradient-to-br from-ivory via-cream to-gold-light text-charcoal min-h-screen relative overflow-x-hidden antialiased">
  
  <!-- Kolam Background -->
  <div class="bg-wrapper">
    <div class="kolam-container">
      <svg viewBox="0 0 200 200" class="kolam-svg w-full h-full stroke-gold stroke-[1.2] fill-none">
        <g stroke-linecap="round" stroke-linejoin="round">
          <rect x="75" y="75" width="50" height="50" />
          <rect x="75" y="75" width="50" height="50" transform="rotate(45 100 100)" />
          <rect x="60" y="60" width="80" height="80" />
          <rect x="60" y="60" width="80" height="80" transform="rotate(45 100 100)" />
          <rect x="45" y="45" width="110" height="110" />
          <rect x="45" y="45" width="110" height="110" transform="rotate(45 100 100)" />
          <path d="M100 60 C85 45, 85 35, 100 20 C115 35, 115 45, 100 60 Z" />
          <path d="M100 140 C85 155, 85 165, 100 180 C115 165, 115 155, 100 140 Z" />
          <path d="M140 100 C155 85, 165 85, 180 100 C165 115, 155 115, 140 100 Z" />
          <path d="M60 100 C45 85, 35 85, 20 100 C35 115, 45 115, 60 100 Z" />
          <path d="M68 68 C50 50, 40 50, 30 68 C50 86, 50 86, 68 68" />
          <path d="M132 68 C150 50, 160 50, 170 68 C150 86, 150 86, 132 68" />
          <path d="M68 132 C50 150, 40 150, 30 132 C50 114, 50 114, 68 132" />
          <path d="M132 132 C150 150, 160 150, 170 132 C150 114, 150 114, 132 132" />
          <circle cx="100" cy="100" r="3" fill="#c99c33" />
          <circle cx="100" cy="40" r="2" fill="#c99c33" />
          <circle cx="100" cy="160" r="2" fill="#c99c33" />
          <circle cx="40" cy="100" r="2" fill="#c99c33" />
          <circle cx="160" cy="100" r="2" fill="#c99c33" />
          <circle cx="50" cy="50" r="1.5" fill="#c99c33" />
          <circle cx="150" cy="50" r="1.5" fill="#c99c33" />
          <circle cx="50" cy="150" r="1.5" fill="#c99c33" />
          <circle cx="150" cy="150" r="1.5" fill="#c99c33" />
        </g>
      </svg>
    </div>
    
    <!-- Kalasha SVG -->
    <div class="kalasha-container">
      <svg viewBox="0 0 100 120" class="w-full h-full">
        <path d="M50 30 C40 10, 48 35, 50 35 C52 35, 60 10, 50 30 Z" fill="#2e7d32" />
        <path d="M42 35 C25 22, 45 42, 45 42 Z" fill="#1b5e20" />
        <path d="M58 35 C75 22, 55 42, 55 42 Z" fill="#1b5e20" />
        <path d="M38 38 C38 25, 62 25, 62 38 C62 43, 50 50, 50 50 C50 50, 38 43, 38 38 Z" fill="#795548" stroke="#5d4037" stroke-width="1" />
        <path d="M50 25 L50 35 M46 27 L48 37 M54 27 L52 37" stroke="#5d4037" stroke-width="0.8" opacity="0.6" />
        <path d="M35 50 L65 50 C70 50, 75 55, 75 62 L75 65 C75 90, 68 105, 50 105 C32 105, 25 90, 25 65 L25 62 C25 55, 30 50, 35 50 Z" fill="url(#copperGrad)" stroke="#c99c33" stroke-width="1.2" />
        <rect x="32" y="47" width="36" height="5" rx="2.5" fill="#c99c33" stroke="#a87e24" stroke-width="0.8" />
        <path d="M50 65 L50 85 M40 75 L60 75 M40 65 L40 75 L45 75 M60 85 L60 75 L55 75 M40 85 L50 85 L50 90 M60 65 L50 65 L50 60" stroke="#e31e24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.65" />
        <defs>
          <linearGradient id="copperGrad" x1="25" y1="50" x2="75" y2="105" gradientUnits="userSpaceOnUse">
            <stop stop-color="#e57e53" />
            <stop offset="0.4" stop-color="#f4a27e" />
            <stop offset="0.8" stop-color="#d35400" />
            <stop offset="1" stop-color="#a04000" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  </div>

  <!-- Foreground Animations -->
  <div class="fg-wrapper">
    <!-- Flickering Diya (left) -->
    <div class="diya-container diya-left">
      <svg viewBox="0 0 100 80" class="w-full h-full">
        <path d="M20 45 C20 60, 80 60, 80 45 C80 35, 70 35, 50 40 C30 35, 20 35, 20 45 Z" fill="#b84318" stroke="#c99c33" stroke-width="1" />
        <path d="M35 44 C40 47, 60 47, 65 44" stroke="#e31e24" stroke-width="1" fill="none" opacity="0.8" />
        <ellipse cx="50" cy="42" rx="23" ry="3.5" fill="#a87e24" opacity="0.6" />
        <line x1="50" y1="42" x2="50" y2="30" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" />
        <g class="flame-group">
          <path d="M50 8 C42 22, 44 32, 50 32 C56 32, 58 22, 50 8 Z" fill="url(#flameGlow)" opacity="0.3" filter="blur(1px)" />
          <path d="M50 14 C46 24, 47 32, 50 32 C53 32, 54 24, 50 14 Z" fill="url(#flameCore)" />
        </g>
      </svg>
    </div>

    <!-- Flickering Diya (right) -->
    <div class="diya-container diya-right">
      <svg viewBox="0 0 100 80" class="w-full h-full">
        <path d="M20 45 C20 60, 80 60, 80 45 C80 35, 70 35, 50 40 C30 35, 20 35, 20 45 Z" fill="#b84318" stroke="#c99c33" stroke-width="1" />
        <path d="M35 44 C40 47, 60 47, 65 44" stroke="#e31e24" stroke-width="1" fill="none" opacity="0.8" />
        <ellipse cx="50" cy="42" rx="23" ry="3.5" fill="#a87e24" opacity="0.6" />
        <line x1="50" y1="42" x2="50" y2="30" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" />
        <g class="flame-group" style="animation-delay: 0.4s;">
          <path d="M50 8 C42 22, 44 32, 50 32 C56 32, 58 22, 50 8 Z" fill="url(#flameGlow)" opacity="0.3" filter="blur(1px)" />
          <path d="M50 14 C46 24, 47 32, 50 32 C53 32, 54 24, 50 14 Z" fill="url(#flameCore)" />
        </g>
      </svg>
    </div>



    <svg style="position: absolute; width: 0; height: 0;">
      <defs>
        <linearGradient id="flameGlow" x1="50" y1="8" x2="50" y2="32" gradientUnits="userSpaceOnUse">
          <stop stop-color="#c99c33" />
          <stop offset="1" stop-color="#e31e24" stop-opacity="0" />
        </linearGradient>
        <linearGradient id="flameCore" x1="50" y1="14" x2="50" y2="32" gradientUnits="userSpaceOnUse">
          <stop stop-color="#ffffff" />
          <stop offset="0.2" stop-color="#ffe56f" />
          <stop offset="0.6" stop-color="#ffa026" />
          <stop offset="1" stop-color="#e31e24" />
        </linearGradient>
      </defs>
    </svg>
  </div>

  <!-- Header / Navbar -->
  <header class="fixed top-0 left-0 w-full z-50 py-6 transition-all duration-400">
    <div class="max-w-[1200px] mx-auto px-6 flex justify-between items-center">
      <a href="<?= base_url('/') ?>" class="flex items-center gap-2.5 cursor-pointer">
        <img src="<?= base_url('oncall.png') ?>" alt="On Call Logo" class="logo-img h-12 w-auto object-contain transition-all duration-200" />
      </a>

      <!-- Desktop Nav -->
      <nav class="hidden lg:flex items-center gap-8">
        <?php $activeClass = 'text-saffron font-semibold text-[0.95rem] tracking-[0.05em] uppercase relative py-1.5 after:content-[\'\'] after:absolute after:bottom-0 after:left-0 after:w-full after:height-[2px] after:bg-gold transition-all duration-200';
              $inactiveClass = 'text-charcoal-light hover:text-saffron font-medium text-[0.95rem] tracking-[0.05em] uppercase relative py-1.5 after:content-[\'\'] after:absolute after:bottom-0 after:left-0 after:w-0 hover:after:w-full after:height-[2px] after:bg-gold transition-all duration-200'; ?>
        
        <a href="<?= base_url('/') ?>" class="<?= ($activePage ?? 'home') === 'home' ? $activeClass : $inactiveClass ?>">Home</a>
        <a href="<?= base_url('services') ?>" class="<?= ($activePage ?? '') === 'services' ? $activeClass : $inactiveClass ?>">Services</a>
        <div class="relative group py-1.5">
          <a href="<?= base_url('menu-planner') ?>" class="<?= ($activePage ?? '') === 'menu-planner' ? $activeClass : $inactiveClass ?> flex items-center gap-1 cursor-pointer">
            Menu
            <i data-lucide="chevron-down" class="w-4 h-4 transition-transform group-hover:rotate-180"></i>
          </a>
          <!-- Dropdown menu -->
          <div class="absolute top-full left-0 mt-2 w-48 bg-white border border-gold/15 rounded-xl shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 py-2">
            <a href="<?= base_url('menu-planner?category=Breakfast') ?>" class="block px-4 py-2 text-sm text-charcoal hover:bg-gold-light/40 hover:text-saffron transition-colors">Breakfast</a>
            <a href="<?= base_url('menu-planner?category=Lunch') ?>" class="block px-4 py-2 text-sm text-charcoal hover:bg-gold-light/40 hover:text-saffron transition-colors">Lunch (Sadhya)</a>
            <a href="<?= base_url('menu-planner?category=Reception') ?>" class="block px-4 py-2 text-sm text-charcoal hover:bg-gold-light/40 hover:text-saffron transition-colors">Reception</a>
          </div>
        </div>
        <a href="<?= base_url('gallery') ?>" class="<?= ($activePage ?? '') === 'gallery' ? $activeClass : $inactiveClass ?>">Gallery</a>
        <a href="<?= base_url('about') ?>" class="<?= ($activePage ?? '') === 'about' ? $activeClass : $inactiveClass ?>">About Us</a>
        <a href="<?= base_url('contact') ?>" class="<?= ($activePage ?? '') === 'contact' ? $activeClass : $inactiveClass ?>">Contact</a>
        <a href="tel:+919847094284" class="ml-2.5 inline-flex items-center gap-2 bg-saffron hover:bg-saffron-dark text-white px-7 py-3 rounded-full font-medium text-[0.95rem] tracking-[0.05em] uppercase shadow-[0_4px_14px_rgba(227,30,36,0.3)] hover:shadow-[0_6px_20px_rgba(227,30,36,0.4)] hover:-translate-y-0.5 transition-all duration-400">
          <i data-lucide="phone" class="w-4 h-4"></i>
          Call Us
        </a>
      </nav>

      <!-- Mobile Toggle Button -->
      <button id="mobile-toggle" class="lg:hidden block bg-none border-none cursor-pointer text-charcoal p-1" aria-label="Toggle menu">
        <i data-lucide="menu" class="w-7 h-7"></i>
      </button>
    </div>
  </header>

  <!-- Mobile Sidebar Drawer Overlay -->
  <div id="drawer-overlay" class="fixed inset-0 bg-black/40 backdrop-blur-[4px] z-[1000] opacity-0 pointer-events-none transition-all duration-400"></div>

  <!-- Mobile Sidebar Drawer -->
  <div id="mobile-drawer" class="fixed top-0 right-0 w-[275px] sm:w-[310px] h-screen bg-white shadow-[-10px_0_30px_rgba(0,0,0,0.08)] z-[1001] translate-x-full transition-all duration-400 p-6 sm:p-10 flex flex-col rounded-l-[20px] sm:rounded-l-[24px]">
    <div class="flex justify-between items-center mb-6 sm:mb-9">
      <a href="<?= base_url('/') ?>">
        <img src="<?= base_url('oncall.png') ?>" alt="On Call Logo" class="h-10 sm:h-12 w-auto object-contain" />
      </a>
      <button id="close-btn" class="w-8 h-8 sm:w-9 sm:h-9 rounded-full bg-[#f5f5f5] hover:bg-[#e5e5e5] text-charcoal flex items-center justify-center border-none cursor-pointer hover:scale-105 transition-all duration-200" aria-label="Close menu">
        <i data-lucide="x" class="w-4 h-4 sm:w-5 sm:h-5"></i>
      </button>
    </div>

    <nav class="flex flex-col gap-2.5 sm:gap-3.5 flex-grow">
      <?php 
        $mActiveClass = 'flex items-center gap-3 p-2 rounded-[10px] sm:rounded-[14px] bg-[#fdf5f1] border-l-4 border-saffron text-saffron font-semibold text-sm sm:text-md transition-all duration-200';
        $mInactiveClass = 'flex items-center gap-3 p-2 rounded-[10px] sm:rounded-[14px] text-charcoal hover:bg-[#fcfcfc] hover:text-saffron border-l-4 border-transparent font-medium text-sm sm:text-md transition-all duration-200'; 
      ?>

      <a href="<?= base_url('/') ?>" class="<?= ($activePage ?? 'home') === 'home' ? $mActiveClass : $mInactiveClass ?>">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-[8px] sm:rounded-[10px] <?= ($activePage ?? 'home') === 'home' ? 'bg-white' : 'bg-[#f8f8f8]' ?> flex items-center justify-center">
          <i data-lucide="home" class="w-4.5 h-4.5 sm:w-5 sm:h-5 <?= ($activePage ?? 'home') === 'home' ? 'text-saffron' : 'text-charcoal-light' ?>"></i>
        </div>
        <span>Home</span>
      </a>
      <a href="<?= base_url('services') ?>" class="<?= ($activePage ?? '') === 'services' ? $mActiveClass : $mInactiveClass ?>">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-[8px] sm:rounded-[10px] <?= ($activePage ?? '') === 'services' ? 'bg-white' : 'bg-[#f8f8f8]' ?> flex items-center justify-center">
          <i data-lucide="concierge-bell" class="w-4.5 h-4.5 sm:w-5 sm:h-5 <?= ($activePage ?? '') === 'services' ? 'text-saffron' : 'text-charcoal-light' ?>"></i>
        </div>
        <span>Services</span>
      </a>
      <div class="flex flex-col">
        <button onclick="toggleMobileMenuDropdown()" class="w-full text-left <?= ($activePage ?? '') === 'menu-planner' ? $mActiveClass : $mInactiveClass ?> flex items-center justify-between border-none cursor-pointer bg-transparent pr-2">
          <div class="flex items-center gap-3">
            <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-[8px] sm:rounded-[10px] <?= ($activePage ?? '') === 'menu-planner' ? 'bg-white' : 'bg-[#f8f8f8]' ?> flex items-center justify-center">
              <i data-lucide="clipboard-list" class="w-4.5 h-4.5 sm:w-5 sm:h-5 <?= ($activePage ?? '') === 'menu-planner' ? 'text-saffron' : 'text-charcoal-light' ?>"></i>
            </div>
            <span>Menu</span>
          </div>
          <i data-lucide="chevron-down" id="mobile-menu-arrow" class="w-4 h-4 text-charcoal-muted transition-transform"></i>
        </button>
        <div id="mobile-menu-dropdown" class="hidden pl-12 flex flex-col gap-2 mt-2">
          <a href="<?= base_url('menu-planner?category=Breakfast') ?>" class="text-xs text-charcoal-light hover:text-saffron py-1.5 transition-colors">Breakfast</a>
          <a href="<?= base_url('menu-planner?category=Lunch') ?>" class="text-xs text-charcoal-light hover:text-saffron py-1.5 transition-colors">Lunch (Sadhya)</a>
          <a href="<?= base_url('menu-planner?category=Reception') ?>" class="text-xs text-charcoal-light hover:text-saffron py-1.5 transition-colors">Reception</a>
        </div>
      </div>
      <a href="<?= base_url('gallery') ?>" class="<?= ($activePage ?? '') === 'gallery' ? $mActiveClass : $mInactiveClass ?>">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-[8px] sm:rounded-[10px] <?= ($activePage ?? '') === 'gallery' ? 'bg-white' : 'bg-[#f8f8f8]' ?> flex items-center justify-center">
          <i data-lucide="image" class="w-4.5 h-4.5 sm:w-5 sm:h-5 <?= ($activePage ?? '') === 'gallery' ? 'text-saffron' : 'text-charcoal-light' ?>"></i>
        </div>
        <span>Gallery</span>
      </a>
      <a href="<?= base_url('about') ?>" class="<?= ($activePage ?? '') === 'about' ? $mActiveClass : $mInactiveClass ?>">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-[8px] sm:rounded-[10px] <?= ($activePage ?? '') === 'about' ? 'bg-white' : 'bg-[#f8f8f8]' ?> flex items-center justify-center">
          <i data-lucide="users" class="w-4.5 h-4.5 sm:w-5 sm:h-5 <?= ($activePage ?? '') === 'about' ? 'text-saffron' : 'text-charcoal-light' ?>"></i>
        </div>
        <span>About Us</span>
      </a>
      <a href="<?= base_url('contact') ?>" class="<?= ($activePage ?? '') === 'contact' ? $mActiveClass : $mInactiveClass ?>">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-[8px] sm:rounded-[10px] <?= ($activePage ?? '') === 'contact' ? 'bg-white' : 'bg-[#f8f8f8]' ?> flex items-center justify-center">
          <i data-lucide="phone" class="w-4.5 h-4.5 sm:w-5 sm:h-5 <?= ($activePage ?? '') === 'contact' ? 'text-saffron' : 'text-charcoal-light' ?>"></i>
        </div>
        <span>Contact</span>
      </a>

      <a href="<?= base_url('contact') ?>" class="flex items-center justify-center gap-1 sm:gap-2 bg-saffron hover:bg-saffron-dark text-white px-2.5 py-2 sm:py-3.5 rounded-full font-semibold text-[0.62rem] sm:text-[1.05rem] shadow-[0_8px_20px_rgba(224,94,43,0.22)] hover:shadow-[0_10px_24px_rgba(224,94,43,0.3)] hover:-translate-y-0.5 mt-2 sm:mt-[15px] transition-all duration-400">
        <i data-lucide="calendar" class="w-3.5 h-3.5 sm:w-4.5 sm:h-4.5"></i>
        Book Event
      </a>


      <div class="flex justify-center gap-2.5 sm:gap-3.5 mt-auto pt-4 sm:pt-6 border-t border-gray-100">
        <a href="#" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-[#f7f7f7] hover:bg-saffron-light hover:text-saffron text-charcoal-light flex items-center justify-center hover:-translate-y-0.5 transition-all duration-200" aria-label="Instagram">
          <svg width="16" height="16" class="sm:w-[18px] sm:h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
        </a>
        <a href="#" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-[#f7f7f7] hover:bg-saffron-light hover:text-saffron text-charcoal-light flex items-center justify-center hover:-translate-y-0.5 transition-all duration-200" aria-label="Facebook">
          <svg width="16" height="16" class="sm:w-[18px] sm:h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
        </a>
        <a href="#" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-[#f7f7f7] hover:bg-saffron-light hover:text-saffron text-charcoal-light flex items-center justify-center hover:-translate-y-0.5 transition-all duration-200" aria-label="WhatsApp">
          <i data-lucide="message-circle" class="w-4 h-4 sm:w-5 sm:h-5"></i>
        </a>
        <a href="#" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-[#f7f7f7] hover:bg-saffron-light hover:text-saffron text-charcoal-light flex items-center justify-center hover:-translate-y-0.5 transition-all duration-200" aria-label="Mail">
          <i data-lucide="mail" class="w-4 h-4 sm:w-5 sm:h-5"></i>
        </a>
      </div>
    </nav>
  </div>

  <main class="relative z-10">
    <?= $this->renderSection('content') ?>
  </main>

  <!-- Footer -->
  <footer class="bg-gradient-to-br from-[#1c1c1c] to-[#0f0f0f] text-[#a0a0a0] pt-20 pb-10 border-t-3 border-gold relative z-10">
    <div class="max-w-[1200px] mx-auto px-6">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
        <!-- Col 1 -->
        <div>
          <img src="<?= base_url('oncall.png') ?>" alt="On Call Logo" class="h-[60px] w-auto mb-6 block" />
          <p class="text-[0.95rem] text-[#808080] leading-relaxed mb-6">
            Exquisite event management and premium vegetarian catering in South India. We blend quality service with elegance to create unforgettable celebrations.
          </p>
          <div class="flex gap-3.5">
            <a href="#" class="w-9 h-9 rounded-full bg-[#252525] hover:bg-saffron hover:text-white text-[#808080] flex items-center justify-center hover:-translate-y-0.5 transition-all duration-200" aria-label="Facebook">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg>
            </a>
            <a href="#" class="w-9 h-9 rounded-full bg-[#252525] hover:bg-saffron hover:text-white text-[#808080] flex items-center justify-center hover:-translate-y-0.5 transition-all duration-200" aria-label="Instagram">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /></svg>
            </a>
            <a href="#" class="w-9 h-9 rounded-full bg-[#252525] hover:bg-saffron hover:text-white text-[#808080] flex items-center justify-center hover:-translate-y-0.5 transition-all duration-200" aria-label="Youtube">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" /><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" /></svg>
            </a>
          </div>
        </div>

        <!-- Col 2 -->
        <div>
          <h3 class="font-title text-white text-[1.2rem] mb-6 tracking-wide">Quick Links</h3>
          <ul class="flex flex-col gap-3">
            <li><a href="<?= base_url('/') ?>" class="flex items-center gap-1 hover:text-saffron transition-colors duration-200"><i data-lucide="chevron-right" class="w-3.5 h-3.5"></i> Home</a></li>
            <li><a href="<?= base_url('services') ?>" class="flex items-center gap-1 hover:text-saffron transition-colors duration-200"><i data-lucide="chevron-right" class="w-3.5 h-3.5"></i> Services</a></li>
            <li><a href="<?= base_url('menu-planner') ?>" class="flex items-center gap-1 hover:text-saffron transition-colors duration-200"><i data-lucide="chevron-right" class="w-3.5 h-3.5"></i> Menu</a></li>
            <li><a href="<?= base_url('gallery') ?>" class="flex items-center gap-1 hover:text-saffron transition-colors duration-200"><i data-lucide="chevron-right" class="w-3.5 h-3.5"></i> Gallery</a></li>
            <li><a href="<?= base_url('about') ?>" class="flex items-center gap-1 hover:text-saffron transition-colors duration-200"><i data-lucide="chevron-right" class="w-3.5 h-3.5"></i> About Us</a></li>
            <li><a href="<?= base_url('contact') ?>" class="flex items-center gap-1 hover:text-saffron transition-colors duration-200"><i data-lucide="chevron-right" class="w-3.5 h-3.5"></i> Contact</a></li>
          </ul>
        </div>

        <!-- Col 3 -->
        <div>
          <h3 class="font-title text-white text-[1.2rem] mb-6 tracking-wide">Our Services</h3>
          <ul class="flex flex-col gap-3">
            <li><a href="<?= base_url('services') ?>" class="flex items-center gap-1 hover:text-saffron transition-colors duration-200"><i data-lucide="chevron-right" class="w-3.5 h-3.5"></i> Premium Weddings</a></li>
            <li><a href="<?= base_url('services') ?>" class="flex items-center gap-1 hover:text-saffron transition-colors duration-200"><i data-lucide="chevron-right" class="w-3.5 h-3.5"></i> Upanayanam</a></li>
            <li><a href="<?= base_url('services') ?>" class="flex items-center gap-1 hover:text-saffron transition-colors duration-200"><i data-lucide="chevron-right" class="w-3.5 h-3.5"></i> Pure Sattvik Catering</a></li>
            <li><a href="<?= base_url('services') ?>" class="flex items-center gap-1 hover:text-saffron transition-colors duration-200"><i data-lucide="chevron-right" class="w-3.5 h-3.5"></i> Pooja & Homam</a></li>
            <li><a href="<?= base_url('services') ?>" class="flex items-center gap-1 hover:text-saffron transition-colors duration-200"><i data-lucide="chevron-right" class="w-3.5 h-3.5"></i> Seemantham Setup</a></li>
          </ul>
        </div>

        <!-- Col 4 -->
        <div>
          <h3 class="font-title text-white text-[1.2rem] mb-6 tracking-wide">Contact Us</h3>
          <ul class="flex flex-col gap-4">
            <li class="flex items-start gap-3 text-[0.95rem]">
              <i data-lucide="map-pin" class="w-5 h-5 text-saffron mt-0.5 flex-shrink-0"></i>
              <span>"Bharathwa", 7/784-1, L.N. Puram,<br />Palakkad &ndash; 678 005, Kerala</span>
            </li>
            <li class="flex items-start gap-3 text-[0.95rem]">
              <i data-lucide="phone" class="w-5 h-5 text-saffron mt-0.5 flex-shrink-0"></i>
              <span>
                <a href="tel:+919847094284" class="hover:text-saffron transition-colors">+91 98470 94284</a><br />
                <a href="tel:+919846972884" class="hover:text-saffron transition-colors">+91 98469 72884</a><br />
                <a href="tel:+919746922284" class="hover:text-saffron transition-colors">+91 97469 22284</a>
              </span>
            </li>
            <li class="flex items-start gap-3 text-[0.95rem]">
              <i data-lucide="mail" class="w-5 h-5 text-saffron mt-0.5 flex-shrink-0"></i>
              <span>
                <a href="mailto:geekayoncall@gmail.com" class="hover:text-saffron transition-colors">geekayoncall@gmail.com</a><br />
                <a href="https://www.geekayoncall.com" target="_blank" class="hover:text-saffron transition-colors">www.geekayoncall.com</a>
              </span>
            </li>
            <li class="flex items-start gap-3 text-[0.95rem]">
              <i data-lucide="clock" class="w-5 h-5 text-saffron mt-0.5 flex-shrink-0"></i>
              <span>Mon - Sun: 8:00 AM - 9:00 PM</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- Copyright -->
      <div class="flex flex-col sm:flex-row justify-between items-center pt-8 border-t border-[#252525] text-[0.9rem] text-[#707070] gap-4">
        <div>
          &copy; <span id="year">2026</span> On Call &mdash; Quality Self &bull; Rich &amp; Royal. All rights reserved.
        </div>
        <div class="flex items-center gap-2">
          <span class="font-medium text-[#909090]">രുചിഭേദം... രുചിരീതി...</span>
          <span>&bull; Proudly serving South India</span>
        </div>
      </div>
    </div>
  </footer>

  <!-- Scripts -->
  <script>
    // Initialize Lucide Icons
    lucide.createIcons();
    
    // Set current year
    document.getElementById('year').textContent = new Date().getFullYear();



    // Mobile menu dropdown toggle
    window.toggleMobileMenuDropdown = () => {
      const dropdown = document.getElementById('mobile-menu-dropdown');
      const arrow = document.getElementById('mobile-menu-arrow');
      if (dropdown) {
        dropdown.classList.toggle('hidden');
      }
      if (arrow) {
        arrow.classList.toggle('rotate-180');
      }
    };

    // Navbar scroll interaction
    document.addEventListener('DOMContentLoaded', () => {
      const header = document.querySelector('header');
      const logoImg = document.querySelector('.logo-img');
      
      const checkScroll = () => {
        if (window.scrollY > 50) {
          header.classList.add('bg-white/85', 'backdrop-blur-[16px]', 'shadow-sm', 'border-b', 'border-gold/15', 'py-3.5');
          header.classList.remove('py-6');
          logoImg.classList.add('h-10');
          logoImg.classList.remove('h-12');
        } else {
          header.classList.remove('bg-white/85', 'backdrop-blur-[16px]', 'shadow-sm', 'border-b', 'border-gold/15', 'py-3.5');
          header.classList.add('py-6');
          logoImg.classList.add('h-12');
          logoImg.classList.remove('h-10');
        }
      };
      
      window.addEventListener('scroll', checkScroll);
      checkScroll();
      
      // Mobile drawer toggle
      const mobileToggle = document.getElementById('mobile-toggle');
      const mobileDrawer = document.getElementById('mobile-drawer');
      const drawerOverlay = document.getElementById('drawer-overlay');
      const closeBtn = document.getElementById('close-btn');
      
      const openMenu = () => {
        mobileDrawer.classList.remove('translate-x-full');
        drawerOverlay.classList.remove('opacity-0', 'pointer-events-none');
        drawerOverlay.classList.add('opacity-100', 'pointer-events-auto');
      };
      
      const closeMenu = () => {
        mobileDrawer.classList.add('translate-x-full');
        drawerOverlay.classList.add('opacity-0', 'pointer-events-none');
        drawerOverlay.classList.remove('opacity-100', 'pointer-events-auto');
      };
      
      if (mobileToggle) mobileToggle.addEventListener('click', openMenu);
      if (closeBtn) closeBtn.addEventListener('click', closeMenu);
      if (drawerOverlay) drawerOverlay.addEventListener('click', closeMenu);
    });
  </script>
  <?= $this->renderSection('scripts') ?>
</body>
</html>
