@extends('components.layout')

@section('content')
    <div class="content-container justify-content-center">
        <div class="bg-transparent bg-transparent-1 scroll-hidden scroll-locked" id="section1-container">
            @include('sections.1-index')
        </div>
        {{--<div class="hidden-container bg-transparent bg-transparent-1 d-none" id="section2-container">
            @include('sections.2-countdown')
        </div>
        <div class="hidden-container d-none text-center mt-4">
            <div class="mx-2">
                <img class="w-100 rounded-top shadow" src="{{ asset('assets/gallery/indoor.webp') }}" alt=""
                    style="box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 5px, rgba(0, 0, 0, 0.23) 0px 3px 5px;">
            </div>
            <div class="bg-transparent bg-transparent-2 mx-auto">
                @include('sections.3-invitation')
            </div>
        </div>
        <div class="hidden-container bg-transparent bg-transparent-2 d-none mt-4">
            @include('sections.4-location')
        </div>
        <div class="hidden-container bg-transparent bg-transparent-2 d-none mt-4">
            @include('sections.5-wedding-gift')
        </div>
        <div class="hidden-container bg-transparent bg-transparent-2 d-none mt-4">
            @include('sections.6-rsvp-wishes')
        </div>
        <div class="hidden-container bg-transparent bg-transparent-2 d-none mt-4 mb-6">
            @include('sections.7-quotes')
        </div>--}}

        <div class="hidden-container bg-transparent bg-transparent-1 d-none" id="section2-container">
            @include('sections.2-all')
        </div>
    </div>
    <div id="music-icon" class="music-icon paused">
        <i class="fa-solid fa-compact-disc"></i>
    </div>

    <audio id="background-music" src="{{ asset('assets/music/music.mp3') }}" loop></audio>
@endsection