@extends('layouts.master')

@section('title', 'Contactenos - Academia Plurinacional de Estudios Constitucionales')

@section('content')
<h2 class="font-bold text-3xl text-tcp py-4 inline-flex">
    <svg class="w-9 h-9 mr-3 text-tcp" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16.153 19 21 12l-4.847-7H3l4.848 7L3 19h13.153Z"/>
    </svg>
    CONTÁCTENOS
</h2>
<div class="py-4">
    <div style="width: 100%"><iframe width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=es&amp;q=-19.039835,%20-65.261698+(Academia%20Plurinacional%20de%20Estudios%20Constitucionales)&amp;t=&amp;z=16&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"><a href="https://www.gps.ie/car-satnav-gps/">GPS devices</a></iframe></div>
</div>

<div class="grid grid-cols-3 gap-3 py-6">
    <div class="w-full py-4 bg-gray-50 border mx-auto border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
        <a href="#">
            <svg class="w-40 h-40 text-tcp mx-auto dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.8 13.938h-.011a7 7 0 1 0-11.464.144h-.016l.14.171c.1.127.2.251.3.371L12 21l5.13-6.248c.194-.209.374-.429.54-.659l.13-.155Z"/>
              </svg>
        </a>
        <div class="p-5 text-center">
            <a href="#">
                <h5 class="mb-2 text-xl font-semibold tracking-tight dark:text-white">Avenida del Maestro #273</h5>
            </a>
            <p class="font-light text-lg py-2">
                Chuquisaca - Bolivia
            </p>
        </div>
    </div>
    <div class="w-full py-4 bg-gray-50 border mx-auto border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
        <a href="#">
            <svg class="w-40 h-40 mx-auto text-tcp dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.427 14.768 17.2 13.542a1.733 1.733 0 0 0-2.45 0l-.613.613a1.732 1.732 0 0 1-2.45 0l-1.838-1.84a1.735 1.735 0 0 1 0-2.452l.612-.613a1.735 1.735 0 0 0 0-2.452L9.237 5.572a1.6 1.6 0 0 0-2.45 0c-3.223 3.2-1.702 6.896 1.519 10.117 3.22 3.221 6.914 4.745 10.12 1.535a1.601 1.601 0 0 0 0-2.456Z"/>
              </svg>

        </a>
        <div class="p-5 text-center">
            <a href="#">
                <h5 class="mb-2 text-xl font-semibold tracking-tight dark:text-white">Télefono: (591-4) 6440455</h5>
            </a>
            <p class="py-2 text-lg font-light">
                Fax: (591-4) 6421871 <br />
                Línea Gratuita: 800-10-2223
            </p>
        </div>
    </div>
    <div class="w-full py-4 bg-gray-50 border mx-auto border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
        <a href="#">
            <svg class="w-40 h-40 mx-auto text-tcp dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m3.5 5.5 7.893 6.036a1 1 0 0 0 1.214 0L20.5 5.5M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z"/>
              </svg>


        </a>
        <div class="p-5 text-center">
            <a href="#">
                <h5 class="mb-2 text-xl font-semibold tracking-tight dark:text-white">Correo Institucional</h5>
            </a>
            <p class="py-2 text-lg font-light">
                tcp@tcpbolivia.bo
            </p>
        </div>
    </div>
</div>
@endsection