@extends('layouts.app')

@section('title', 'Página Inicial')

@section('content')
    @php
        $homeAssets = [
            'logo' => asset('home/logo.png'),
            'ladoXImages' => [
                asset('home/img1.png'),
                asset('home/img2.png'),
            ],
            'ladoYImages' => [
                asset('home/img3.png'),
                asset('home/img4.png'),
            ]
        ];
    @endphp
    <div id="canvas-container" data-assets="{{ json_encode($homeAssets) }}"></div>

    <div id="texto-painel-container">
        <div id="texto-propaganda1" class="texto-informativo">
            <h2 id="propaganda-titulo"></h2>
            <p id="propaganda-frase"></p>
        </div>
    </div>


    <div id="navegacao-3d-container">
        <button id="btn-retroceder" class="btn-nav3d" aria-label="Anterior">
            <i class="fas fa-arrow-up"></i>
        </button>
        <button id="btn-avancar" class="btn-nav3d" aria-label="Avançar">
            <i class="fas fa-arrow-down"></i>
        </button>
    </div>
    <section class="footer-home text-center"> 
        <h2 class="text-white">Bem-vindo ao VagalumeTV!</h2>
        <p class="lead mb-4">
            Transforme qualquer tela em um poderoso canal de comunicação e monetização.
            <br/>Onde você gerencia mídias, exibe anúncios dinâmicos e interage com seu público de forma inovadora e descomplicada.
            <br/>Perfeito para comércios, eventos e qualquer espaço que queira brilhar!
        </p>
        <a href="{{ route('plans.index') }}" class="btn btn-primary mt-4 mb-4">
            Conheça Nossos Planos
        </a>
        <br/>
        <a class="color-primary" href="{{ route('layouts.duvidas') }}">
            Saiba mais
        </a>
        <br/>
        <h3 class="section-title text-center text-white mb-4 mt-5">O Impacto de um Ambiente Dinâmico</h3>
        <p class="section-intro-text text-center mb-5">
            Nossos olhos são naturalmente atraídos pelo que reluz e se destaca. Inspirados por esse brilho, o VagalumeTV ilumina seu ambiente e negócios com benefícios que transformam a maneira como você se comunica e engaja seu público:
        </p>
        <div class="row gy-4">
            <div class="col-md-6 col-lg-3">
                <div class="impact-card">
                    <div class="impact-icon">
                        <i class="fas fa-eye"></i>
                    </div>
                    <h4 class="text-white">Engajamento Visual Superior</h4>
                    <p class="impact-text">
                        Telas com conteúdo dinâmico e em movimento capturam a atenção instantaneamente, destacando sua mensagem em meio ao comum e aumentando o tempo de permanência do público.
                    </p>
                </div>
            </div>
    
            <div class="col-md-6 col-lg-3">
                <div class="impact-card">
                    <div class="impact-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h4 class="text-white">Memorização Ampliada</h4>
                    <p class="impact-text">
                        A variação de estímulos visuais e informações relevantes apresentadas de forma criativa fixam sua marca e mensagem na mente dos espectadores por muito mais tempo.
                    </p>
                </div>
            </div>
    
            <div class="col-md-6 col-lg-3">
                <div class="impact-card">
                    <div class="impact-icon">
                        <i class="fas fa-store-alt"></i>
                    </div>
                    <h4 class="text-white">Modernização do Espaço</h4>
                    <p class="impact-text">
                        Sinalização digital eleva a percepção do seu ambiente, transmitindo inovação, profissionalismo e cuidado com a experiência do cliente.
                    </p>
                </div>
            </div>
    
            <div class="col-md-6 col-lg-3">
                <div class="impact-card">
                    <div class="impact-icon">
                        <i class="fas fa-sync-alt"></i>
                    </div>
                    <h4 class="text-white">Flexibilidade em Tempo Real</h4>
                    <p class="impact-text">
                        Atualize promoções, avisos, cardápios ou qualquer informação instantaneamente, garantindo que seu público receba sempre o conteúdo mais relevante e atualizado.
                    </p>
                </div>
            </div>
        </div>
        @include('layouts.footer')
    </section>
    
@endsection
    
@push('scripts')
    @vite('resources/js/motion-home.js')
@endpush