@php
    $pt = $section->settings['padding_top'] ?? '80px';
    $pb = $section->settings['padding_bottom'] ?? '80px';
    $bg = $section->settings['bg_color'] ?? 'transparent';

    $ptStyle = "padding-top: $pt;";
    $pbStyle = "padding-bottom: $pb;";
    $bgStyle = $bg !== 'transparent' ? "background-color: $bg;" : '';
@endphp

<section class="relative border-y border-border-subtle overflow-hidden" 
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}" x-data="{ intersected: false }" x-intersect.once="intersected = true">
    {{-- Ambient Lighting --}}
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-[800px] bg-brand-500/5 blur-[140px] rounded-full pointer-events-none -z-10"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="flex flex-col {{ $align === 'right' ? 'lg:flex-row-reverse' : 'lg:flex-row' }} items-center gap-16 lg:gap-24">
            
            {{-- Content Block --}}
            <div class="w-full lg:w-5/12 space-y-10 text-center lg:text-left">
                <div class="space-y-6">
                    <div class="inline-flex items-center gap-3 px-4 py-2 rounded-xl bg-brand-500/10 border border-brand-500/20 text-brand-500 text-[10px] font-900 tracking-[0.3em] uppercase shadow-inner">
                        <i data-lucide="monitor-play" class="w-4 h-4 stroke-[3]"></i>
                        Elite Live Execution
                    </div>
                    <h2 class="text-4xl md:text-6xl lg:text-7xl font-display font-900 text-text-base uppercase tracking-tight leading-[0.9]">
                        {!! str_replace(' ', '<br class="hidden lg:block">', $title) !!}
                    </h2>
                    <p class="text-lg md:text-xl text-text-muted font-600 leading-relaxed max-w-xl mx-auto lg:mx-0 uppercase tracking-widest">
                        {{ $subtitle }}
                    </p>
                </div>

                <div class="flex flex-col sm:flex-row items-center gap-6 justify-center lg:justify-start">
                    <a href="{{ $demoUrl }}" target="_blank" class="w-full sm:w-auto h-16 px-10 bg-brand-500 hover:bg-brand-600 text-white rounded-2xl font-900 text-[11px] uppercase tracking-widest transition-all shadow-2xl shadow-brand-500/20 hover:shadow-brand-500/40 active:scale-95 flex items-center justify-center gap-4">
                        {{ $buttonText }}
                        <i data-lucide="external-link" class="w-4 h-4 stroke-[3]"></i>
                    </a>
                </div>
            </div>

            {{-- Media Block --}}
            <div class="w-full lg:w-7/12">
                <div class="relative group rounded-[3rem] overflow-hidden bg-surface-secondary border-2 border-border-subtle shadow-2xl transform hover:-translate-y-3 transition-all duration-700 shadow-brand-500/5">
                    
                    {{-- Window Header (Mockup UI) --}}
                    <div class="h-12 bg-surface-primary border-b border-border-subtle flex items-center px-6 gap-3 backdrop-blur-md">
                        <div class="w-3 h-3 rounded-full bg-rose-500/80"></div>
                        <div class="w-3 h-3 rounded-full bg-amber-500/80"></div>
                        <div class="w-3 h-3 rounded-full bg-emerald-500/80"></div>
                        <div class="flex-1"></div>
                        <div class="h-2 w-32 bg-text-dim/10 rounded-full"></div>
                    </div>

                    {{-- Media Display --}}
                    <div class="relative aspect-video bg-surface-secondary group-hover:bg-surface-primary transition-colors duration-700">
                        @if($video)
                            <video src="{{ str_starts_with($video, 'http') ? $video : asset('storage/' . $video) }}" autoplay loop muted playsinline class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000"></video>
                        @else
                            <img src="{{ $image ? (str_starts_with($image, 'http') ? $image : asset('storage/' . $image)) : $fallbackImage }}" alt="{{ $title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000">
                        @endif
                        
                        {{-- Hover Overlay Play Button (If viewing an image that links to demo) --}}
                        @if(!$video)
                            <a href="{{ $demoUrl }}" target="_blank" class="absolute inset-0 bg-brand-500/10 opacity-0 group-hover:opacity-100 transition-all duration-700 flex items-center justify-center backdrop-blur-sm">
                                <div class="w-24 h-24 bg-brand-500 rounded-full flex items-center justify-center text-white pl-1 shadow-[0_20px_50px_rgba(var(--primary-rgb),0.5)] transform scale-90 group-hover:scale-100 transition-all duration-700">
                                    <i data-lucide="play" class="w-10 h-10 stroke-[3]"></i>
                                </div>
                            </a>
                        @endif
                    </div>
                </div>
            </div>

        </div>
    </div>
</sectio