<?php $__env->startSection('title', $reward->meta_title ?? $reward->title . ' - The LaLiT Rewards'); ?>

<?php $__env->startSection('nav-portfolio', 'active'); ?>

<?php $__env->startSection('hero'); ?>
<!-- Hero Banner with Reward Image -->
<div class="hero-banner position-relative">
    <div class="hero-image">
        <?php if($reward->banner_image): ?>
            <img src="<?php echo e(asset('storage/' . $reward->banner_image)); ?>" 
                 class="w-100" alt="<?php echo e($reward->banner_image_alt ?? $reward->title); ?>" 
                 style="height: 38.563rem; object-fit: cover;">
        <?php elseif($reward->featured_image): ?>
            <img src="<?php echo e(asset('storage/' . $reward->featured_image)); ?>" 
                 class="w-100" alt="<?php echo e($reward->featured_image_alt ?? $reward->title); ?>" 
                 style="height: 38.563rem; object-fit: cover;">
        <?php else: ?>
            <img src="<?php echo e(asset('assets/images/hero-bg.avif')); ?>"
                 class="w-100" alt="Hero Background" style="height: 38.563rem; object-fit: cover;">
        <?php endif; ?>
    </div>
    <!-- Hero Overlay -->
    <div class="hero-overlay position-absolute top-0 start-0 w-100 h-100"
         style="background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.6) 100%);">
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('page_nav_items'); ?>
<li class="nav-item">
    <a class="nav-link px-3" href="#overview">Overview</a>
</li>
<li class="nav-item">
    <a class="nav-link px-3" href="#details">Details</a>
</li>
<li class="nav-item">
    <a class="nav-link px-3" href="#terms">Terms & Conditions</a>
</li>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<!-- Reward Title Section -->
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-10 text-center">
            <h2 class="fw-bold"><?php echo e($reward->title); ?></h2>
        </div>
    </div>
</div>
<!-- Reward Content Section -->
<section id="overview" class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <!-- Reward Content -->
                <div class="reward-content bg-white shadow-sm rounded p-4 mb-5">
                    <?php if($reward->excerpt): ?>
                        <div class="lead mb-4 fs-5 fw-semibold text-center">
                            <?php echo e($reward->excerpt); ?>

                        </div>
                        <hr class="my-4">
                    <?php endif; ?>
                    
                    <div id="details" class="reward-details">
                        <?php echo $reward->content; ?>

                    </div>                
                </div>
            </div>
        </div>
    </div>
</section>




<?php $__env->stopSection(); ?>

<?php $__env->startPush('styles'); ?>
<style>
    /* Custom styles for reward page */
    .reward-content {
        line-height: 1.8;
    }
    
    .reward-details img {
        max-width: 100%;
        height: auto;
        margin: 1.5rem 0;
    }
    
    .header-title-line {
        height: 3px;
        width: 5.875rem;
        background: #c6aa76;
        margin: 0 auto;
    }
    
    .btn-outline-gold {
        border: 2px solid #c6aa76;
        color: #c6aa76;
    }
    
    .btn-outline-gold:hover {
        background-color: #c6aa76;
        color: white;
    }
    
    .ct-btn {
        display: inline-block;
        text-decoration: none;
        padding: 0.5rem 1.5rem;
        font-weight: 600;
        border-radius: 0;
        transition: all 0.3s;
        background-color: #c6aa76;
        color: white;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.875rem;
    }
      .ct-btn:hover {
        background-color: #b09762;
        color: white;
        transform: translateY(-3px);
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const toggleButton = document.getElementById('toggleTerms');
    const termsPreview = document.getElementById('termsPreview');
    const termsFullContent = document.getElementById('termsFullContent');
    const seeMoreText = document.getElementById('seeMoreText');
    const seeLessText = document.getElementById('seeLessText');
    const chevronIcon = document.getElementById('chevronIcon');
    
    toggleButton.addEventListener('click', function() {
        termsPreview.classList.toggle('d-none');
        termsFullContent.classList.toggle('d-none');
        seeMoreText.classList.toggle('d-none');
        seeLessText.classList.toggle('d-none');
        
        // Rotate chevron icon
        if (chevronIcon) {
            if (termsFullContent.classList.contains('d-none')) {
                chevronIcon.classList.remove('fa-chevron-up');
                chevronIcon.classList.add('fa-chevron-down');
            } else {
                chevronIcon.classList.remove('fa-chevron-down');
                chevronIcon.classList.add('fa-chevron-up');
            }
        }
        
        // Smooth scroll to terms section if expanded
        if (!termsFullContent.classList.contains('d-none')) {
            setTimeout(() => {
                termsFullContent.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 100);
        }
    });
});
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.pages', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/tlshs/public_html/thelalitloyalty.com/resources/views/rewards.blade.php ENDPATH**/ ?>