@extends('layouts.arte-sacra.theme')

@section('title', env('APP_NAME') . ' :: Museu de Arte Sacra')

@section('content')
    <section class="banner-area relative" id="home">
        <div class="overlay overlay-bg"></div>
        <div class="container">
            <div class="row fullscreen d-flex align-items-center justify-content-center">
                <div class="banner-content col-lg-8">
                    <h1 class="text-white cinzel-decorative-bold">
                        @php $museuArteSacra = "Museu de Arte Sacra <br> de Angra dos Reis"; @endphp
                        {{ __($museuArteSacra) }}
                    </h1>
                    <p class="pt-20 pb-20 text-white">
                        {{ __("Preservando a memória e a fé, o Museu de Arte Sacra abriga um valioso acervo histórico e religioso que conta a história de Angra e do Brasil colonial.") }}
                    </p>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-center align-items-center">
            <div class="scroll-indicator">
                <span class="text-white">{{ __("Deslize para descobrir") }}</span>
                <div class="scroll-arrow text-center">↓</div>
            </div>
        </div>
    </section>

    <!-- <section class="service-area pt-100 bg-light" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="single-service bg-white">
                        <span class="lnr lnr-clock"></span>
                        <h4>Horário de Funcionamento</h4>
                        <p>
                            Segunda a Sexta: 10h às 17h<br>
                            Sábado: 12h às 15h<br>
                            Domingo: Fechado
                        </p>
                        <div class="overlay">
                            <div class="text">
                                <p>
                                    Visite o museu e mergulhe na história de Angra dos Reis por meio de relíquias sacras,
                                    imagens barrocas e artefatos religiosos preservados com zelo.
                                </p>
                                <a href="#" class="text-uppercase primary-btn">Agende sua visita</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="single-service bg-white">
                        <span class="lnr lnr-rocket"></span>
                        <h4>Exposições em Andamento</h4>
                        <p>
                            Segunda a Sexta: 10h às 17h<br>
                            Sábado: 12h às 15h<br>
                            Domingo: Fechado
                        </p>
                        <div class="overlay">
                            <div class="text">
                                <p>
                                    Confira as exposições permanentes e temporárias com peças raras do século XVII ao XIX,
                                    incluindo imagens sacras e objetos litúrgicos.
                                </p>
                                <a href="#" class="text-uppercase primary-btn">Ver exposições</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="single-service bg-white">
                        <span class="lnr lnr-briefcase"></span>
                        <h4>Eventos e Aberturas</h4>
                        <p>
                            Segunda a Sexta: 10h às 17h<br>
                            Sábado: 12h às 15h<br>
                            Domingo: Fechado
                        </p>
                        <div class="overlay">
                            <div class="text">
                                <p>
                                    Participe de palestras, visitas guiadas e eventos culturais promovidos pelo museu para
                                    preservar e divulgar o patrimônio religioso e histórico.
                                </p>
                                <a href="#" class="text-uppercase primary-btn">Ver programação</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> -->

    <section class="about-area section-gap bg-light" id="sobre-museu">
        <div class="container">
            <h2 class="mb-5 text-secondary text-center cinzel-decorative-bold">{{ __("Sobre o Museu de Arte Sacra") }}</h2>
            <div class="row align-items-center mb-5">
                <div class="col-lg-6">
                    <img src="{{ asset('arte-sacra/assets/img/museu-de-arte-sacra.jpg') }}"
                        alt="Fachada do Museu de Arte Sacra de Angra dos Reis" class="img-fluid rounded shadow">
                </div>
                <div class="col-lg-6">
                    <p>{{ __("Localizado no coração do centro histórico de Angra dos Reis, o Museu de Arte Sacra ocupa a parte superior da Igreja da Lapa e da Misericórdia, uma das mais antigas da cidade, datada do século XVIII. Fundado com o intuito de preservar o acervo religioso da região, o museu abriga imagens barrocas, objetos litúrgicos, mobiliário sacro e documentos históricos que revelam a devoção e o cotidiano das comunidades católicas desde os tempos coloniais.") }}</p>
                </div>
            </div>

            <div class="row align-items-center">
                <div class="col-lg-6 order-lg-2">
                    <img src="{{ asset('arte-sacra/assets/img/museu-dentro.jpeg') }}"
                        alt="Interior do museu com peças sacras" class="img-fluid rounded shadow">
                </div>
                <div class="col-lg-6 order-lg-1">
                    <p>
                        {{ __("Além das exposições permanentes, o museu promove atividades culturais, educativas e eventos especiais, reforçando seu papel como guardião da história e identidade local. A visita é uma verdadeira viagem no tempo, ideal para quem deseja conhecer mais sobre a herança espiritual, artística e arquitetônica de Angra dos Reis.") }}
                    </p>
                    <p>
                        {{ __("O espaço é mantido com apoio da comunidade e instituições públicas, sendo acessível a turistas, estudantes e pesquisadores. Visite e descubra como a arte sacra conecta passado e presente por meio da fé, da cultura e da preservação histórica.") }}
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="quote-area section-gap leather-background" id="quote">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 quote-left">
                    <h1 class="cinzel-decorative-bold text-white">
                        @php $cinzel = "<span class='span-arte-sacra'>Arte Sacra</span> é expressão <br>da <span class='span-arte-sacra'>fé</span> e da <span class='span-arte-sacra'>cultura</span>,<br> preservando a <span class='span-arte-sacra'>história</span> do <br> nosso povo."; @endphp
                        {{ __($cinzel) }}
                    </h1>
                </div>
                <div class="col-lg-6 quote-right">
                    <p class="text-white">
                        {{ __("O Museu de Arte Sacra de Angra dos Reis é um espaço de memória, onde o sagrado encontra o artístico em peças únicas que contam os caminhos da devoção e da colonização no Brasil. Um verdadeiro tesouro cultural à disposição de todos.") }}
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="exibition-area section-gap bg-light" id="exhibitions">
        <div class="container">
            <div class="row d-flex justify-content-center">
                <div class="menu-content pb-4 col-lg-10 text-center">
                    <div class="title">
                        <h1 class="mb-3 text-secondary text-center cinzel-decorative-bold">{{ __("Nossas Artes") }}</h1>
                        <p class="text-muted">{{ __("Explore nosso acervo do Museu de Arte Sacra.") }}</p>
                    </div>
                </div>
            </div>

            @if ($acervos->isEmpty())
                <p class="text-center text-muted">{{ __("Nenhum item disponível para exibição no momento.") }}</p>
            @else
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        @foreach ($acervos->sortByDesc('created_at')->take(7) as $arte)
                            <div class="swiper-slide">
                                <div class="single-exibition item bg-white shadow-sm border overflow-hidden transition-hover d-flex flex-column"
                                    style="width: 300px; height: 400px; max-height: 400px; border-radius: 50px; margin: 0 auto;">
                                    <div class="card">
                                        @if ($arte->imagem && $arte->imagem !== 'pmar/assets/img/icons/default.png')
                                            <img src="{{ asset($arte->imagem) }}"
                                                alt="{{ $arte->nome_peca }}" class="w-100 card-img-top"
                                                style="min-height: 250px; object-fit: cover;">
                                        @else
                                            <img src="{{ asset('pmar/assets/img/icons/default.png') }}"
                                                alt="Imagem não disponível" class="w-100 card-img-top"
                                                style="height: 250px; object-fit: cover;">
                                        @endif

                                        <div class="d-flex flex-column justify-content-between" style="flex: 1;">
                                            <div class="card-body">
                                                <ul class="tags list-unstyled mb-2">
                                                    <li>
                                                        <a href="{{ route('paginas.cultura.arteSacra.show', Str::slug($arte->nome_peca)) }}"
                                                            target="_blank" class="text-decoration-none fw-semibold">
                                                            Ver Detalhes
                                                        </a>
                                                    </li>
                                                </ul>
                                                <h4 class="fw-bold">{{ $arte->nome_peca }}</h4>
                                                <p>{{ $arte->created_at->format('d \d\e F \d\e Y') }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>

                    <div class="swiper-pagination"></div>
                </div>
            @endif

            <div class="text-center mt-5">
                <a href="{{ route('paginas.cultura.arteSacra.galeria') }}" class="primary-btn">Veja Mais Artes</a>
            </div>
        </div>
    </section>

    <!-- Botão Voltar ao Topo -->
    <a href="#" id="backToTop" class="back-to-top">
        <i class="fa-solid fa-chevron-up fw-bold fs-4"></i>
    </a>
@endsection