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

<?= $this->section('content') ?>
<!-- Banner -->
<section class="page-banner">
  <div class="max-w-[1200px] mx-auto px-6">
    <h1>Our Catering Services</h1>
    <p>Premium Vegetarian Catering for Every Sacred Occasion</p>
  </div>
</section>

<!-- Services Breakdown -->
<section class="py-24 bg-white">
  <div class="max-w-[1200px] mx-auto px-6">
    <div class="flex flex-col gap-32">

      <?php if (!empty($services)): ?>
        <?php foreach ($services as $index => $s): ?>
          <?php 
            $features = json_decode($s['features'] ?? '[]', true) ?: []; 
            $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'));
            $isEven = ($index % 2 === 0);
            
            // 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 || strpos($slug, 'sashtiapthapoorthi') !== false || strpos($slug, 'sathabhishekam') !== false) {
                $contactParam = 'pooja';
            }

            // Extract saffron span from parenthesized titles if present
            $titleText = esc($s['title']);
            if (preg_match('/^(.*?)\s*(\(.*?\))$/', $titleText, $matches)) {
                $titleHtml = esc($matches[1]) . ' <span class="text-saffron text-[1.6rem]">' . esc($matches[2]) . '</span>';
            } else {
                $titleHtml = $titleText;
            }
          ?>
          
          <?php if ($isEven): ?>
            <!-- Left-aligned Text, Right-aligned Image -->
            <div class="grid grid-cols-1 lg:grid-cols-[1.1fr_1fr] gap-12 lg:gap-20 items-center">
              <div class="flex flex-col gap-4.5">
                <span class="text-gold-dark font-semibold tracking-[0.15em] uppercase text-[0.85rem]"><?= esc($s['subtitle']) ?></span>
                <h2 class="font-title text-[2rem] md:text-[2.4rem] leading-tight text-charcoal"><?= $titleHtml ?></h2>
                <p class="text-[1.05rem] text-charcoal-light font-light leading-relaxed">
                  <?= esc($s['description']) ?>
                </p>
                <?php if (!empty($features)): ?>
                  <ul class="grid grid-cols-1 sm:grid-cols-2 gap-4 my-4">
                    <?php foreach ($features as $f): ?>
                      <li class="flex items-center gap-2.5 text-[0.95rem] text-charcoal font-light">
                        <i data-lucide="check" class="text-saffron w-4 h-4 flex-shrink-0"></i> <?= esc($f) ?>
                      </li>
                    <?php endforeach; ?>
                  </ul>
                <?php endif; ?>
                
                <?php if ($slug === 'all-veg-events' || strpos($slug, 'catering') !== false): ?>
                  <div class="flex gap-2.5">
                    <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:-translate-y-0.5 transition-all duration-400">
                      <i data-lucide="utensils-crossed" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
                      Plan Menu
                    </a>
                    <a href="<?= base_url('contact?service=' . esc($contactParam)) ?>" 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">
                      Get Catering Quote
                    </a>
                  </div>
                <?php else: ?>
                  <a href="<?= base_url('contact?service=' . esc($contactParam)) ?>" 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:-translate-y-0.5 self-start transition-all duration-400">
                    Inquire For <?= esc(preg_replace('/\s*\(.*?\)/', '', $s['title'])) ?>
                    <i data-lucide="arrow-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
                  </a>
                <?php endif; ?>
              </div>
              <div class="relative rounded-lg overflow-hidden shadow-lg border-4 border-white aspect-[4/3] w-full min-h-[240px] md:min-h-[350px] bg-cover bg-center hover:scale-[1.03] 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.35)), url('<?= $imageUrl ?>');"></div>
            </div>
          <?php else: ?>
            <!-- Right-aligned Text, Left-aligned Image -->
            <div class="flex flex-col-reverse lg:grid lg:grid-cols-[1fr_1.1fr] gap-12 lg:gap-20 items-center">
              <div class="relative rounded-lg overflow-hidden shadow-lg border-4 border-white aspect-[4/3] w-full min-h-[240px] md:min-h-[350px] bg-cover bg-center hover:scale-[1.03] 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.35)), url('<?= $imageUrl ?>');"></div>
              <div class="flex flex-col gap-4.5">
                <span class="text-gold-dark font-semibold tracking-[0.15em] uppercase text-[0.85rem]"><?= esc($s['subtitle']) ?></span>
                <h2 class="font-title text-[2rem] md:text-[2.4rem] leading-tight text-charcoal"><?= $titleHtml ?></h2>
                <p class="text-[1.05rem] text-charcoal-light font-light leading-relaxed">
                  <?= esc($s['description']) ?>
                </p>
                <?php if (!empty($features)): ?>
                  <ul class="grid grid-cols-1 sm:grid-cols-2 gap-4 my-4">
                    <?php foreach ($features as $f): ?>
                      <li class="flex items-center gap-2.5 text-[0.95rem] text-charcoal font-light">
                        <i data-lucide="check" class="text-saffron w-4 h-4 flex-shrink-0"></i> <?= esc($f) ?>
                      </li>
                    <?php endforeach; ?>
                  </ul>
                <?php endif; ?>
                
                <?php if ($slug === 'all-veg-events' || strpos($slug, 'catering') !== false): ?>
                  <div class="flex gap-2.5">
                    <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:-translate-y-0.5 transition-all duration-400">
                      <i data-lucide="utensils-crossed" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
                      Plan Menu
                    </a>
                    <a href="<?= base_url('contact?service=' . esc($contactParam)) ?>" 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">
                      Get Catering Quote
                    </a>
                  </div>
                <?php else: ?>
                  <a href="<?= base_url('contact?service=' . esc($contactParam)) ?>" 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:-translate-y-0.5 self-start transition-all duration-400">
                    Inquire For <?= esc(preg_replace('/\s*\(.*?\)/', '', $s['title'])) ?>
                    <i data-lucide="arrow-right" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
                  </a>
                <?php endif; ?>
              </div>
            </div>
          <?php endif; ?>
        <?php endforeach; ?>
      <?php else: ?>
        <div class="text-center py-12 text-charcoal-muted">
          <p>No services found.</p>
        </div>
      <?php endif; ?>

    </div>
  </div>
</section>

<!-- Process Workflow Section -->
<section class="py-24 bg-gold-light">
  <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">How We Plan</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 Seamless Event Journey</h2>
      <p class="text-[1.15rem] text-charcoal-light">From the initial consultation call to the final Mangala Aarti, we handle everything with care.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      <!-- Step 1 -->
      <div class="bg-white border border-gold/10 rounded-md p-10 text-center relative shadow-sm hover:shadow-md hover:-translate-y-1 hover:border-gold transition-all duration-400">
        <div class="absolute -top-6 left-1/2 -translate-x-1/2 w-12 h-12 rounded-full bg-saffron text-white flex items-center justify-center font-title text-[1.3rem] shadow-[0_4px_10px_rgba(224,94,43,0.3)]">01</div>
        <h3 class="font-title text-[1.25rem] text-charcoal mt-2.5 mb-3">Traditional Consultation</h3>
        <p class="text-[0.9rem] text-charcoal-light leading-relaxed">
          We meet to understand your gotra details, specific family traditions, guest list, and menu preferences.
        </p>
      </div>
      <!-- Step 2 -->
      <div class="bg-white border border-gold/10 rounded-md p-10 text-center relative shadow-sm hover:shadow-md hover:-translate-y-1 hover:border-gold transition-all duration-400">
        <div class="absolute -top-6 left-1/2 -translate-x-1/2 w-12 h-12 rounded-full bg-saffron text-white flex items-center justify-center font-title text-[1.3rem] shadow-[0_4px_10px_rgba(224,94,43,0.3)]">02</div>
        <h3 class="font-title text-[1.25rem] text-charcoal mt-2.5 mb-3">Custom Design</h3>
        <p class="text-[0.9rem] text-charcoal-light leading-relaxed">
          We present custom floral layout drawings, book the mantapa, and schedule the Shastri/priest team.
        </p>
      </div>
      <!-- Step 3 -->
      <div class="bg-white border border-gold/10 rounded-md p-10 text-center relative shadow-sm hover:shadow-md hover:-translate-y-1 hover:border-gold transition-all duration-400">
        <div class="absolute -top-6 left-1/2 -translate-x-1/2 w-12 h-12 rounded-full bg-saffron text-white flex items-center justify-center font-title text-[1.3rem] shadow-[0_4px_10px_rgba(224,94,43,0.3)]">03</div>
        <h3 class="font-title text-[1.25rem] text-charcoal mt-2.5 mb-3">Menu Selection</h3>
        <p class="text-[0.9rem] text-charcoal-light leading-relaxed">
          Use our interactive Menu to select welcome drinks, main course, and sweets, followed by tasting.
        </p>
      </div>
      <!-- Step 4 -->
      <div class="bg-white border border-gold/10 rounded-md p-10 text-center relative shadow-sm hover:shadow-md hover:-translate-y-1 hover:border-gold transition-all duration-400">
        <div class="absolute -top-6 left-1/2 -translate-x-1/2 w-12 h-12 rounded-full bg-saffron text-white flex items-center justify-center font-title text-[1.3rem] shadow-[0_4px_10px_rgba(224,94,43,0.3)]">04</div>
        <h3 class="font-title text-[1.25rem] text-charcoal mt-2.5 mb-3">Divine Execution</h3>
        <p class="text-[0.9rem] text-charcoal-light leading-relaxed">
          Our Brahmin event managers supervise the setup, coordinate the shastras, and serve hot Sattvik food.
        </p>
      </div>
    </div>
  </div>
</section>
<?= $this->endSection() ?>
