@extends('layouts.membership')

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

@section('content')
<div class="container px-4 py-5 dashboard-wrapper">
  <!-- Header Section -->
  <div class="row mb-5">
    <div class="col-12 text-center loyalty-header-label">
      <h1 class="display-6 mb-4">
        How to Exchange Points
      </h1>
      <div class="line"></div>
      <p class="exchange-points-subtitle mt-4">
        Discover a variety of ways to use your LaLiT Loyalty Points, ensuring your next visit to<br>
        The LaLiT is even more memorable than the last. Whether it's a luxury suite escape, romantic<br>
        dinner for two, or that much needed chauffeur car ride, all of it is possible with your Points.
      </p>
    </div>
  </div>

  <!-- Main Categories Section -->
  <div class="row g-4 mb-5">
    <!-- Stay Card -->
    <div class="col-12 col-md-4">
      <div class="exchange-category-card h-100" style="background-image: url('https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');">
        <div class="exchange-category-overlay">
          <div class="exchange-category-content">
            <h3 class="exchange-category-title">Stay</h3>
            <p class="exchange-category-description">
              Whether it's a beach-filled weekend in the Middle East, a couple of days connecting with the cultures of Europe or an exotic getaway in the Asia Pacific, enhance your holiday with the use of your LaLiT Loyalty Points.
            </p>
            <button class="btn exchange-category-btn">DISCOVER STAY</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Dine Card -->
    <div class="col-12 col-md-4">
      <div class="exchange-category-card h-100" style="background-image: url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');">
        <div class="exchange-category-overlay">
          <div class="exchange-category-content">
            <h3 class="exchange-category-title">Dine</h3>
            <p class="exchange-category-description">
              From stylish sky-high dining with stunning city-light views to relaxed beach-side gourmet experiences, our choice of award-winning restaurants will impress even the most discerning of diner.
            </p>
            <button class="btn exchange-category-btn">DISCOVER DINE</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Lifestyle Card -->
    <div class="col-12 col-md-4">
      <div class="exchange-category-card h-100" style="background-image: url('https://images.unsplash.com/photo-1540979388789-6cee28a1cdc9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');">
        <div class="exchange-category-overlay">
          <div class="exchange-category-content">
            <h3 class="exchange-category-title">Lifestyle</h3>
            <p class="exchange-category-description">
              However you enjoy your spare time, reward yourself with a luxurious lifestyle experience with The LaLiT. Whether you prefer to relax or energise, shop or spa, choose from a range of exciting options.
            </p>
            <button class="btn exchange-category-btn">DISCOVER LIFESTYLE</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Additional Content Section -->
  <div class="row g-4">
    <!-- Partners Section -->
    <div class="col-12 col-md-6">
      <div class="exchange-info-card h-100" style="background-image: url('https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');">
        <div class="exchange-info-overlay">
          <div class="exchange-info-content">
            <h3 class="exchange-info-title">Partners</h3>
            <p class="exchange-info-description">
              Whether you are spending time at home, or travelling around the world, living the LaLiT life wherever you are has never been easier, with the array of unparalleled rewards handed to you by the network of LaLiT Partners.
            </p>
            <button class="btn exchange-info-btn">DISCOVER PARTNERS</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Pay with Points Section -->
    <div class="col-12 col-md-6">
      <div class="exchange-info-card h-100" style="background-image: url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');">
        <div class="exchange-info-overlay">
          <div class="exchange-info-content">
            <h3 class="exchange-info-title">Pay with Points</h3>
            <p class="exchange-info-description">
              You can now pay your bill instantly with LaLiT Loyalty Points whenever you stay or dine with us.
            </p>
            <button class="btn exchange-info-btn">DISCOVER PAY WITH POINTS</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection