@extends('layouts.pages')

@section('title', 'Double Loyalty Points Offer - The LaLiT Loyalty')

@section('meta_description', 'Earn double loyalty points on eligible spends across stays, dining, The LaLiT Boulangerie,
Kitty Su, Salon, and Spa.')
@section('meta_keywords', 'loyalty points, double points, hotel offers, The LaLiT offers')

@section('content')
<div class="container py-5">
  <!-- Header Section -->
  <section class="text-center mb-5 pt-lg-3 pt-md-4">
    <h1 class="display-4 fw-bold mb-3">Stay Special Offer</h1>
    <div class="header-title-line mx-auto mb-4" style="width: 100px; height: 3px; background: #000;"></div>

    <!-- Offer Validity Badge -->
    <div class="mb-4">
      <span class="badge bg-dark px-4 py-2 fs-6">
        <i class="fas fa-calendar-alt me-2"></i>Valid till- 31st January 2026
      </span>
    </div>

    <!-- Featured Image -->
    {{-- <div class="offer-image-container text-center my-5">
      <img
        src="https://cdn.jumeirah.com/-/mediadh/dh/hospitality/jumeirah/global-pages/jone-home/jone-home_collect-points-with-every-stay.jpg?h=1280&w=960"
        alt="Double Loyalty Points Offer" class="img-fluid rounded shadow-lg"
        style="max-height: 500px; width: 100%; object-fit: cover;">
    </div>
  </section> --}}

  <!-- Offer Description -->
  <section class="offer-description mb-5">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="card border-0 shadow-sm">
          <div class="card-body p-4 p-md-5">
            <div class="mb-4">
              <h2 class="h3 mb-4 fw-bold">Offer Details</h2>
              <p class="lead text-muted">
                During the promotional period, members of <strong>The LaLiT Loyalty</strong> can enjoy <strong>up to 30% off</strong> on
                 stays at select properties when booking directly through the designated links. Please refer to the terms 
                 below for eligibility, booking requirements, and offer applicability.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Terms & Conditions -->
  <section class="terms-conditions mb-5">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="card border-0 shadow-sm bg-light">
          <div class="card-body p-4 p-md-5">
            <h2 class="h3 mb-4 fw-bold">
              <i class="fas fa-file-contract me-2"></i>Terms & Conditions
            </h2>
            <ul class="list-unstyled terms-list">
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>This is a limited time offer. Booking and stay period is until <strong>January 31, 2026</strong>.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>Offer valid only at The LaLiT Mumbai, The LaLiT Bangalore, The LaLiT Great Eastern Kolkata, and The LaLiT Golf & Spa Resort Goa.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>Booking can be done only via the booking links for respective participating properties shared over Email/Whatsapp</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>Offer cannot be combined with any other promotion, discount, package, or special rate.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>Valid exclusively on direct bookings.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>Not applicable on December 24, 2025, December 31, 2025 and other designated long-weekend dates.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>Discounts are subject to availability and may vary by hotel, room category, and date.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>Rates are dynamic and may change based on occupancy and demand.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>A valid government-issued ID is required at check-in.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>Standard hotel cancellation, amendment, and deposit policies apply as per the selected rate plan.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>The LaLiT Suri Hospitality Group reserves the right to revise, modify, or withdraw the offer at any time without prior notice.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>Standard T&Cs of The LaLiT Loyalty program apply. Refer to program T&Cs section on this website.</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Double Loyalty Points Offer -->
  <section class="double-points-offer mb-5">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="card border-0 shadow-sm">
          <div class="card-body p-4 p-md-5">
            <h2 class="h3 mb-4 fw-bold">
              <i class="fas fa-star me-2"></i>Double Loyalty Points Offer
            </h2>
            <p class="lead mb-4">
              During the promotional period, members of <strong>The LaLiT Loyalty</strong> can earn <strong>double loyalty points</strong> on eligible spends made across stays, dining, The LaLiT Boulangerie, Kitty Su, Salon, and Spa.
            </p>
            
            <!-- Benefits Grid -->
            <div class="row g-3 mb-4">
              <div class="col-md-4 col-sm-6">
                <div class="benefit-item p-3 text-center border rounded h-100">
                  <i class="fas fa-hotel fa-2x mb-3 text-dark"></i>
                  <h5 class="h6 fw-bold">Hotel Stays</h5>
                  <p class="small text-muted mb-0">2x points on all stays</p>
                </div>
              </div>
              <div class="col-md-4 col-sm-6">
                <div class="benefit-item p-3 text-center border rounded h-100">
                  <i class="fas fa-utensils fa-2x mb-3 text-dark"></i>
                  <h5 class="h6 fw-bold">Dining</h5>
                  <p class="small text-muted mb-0">2x points on all dining</p>
                </div>
              </div>
              <div class="col-md-4 col-sm-6">
                <div class="benefit-item p-3 text-center border rounded h-100">
                  <i class="fas fa-bread-slice fa-2x mb-3 text-dark"></i>
                  <h5 class="h6 fw-bold">Boulangerie</h5>
                  <p class="small text-muted mb-0">2x points at LaLiT Boulangerie</p>
                </div>
              </div>
              <div class="col-md-4 col-sm-6">
                <div class="benefit-item p-3 text-center border rounded h-100">
                  <i class="fas fa-music fa-2x mb-3 text-dark"></i>
                  <h5 class="h6 fw-bold">Kitty Su</h5>
                  <p class="small text-muted mb-0">2x points at Kitty Su</p>
                </div>
              </div>
              <div class="col-md-4 col-sm-6">
                <div class="benefit-item p-3 text-center border rounded h-100">
                  <i class="fas fa-cut fa-2x mb-3 text-dark"></i>
                  <h5 class="h6 fw-bold">Salon</h5>
                  <p class="small text-muted mb-0">2x points on salon services</p>
                </div>
              </div>
              <div class="col-md-4 col-sm-6">
                <div class="benefit-item p-3 text-center border rounded h-100">
                  <i class="fas fa-spa fa-2x mb-3 text-dark"></i>
                  <h5 class="h6 fw-bold">Spa</h5>
                  <p class="small text-muted mb-0">2x points on spa treatments</p>
                </div>
              </div>
            </div>
            
            <h4 class="h5 mb-3 fw-bold">Terms & Conditions:</h4>
            <ul class="list-unstyled terms-list">
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>This offer is valid only from <strong>16th November, 2025 to 31st January, 2026</strong>.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>Transactions must be paid directly (no redemptions or third-party vouchers).</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>Valid across all participating The LaLiT Hotels, Palaces & Resorts.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>Cannot be combined with any other promotional or discount offers.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>Points awarded under this campaign are governed by standard loyalty program rules for expiry and redemption.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>No retroactive claims or partial redemptions permitted.</span>
              </li>
              <li class="mb-3 d-flex">
                <span class="me-3 text-dark"><i class="fas fa-check-circle"></i></span>
                <span>The LaLiT reserves the right to amend, suspend, or withdraw the offer without prior notice.</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Call to Action -->
  <section class="cta-section text-center py-5">
    {{-- <div class="row justify-content-center">
      <div class="col-lg-8">
        <h3 class="h2 mb-4">Ready to Start Earning Double Points?</h3>
        <p class="lead mb-4">Join The LaLiT Loyalty today and make the most of this exclusive offer!</p>
        <div class="d-flex flex-column flex-md-row gap-3 align-items-center justify-content-center">
          <a href="{{ route('home') }}" class="btn btn-lg px-5 py-3"
            style="background-color: #000; color: #fff; border-color: #000;">
            <i class="fas fa-user-plus me-2"></i>Join Now
          </a>
          <a href="{{ route('login') }}" class="btn btn-outline-dark btn-lg px-5 py-3">
            <i class="fas fa-sign-in-alt me-2"></i>Sign In
          </a>
        </div>
      </div>
    </div>
  </section> --}}
</div>

<style>
  .header-title-line {
    transition: width 0.3s ease;
  }

  .benefit-item {
    transition: all 0.3s ease;
    background: white;
  }

  .benefit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  }

  .terms-list li {
    padding-left: 0;
    line-height: 1.8;
  }

  .terms-list i {
    font-size: 1.2rem;
  }

  .offer-image-container img {
    transition: transform 0.3s ease;
  }

  .offer-image-container img:hover {
    transform: scale(1.02);
  }

  .btn {
    transition: all 0.3s ease;
  }

  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }

  @media (max-width: 768px) {
    .display-4 {
      font-size: 2rem;
    }

    .offer-image-container img {
      max-height: 300px;
    }
  }
</style>
@endsection