@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">
    {!! $page->content ?? '' !!}
  </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