<?php $__env->startSection('title', 'Professional Photography Services'); ?>

<?php
    $theme = [
        'sectionBg' => 'bg-gray-900',
        'sectionBgAlt' => 'bg-gray-950',
        'cardBg' => 'bg-gray-900',
        'cardBorder' => 'border-gray-800',
        'textNormal' => 'text-white',
        'textSecondary' => 'text-gray-400',
        'accent' => 'text-amber-400',
        'accentBg' => 'bg-amber-500',
    ];
?>

<?php $__env->startSection('content'); ?>
    <!-- Hero Section -->
    <section id="hero" class="relative min-h-[90vh] flex items-center justify-center overflow-hidden">
        <!-- Background with gradient overlay -->
        <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900"></div>
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(245,158,11,0.1),transparent_50%)]"></div>

        <!-- Placeholder background image -->
        <div class="absolute inset-0 opacity-30">
            <img src="https://placehold.co/1920x1080/1f2937/ffffff?text=Photography+Background" alt="Background"
                class="w-full h-full object-cover">
        </div>

        <div class="relative max-w-5xl mx-auto px-6 lg:px-8 text-center">
            <div class="animate-on-scroll" style="transition-delay: 0.1s;">
                <span
                    class="inline-block px-4 py-2 rounded-full bg-amber-500/10 text-amber-400 text-sm font-medium mb-6 border border-amber-500/20">
                    ✦ Professional Photography Services
                </span>
            </div>

            <h1 class="font-display text-5xl md:text-7xl font-bold leading-tight mb-6 animate-on-scroll"
                style="transition-delay: 0.2s;">
                <span class="text-white">Capturing</span><br>
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-500">Moments</span>
            </h1>

            <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10 animate-on-scroll"
                style="transition-delay: 0.3s;">
                <?php echo e($photographyData['hero']['description'] ?? 'Professional photography services that bring your vision to life.'); ?>

            </p>

            <div class="flex flex-col sm:flex-row justify-center gap-4 animate-on-scroll" style="transition-delay: 0.4s;">
                <a href="/photography/portfolio"
                    class="inline-flex items-center justify-center px-8 py-4 bg-amber-500 hover:bg-amber-600 text-white font-semibold rounded-full transition duration-300">
                    View Portfolio
                </a>
                <a href="/photography/booking"
                    class="inline-flex items-center justify-center px-8 py-4 border border-gray-600 text-white hover:bg-gray-800 font-semibold rounded-full transition duration-300">
                    Book a Session
                </a>
            </div>
        </div>

        <!-- Scroll indicator -->
        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
            <svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
            </svg>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-16 bg-gray-950 border-y border-gray-800">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                <div class="text-center animate-on-scroll">
                    <div class="text-4xl md:text-5xl font-bold text-amber-400 mb-2">
                        <?php echo e($photographyData['stats']['projects'] ?? '500+'); ?></div>
                    <div class="text-gray-400">Projects Completed</div>
                </div>
                <div class="text-center animate-on-scroll" style="transition-delay: 0.1s;">
                    <div class="text-4xl md:text-5xl font-bold text-amber-400 mb-2">
                        <?php echo e($photographyData['stats']['clients'] ?? '200+'); ?></div>
                    <div class="text-gray-400">Happy Clients</div>
                </div>
                <div class="text-center animate-on-scroll" style="transition-delay: 0.2s;">
                    <div class="text-4xl md:text-5xl font-bold text-amber-400 mb-2">
                        <?php echo e($photographyData['stats']['awards'] ?? '15'); ?></div>
                    <div class="text-gray-400">Awards Won</div>
                </div>
                <div class="text-center animate-on-scroll" style="transition-delay: 0.3s;">
                    <div class="text-4xl md:text-5xl font-bold text-amber-400 mb-2">
                        <?php echo e($photographyData['stats']['years'] ?? '8'); ?></div>
                    <div class="text-gray-400">Years Experience</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="py-20 md:py-32 <?php echo e($theme['sectionBg']); ?>">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="text-center mb-16 animate-on-scroll">
                <h2 class="font-display text-4xl md:text-5xl font-bold text-white mb-4">Our Photography Services</h2>
                <p class="text-gray-400 max-w-2xl mx-auto">Professional photography solutions tailored to your unique needs
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <?php $__currentLoopData = $photographyData['services']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="group p-8 <?php echo e($theme['cardBg']); ?> rounded-2xl border <?php echo e($theme['cardBorder']); ?> hover:border-amber-500/50 transition duration-500 animate-on-scroll"
                        style="transition-delay: <?php echo e($index * 0.1); ?>s;">
                        <div
                            class="w-14 h-14 rounded-full bg-amber-500/10 flex items-center justify-center mb-6 text-amber-400 group-hover:bg-amber-500 group-hover:text-white transition duration-300">
                            <?php echo $__env->make('photography.partials.icon', [
                                'name' => $service['image'],
                                'size' => 'w-7 h-7',
                            ], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                        </div>
                        <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-amber-400 transition">
                            <?php echo e($service['title']); ?></h3>
                        <p class="text-gray-400 text-sm mb-4"><?php echo e($service['description']); ?></p>
                        <div class="text-amber-400 font-medium text-sm"><?php echo e($service['price']); ?></div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>

    <!-- Featured Work Preview -->
    <section class="py-20 <?php echo e($theme['sectionBgAlt']); ?>">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center mb-12">
                <div class="animate-on-scroll">
                    <h2 class="font-display text-3xl md:text-4xl font-bold text-white">Featured Work</h2>
                    <p class="text-gray-400 mt-2">A glimpse into our photography portfolio</p>
                </div>
                <a href="/photography/portfolio"
                    class="mt-4 md:mt-0 inline-flex items-center text-amber-400 hover:text-amber-300 font-medium animate-on-scroll">
                    View All Portfolio
                    <?php echo $__env->make('photography.partials.icon', [
                        'name' => 'ArrowRight',
                        'size' => 'w-5 h-5 ml-2',
                    ], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                </a>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <?php
                    $featured = collect($portfolioData ?? [])
                        ->where('featured', true)
                        ->take(3);
                ?>
                <?php $__empty_1 = true; $__currentLoopData = $featured; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <div class="relative aspect-[4/5] rounded-xl overflow-hidden animate-on-scroll"
                        style="transition-delay: <?php echo e($index * 0.15); ?>s;">
                        <img src="https://placehold.co/400x500/374151/ffffff?text=<?php echo e(urlencode($item['title'])); ?>"
                            alt="<?php echo e($item['title']); ?>"
                            class="w-full h-full object-cover transition duration-500 group-hover:scale-110">
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 hover:opacity-100 transition duration-300">
                            <div class="absolute bottom-0 left-0 right-0 p-6">
                                <span class="text-amber-400 text-xs font-medium mb-1 block"><?php echo e($item['category']); ?></span>
                                <h3 class="text-white font-semibold"><?php echo e($item['title']); ?></h3>
                            </div>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <!-- Placeholders when no portfolio data -->
                    <div class="relative aspect-[4/5] rounded-xl overflow-hidden animate-on-scroll bg-gray-800">
                        <div class="absolute inset-0 flex items-center justify-center text-gray-500">Corporate Portraits
                        </div>
                    </div>
                    <div class="relative aspect-[4/5] rounded-xl overflow-hidden animate-on-scroll bg-gray-800"
                        style="transition-delay: 0.1s;">
                        <div class="absolute inset-0 flex items-center justify-center text-gray-500">Product Photography
                        </div>
                    </div>
                    <div class="relative aspect-[4/5] rounded-xl overflow-hidden animate-on-scroll bg-gray-800"
                        style="transition-delay: 0.2s;">
                        <div class="absolute inset-0 flex items-center justify-center text-gray-500">Event Coverage</div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 bg-gradient-to-r from-amber-900/30 to-gray-900 border-t border-gray-800">
        <div class="max-w-4xl mx-auto px-6 lg:px-8 text-center">
            <h2 class="font-display text-3xl md:text-4xl font-bold text-white mb-4 animate-on-scroll">Ready to Book Your
                Session?</h2>
            <p class="text-gray-400 mb-8 animate-on-scroll" style="transition-delay: 0.1s;">
                Let's create stunning imagery together. Book your photography session today.
            </p>
            <div class="animate-on-scroll" style="transition-delay: 0.2s;">
                <a href="/photography/booking"
                    class="inline-flex items-center px-8 py-4 bg-amber-500 hover:bg-amber-600 text-white font-semibold rounded-full shadow-lg shadow-amber-500/25 transition duration-300">
                    Book Now
                    <?php echo $__env->make('photography.partials.icon', [
                        'name' => 'ArrowRight',
                        'size' => 'w-5 h-5 ml-2',
                    ], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
                </a>
            </div>
        </div>
    </section>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('photography.layouts.photography', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home1/httprapu/oamediakraft.co.uk/resources/views/photography/index.blade.php ENDPATH**/ ?>