<?php $__env->startSection('content'); ?>
    <style>
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-10px); }
        }

        @keyframes slideFromBehind {
            from {
                opacity: 0;
                transform: translateY(100px) scale(0.8);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .word-enter {
            animation: fadeIn 0.2s forwards;
        }

        .word-exit {
            animation: fadeOut 0.15s forwards;
        }

        .rearrange-line {
            opacity: 0;
            transform: translateY(20px);
        }

        .rearrange-active {
            animation: fadeIn 0.6s forwards;
        }

        .image-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            z-index: -1;
        }

        .brand-image {
            max-width: 120px;
            max-height: 120px;
            border-radius: 50%;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        .image-appear {
            animation: slideFromBehind 0.8s forwards;
            animation-delay: 0.2s;
        }

        .container {
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* Full-screen overlay (black) */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            opacity: 1;
            transition: opacity 0.8s ease;
        }

        .overlay-fade-out {
            opacity: 0;
            pointer-events: none;
        }
    </style>

    <!-- Full-screen overlay for animation -->
    <div id="animation-overlay" class="overlay">
        <div class="container max-w-2xl px-4">
            <div id="text-container" class="text-center relative z-10">
                <span id="current-word" class="text-3xl md:text-4xl font-bold text-white"></span>
            </div>

            <div id="image-container" class="image-container">
                <img src="<?php echo e(asset('images/logo.webp')); ?>" alt="ISHAQ Logo" class="brand-image">
            </div>
        </div>
    </div>
<!-- Header Section -->
<!-- Sleek & Compact Shop Status Alert -->
<div class="max-w-sm mx-auto mb-4 fade-in text-center">
    <?php if($shopStatus === 'Shop is Open'): ?>
        <div class="flex flex-col items-center justify-center p-2 text-green-800 border border-green-300 rounded-md bg-green-50" role="alert">
            <i class="fas fa-door-open text-green-500 text-xl mb-1"></i>
            <span class="text-sm font-medium">
                <?php echo e($shopStatus); ?> /
                <span class="urdu-text"><?php echo e($shopStatusUrdu); ?></span>
            </span>
        </div>
    <?php else: ?>
        <div class="flex flex-col items-center justify-center p-2 text-red-800 border border-red-300 rounded-md bg-red-50" role="alert">
            <i class="fas fa-door-closed text-red-500 text-xl mb-1"></i>
            <span class="text-sm font-medium">
                <?php echo e($shopStatus); ?> /
                <span class="urdu-text"><?php echo e($shopStatusUrdu); ?></span>
            </span>
            <?php if($nextOpening): ?>
                <span class="text-xs text-red-600 mt-1">
                    • Next:
                    <?php if($nextOpening['day'] === 'Today'): ?>
                        Today <?php echo e($nextOpening['time']); ?>

                    <?php else: ?>
                        <?php echo e($nextOpening['day']); ?> <?php echo e($nextOpening['time']); ?>

                    <?php endif; ?>
                </span>
            <?php endif; ?>
        </div>
    <?php endif; ?>
</div>




<!-- Info Cards Grid -->
<!-- Info Cards Grid -->
<div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 mb-12">

    <!-- Messages Card -->
    <a href="<?php echo e(route('messages.index')); ?>"
       class="card-hover relative rounded-2xl p-6 shadow-md border text-center fade-in bg-yellow-400">
        <div class="flex items-center justify-center h-14 w-14 sm:h-16 sm:w-16 rounded-lg bg-white/20 mx-auto mb-3">
            <i class="fas fa-comments text-white text-xl sm:text-2xl"></i>
        </div>
        <h3 class="font-bold text-base sm:text-lg text-white mb-1">Messages</h3>
        <p class="text-white/90 text-xs sm:text-sm hidden sm:block">View your latest messages</p>
        <span id="notificationDot" class="absolute top-4 right-4 w-3 h-3 bg-red-500 rounded-full hidden animate-pulse"></span>
    </a>

    <!-- Locations Card -->
    <a href="<?php echo e(route('info.locations')); ?>"
       class="card-hover rounded-2xl p-6 shadow-md border text-center fade-in bg-pink-400" style="animation-delay: 0.05s">
        <div class="flex items-center justify-center h-14 w-14 sm:h-16 sm:w-16 rounded-lg bg-white/20 mx-auto mb-3">
            <i class="fas fa-map-marker-alt text-white text-xl sm:text-2xl"></i>
        </div>
        <h3 class="font-bold text-base sm:text-lg text-white mb-1">Locations</h3>
        <p class="text-white/90 text-xs sm:text-sm hidden sm:block">Find store locations</p>
    </a>

    <!-- Track Card -->
    <a href="<?php echo e(route('search.index')); ?>"
       class="card-hover rounded-2xl p-6 shadow-md border text-center fade-in bg-purple-500" style="animation-delay: 0.1s">
        <div class="flex items-center justify-center h-14 w-14 sm:h-16 sm:w-16 rounded-lg bg-white/20 mx-auto mb-3">
            <i class="fas fa-search-location text-white text-xl sm:text-2xl"></i>
        </div>
        <h3 class="font-bold text-base sm:text-lg text-white mb-1">Track</h3>
        <p class="text-white/90 text-xs sm:text-sm hidden sm:block">Track your order status</p>
    </a>

    <!-- Prices Card -->
    <a href="<?php echo e(route('info.pricing')); ?>"
       class="card-hover rounded-2xl p-6 shadow-md border text-center fade-in bg-green-500" style="animation-delay: 0.15s">
        <div class="flex items-center justify-center h-14 w-14 sm:h-16 sm:w-16 rounded-lg bg-white/20 mx-auto mb-3">
            <i class="fas fa-tags text-white text-xl sm:text-2xl"></i>
        </div>
        <h3 class="font-bold text-base sm:text-lg text-white mb-1">Prices</h3>
        <p class="text-white/90 text-xs sm:text-sm hidden sm:block">View pricing details</p>
    </a>

    <!-- Timing Card -->
    <a href="<?php echo e(route('info.timings')); ?>"
       class="card-hover rounded-2xl p-6 shadow-md border text-center fade-in bg-indigo-500" style="animation-delay: 0.2s">
        <div class="flex items-center justify-center h-14 w-14 sm:h-16 sm:w-16 rounded-lg bg-white/20 mx-auto mb-3">
            <i class="fas fa-clock text-white text-xl sm:text-2xl"></i>
        </div>
        <h3 class="font-bold text-base sm:text-lg text-white mb-1">Timing</h3>
        <p class="text-white/90 text-xs sm:text-sm hidden sm:block">Business hours</p>
    </a>

    <!-- Services Card -->
    <a href="<?php echo e(route('info.services')); ?>"
       class="card-hover rounded-2xl p-6 shadow-md border text-center fade-in bg-blue-500" style="animation-delay: 0.25s">
        <div class="flex items-center justify-center h-14 w-14 sm:h-16 sm:w-16 rounded-lg bg-white/20 mx-auto mb-3">
            <i class="fas fa-concierge-bell text-white text-xl sm:text-2xl"></i>
        </div>
        <h3 class="font-bold text-base sm:text-lg text-white mb-1">Services</h3>
        <p class="text-white/90 text-xs sm:text-sm hidden sm:block">What we offer</p>
    </a>
</div>

   <script>
document.addEventListener('DOMContentLoaded', function() {
    // Use sessionStorage instead of localStorage → auto clears when tab/browser closed
    const textContainer = document.getElementById('text-container');
    const currentWordElement = document.getElementById('current-word');
    const imageContainer = document.getElementById('image-container');
    const animationOverlay = document.getElementById('animation-overlay');

    const fullText = "ISHAQ Tailors & Fabrics Crafting Elegance, Stitch by Stitch";
    const words = fullText.split(' ');

    const hasPlayed = sessionStorage.getItem('introPlayed');

    if (hasPlayed) {
        animationOverlay.style.display = 'none';
        return;
    }
    sessionStorage.setItem('introPlayed', 'true');

    let currentIndex = 0;

    function showNextWord() {
        if (currentIndex < words.length) {
            currentWordElement.classList.add('word-exit');
            setTimeout(() => {
                currentWordElement.textContent = words[currentIndex];
                currentWordElement.classList.remove('word-exit');
                currentWordElement.classList.add('word-enter');
                currentIndex++;
                if (currentIndex < words.length) {
                    setTimeout(showNextWord, 300);
                } else {
                    setTimeout(rearrangeText, 700);
                }
            }, 150);
        }
    }

    function rearrangeText() {
        textContainer.innerHTML = '';
        const topLine = document.createElement('div');
        topLine.className = 'rearrange-line text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-4';
        topLine.textContent = "ISHAQ Tailors & Fabrics";

        const bottomLine = document.createElement('div');
        bottomLine.className = 'rearrange-line text-lg sm:text-xl md:text-2xl text-gray-300 italic';
        bottomLine.textContent = "Crafting Elegance, Stitch by Stitch";

        textContainer.appendChild(topLine);
        textContainer.appendChild(bottomLine);

        setTimeout(() => {
            topLine.classList.add('rearrange-active');
            bottomLine.classList.add('rearrange-active');
            bottomLine.style.animationDelay = '0.15s';
            setTimeout(showImage, 600);
        }, 100);
    }

    function showImage() {
        imageContainer.style.top = '-90px';
        imageContainer.style.zIndex = '10';
        imageContainer.classList.add('image-appear');
        setTimeout(fadeOutOverlay, 2000);
    }

    function fadeOutOverlay() {
        animationOverlay.classList.add('overlay-fade-out');
        setTimeout(() => {
            animationOverlay.style.display = 'none';
        }, 800);
    }

    showNextWord();
});
</script>

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

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragonlatest\www\tailortrack\resources\views/welcome.blade.php ENDPATH**/ ?>