@extends('layouts.app')

@section('title', 'Page introuvable')

@push('css')
<link rel="stylesheet" href="{{ asset('assets/css/404.css') }}">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
@endpush


@section('content')
<div class="ht__bradcaump__area mb-5" style="background: rgba(0, 0, 0, 0) url({{ asset('assets/images/bg/2.jpg') }}) no-repeat scroll center center / cover ;">
    <div class="ht__bradcaump__wrap_very_small">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bradcaump__inner text-center">
                        <h2 class="bradcaump-title">{{ __('general.404_title') }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="container error-section-music">
    <div class="row justify-content-center">
        <div class="col-lg-10 text-center content-wrapper">

            <div class="music-staff-container">
                <!-- Première ligne avec note 1 -->
                <div class="music-staff">
                    <span class="static-note" id="note1">♩</span>
                    <span class="moving-note staff-note-1">♪</span>
                </div>

                <!-- Deuxième ligne avec note 2 -->
                <div class="music-staff">
                    <span class="static-note" id="note2">♪</span>
                    <span class="moving-note staff-note-2">♩</span>
                </div>

                <!-- Troisième ligne avec note 3 -->
                <div class="music-staff">
                    <span class="static-note" id="note3">♫</span>
                    <span class="moving-note staff-note-3">♬</span>
                </div>

                <!-- Quatrième ligne avec note 4 -->
                <div class="music-staff">
                    <span class="static-note" id="note4">♬</span>
                    <span class="moving-note staff-note-4">♫</span>
                </div>

                <!-- Cinquième ligne sans note statique -->
                <div class="music-staff">
                    <span class="static-note" id="note5">♪</span>
                    <span class="moving-note staff-note-5">♪</span>
                </div>
            </div>

            <h1 class="error-number mt-4">404</h1>
            <h2 class="h4 mb-4">{{ __('general.404_subtitle') }}</h2>

            <p class="error-text">
                {{ __('general.404_description') }}
            </p>

            <div class="notes-container">
                <!-- Notes flottantes -->
                <span class="note" style="top: 10%; left: 20%">♪</span>
                <span class="note" style="top: 15%; left: 80%">♩</span>
                <span class="note" style="top: 30%; left: 40%">♫</span>
                <span class="note" style="top: 5%; left: 60%">♬</span>
            </div>

            <div class="mt-0 mb-4">
                <a href="/" class="btn btn-home btn-lg text-white">
                    <i class="fas fa-home me-2"></i>{{ __('general.404_button') }}
                </a>
            </div>
        </div>
    </div>
</div>
@endsection