@extends('layouts.app')

@section('content')
{{-- @dd($home->banner_ad_replay) --}}
<div class="page-wrapper content-wrapper page-home">
    <section class="main-banner">
        <div class="container">
            <div class="main__content">
                <h3>{{ $home->title_banner ?? '' }}</h3>
                <p>{{ $home->subtitle_banner ?? '' }}</p>
                <a href="{{ $home->link_button_banner }}">{{ $home->name_button_banner ?? '' }}</a>
            </div>
        </div>

        <div class="banner__images">
            <img src="{{ asset("storage/{$home->banner_desktop}") }}" alt="">
        </div>

        <div class="main__slider-mobile">
            <div class="swiper-container mobile__slider-home">
                <div class="swiper-wrapper">
                    @foreach($home->banner_mobile as $mobile)
                        <div class="swiper-slide">
                            <img src="{{ asset("storage/{$mobile['banner_mobile']}") }}" alt="">
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <section class="facilities" id="facilities">
        <div class="container">
            <div class="facilities__block">
                <div class="block__text">
                    <h4>FACILIDADES</h4>
                    <h3>{{ $home->how_it_works_title ?? '' }}</h3>
                    <p>{{ $home->how_it_works_subtitle ?? '' }}</p>
                </div>

                <div class="block__list">
                    @foreach($home->how_it_works as $item)
                        <div class="list__item">
                            <img src="{{ asset("storage/{$item['icon']}") }}" alt="">
                            <div class="item__text">
                                <h4>{{ $item['title'] ?? '' }}</h4>
                                <p>{{ $item['subtitle'] ?? '' }}</p>
                            </div>
                        </div>
                   @endforeach
                </div>
            </div>

            <div class="facilities__image">
                <img class="detail-first" src="{{ asset('images/detail-phone.png') }}" alt="">
                <img class="image-main" src="{{ asset('images/phone.png') }}" alt="">
                <img class="detail-last" src="{{ asset('images/detail-phone.png') }}" alt="">
            </div>
        </div>
    </section>

    <section class="address" id="address">
        <div class="container">
            <div class="address__title">
                <h4>ENDEREÇOS</h4>
                <h3>Onde estamos</h3>
            </div>

            <div class="address__content">
                <p>Veja onde você já pode ter acesso ao Seu Replay.</p>
                <a href="{{ $home->link_button_address ?? '' }}">
                    <p>{{ $home->name_button_address ?? '' }}</p>
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3.33366 10L16.667 10M16.667 10L11.667 5M16.667 10L11.667 15" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </a>
            </div>

            <div class="maps">
                <iframe class="responsive-embed-item" src="{{ $home->iframe_address }}" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div>
        </div>
    </section>

    <section class="arena" id="arena">
        <div class="container">
            <div class="arena__title">
                <div class="title__block">
                    <h4>ARENAS</h4>
                    <h3>Parceiros que confiam</h3>
                </div>

                @if(count($home->where_are_we) > 4)
                    <div class="arena__buttons">
                        <div class="swiper-button-prev arena-button-prev">
                            <svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="7.50844" height="1.02582" rx="0.512912" transform="matrix(-0.75821 0.652011 0.755338 0.655336 5.99316 0)" fill="#00AA5F"/>
                                <rect width="7.50844" height="1.02582" rx="0.512912" transform="matrix(-0.75821 -0.652011 0.755338 -0.655336 5.9248 10)" fill="#00AA5F"/>
                            </svg>

                        </div>

                        <div class="swiper-button-next arena-button-next">
                            <svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect width="7.50844" height="1.02582" rx="0.512912" transform="matrix(0.75821 0.652011 -0.755338 0.655336 1.00781 0)" fill="#00AA5F"/>
                                <rect width="7.50844" height="1.02582" rx="0.512912" transform="matrix(0.75821 -0.652011 -0.755338 -0.655336 1.0752 10)" fill="#00AA5F"/>
                            </svg>
                        </div>
                    </div>
                @endif
            </div>
            <div class="arena__content">
                <div class="swiper-container arena__slider">
                    <div class="swiper-wrapper">
                        @foreach($home->where_are_we as $key => $item)
                            <div class="swiper-slide">
                                <div class="arena__item"  style="cursor: pointer;">
                                    <a href="{{ $item['link'] }}" target="_blank">
                                        <img src="{{ asset("storage/{$item['image_partner']}")  ?? '' }}">
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="alternative-banner">
        <div class="container">
            <div class="banner__blocks" style="background-image: url({{ asset("storage/{$home->banner_ad_replay[0]['banner_ad']}") }})">
                <h4>{{ $home->banner_ad_replay[0]['tag'] }}</h4>
                <h3>{{ $home->banner_ad_replay[0]['title'] }}</h3>
                <a href="{{ $home->banner_ad_replay[0]['link_button_ad'] }}">{{ $home->banner_ad_replay[0]['name_button_ad'] }}</a>
            </div>
        </div>
    </section>

    <section class="contact-block" id="contact-block">
        <img src="{{ asset('images/detail-phone.png') }}">
        <div class="container">
            <div class="contact__text">
                <h4>CONTATO</h4>
                <h3>Instale na sua quadra</h3>
                <p>Quer oferecer replays para seus clientes e valorizar seu espaço?
                Entre em contato para mais informações.</p>
            </div>

           <form action="{{ route('leads.store') }}" method="POST">
                @csrf

                {{-- Mensagens de feedback --}}
                @if(session('success'))
                    <div class="alert alert-success" style="background: #d4edda; color: #155724; padding: 1rem; border-radius: 4px; margin-bottom: 1rem;">
                        {{ session('success') }}
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-error" style="background: #f8d7da; color: #721c24; padding: 1rem; border-radius: 4px; margin-bottom: 1rem;">
                        {{ session('error') }}
                    </div>
                @endif

                <div class="field">
                    <label for="name">NOME*</label>
                    <input type="text" name="name" id="name" placeholder="Digite seu nome" value="{{ old('name') }}" required>
                    @error('name')
                        <span class="error-message" style="color: #dc3545; font-size: 0.875rem;">{{ $message }}</span>
                    @enderror
                </div>

                <div class="field">
                    <label for="mail">E-MAIL*</label>
                    <input type="email" name="mail" id="mail" placeholder="Digite seu e-mail" value="{{ old('mail') }}" required>
                    @error('mail')
                        <span class="error-message" style="color: #dc3545; font-size: 0.875rem;">{{ $message }}</span>
                    @enderror
                </div>

                <div class="field">
                    <label for="phone">TELEFONE*</label>
                    <input type="tel" name="phone" id="phone" placeholder="Digite seu telefone" value="{{ old('phone') }}" required>
                    @error('phone')
                        <span class="error-message" style="color: #dc3545; font-size: 0.875rem;">{{ $message }}</span>
                    @enderror
                </div>

                <div class="two-columns">
                    <div class="field">
                        <label for="arena">NOME DA ARENA*</label>
                        <input type="text" name="arena" id="arena" placeholder="Nome da sua arena" value="{{ old('arena') }}" required>
                        @error('arena')
                            <span class="error-message" style="color: #dc3545; font-size: 0.875rem;">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="field">
                        <label for="city">CIDADE/ESTADO*</label>
                        <input type="text" name="city" id="city" placeholder="Cidade/Estado" value="{{ old('city') }}" required>
                        @error('city')
                            <span class="error-message" style="color: #dc3545; font-size: 0.875rem;">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="field">
                    <label for="example">MENSAGEM</label>
                    <textarea name="example" id="example" placeholder="Conte-nos mais sobre sua arena ou dúvidas">{{ old('example') }}</textarea>
                    @error('example')
                        <span class="error-message" style="color: #dc3545; font-size: 0.875rem;">{{ $message }}</span>
                    @enderror
                </div>

                <div class="field--checkbox">
                    <input type="checkbox" name="terms" id="terms" value="1" {{ old('terms') ? 'checked' : '' }} required>
                    <label for="terms">Li e aceito as <a href="#" target="_blank">Políticas de Privacidade.</a></label>
                    @error('terms')
                        <span class="error-message" style="color: #dc3545; font-size: 0.875rem; display: block; margin-top: 0.5rem;">{{ $message }}</span>
                    @enderror
                </div>

                <div class="button-submit">
                    <input type="submit" value="Enviar">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3.33317 10L16.6665 10M16.6665 10L11.6665 5M16.6665 10L11.6665 15" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </form>
        </div>
    </section>
</div>


<script>
// Smooth scroll para âncoras
document.addEventListener('DOMContentLoaded', function() {
    // Selecionar todos os links que começam com #
    const anchorLinks = document.querySelectorAll('a[href*="#"]');
    
    anchorLinks.forEach(function(link) {
        link.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            const hashIndex = href.indexOf('#');
            
            if (hashIndex !== -1) {
                const hash = href.substring(hashIndex + 1);
                const targetElement = document.getElementById(hash);
                
                if (targetElement) {
                    e.preventDefault();
                    
                    // Smooth scroll para o elemento
                    targetElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                    
                    // Atualizar URL sem recarregar a página
                    if (history.pushState) {
                        history.pushState(null, null, '#' + hash);
                    }
                }
            }
        });
    });
    
    // Verificar se há hash na URL ao carregar a página
    if (window.location.hash) {
        const hash = window.location.hash.substring(1);
        const targetElement = document.getElementById(hash);
        
        if (targetElement) {
            setTimeout(function() {
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }, 100);
        }
    }
});
</script>
@endsection