<?php
    $showExpanded = $showExpanded ?? false;
    $heroId = 'hero-section-' . uniqid();
?>

<div class="bg-white dark:bg-gray-900 text-black dark:text-gray-100 mb-32 transition-colors duration-300">
    <div class="relative">
        <!-- Main Hero Content -->
        <div class="px-8 py-32 sm:px-12 sm:py-48">
            <div class="max-w-2xl mx-auto text-center">
                <h1 class="text-2xl sm:text-3xl font-light tracking-widest mb-16 leading-relaxed">
                    instruments
                </h1>
                
                <!-- Action Buttons -->
                <div class="space-y-8 mb-24">
                    <?php if(auth()->guard()->check()): ?>
                        <div>
                            <a href="<?php echo e(route('my-items.create')); ?>" 
                               class="inline-block text-sm tracking-widest hover:opacity-60 transition-opacity">
                                list
                            </a>
                        </div>
                        <div>
                            <a href="<?php echo e(route('items.index')); ?>" 
                               class="inline-block text-sm tracking-widest hover:opacity-60 transition-opacity">
                                browse
                            </a>
                        </div>
                    <?php else: ?>
                        <div>
                            <a href="<?php echo e(route('register')); ?>" 
                               class="inline-block text-sm tracking-widest hover:opacity-60 transition-opacity">
                                join
                            </a>
                        </div>
                        <div>
                            <a href="<?php echo e(route('login')); ?>" 
                               class="inline-block text-sm tracking-widest hover:opacity-60 transition-opacity">
                                sign in
                            </a>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Minimal Expand Button -->
                <button onclick="toggleHeroSection('<?php echo e($heroId); ?>')" 
                        class="text-xs tracking-widest hover:opacity-60 transition-opacity">
                    <span id="<?php echo e($heroId); ?>-toggle-text">info</span>
                </button>
            </div>
        </div>

        <!-- Expandable Features Section -->
        <div id="<?php echo e($heroId); ?>-expanded" class="hidden border-t border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-900 transition-colors duration-300">
            <div class="px-8 py-24 sm:px-12">
                <div class="max-w-4xl mx-auto text-center">
                    
                    <!-- Minimal Features -->
                    <div class="space-y-16 mb-24">
                        <div>
                            <h3 class="text-sm tracking-widest mb-8">direct sales</h3>
                            <p class="text-xs tracking-wide text-gray-500 dark:text-gray-400 max-w-md mx-auto leading-relaxed">
                                no fees. no middleman. no corporate interference.
                            </p>
                        </div>

                        <div>
                            <h3 class="text-sm tracking-widest mb-8">community driven</h3>
                            <p class="text-xs tracking-wide text-gray-500 dark:text-gray-400 max-w-md mx-auto leading-relaxed">
                                musician to musician. build connections. share knowledge.
                            </p>
                        </div>

                        <div>
                            <h3 class="text-sm tracking-widest mb-8">tools</h3>
                            <p class="text-xs tracking-wide text-gray-500 dark:text-gray-400 max-w-md mx-auto leading-relaxed">
                                inventory management. deal monitoring. forum integration.
                            </p>
                        </div>
                    </div>

                    <!-- Minimal Process -->
                    <div class="border-t border-gray-100 dark:border-gray-700 pt-24">
                        <div class="grid grid-cols-4 gap-8">
                            <div class="text-center">
                                <div class="w-4 h-4 border border-gray-300 dark:border-gray-500 mx-auto mb-4"></div>
                                <p class="text-xs tracking-widest">join</p>
                            </div>
                            <div class="text-center">
                                <div class="w-4 h-4 border border-gray-300 dark:border-gray-500 mx-auto mb-4"></div>
                                <p class="text-xs tracking-widest">list</p>
                            </div>
                            <div class="text-center">
                                <div class="w-4 h-4 border border-gray-300 dark:border-gray-500 mx-auto mb-4"></div>
                                <p class="text-xs tracking-widest">connect</p>
                            </div>
                            <div class="text-center">
                                <div class="w-4 h-4 border border-gray-300 dark:border-gray-500 mx-auto mb-4"></div>
                                <p class="text-xs tracking-widest">trade</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php if($showExpanded ?? false): ?>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            toggleHeroSection('<?php echo e($heroId); ?>');
        });
    </script>
<?php endif; ?>

<script>
    function toggleHeroSection(heroId) {
        const expandedSection = document.getElementById(heroId + '-expanded');
        const toggleText = document.getElementById(heroId + '-toggle-text');
        
        if (expandedSection.classList.contains('hidden')) {
            expandedSection.classList.remove('hidden');
            toggleText.textContent = 'close';
        } else {
            expandedSection.classList.add('hidden');
            toggleText.textContent = 'info';
        }
    }
</script><?php /**PATH /var/www/html/resources/views/components/hero-section.blade.php ENDPATH**/ ?>