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

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

@php
$smIconSize = '32';
@endphp

<!-- Home Section -->
<section id="home" class="relative z-10 flex flex-col bg-gray-900/40 items-center min-h-screen pt-72 pb-32 px-4 md:justify-center md:pt-0 md:pb-12 md:px-0">

    <div class="text-center max-w-4xl mx-auto">

        <div class="hidden md:flex mb-4 md:mb-8 justify-center">

            <div class="w-48 h-48 md:w-80 md:h-80">
                <a hreflang="de" href="/de">
                </a>
            </div>
        </div>

        {{-- MAIN TITLE --}}
        <h1 class="font-brand text-4xl md:text-7xl mb-3 md:mb-4 glow-text text-shadow-md/90 text-shadow-black-900">{{ fcms__('content-home.title') }}</h1>

        {{-- SUB MAIN TITLE --}}
        <h2 class="text-lg md:text-2xl text-blue-400 mb-3 md:mb-4 text-shadow-lg/50">{{ fcms__('global.sub_title') }}</h2>

        {{-- SOCIAL MEDIA ICONS --}}
        <div class="flex justify-center space-x-6 mb-4">
            @include(FilamentCms::getViewPrefix() . '.partials.social-media-icons')
        </div>

        <h3 class="text-sm md:text-xl text-gray-300 mb-2 md:mb-6 max-w-2xl mx-auto text-shadow-sm text-shadow-lg/40">
            {!! fcms__('content-home.intro_text') !!}
        </h3>

        <p class="text-xs md:text-sm text-gray-400 max-w-2xl mx-auto mb-2 md:mb-0 text-shadow-md/90 text-shadow-sky-900 pl-4 pr-4">
            {!! fcms__('content-home.intro_sub_text') !!}
        </p>

        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">

            @include(FilamentCms::getViewPrefix() . '.partials.home-octahedron')

            <div class="flex flex-col sm:flex-row gap-3 md:gap-4 mt-4 md:mt-0 justify-center items-center">
                <a href="{{ droute('contact')  }}"
                   class="bg-blue-500 hover:bg-blue-600 text-gray-900 font-bold h-fit py-3 px-8 rounded-lg hover-glow transition"
                   title="{{ fcms__('content-home.book_now_title') }}"
                >
                    {{ fcms__('content-home.book_now') }}
                </a>
                <a href="{{ droute('portfolio') }}"
                   class="border-2 border-blue-500 text-blue-400 font-bold h-fit  py-3 px-8 rounded-lg hover-glow transition"
                   title="{{ fcms__('content-home.listen_to_my_work_title') }}"
                >
                    {{ fcms__('content-home.listen_to_my_work') }}
                </a>
            </div>

            @include(FilamentCms::getViewPrefix() . '.partials.home-octahedron')

        </div>

    </div>
</section>

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