<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>
<!-- Hero Section -->
<section class="min-h-screen flex items-center pt-[90px] pb-24 overflow-hidden border-b-[3px] border-gold" style="
        background-image: url('<?= base_url('images/background.jpg') ?>');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    ">
  <div class="max-w-[1200px] mx-auto px-6 w-full grid grid-cols-1 lg:grid-cols-[1.2fr_0.8fr] gap-12 lg:gap-16 items-center pt-20">
    <!-- Content -->
    <div class="flex flex-col items-center lg:items-start text-center lg:text-left">
      <span class="inline-block text-gold font-semibold text-[0.9rem] tracking-[0.3em] uppercase mb-5">Authentic &bull; Traditional &bull; Premium</span>
      <h1 class="font-title text-[1.85rem] sm:text-[2.6rem] lg:text-[4.2rem] leading-[1.1] text-charcoal mb-6">
        Where Brahmin Tradition Meets <span class="bg-gradient-to-r from-gold to-[#ffc542] bg-clip-text text-transparent inline-block">Modern Luxury</span>
      </h1>
      <p class="text-[0.92rem] sm:text-[1.1rem] lg:text-[1.25rem] text-charcoal-light font-light leading-relaxed max-w-[600px] mb-10">
        South India's premium event planner and vegetarian caterer, specializing in sacred Weddings, Upanayanam, Seemantham, and Pooja rituals.
      </p>
      <div class="grid grid-cols-2 sm:flex sm:flex-row gap-2 sm:gap-4 w-full sm:w-auto justify-center lg:justify-start">
        <a href="<?= base_url('menu-planner') ?>" class="inline-flex items-center justify-center gap-1 sm:gap-2 bg-saffron hover:bg-saffron-dark text-white px-2.5 py-2 sm:px-7 sm:py-3.5 rounded-full font-medium text-[0.62rem] sm: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="utensils-crossed" class="w-3.5 h-3.5 sm:w-4.5 sm:h-4.5"></i>
          Plan Feast Menu
        </a>
        <a href="<?= base_url('services') ?>" class="inline-flex items-center justify-center gap-1 sm:gap-2 bg-transparent text-gold-dark hover:bg-gold-light hover:text-gold-dark border border-gold px-2.5 py-2 sm:px-7 sm:py-3.5 rounded-full font-medium text-[0.62rem] sm:text-[0.95rem] tracking-[0.05em] uppercase hover:-translate-y-0.5 transition-all duration-400">
          Explore Services
        </a>
      </div>
    </div>
    
    <!-- Image Visual -->
    <div class="flex justify-center items-center relative animate-float">
      <div class="relative rounded-lg overflow-hidden shadow-[0_30px_60px_rgba(0,0,0,0.4),0_0_40px_rgba(201,156,51,0.15)] border-4 border-white aspect-[6/6] w-full max-w-[800px] rotate-2 hover:rotate-0 hover:scale-[1.03] transition-all duration-400">
        <img src="<?= base_url('images/banner-oncall.jpg') ?>" alt="Sacred Brahmin Ceremony" class="w-full h-full object-cover block" />
        <div class="absolute inset-[15px] border border-white/30 rounded-[18px] pointer-events-none"></div>
        
      </div>
    </div>
  </div>
</section>

<!-- Stats Section -->
<section class="-mt-14 relative z-20">
  <div class="max-w-[1200px] mx-auto px-6">
    <div class="grid grid-cols-4 gap-1.5 sm:gap-4 md:gap-6 bg-white/88 backdrop-blur-[20px] rounded-md shadow-[0_20px_50px_rgba(168,126,36,0.12)] border border-gold/22 p-2.5 sm:p-6 md:p-9 text-center hover:scale-[1.01] hover:border-gold hover:shadow-[0_25px_60px_rgba(168,126,36,0.18)] transition-all duration-400" style="background:#fff">
      <!-- Stat 1 -->
      <div class="relative after:content-[''] after:absolute after:right-0 after:top-[15%] after:h-[70%] after:w-[1px] after:bg-gold/20">
        <div class="font-title text-[1.1rem] sm:text-[1.8rem] md:text-[2.8rem] text-saffron leading-none mb-1">25+</div>
        <div class="text-[0.52rem] sm:text-[0.72rem] md:text-[0.9rem] uppercase text-charcoal-muted tracking-normal sm:tracking-[0.05em] md:tracking-[0.1rem] font-semibold">Years of Heritage</div>
      </div>
      <!-- Stat 2 -->
      <div class="relative after:content-[''] after:absolute after:right-0 after:top-[15%] after:h-[70%] after:w-[1px] after:bg-gold/20">
        <div class="font-title text-[1.1rem] sm:text-[1.8rem] md:text-[2.8rem] text-saffron leading-none mb-1">500+</div>
        <div class="text-[0.52rem] sm:text-[0.72rem] md:text-[0.9rem] uppercase text-charcoal-muted tracking-normal sm:tracking-[0.05em] md:tracking-[0.1rem] font-semibold">Events</div>
      </div>
      <!-- Stat 3 -->
      <div class="relative after:content-[''] after:absolute after:right-0 after:top-[15%] after:h-[70%] after:w-[1px] after:bg-gold/20">
        <div class="font-title text-[1.1rem] sm:text-[1.8rem] md:text-[2.8rem] text-saffron leading-none mb-1">100%</div>
        <div class="text-[0.52rem] sm:text-[0.72rem] md:text-[0.9rem] uppercase text-charcoal-muted tracking-normal sm:tracking-[0.05em] md:tracking-[0.1rem] font-semibold">Sattvik Kitchen</div>
      </div>
      <!-- Stat 4 -->
      <div>
        <div class="font-title text-[1.1rem] sm:text-[1.8rem] md:text-[2.8rem] text-saffron leading-none mb-1">1000+</div>
        <div class="text-[0.52rem] sm:text-[0.72rem] md:text-[0.9rem] uppercase text-charcoal-muted tracking-normal sm:tracking-[0.05em] md:tracking-[0.1rem] font-semibold">Caterers</div>
      </div>
    </div>
  </div>
</section>

<!-- Heritage Intro Section -->
<section class="bg-gold-light/85 backdrop-blur-[12px] py-24 border-b border-gold/10">
  <div class="max-w-[1200px] mx-auto px-6 grid grid-cols-1 lg:grid-cols-[1.2fr_1fr] gap-12 lg:gap-16 items-center">
    <div>
      <span class="block text-saffron font-semibold tracking-[0.15em] uppercase text-[0.85rem] mb-2.5">Welcome to On Call</span>
      <h2 class="font-title text-[2.1rem] md:text-[2.8rem] leading-tight text-charcoal mb-6">Preserving Sacred Rituals with Absolute Perfection</h2>
      <p class="text-[1.05rem] text-charcoal-light font-light leading-relaxed mb-5">
        We curate extraordinary experiences that harmoniously blend revered Brahmin culture with upscale event management. Whether you follow Madhwa, Smartha, or Sri Vaishnava traditions, our experienced family of event planners ensures every rite is completed in strict accordance with the Shastras.
      </p>
      <p class="text-[1.05rem] text-charcoal-light font-light leading-relaxed mb-8">
        From choosing prestigious kalyana mantapas and designing traditional floral backdrops, to coordinating respected priests and managing detailed guest hospitality, On Call provides a completely stress-free celebration.
      </p>
      <ul class="flex flex-col gap-3.5 mb-8">
        <li class="flex items-center gap-3 text-charcoal font-medium text-[1.05rem]">
          <i data-lucide="check" class="text-saffron w-5 h-5 flex-shrink-0"></i>
          <span>End-to-end wedding, thread ceremony, and Pooja management</span>
        </li>
        <li class="flex items-center gap-3 text-charcoal font-medium text-[1.05rem]">
          <i data-lucide="check" class="text-saffron w-5 h-5 flex-shrink-0"></i>
          <span>Dedicated team of traditional cooks using premium organic ingredients</span>
        </li>
        <li class="flex items-center gap-3 text-charcoal font-medium text-[1.05rem]">
          <i data-lucide="check" class="text-saffron w-5 h-5 flex-shrink-0"></i>
          <span>Exclusively managed by catering &amp; event experts in South India</span>
        </li>
      </ul>
      <a href="<?= base_url('about') ?>" class="inline-flex items-center gap-1 sm:gap-2 bg-saffron hover:bg-saffron-dark text-white px-2.5 py-2 sm:px-7 sm:py-3.5 rounded-full font-medium text-[0.62rem] sm: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">
        Learn Our Story
        <i data-lucide="arrow-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
      </a>
    </div>

    <div class="relative rounded-lg overflow-hidden shadow-lg border-4 border-white aspect-[4/5] min-h-[350px] md:min-h-[450px] bg-cover bg-center hover:-translate-y-1 hover:shadow-2xl transition-all duration-400" style="background-image: linear-gradient(rgba(26,26,26,0.1), rgba(26,26,26,0.3)), url('<?= base_url('images/sadhya.jpeg') ?>');">
    </div>
  </div>
</section>

<!-- Services Categories Section -->
<section class="py-24 bg-white/85 backdrop-blur-[12px]">
  <div class="max-w-[1200px] mx-auto px-6">
    <div class="max-w-[700px] mx-auto text-center mb-16">
      <span class="inline-block text-gold-dark font-semibold text-[0.85rem] uppercase tracking-[0.2em] mb-3">Specialized Offerings</span>
      <h2 class="font-title text-[1.85rem] md:text-[2.8rem] leading-tight text-charcoal mb-4 relative pb-5 after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-20 after:h-[2px] after:bg-gradient-to-r after:from-transparent after:via-gold after:to-transparent">Our Traditional Services</h2>
      <p class="text-[1.15rem] text-charcoal-light">Every ceremony is a holy milestone. We ensure it is planned with devotion, elegance, and pristine detail.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="services-grid">
      <?php if (!empty($services)): ?>
        <?php foreach ($services as $index => $s): ?>
          <?php 
            $slug = strtolower(trim(preg_replace('/[^a-zA-Z0-9]+/', '-', str_replace(' Catering', '', $s['title'])), '-'));
            $imageUrl = esc(filter_var($s['image_path'] ?? '', FILTER_VALIDATE_URL) ? $s['image_path'] : base_url($s['image_path'] ?? 'images/service-wedding.png'));
            
            // Determine contact parameter
            $contactParam = 'Others';
            if (strpos($slug, 'wedding') !== false || strpos($slug, 'reception') !== false) {
                $contactParam = 'wedding';
            } elseif (strpos($slug, 'upanayanam') !== false) {
                $contactParam = 'upanayanam';
            } elseif (strpos($slug, 'catering') !== false || strpos($slug, 'all-veg') !== false) {
                $contactParam = 'catering';
            } elseif (strpos($slug, 'pooja') !== false || strpos($slug, 'homam') !== false) {
                $contactParam = 'pooja';
            }
          ?>
          <div class="service-card <?= $index >= 3 ? 'hidden hidden-service opacity-0 translate-y-4' : '' ?> bg-white border border-gold/15 rounded-md overflow-hidden shadow-sm hover:shadow-xl hover:-translate-y-1.5 transition-all duration-500 flex flex-col group">
            <div class="relative overflow-hidden aspect-[16/10]">
              <img src="<?= $imageUrl ?>" alt="<?= esc($s['title']) ?>" class="w-full h-full object-cover group-hover:scale-105 transition-all duration-500">
              <div class="absolute top-4 left-4 bg-saffron/90 text-white text-[0.7rem] font-semibold tracking-[0.15em] uppercase px-3 py-1 rounded-full shadow-sm">
                <?= esc($s['subtitle']) ?>
              </div>
            </div>
            
            <div class="p-6 sm:p-8 flex flex-col flex-grow">
              <h3 class="font-title text-[1.4rem] text-charcoal mb-3 group-hover:text-saffron transition-colors duration-300"><?= esc(preg_replace('/\s*\(.*?\)/', '', $s['title'])) ?></h3>
              <p class="text-[0.95rem] text-charcoal-light font-light leading-relaxed mb-6 flex-grow line-clamp-3">
                <?= esc($s['description']) ?>
              </p>
              
              <div class="flex items-center justify-between mt-auto pt-4 border-t border-gold/10">
                <a href="<?= base_url('services') ?>" class="inline-flex items-center gap-1 text-[0.85rem] uppercase text-gold-dark font-semibold tracking-[0.1em] hover:text-saffron transition-all duration-200">
                  Read More <i data-lucide="chevron-right" class="w-3.5 h-3.5 group-hover:translate-x-0.5 transition-all"></i>
                </a>
                <a href="<?= base_url('contact?service=' . esc($contactParam)) ?>" class="text-[0.85rem] text-saffron hover:text-saffron-dark font-medium tracking-[0.05em] uppercase">
                  Inquire
                </a>
              </div>
            </div>
          </div>
        <?php endforeach; ?>
      <?php else: ?>
        <div class="col-span-full text-center py-12 text-charcoal-muted">
          <p>No services found.</p>
        </div>
      <?php endif; ?>
    </div>

    <?php if (!empty($services) && count($services) > 3): ?>
      <div class="flex justify-center mt-12">
        <button id="show-more-btn" class="inline-flex items-center gap-2 bg-transparent text-gold-dark hover:bg-gold-light hover:text-gold-dark border border-gold px-8 py-3.5 rounded-full font-medium text-[0.95rem] tracking-[0.05em] uppercase hover:-translate-y-0.5 transition-all duration-400 cursor-pointer" data-expanded="false">
          <span>Show More Services</span>
          <i data-lucide="chevron-down" class="w-4 h-4 transition-transform duration-300" id="show-more-icon"></i>
        </button>
      </div>
    <?php endif; ?>

    <!-- Interactive Catering Planner Callout -->
    <div class="bg-gradient-to-br from-charcoal to-[#2a2a2a] text-white p-10 md:p-20 rounded-lg border-t-3 border-gold mt-20 relative overflow-hidden shadow-lg">
      <div class="absolute -top-1/2 -right-1/5 w-[500px] h-[500px] bg-[radial-gradient(circle,rgba(201,156,51,0.08)_0%,transparent_70%)] pointer-events-none"></div>
      <div class="grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-12 items-center relative z-10">
        <div>
          <h3 class="font-title text-[2rem] md:text-[2.5rem] text-white mb-4">Design Your Traditional Sattvik Menu</h3>
          <p class="text-[#c0c0c0] text-[1.1rem] leading-relaxed mb-6 font-light">
            Select from our extensive library of traditional dishes—including welcome drinks, main course items, and legendary sweets like Mysore Pak and Obbattu—and receive an instant preliminary quote estimate!
          </p>
          <div class="flex flex-col sm:flex-row gap-6 mb-2">
            <span class="flex items-center gap-2.5 text-[0.95rem] text-gold-light">
              <i data-lucide="check" class="text-gold w-4 h-4"></i> 100% Garlic & Onion-Free Options
            </span>
            <span class="flex items-center gap-2.5 text-[0.95rem] text-gold-light">
              <i data-lucide="check" class="text-gold w-4 h-4"></i> Experienced Brahmin Cooks
            </span>
            <span class="flex items-center gap-2.5 text-[0.95rem] text-gold-light">
              <i data-lucide="check" class="text-gold w-4 h-4"></i> Fresh Organic Ingredients
            </span>
          </div>
        </div>
        <div class="flex lg:justify-end">
          <a href="<?= base_url('menu-planner') ?>" class="inline-flex items-center gap-1 sm:gap-2 bg-gold hover:bg-gold-dark text-charcoal px-2.5 py-2 sm:px-7 sm:py-3.5 rounded-full font-medium text-[0.62rem] sm:text-[0.95rem] tracking-[0.05em] uppercase shadow-[0_4px_14px_rgba(201,156,51,0.25)] hover:-translate-y-0.5 transition-all duration-400">
            Launch Menu
            <i data-lucide="arrow-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Testimonials Section -->
<section class="py-24 bg-cream/85 backdrop-blur-[12px] relative overflow-hidden">
  <div class="max-w-[1200px] mx-auto px-6">
    <div class="max-w-[700px] mx-auto text-center mb-16">
      <span class="inline-block text-gold-dark font-semibold text-[0.85rem] uppercase tracking-[0.2em] mb-3">Client Stories</span>
      <h2 class="font-title text-[1.85rem] md:text-[2.8rem] leading-tight text-charcoal mb-4 relative pb-5 after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-20 after:h-[2px] after:bg-gradient-to-r after:from-transparent after:via-gold after:to-transparent">Trusted by Brahmin Families</h2>
      <p class="text-[1.15rem] text-charcoal-light">Read what our happy families say about our dedication to ceremony rituals and culinary excellence.</p>
    </div>

    <div class="max-w-[800px] mx-auto relative px-10 text-center">
      <div class="transition-all duration-400">
        <i data-lucide="quote" class="text-gold opacity-25 mx-auto mb-6 w-12 h-12"></i>
        <blockquote id="testimonial-quote" class="font-title text-[1.25rem] md:text-[1.8rem] text-charcoal leading-snug mb-8 italic">
          "We hosted our son's Upanayanam with On Call. The decor was authentic, the priests were extremely scholarly, and the traditional feast served on banana leaves was praised by all our relatives. Truly a seamless experience!"
        </blockquote>
        <div id="testimonial-author" class="text-[1.1rem] font-semibold text-saffron mb-1">
          Venkatesh Prasad
        </div>
        <div id="testimonial-role" class="text-[0.85rem] text-charcoal-muted uppercase tracking-[0.1em]">
          Palakkad, Kerala
        </div>
      </div>

      <div class="flex justify-center gap-3 mt-10" id="slider-dots">
        <button class="dot w-2.5 h-2.5 rounded-full bg-saffron scale-125 border-none cursor-pointer p-0 transition-all duration-200" aria-label="Go to testimonial 1" data-index="0"></button>
        <button class="dot w-2.5 h-2.5 rounded-full bg-gold/30 border-none cursor-pointer p-0 transition-all duration-200" aria-label="Go to testimonial 2" data-index="1"></button>
        <button class="dot w-2.5 h-2.5 rounded-full bg-gold/30 border-none cursor-pointer p-0 transition-all duration-200" aria-label="Go to testimonial 3" data-index="2"></button>
      </div>
    </div>
  </div>
</section>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
  // Testimonials slider script
  document.addEventListener('DOMContentLoaded', () => {
    const testimonials = [
      {
        quote: "We hosted our son's Upanayanam with On Call. The decor was authentic, the priests were extremely scholarly, and the traditional feast served on banana leaves was praised by all our relatives. Truly a seamless experience!",
        author: "Venkatesh Prasad",
        role: "Palakkad, Kerala"
      },
      {
        quote: "Managing a traditional Madhwa wedding is complex, but On Call took care of every ritual with absolute precision. Their catering (especially the Obbattu and Mysore Pak) was spectacular. Highly recommend!",
        author: "Radha & Srinivasan",
        role: "Coimbatore, Tamil Nadu"
      },
      {
        quote: "Incredible attention to Brahmin tradition. Every detail, from the selection of the Shastris to the pure Sattvik catering ingredients, was managed perfectly. It felt like a wedding planned by family members.",
        author: "Ananthakrishnan Iyer",
        role: "Chennai, Tamil Nadu"
      }
    ];

    let activeIndex = 0;
    const quoteEl = document.getElementById('testimonial-quote');
    const authorEl = document.getElementById('testimonial-author');
    const roleEl = document.getElementById('testimonial-role');
    const dots = document.querySelectorAll('#slider-dots .dot');

    const updateTestimonial = (index) => {
      activeIndex = index;
      quoteEl.textContent = `"${testimonials[index].quote}"`;
      authorEl.textContent = testimonials[index].author;
      roleEl.textContent = testimonials[index].role;

      dots.forEach((dot, idx) => {
        if (idx === index) {
          dot.classList.remove('bg-gold/30');
          dot.classList.add('bg-saffron', 'scale-125');
        } else {
          dot.classList.remove('bg-saffron', 'scale-125');
          dot.classList.add('bg-gold/30');
        }
      });
    };

    // Dot click listeners
    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => {
        updateTestimonial(idx);
        resetInterval();
      });
    });

    // Auto cycle
    let intervalId = setInterval(() => {
      const nextIndex = (activeIndex + 1) % testimonials.length;
      updateTestimonial(nextIndex);
    }, 6000);

    const resetInterval = () => {
      clearInterval(intervalId);
      intervalId = setInterval(() => {
        const nextIndex = (activeIndex + 1) % testimonials.length;
        updateTestimonial(nextIndex);
      }, 6000);
    };

    // Show More Services toggle script
    const showMoreBtn = document.getElementById('show-more-btn');
    if (showMoreBtn) {
      const hiddenCards = document.querySelectorAll('.service-card.hidden-service');
      const showMoreIcon = document.getElementById('show-more-icon');
      
      showMoreBtn.addEventListener('click', () => {
        const isExpanded = showMoreBtn.getAttribute('data-expanded') === 'true';
        
        hiddenCards.forEach((card, idx) => {
          if (isExpanded) {
            // Fade out and translate down
            card.classList.add('opacity-0', 'translate-y-4');
            // Hide after transition completes
            setTimeout(() => {
              card.classList.add('hidden');
            }, 500);
          } else {
            // Unhide first
            card.classList.remove('hidden');
            // Animate in with a staggered delay
            setTimeout(() => {
              card.classList.remove('opacity-0', 'translate-y-4');
            }, 50 * idx);
          }
        });
        
        if (isExpanded) {
          showMoreBtn.querySelector('span').textContent = 'Show More Services';
          if (showMoreIcon) showMoreIcon.style.transform = 'rotate(0deg)';
          showMoreBtn.setAttribute('data-expanded', 'false');
        } else {
          showMoreBtn.querySelector('span').textContent = 'Show Less Services';
          if (showMoreIcon) showMoreIcon.style.transform = 'rotate(180deg)';
          showMoreBtn.setAttribute('data-expanded', 'true');
        }
      });
    }
  });
</script>
<?= $this->endSection() ?>
