@extends('layouts.public')

@section('title', 'Subscription Benefits - The LaLiT Dining Club')

@section('content')
  <!-- Page Banner -->
  <section class="page-banner">
    <div class="page-banner-container">
      <div class="page-banner-content">
        <h1>CURATED<br><em>BENEFITS</em></h1>
        <p>Membership tiers designed to enhance every experience.</p>
      </div>
      <div class="page-banner-image">
        <img src="{{ asset('assets/images/benefits.jpg') }}" alt="Benefits">
      </div>
    </div>
  </section>

  <!-- Benefits Section -->
  <section class="benefits-section">
    <div class="benefits-header">
      <h1>Exclusive Membership Benefits</h1>
      <p>Discover the extraordinary privileges that come with your membership</p>
    </div>

    <div class="benefits-table">
      <div class="table-header">
        <h2>Subscription Benefits</h2>
      </div>

      <div class="table-content">
        <!-- Food & Beverage Discounts -->
        <div class="table-column">
          <div class="column-header">
            <h3>Food & Beverage Discounts</h3>
          </div>
          <ul class="benefit-list">
            <li>20% discount for 1 guest</li>
            <li>50% discount for 2 guests</li>
            <li>33% discount for 3 guests</li>
            <li>25% discount for 4 guests</li>
            <li>20% discount for more than 5 guests</li>
            <li>20% discount on alcoholic & non-alcoholic beverages</li>
          </ul>
        </div>

        <!-- One Time Vouchers -->
        <div class="table-column">
          <div class="column-header">
            <h3>One Time Vouchers</h3>
          </div>
          <ul class="benefit-list">
            <li>One Complimentary Buffet for Two</li>
            <li>One Complimentary Cake (1 kg)</li>
            <li>One Complimentary House Wine Bottle</li>
            <li>One Complimentary Dessert while dining-Chef's Special</li>
            <li>One 50% off on a meal for up to 10 people</li>
          </ul>
        </div>

        <!-- Experiential Benefits -->
        <div class="table-column">
          <div class="column-header">
            <h3>Experiential Benefits</h3>
          </div>
          <ul class="benefit-list">
            <li>Exclusive access to member-only dining events & festivals</li>
            <li>Chef meet and greet - on request</li>
            <li>Invitations to curated culinary experiences</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
@endsection