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

<!-- Bio Section -->
<section id="bio" class="bg-gray-900/60 flex h-full items-center justify-center pt-26 px-4 pb-24 mb-26 md:pb-46">
    <div class="container mx-auto max-w-4xl">

        <h1 class="text-3xl md:text-5xl font-bold text-center mb-6 md:mb-9 glow-text">
            <span class="hidden md:block">{!! fcms__('content-bio.title') !!}</span>
            <span class="md:hidden">{{ fcms__('content-bio.mobile-title') }}</span>
        </h1>

        <div class="bg-gray-800/50 backdrop-blur-sm p-8 rounded-lg cyber-border mb-7">
            <h2>
                <span class="hidden md:block">🔊 {{ fcms__('content-bio.sub-title') }} 🎧</span>
                <span class="md:hidden">
                    🔊 {{ fcms__('content-bio.sub-title-mobile-top') }} 🎧<br>
                    {{ fcms__('content-bio.sub-title-mobile-sub-top') }}
                </span>
            </h2>

            {{-- Biography (compact) --}}
            <div class="flex flex-col md:flex-row-reverse items-center md:items-start md:gap-8 pt-2">
                {{-- image (portrait) --}}
                <div class="w-full text-center items-center md:w-1/3 md:mt-5">
                    <img
                        src="/vendor/filament-cms/img/Techno_Artisan__DJ_Artist__Intro_Opener_Designer__HardGroove_Acid_Schranz_Hard_Techno__Bio__2026.webp"
                        alt="Techno Artisan Portrait in a raw dark Warehouse - DJ, Artist - Intro/Opener Designer - HardGroove, Acid, Schranz, Hard Techno 2026"
                        class="w-full rounded-lg shadow-md "
                    >
                </div>
                {{-- text --}}
                <div class="w-full md:w-2/3 mt-1 md:mt-0">
                    <p class="text-sm md:text-m text-gray-300 leading-relaxed mt-4 mb-0">
                        {!! fcms__('content-bio.compact')  !!}
                    </p>
                </div>
            </div>

            {{-- read more Link (right) --}} {{-- maybe for later more information --}}
{{--            <p class="hidden md:block text-gray-500 leading-relaxed mt-1 mb-2 text-right">--}}
{{--                <a href="{{ droute('bio-long') }}" title="" class="text-xs font-light">--}}
{{--                    {!! fcms__('content-bio.read-more')  !!}--}}
{{--                </a>--}}
{{--            </p>--}}

            {{-- Booking Text / Mail Link --}}
            <p class="text-m text-blue-300 leading-relaxed mt-4 mb-1 font-bold">
                {{ fcms__('content-bio.booking-text') }}:

                »&nbsp;<a href="mailto:{{ fcms__('content-bio.booking.mail') }}?subject={{ fcms__('content-bio.subject') }}"
                   class="underline"
                   title="{{ fcms__('content-bio.booking-title') }}"
                >{{ fcms__('content-bio.booking.mail') }}</a>&nbsp;«

            </p>

            {{-- SoundCloud Links --}}
            <h3 class="mt-4 mb-0 text-sm">{!! fcms__('content-bio.listen-on-soundcloud') !!}</h3>
            <ul class="text-gray-300 leading-relaxed text-xs md:text-sm mt-2 md:mt-2 space-y-0 list-image-[url(/vendor/filament-cms/img/social-media/soundcloud/soundcloud_cloudmark-white-transparent_32x13.png)]">
                @foreach(fcms__('content-bio.soundcloud-teaser') as $djSet)
                    <li class="ml-9.5">
                        <a href="{{ $djSet['link'] }}" title="{{ $djSet['title'] }}" class="hover:underline"
                           target="_blank" rel="noopener">
                            {{ $djSet['text'] }} 🎧
                        </a>
                    </li>
                @endforeach
            </ul>

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

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