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

<!-- Bio LONG Section -->
<section id="bio" class="bg-gray-900/50 flex items-center justify-center pt-26 px-4 pb-10">
    <div class="container mx-auto max-w-4xl">
        <h1 class="text-3xl md:text-5xl font-bold text-center mb-6 md:mb-12 glow-text">
            {{ fcms__('content-bio-long.title') }}
        </h1>
        <div class="bg-gray-800/50 backdrop-blur-sm p-8 rounded-lg cyber-border mb-7" title="{{ fcms__('content-bio-long.summary') }}">
            <h2>
                🎯
                {{ fcms__('content-bio-long.summary') }}
{{--                | <span title="{{ fcms__('content-bio-long.tldr.title') }}">{{ fcms__('content-bio-long.tldr.text') }}</span>--}}
                ⚡
            </h2>
            <p class="text-m text-gray-300 leading-relaxed mt-4 mb-1">
                {!! fcms__('content-bio-long.tldr-bluf')  !!}
            </p>
        </div>
        <div class="bg-gray-800/50 backdrop-blur-sm p-8 rounded-lg cyber-border">
            <h3 class="text-lg mb-5">
                📝 {{ fcms__('content-bio-long.detailed') }}
            </h3>

            {{-- The Beginnging / The Roots--}}
            <h3 class="text-base font-bold mb-2">
                🌱 {!! fcms__('content-bio-long.beginning.title') !!}
            </h3>
            <p class="text-m text-gray-300 leading-relaxed mb-6">
                {!! fcms__('content-bio-long.beginning.text') !!}
            </p>

            {{-- Education--}}
            <h3 class="text-base font-bold mb-2">
                🎓 {!! fcms__('content-bio-long.education.title') !!}
            </h3>
            <p class="text-m text-gray-300 leading-relaxed mb-6">
                {!! fcms__('content-bio-long.education.text') !!}
            </p>

            {{-- Digital Revolution--}}
            <h3 class="text-base font-bold mb-2">
                🔢  {!! fcms__('content-bio-long.digital-revolution.title') !!}
            </h3>
            <p class="text-m text-gray-300 leading-relaxed mb-6">
                {!! fcms__('content-bio-long.digital-revolution.text') !!}
            </p>

            {{-- DJ to Artisan --}}
            <h3 class="text-base font-bold mb-2">
                🚀 {!! fcms__('content-bio-long.dj-to-artisan.title') !!}
            </h3>
            <p class="text-m text-gray-300 leading-relaxed mb-6">
                {!! fcms__('content-bio-long.dj-to-artisan.text') !!}
            </p>

            {{-- Present --}}
            <h3 class="text-base font-bold mb-2">
                💎 {!! fcms__('content-bio-long.present.title') !!}
            </h3>
            <p class="text-m text-gray-300 leading-relaxed mb-6">
                {!! fcms__('content-bio-long.present.text') !!}
            </p>

            {{-- Future / Vision --}}
            <h3 class="text-base font-bold mb-2">
                ✨/♾️ {!! fcms__('content-bio-long.future.title') !!}
            </h3>
            <p class="text-m text-gray-300 leading-relaxed">
                {!! fcms__('content-bio-long.future.text') !!}
            </p>
        </div>
    </div>
</section>

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