@extends('layout')
@section('head')
    <title></title>
    <meta name="description" content="">
    @vite(['resources/stylus/contacto.styl'])
@endsection
@section('content')
    @if ($banners)
        <section class="banners relative flex items-center justify-center overflow-hidden" id="banner_escritorio">
            @foreach ($banners as $banner)
                <div class="banners-item">
                    <img src="{{ $banner->imagen_url }}" alt="Hero Background" class="inset-0 w-full h-full object-cover">
                    <div class="banners-item-texto z-10 max-w-4xl mx-auto px-4">
                        @if ($banner->titulo)
                            <h1 class="text-4xl md:text-6xl font-extrabold text-white leading-tight mb-6">
                                {{ $banner->titulo }}
                            </h1>
                        @endif
                        @if ($banner->subtitulo)
                            <p class="text-lg md:text-xl text-white font-normal mb-10 max-w-2xl mx-auto">
                                {{ $banner->subtitulo }}</p>
                        @endif
                        @if ($banner->link)
                            <a href="{{ $banner->link }}" target="{{ $banner->es_interno ? '_self' : '_blank' }}"
                                class="bg-[#a3e435] text-[#004b92] font-bold py-3 px-10 rounded-lg shadow-xl hover:scale-105 transition-transform text-xl mx-auto">
                                Descubre nuestro impacto
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </section>
        <section class="banners relative flex items-center justify-center overflow-hidden" id="banner_movil">
            @foreach ($banners as $banner)
                <div class="banners-item">
                    <img src="{{ $banner->imagen_movil_url }}" alt="Hero Background"
                        class="inset-0 w-full h-full object-cover">
                    <div class="banners-item-texto z-10 max-w-4xl mx-auto px-4">
                        @if ($banner->titulo)
                            <h1 class="text-4xl md:text-6xl font-extrabold text-white leading-tight mb-6">
                                {{ $banner->titulo }}
                            </h1>
                        @endif
                        @if ($banner->subtitulo)
                            <p class="text-lg md:text-xl text-white font-normal mb-10 max-w-2xl mx-auto">
                                {{ $banner->subtitulo }}</p>
                        @endif
                        @if ($banner->link)
                            <a href="{{ $banner->link }}" target="{{ $banner->es_interno ? '_self' : '_blank' }}"
                                class="bg-[#a3e435] text-[#004b92] font-bold py-3 px-10 rounded-lg shadow-xl hover:scale-105 transition-transform text-xl mx-auto">
                                Descubre nuestro impacto
                            </a>
                        @endif
                    </div>
                </div>
            @endforeach
        </section>
    @endif
    <!-- Intro Section -->
    <section class="relative py-20 px-4 overflow-hidden">
        <div class="relative z-10 max-w-4xl mx-auto text-left">
            <p class="text-[#323842] font-advent text-base leading-[26px] max-w-3xl mx-auto">
                Envíanos un mensaje en nuestro formulario o tus datos de contacto.<br><br>
                Comparte tus necesidades y nuestro equipo preparará un diagnóstico y una propuesta personalizada para tu
                institución o empresa.
            </p>
        </div>
    </section>

    <!-- Contact Form Section -->
    <section class="py-12 lg:py-20 px-4 lg:px-20 bg-white">
        <div class="max-w-[1200px] mx-auto grid gap-16 items-start">

            <!-- Right Column: Form -->
            <form action="{{ route('contacto') }}" method="POST" class="contacto" autocomplete="on">
                @csrf

                <div class="space-y-6">
                    <div class="space-y-2">
                        <label class="block font-advent text-[18px] text-[#424955]">*Nombre:</label>
                        <input type="text" id="nombre" name="nombre" value="{{ old('nombre') }}"
                            class="w-full bg-[#f3f4f6] rounded px-5 py-3 outline-none font-advent text-[18px] validate[required]"
                            maxlength="255">
                    </div>

                    <div class="space-y-2">
                        <label class="block font-advent text-[18px] text-[#424955]">*Correo electrónico:</label>
                        <input type="email" id="correo" name="correo" value="{{ old('correo') }}"
                            class="w-full bg-[#f3f4f6] rounded px-5 py-3 outline-none font-advent text-[18px] validate[required,custom[email]]"
                            maxlength="255">
                    </div>

                    <div class="space-y-2">
                        <label class="block font-advent text-[18px] text-[#424955]">Teléfono:</label>
                        <input type="text" id="telefono" name="telefono" value="{{ old('telefono') }}"
                            class="w-full bg-[#f3f4f6] rounded px-5 py-3 outline-none font-advent text-[18px] validate[required,minSize[10]]"
                            maxlength="15">
                    </div>

                    <div class="space-y-2 relative">
                        <label class="block font-advent text-[18px] text-[#424955]">*Mensaje:</label>
                        <div class="relative">
                            <textarea name="mensaje" id="mensaje" cols="30" rows="10"
                                class="w-full bg-[#f3f4f6] rounded px-4 py-3 outline-none font-advent text-[18px] resize-none validate[required]">{{ old('mensaje') }}</textarea>
                            <div class="absolute bottom-2 right-2 pointer-events-none">
                                <img src="{{ asset('images/contacto/IMG_6.svg') }}" alt="resize handle" class="w-3 h-3">
                            </div>
                        </div>
                    </div>

                    <button type="submit"
                        class="w-full bg-[#004b92] hover:bg-[#003a72] text-white font-advent text-[18px] py-3.5 rounded transition-colors">
                        Enviar
                    </button>
                </div>
            </form>
        </div>
    </section>

    <!-- Social Share Bar -->
    <section class="bg-[#004b92] py-10 px-4 lg:px-20">
        <div class="max-w-[1200px] mx-auto flex flex-col md:flex-row items-center justify-center gap-8 md:gap-20">
            <div class="text-center md:text-left">
                <h3 class="text-white text-2xl font-bold mb-1">Comparte nuestro contenido:</h3>
                <p class="text-white font-medium text-sm opacity-90">¡Envía esta información a quien tú quieras!</p>
            </div>
            <div class="flex items-center gap-8">
                <a href="https://www.youtube.com/@educatekmx" target="_blank"
                    class="text-white hover:scale-110 transition-transform">
                    <iconify-icon icon="ri:youtube-fill" width="40" height="40"></iconify-icon>
                </a>
                <a href="https://www.facebook.com/MxEducatek" target="_blank"
                    class="text-white hover:scale-110 transition-transform">
                    <iconify-icon icon="ri:facebook-fill" width="40" height="40"></iconify-icon>
                </a>
                <a href="https://www.instagram.com/educatek_mx" target="_blank"
                    class="text-white hover:scale-110 transition-transform">
                    <iconify-icon icon="ri:instagram-line" width="40" height="40"></iconify-icon>
                </a>
            </div>
        </div>
    </section>
@endsection
@section('js')
    @vite(['resources/js/sitio_publico/contacto.js'])
@endsection