{{template "header.tmpl" .}}

<section class="contact__section section--padding">
    <div class="container">
        <div class="contact__section--heading text-center mb-40">
            <h2 class="contact__section--heading__maintitle">Contáctanos</h2>
            <p class="contact__section--heading__desc">Estamos para servirte, déjanos un mensaje y te responderemos a la brevedad.</p>
        </div>

        <div style="background:#fff;border:1px solid #e5e7eb;border-radius:5px;padding:30px;margin-bottom:40px;">
            <h3 style="font-size:20px;font-weight:700;color:#111827;margin:0 0 20px 0;border-bottom:2px solid #e11d48;padding-bottom:12px;">Envíanos un mensaje</h3>
            {{if .Sent}}
                <div style="background:#d1fae5;border:1px solid #10b981;color:#065f46;padding:15px;border-radius:5px;margin-bottom:20px;">Gracias. Tu mensaje fue enviado correctamente.</div>
            {{end}}
            {{if .Error}}
                <div style="background:#fee2e2;border:1px solid #ef4444;color:#991b1b;padding:15px;border-radius:5px;margin-bottom:20px;">{{.Error}}</div>
            {{end}}
            <form action="/contacto" method="POST">
                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <div class="contact__form--list mb-20">
                            <label class="contact__form--label" for="input1">Nombre <span class="contact__form--label__star">*</span></label>
                            <input class="contact__form--input" name="firstname" id="input1" placeholder="Tu nombre" type="text" value="{{.Form.Firstname}}">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="contact__form--list mb-20">
                            <label class="contact__form--label" for="input2">Teléfono <span class="contact__form--label__star">*</span></label>
                            <input class="contact__form--input" name="phone" id="input2" placeholder="Tu teléfono" type="text" value="{{.Form.Phone}}">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="contact__form--list mb-20">
                            <label class="contact__form--label" for="input3">Correo Electrónico <span class="contact__form--label__star">*</span></label>
                            <input class="contact__form--input" name="email" id="input3" placeholder="Tu correo electrónico" type="text" value="{{.Form.Email}}">
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="contact__form--list mb-20">
                            <label class="contact__form--label" for="input4">Asunto <span class="contact__form--label__star">*</span></label>
                            <input class="contact__form--input" name="subject" id="input4" placeholder="Asunto" type="text" value="{{.Form.Subject}}">
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="contact__form--list mb-15">
                            <label class="contact__form--label" for="input5">Mensaje <span class="contact__form--label__star">*</span></label>
                            <textarea class="contact__form--textarea" name="message" id="input5" placeholder="Escribe tu mensaje">{{.Form.Message}}</textarea>
                        </div>
                    </div>
                </div>
                <button class="contact__form--btn primary__btn" type="submit"><span>Enviar mensaje</span></button>
            </form>
        </div>
    </div>
</section>

<section class="contact__section section--padding pt-0">
    <div class="container">
        <div class="row d-flex align-items-stretch">
            <div class="col-lg-6 mb-30 d-flex">
                <div style="background:#111827;color:#fff;padding:30px;border-radius:5px;width:100%;">
                    <h3 style="color:#fff;font-size:20px;font-weight:700;margin:0 0 20px 0;border-bottom:2px solid #e11d48;padding-bottom:12px;">Matriz Querétaro</h3>
                    <div style="margin-bottom:15px;">
                        <strong>Dirección:</strong><br>
                        Cond. Ind. El Fénix, Av. Tecnológico 148-INT 24,<br>
                        El Retablo, 76154 Santiago de Querétaro, Qro.
                    </div>
                    <div style="margin-bottom:15px;">
                        <strong>Horario:</strong><br>
                        Lun - Vie 9:00 a 18:30<br>
                        Sáb 9:00 a 14:00
                    </div>
                    <div style="margin-bottom:15px;">
                        <strong>Teléfono:</strong><br>
                        <a href="tel:4422276198" style="color:#fff;">442 227 6198</a><br>
                        <a href="tel:4461425740" style="color:#fff;">446 142 5740</a>
                    </div>
                    <div>
                        <strong>WhatsApp:</strong><br>
                        <a href="https://wa.me/5214481131609" style="color:#fff;">448 113 1609</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mb-30 d-flex">
                <div style="background:#fff;border:1px solid #e5e7eb;border-radius:5px;overflow:hidden;width:100%;">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3735.123456789!2d-100.389389!3d20.588793!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjDCsDM1JzE5LjciTiAxMDDCsDIzJzIxLjgiVw!5e0!3m2!1ses!2smx!4v1" width="100%" height="100%" style="border:0;display:block;min-height:350px;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>

        <div class="row d-flex align-items-stretch mt-30">
            <div class="col-lg-6 mb-30 d-flex">
                <div style="background:#111827;color:#fff;padding:30px;border-radius:5px;width:100%;">
                    <h3 style="color:#fff;font-size:20px;font-weight:700;margin:0 0 20px 0;border-bottom:2px solid #e11d48;padding-bottom:12px;">Sucursal Cuautitlán Izcalli</h3>
                    <div style="margin-bottom:15px;">
                        <strong>Dirección:</strong><br>
                        Calz. de Guadalupe 5-B2, Industrial Cuamatla,<br>
                        54730 Cuautitlán Izcalli, Méx.
                    </div>
                    <div style="margin-bottom:15px;">
                        <strong>Horario:</strong><br>
                        Lun - Vie 9:00 a 18:00<br>
                        Sáb 9:00 a 14:00
                    </div>
                    <div style="margin-bottom:15px;">
                        <strong>Teléfono:</strong><br>
                        <a href="tel:5592589996" style="color:#fff;">55 9258 9996</a>
                    </div>
                    <div>
                        <strong>WhatsApp:</strong><br>
                        <a href="https://wa.me/5215527685829" style="color:#fff;">55 2768 5829</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mb-30 d-flex">
                <div style="background:#fff;border:1px solid #e5e7eb;border-radius:5px;overflow:hidden;width:100%;">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3756.123456789!2d-99.123456!3d19.678901!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMTnCsDQwJzQ0LjAiTiA5OcKwMDcnMjQuMCJX!5e0!3m2!1ses!2smx!4v1" width="100%" height="100%" style="border:0;display:block;min-height:350px;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </div>
</section>

{{template "footer.tmpl" .}}