@include(FilamentCms::getViewPrefix() . '.partials.header')
@include(FilamentCms::getViewPrefix() . '.partials.navigation')

<!-- Services Section -->
{{--<section id="services" class="bg-gray-900/50 min-h-screen flex items-center justify-center pt-32 px-4 pb-10">--}}
<section id="services" class="bg-gray-900/50 flex items-center justify-center pt-26 px-4 pb-10">
    <div class="container mx-auto max-w-6xl">
        <h1 class="text-3xl md:text-5xl font-bold text-center mb-6 md:mb-12 glow-text">
            {{ fcms__('content-services.title') }}
        </h1>

{{--        <div class="grid md:grid-cols-3 gap-8">--}}
        <div class="grid md:grid-cols-2 gap-8">

            <!-- DJ Service -->
            <div class="bg-gray-800/50 backdrop-blur-sm p-8 rounded-lg cyber-border hover-glow transition">
                <div class="text-blue-400 text-5xl mb-4">🎧</div>
                <h2 class="text-2xl font-bold mb-4">{!! fcms__('content-services.dj.title') !!}</h2>
                <p class="text-gray-300 mb-4">
                    {!! fcms__('content-services.dj.intro') !!}
                </p>
                <ul class="text-gray-400 space-y-2 list-disc list-inside">
                    <li>{!! fcms__('content-services.dj.club') !!}</li>
                    <li>{!! fcms__('content-services.dj.festival') !!}</li>
                    <li>{!! fcms__('content-services.dj.stream') !!}</li>
                </ul>
            </div>

{{--            <!-- Production Service -->--}}
{{--            <div class="bg-gray-800/50 backdrop-blur-sm p-8 rounded-lg cyber-border hover-glow transition">--}}
{{--                <div class="text-blue-400 text-5xl mb-4">🎹</div>--}}
{{--                <h2 class="text-2xl font-bold mb-4">{{ fcms__('content-services.production.title') }}</h2>--}}
{{--                <p class="text-gray-300 mb-4">--}}
{{--                    {{ fcms__('content-services.production.intro') }}--}}
{{--                </p>--}}
{{--                <ul class="text-gray-400 space-y-2 list-disc list-inside">--}}
{{--                    <li>{{ fcms__('content-services.production.tracks') }}</li>--}}
{{--                    <li>{{ fcms__('content-services.production.remix_mashup') }}</li>--}}
{{--                    <li>{{ fcms__('content-services.production.ghost_production') }}</li>--}}
{{--                    <li>{{ fcms__('content-services.production.mixing_mastering') }}</li>--}}
{{--                </ul>--}}
{{--            </div>--}}

            <!-- Sound Design Service -->
            <div class="bg-gray-800/50 backdrop-blur-sm p-8 rounded-lg cyber-border hover-glow transition">
                <div class="text-blue-400 text-5xl mb-4">🔊</div>
                <h2 class="text-2xl font-bold mb-4">{{ fcms__('content-services.intro_opener.title') }}</h2>
                <p class="text-gray-300 mb-4">
                    {!! fcms__('content-services.intro_opener.intro') !!}
                </p>
                <ul class="text-gray-400 space-y-2 list-disc list-inside">
                    <li>{{ fcms__('content-services.intro_opener.dj_artist') }}</li>
                    <li>{{ fcms__('content-services.intro_opener.set') }}</li>
                    <li>{{ fcms__('content-services.intro_opener.signature_sound') }}</li>
                </ul>
            </div>

        </div>
    </div>
</section>

@include(FilamentCms::getViewPrefix() . '.partials.footer')
