

<?php $__env->startSection('title', isset($platform) ? $platform . ' Apps' : (isset($category) ? $category->name : 'Discover Apps')); ?>

<?php $__env->startPush('styles'); ?>
<style>
    .hero-section {
        position: relative;
        padding: clamp(2rem, 8vw, 5rem) 1.5rem;
        background: var(--bg-card);
        border-radius: 2rem;
        margin-bottom: 3rem;
        overflow: hidden;
        border: 1px solid var(--border-color);
        transition: var(--transition);
    }

    [data-theme="light"] .hero-section {
        background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
    }

    .hero-section::after {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 80%;
        height: 200%;
        background: radial-gradient(circle, rgba(0, 102, 255, 0.03) 0%, transparent 70%);
        z-index: 0;
        pointer-events: none;
    }

    /* Animated Icon Disc Visualization */
    .icon-disc-container {
        position: relative;
        width: 100%;
        height: 380px;
        display: flex;
        align-items: center;
        justify-content: center;
        perspective: 1200px;
    }

    .disc-base {
        position: relative;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transform-style: preserve-3d;
        transform: rotateX(60deg) rotateZ(0deg);
        animation: rotateDisc 25s linear infinite;
    }

    @keyframes rotateDisc {
        from { transform: rotateX(60deg) rotateZ(0deg); }
        to { transform: rotateX(60deg) rotateZ(360deg); }
    }

    .orbit-track {
        position: absolute;
        width: 260px;
        height: 260px;
        border: 2px dashed var(--primary-blue);
        border-radius: 50%;
        opacity: 0.15;
    }

    .disc-item-wrapper {
        position: absolute;
        width: 60px;
        height: 60px;
        transform-style: preserve-3d;
    }

    .disc-app-icon {
        width: 60px;
        height: 60px;
        border-radius: 1.1rem;
        padding: 4px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        overflow: hidden;
        /* Counter-rotate to stay upright */
        animation: stayUpright 25s linear infinite, floatIcon 4s ease-in-out infinite;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    @keyframes stayUpright {
        from { transform: rotateZ(0deg) rotateX(-60deg); }
        to { transform: rotateZ(-360deg) rotateX(-60deg); }
    }

    @keyframes floatIcon {
        0%, 100% { margin-top: 0; }
        50% { margin-top: -15px; }
    }

    .disc-app-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0.9rem;
    }

    .center-core {
        position: absolute;
        width: 100px;
        height: 100px;
        background: var(--primary-blue);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.8rem;
        box-shadow: 0 0 40px rgba(0, 102, 255, 0.4);
        z-index: 10;
        /* Counter-tilt from the 60deg parent */
        transform: rotateX(-60deg);
        animation: pulseCore 3s infinite;
    }

    @keyframes pulseCore {
        0%, 100% { transform: rotateX(-60deg) scale(1); box-shadow: 0 0 30px rgba(0, 102, 255, 0.3); }
        50% { transform: rotateX(-60deg) scale(1.1); box-shadow: 0 0 50px rgba(0, 102, 255, 0.5); }
    }

    /* Grid System */
    .app-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
        gap: 1.5rem;
        width: 100%;
    }

    /* Modern App Card */
    .app-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 1.5rem;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        transition: var(--transition);
        height: 100%;
        position: relative;
    }

    .app-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--card-hover-shadow);
        border-color: rgba(0, 102, 255, 0.2);
    }

    /* Icon Styling */
    .app-icon-container {
        width: 72px;
        height: 72px;
        border-radius: 1.1rem;
        overflow: hidden;
        background: var(--bg-body);
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .app-icon-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Text & Badges */
    .platform-tag {
        font-size: 0.65rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.25rem 0.6rem;
        border-radius: 2rem;
        display: inline-flex;
        align-items: center;
    }

    .tag-android { background: #ecfdf5; color: #059669; }
    .tag-pc { background: #eff6ff; color: #2563eb; }
    .tag-ios { background: var(--bg-body); color: var(--text-main); border: 1px solid var(--border-color); }
    .tag-macos { background: #f5f3ff; color: #5b21b6; }

    [data-theme="dark"] .tag-android { background: rgba(5, 150, 105, 0.1); color: #10b981; }
    [data-theme="dark"] .tag-pc { background: rgba(37, 99, 235, 0.1); color: #60a5fa; }
    [data-theme="dark"] .tag-macos { background: rgba(91, 33, 182, 0.15); color: #c4b5fd; }

    .app-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text-main);
        margin-top: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .app-category {
        font-size: 0.85rem;
        color: var(--text-muted);
        font-weight: 500;
    }

    .app-description-wrapper {
        margin: 1.25rem 0;
    }

    .app-description {
        font-size: 0.9rem;
        color: var(--text-muted);
        line-height: 1.5;
        white-space: pre-line;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: 4.5em; /* Show 3 lines by default */
        transition: max-height 0.2s ease;
    }

    .app-description.expanded {
        display: block;
        -webkit-line-clamp: unset;
        max-height: none;
    }

    .description-toggle {
        border: none;
        background: transparent;
        color: var(--primary-blue);
        font-size: 0.88rem;
        font-weight: 700;
        padding: 0;
        cursor: pointer;
        margin-top: 0.35rem;
    }

    .description-toggle:hover,
    .description-toggle:focus {
        text-decoration: underline;
    }

    /* Stats bar */
    .app-stats-bar {
        background: var(--bg-body);
        border-radius: 1rem;
        padding: 0.75rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.25rem;
        transition: var(--transition);
    }

    .stat-item {
        display: flex;
        flex-direction: column;
    }

    .stat-label {
        font-size: 0.65rem;
        text-transform: uppercase;
        color: var(--text-muted);
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .stat-value {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-main);
    }

    /* Category Navigation */
    .scroll-nav {
        display: flex;
        overflow-x: auto;
        gap: 0.75rem;
        padding-bottom: 1rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .scroll-nav::-webkit-scrollbar { display: none; }

    .nav-pill-custom {
        white-space: nowrap;
        padding: 0.6rem 1.25rem;
        border-radius: 100px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        color: var(--text-muted);
        font-weight: 600;
        font-size: 0.9rem;
        transition: all 0.2s;
        text-decoration: none;
    }

    .nav-pill-custom:hover {
        border-color: var(--primary-blue);
        color: var(--text-main);
    }

    .nav-pill-custom.active {
        background: var(--primary-blue);
        border-color: var(--primary-blue);
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25);
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
        .hero-section { border-radius: 1.5rem; }
        .app-grid { gap: 1rem; }
        .app-card { padding: 1.25rem; }
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<!-- Adaptive Hero -->
<div class="hero-section shadow-sm">
    <div class="row align-items-center g-4">
        <div class="col-lg-7 text-center text-lg-start position-relative" style="z-index: 1;">
            <span class="badge rounded-pill px-3 py-2 mb-3" style="background: rgba(0,102,255,0.08); color: #0066ff; font-weight: 700;">
                <i class="bi bi-rocket-takeoff-fill me-1"></i>
                <?php if(isset($platform)): ?> <?php echo e($platform); ?> Platform <?php else: ?> Official App Store <?php endif; ?>
            </span>
            <h1 class="mb-3">
                <?php if(isset($platform)): ?>
                    The Best Apps for <span style="color: #0066ff"><?php echo e($platform); ?></span>
                <?php elseif(isset($category)): ?>
                    Apps in <span style="color: #0066ff"><?php echo e($category->name); ?></span>
                <?php else: ?>
                    Discover Your Next <span style="color: #0066ff">Favorite</span> App
                <?php endif; ?>
            </h1>
            <p class="lead text-secondary mb-4 mx-auto mx-lg-0" style="max-width: 550px;">
                Secure downloads for all your devices. Browse the latest high-performance applications carefully selected for you.
            </p>
        </div>

        <div class="col-lg-5 d-none d-lg-block">
            <div class="icon-disc-container">
                <!-- Center Core -->
                <div class="center-core">
                    <i class="bi bi-box-seam-fill"></i>
                </div>

                <!-- Orbiting Disc -->
                <div class="disc-base">
                    <div class="orbit-track"></div>

                    <?php
                        $heroApps = $applications->whereNotNull('icon_path')->take(6);
                        $count = $heroApps->count();
                    ?>

                    <?php $__currentLoopData = $heroApps; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $app): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php
                            $angle = ($index / max(1, $count)) * 360;
                            $radius = 130;
                            $x = $radius * cos(deg2rad($angle));
                            $y = $radius * sin(deg2rad($angle));
                        ?>
                        <div class="disc-item-wrapper" style="transform: translate(<?php echo e($x); ?>px, <?php echo e($y); ?>px);">
                            <div class="disc-app-icon" style="animation-delay: -<?php echo e($index * 0.7); ?>s;">
                                <img src="<?php echo e($app->icon_url ?? 'https://via.placeholder.com/72'); ?>" alt="<?php echo e($app->name); ?>" onerror="this.onerror=null;this.src='https://via.placeholder.com/72?text=App';">
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                    
                    <?php for($i = $count; $i < 4; $i++): ?>
                         <?php
                            $angle = ($i / 4) * 360;
                            $x = 130 * cos(deg2rad($angle));
                            $y = 130 * sin(deg2rad($angle));
                        ?>
                        <div class="disc-item-wrapper" style="transform: translate(<?php echo e($x); ?>px, <?php echo e($y); ?>px);">
                            <div class="disc-app-icon opacity-25">
                                <i class="bi bi-app text-muted"></i>
                            </div>
                        </div>
                    <?php endfor; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Category Filter -->
<div class="mb-5">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <h5 class="fw-800 mb-0">Browse Categories</h5>
    </div>
    <div class="scroll-nav">
        <a href="<?php echo e(route('home')); ?>" class="nav-pill-custom <?php echo e(empty($category) ? 'active' : ''); ?>">All Applications</a>
        <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <a href="<?php echo e(route('category.show', $cat)); ?>" class="nav-pill-custom <?php echo e((isset($category) && $category->id === $cat->id) ? 'active' : ''); ?>">
                <?php echo e($cat->name); ?>

                <span class="badge rounded-pill bg-light text-dark ms-1 small opacity-50"><?php echo e($cat->applications_count); ?></span>
            </a>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>
</div>

<!-- App Listings -->
<div class="d-flex align-items-center justify-content-between mb-4">
    <h4 class="fw-800 mb-0">
        <?php if(isset($platform)): ?>
            <?php echo e($platform); ?> Apps
        <?php elseif(isset($category)): ?>
            <?php echo e($category->name); ?>

        <?php else: ?>
            Featured Apps
        <?php endif; ?>
    </h4>
    <span class="text-muted small fw-600"><?php echo e(count($applications)); ?> Apps Available</span>
</div>

<div class="app-grid">
    <?php $__empty_1 = true; $__currentLoopData = $applications; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $app): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
        <div class="app-card shadow-sm">
            <div class="d-flex align-items-start gap-3">
                <div class="app-icon-container">
                    <img src="<?php echo e($app->icon_url ?? 'https://via.placeholder.com/72'); ?>" alt="<?php echo e($app->name); ?>" loading="lazy" onerror="this.onerror=null;this.src='https://via.placeholder.com/72?text=App';">
                </div>
                <div class="flex-grow-1 min-w-0">
                    <span class="platform-tag <?php echo e($app->platform == 'Android' ? 'tag-android' : ($app->platform == 'PC' ? 'tag-pc' : ($app->platform == 'macOS' ? 'tag-macos' : 'tag-ios'))); ?>">
                        <i class="bi bi-<?php echo e($app->platform == 'Android' ? 'android2' : ($app->platform == 'PC' ? 'windows' : ($app->platform == 'macOS' ? 'laptop' : 'apple'))); ?> me-1"></i>
                        <?php echo e($app->platform); ?>

                    </span>
                    <h5 class="app-title" title="<?php echo e($app->name); ?>"><?php echo e($app->name); ?></h5>
                    <div class="app-category"><?php echo e($app->category->name ?? 'Uncategorized'); ?></div>
                </div>
            </div>

            <div class="app-description-wrapper">
                <p class="app-description"><?php echo nl2br(e($app->description)); ?></p>
                <button type="button" class="description-toggle" aria-expanded="false">Show more</button>
            </div>

            <div class="app-stats-bar">
                <div class="stat-item">
                    <span class="stat-label">Downloads</span>
                    <span class="stat-value text-primary"><i class="bi bi-download me-1"></i><?php echo e(number_format($app->downloads)); ?></span>
                </div>
                <div class="stat-item text-end">
                    <span class="stat-label">File Size</span>
                    <span class="stat-value"><?php echo e($app->download_size_human ?? 'Unknown'); ?></span>
                </div>
            </div>

            <div class="mt-auto">
                <?php if($app->files->count() > 1): ?>
                    <div class="dropdown">
                        <button class="btn btn-primary w-100 py-2 rounded-pill shadow-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            Download Now
                        </button>
                        <ul class="dropdown-menu w-100 shadow-lg border-0 mt-2 rounded-4">
                            <li class="dropdown-header small text-uppercase fw-bold text-muted">Select Architecture</li>
                            <?php $__currentLoopData = $app->files; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $file): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li>
                                    <a class="dropdown-item d-flex justify-content-between align-items-center py-2 px-3" href="<?php echo e(route('download', ['id' => $app->id, 'file_id' => $file->id])); ?>">
                                        <div>
                                            <div class="fw-bold"><?php echo e($file->architecture); ?></div>
                                            <div class="small text-muted"><?php echo e($file->file_size_human); ?></div>
                                        </div>
                                        <i class="bi bi-download text-primary"></i>
                                    </a>
                                </li>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </ul>
                    </div>
                <?php else: ?>
                    <?php
                        $firstFile = $app->files->first();
                        $downloadUrl = $firstFile
                            ? route('download', ['id' => $app->id, 'file_id' => $firstFile->id])
                            : route('download', ['id' => $app->id]);
                    ?>
                    <a href="<?php echo e($downloadUrl); ?>" class="btn btn-primary w-100 py-2 rounded-pill shadow-sm">
                        Download Now
                    </a>
                <?php endif; ?>
            </div>
        </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
        <div class="text-center py-5 w-100">
            <div class="p-5 border rounded-4 glass-card shadow-sm">
                <i class="bi bi-inbox text-muted display-4"></i>
                <h5 class="mt-3 text-muted">No applications found</h5>
                <p class="text-muted mb-0">Try checking another category or platform.</p>
            </div>
        </div>
    <?php endif; ?>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.app-description-wrapper').forEach(function (wrapper) {
            var description = wrapper.querySelector('.app-description');
            var toggle = wrapper.querySelector('.description-toggle');
            if (!description || !toggle) return;

            var isOverflowing = description.scrollHeight > description.clientHeight + 2;
            if (!isOverflowing) {
                toggle.style.display = 'none';
                return;
            }

            toggle.addEventListener('click', function () {
                var expanded = description.classList.toggle('expanded');
                toggle.textContent = expanded ? 'Show less' : 'Show more';
                toggle.setAttribute('aria-expanded', expanded ? 'true' : 'false');
            });
        });
    });
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\App-Store\resources\views/public/home.blade.php ENDPATH**/ ?>