@extends('layouts.app2')

@section('content')
<div class="container py-5">

    {{-- Imagen principal --}}
    <div class="mb-5 text-center">
        <img src="{{ asset('images/contactoee.jpg') }}" alt="Imagen de contacto" class="img-fluid rounded-3 shadow mx-auto d-block" style="max-width: 80%;">
    </div>

    {{-- Título centrado --}}
    <h2 class="text-center text-primary fw-bold mb-5">Nuestra Ubicación</h2>
    <p class="text-center text-primary fw-bold mb-5">DIRECCIÓN: 15 calle 5a. y 6a. Avenida, Puerto Barrios, Izabal, Guatemala.</p>

    {{-- Contenido en dos columnas (Mapa + Facebook) --}}
    <div class="row gx-5">
        {{-- Mapa --}}
        <div class="col-lg-8 mb-4">
            <div class="ratio ratio-16x9 shadow-sm rounded-3 border">
                <iframe 
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3925.193594025346!2d-88.5957316859822!3d15.71608258915454!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8f6645a89a449b5f%3A0x4a872f07f2dfe3a5!2s15a%20Calle%20%26%206a%20Avenida%2C%20Puerto%20Barrios!5e0!3m2!1ses-419!2sgt!4v1721649583784!5m2!1ses-419!2sgt" 
                    allowfullscreen="" loading="lazy" 
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
        </div>

        {{-- Facebook --}}
        <div class="col-lg-4 mb-4">
            <div class="p-3 bg-light rounded-3 shadow-sm" data-anime='{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
                <div id="fb-root"></div>
                <script async defer crossorigin="anonymous" 
                    src="https://connect.
                    facebook.net/es_ES/sdk.js#xfbml=1&version=v23.0">
                </script>
                <div class="fb-page"
                    data-href="https://www.facebook.com/empresaelectricamunicipalpb"
                    data-tabs="timeline"
                    data-width=""
                    data-height=""
                    data-small-header="false"
                    data-adapt-container-width="true"
                    data-hide-cover="false"
                    data-show-facepile="true">
                        <blockquote cite="https://www.facebook.com/empresaelectricamunicipalpb" class="fb-xfbml-parse-ignore">
                            <a href="https://www.facebook.com/empresaelectricamunicipalpb">Empresa Eléctrica Municipal de Puerto Barrios</a>
                        </blockquote>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection