@extends('dining.layouts.public')

@section('title', 'Member Offers - The LaLiT Dining Club')

@section('styles')
  <style>
    /* Member Offers Page Specific Styles */
    .offers-container {
      max-width: 1400px;
      margin: 120px auto 60px;
      padding: 0 2rem;
    }

    .offers-header {
      text-align: center;
      margin-bottom: 4rem;
    }

    .offers-header h1 {
      font-family: "Figtree", sans-serif;
      font-size: 2.5rem;
      color: #1a1a1a;
      margin-bottom: 0.5rem;
    }

    .offers-header p {
      font-size: 1.1rem;
      color: #555;
      max-width: 700px;
      margin: 0 auto;
    }

    .offers-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
      gap: 2.5rem;
      margin-bottom: 4rem;
    }

    .offer-card {
      background: #e8e8e8;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .offer-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .offer-image {
      width: 100%;
      height: 320px;
      overflow: hidden;
      position: relative;
    }

    .offer-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }

    .offer-card:hover .offer-image img {
      transform: scale(1.05);
    }

    .offer-content {
      background: #e8e8e8;
      color: #000;
      padding: 2.5rem 2rem;
    }

    .offer-location {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
      font-size: 0.9rem;
      color: #000;
    }

    .offer-location i {
      color: #d42427;
    }

    .offer-title {
      font-family: "Figtree", sans-serif;
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 1.5rem;
      letter-spacing: 1px;
      line-height: 1.3;
    }

    .offer-description {
      font-size: 1rem;
      line-height: 1.7;
      margin-bottom: 2rem;
      color: #000;
    }

    .learn-more-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      background: #d42427;
      color: #fff;
      padding: 0.9rem 2rem;
      border: none;
      border-radius: 30px;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s;
      text-decoration: none;
      font-size: 0.95rem;
    }

    .learn-more-btn:hover {
      background: #c49b2e;
      transform: translateX(5px);
    }

    .learn-more-btn i {
      font-size: 1.1rem;
      transition: transform 0.3s;
    }

    .learn-more-btn:hover i {
      transform: translateX(5px);
    }

    @media (max-width: 768px) {
      .offers-container {
        margin-top: 100px;
      }

      .offers-header h1 {
        font-size: 2rem;
      }

      .offers-grid {
        grid-template-columns: 1fr;
      }

      .offer-image {
        height: 250px;
      }

      .offer-content {
        padding: 2rem 1.5rem;
      }

      .offer-title {
        font-size: 1.5rem;
      }
    }
  </style>
@endsection

@section('content')
<!-- Page Banner -->
  <section class="page-banner">
    <div class="page-banner-container">
      <div class="page-banner-content">
        <h1>MEMBER<br><em>OFFERS</em></h1>
        <p>Exclusive privileges and special offers designed just for you.</p>
      </div>
      <div class="page-banner-image">
        <img src="{{ asset('assets/images/offers.jpg') }}" alt="Member Offers">
      </div>
    </div>
  </section>

  <!-- Offers Content -->
  <div class="offers-container">
    <div class="offers-header">
      <h1>Exclusive Member Offers</h1>
      <p>Discover exceptional dining experiences and special promotions exclusively for LaLiT Dining members</p>
    </div>

    <div class="offers-grid">
      @forelse($memberOffers as $offer)
      <!-- Offer Card -->
      <div class="offer-card">
        <div class="offer-image">
          <img src="{{ $offer->image_url }}" alt="{{ $offer->title }}">
        </div>
        <div class="offer-content">
          @if($offer->location)
          <div class="offer-location">
            <i class="fas fa-map-marker-alt"></i>
            <span>{{ $offer->location }}</span>
          </div>
          @endif
          <h2 class="offer-title">{{ strtoupper($offer->title) }}</h2>
          @if($offer->discount_text)
          <div class="offer-discount" style="color: #d42427; font-weight: 600; margin-bottom: 1rem; font-size: 1.1rem;">
            {{ $offer->discount_text }}
          </div>
          @endif
          <p class="offer-description">{{ $offer->description }}</p>
          @if($offer->learn_more_link)
          <a href="{{ $offer->learn_more_link }}" class="learn-more-btn" target="_blank">
            LEARN MORE
            <i class="fas fa-arrow-right"></i>
          </a>
          @endif
        </div>
      </div>
      @empty
      <div class="col-12 text-center py-5">
        <p style="font-size: 1.2rem; color: #666;">No member offers available at the moment. Please check back later.</p>
      </div>
      @endforelse
    </div>
  </div>
@endsection