<?php
if (isset($_GET['debug']) && $_GET['debug'] === '1') {
    ini_set('display_errors', 1);
    ini_set('display_startup_errors', 1);
    error_reporting(E_ALL);
}
?>
<!doctype html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="Contactanos para consultas, cotizaciones y soporte. AIT Store - Articulos e Insumos Tecnologicos.">
    <title>Contacto | AIT Store</title>
    <link rel="stylesheet" href="assets/css/storefront.css">
</head>

<body class="storefront">
    <nav class="sf-navbar">
        <div class="sf-wrap sf-navbar-inner">
            <a class="sf-brand-logo" href="tienda.php">
                <img src="logo_ait.jpeg" alt="AIT Store" class="sf-brand-img">
                <span class="sf-brand-name">AIT <strong>Store</strong></span>
            </a>
            <ul class="sf-nav-links">
                <li><a href="tienda.php">Tienda</a></li>
                <li><a href="promociones.php">Promociones</a></li>
                <li><a href="novedades.php">Novedades</a></li>
                <li><a href="contacto.php" class="sf-nav-active">Contacto</a></li>
            </ul>
            <span class="sf-brand-tagline">Articulos e Insumos Tecnologicos</span>
        </div>
    </nav>

    <header class="sf-hero">
        <div class="sf-wrap">
            <h1>Contactanos</h1>
            <p>Estamos disponibles para responder tus consultas, cotizaciones y solicitudes de soporte tecnico.</p>
        </div>
    </header>

    <main class="sf-wrap" style="padding-bottom: 64px;">
        <div class="sf-contact-grid">

            <!-- Datos de contacto -->
            <div class="sf-contact-info">
                <div class="sf-panel">
                    <h2 style="margin:0 0 20px;font-size:1.1rem;color:var(--sf-ink);">Informacion de contacto</h2>

                    <div class="sf-contact-item">
                        <div class="sf-contact-icon">&#128205;</div>
                        <div>
                            <p class="sf-contact-label">Direccion</p>
                            <p class="sf-contact-value">La Paz, Bolivia</p>
                        </div>
                    </div>

                    <div class="sf-contact-item" style="margin-top:16px;">
                        <div class="sf-contact-icon">&#128222;</div>
                        <div>
                            <p class="sf-contact-label">Telefono / WhatsApp</p>
                            <a class="sf-contact-value" href="tel:+59175060017">+591 63167327</a>
                        </div>
                    </div>

                    <div class="sf-contact-item" style="margin-top:16px;">
                        <div class="sf-contact-icon">&#9993;</div>
                        <div>
                            <p class="sf-contact-label">Correo electronico</p>
                            <a class="sf-contact-value" href="mailto:contacto@aitstore.com.bo">contacto@aitstore.com.bo</a>
                        </div>
                    </div>

                    <div class="sf-contact-item" style="margin-top:16px;">
                        <div class="sf-contact-icon">&#128337;</div>
                        <div>
                            <p class="sf-contact-label">Horario de atencion</p>
                            <p class="sf-contact-value">Lun – Vie: 9:00 – 18:00</p>
                            <p class="sf-contact-value" style="color:var(--sf-muted);font-size:0.85rem;">Sabado: 9:00 – 13:00</p>
                        </div>
                    </div>

                    <div style="margin-top:24px;">
                        <a href="https://wa.me/59175060017?text=Hola%2C+quisiera+m%C3%A1s+informaci%C3%B3n"
                            target="_blank" rel="noopener"
                            class="sf-btn sf-btn-whatsapp" style="width:100%;justify-content:center;">
                            &#128172; Escribir por WhatsApp
                        </a>
                    </div>
                </div>
            </div>

            <!-- Formulario de contacto -->
            <div>
                <div class="sf-panel">
                    <h2 style="margin:0 0 20px;font-size:1.1rem;color:var(--sf-ink);">Enviar consulta</h2>

                    <div id="sf-contact-msg" class="sf-modal-msg" style="margin-bottom:14px;"></div>

                    <form id="sf-contact-form" autocomplete="off">
                        <input type="hidden" name="producto_id" value="0">
                        <input type="hidden" name="producto_nombre" value="Consulta general">
                        <input type="hidden" name="producto_codigo" value="-">
                        <input type="hidden" name="precio_mostrado" value="-">

                        <div class="sf-field">
                            <label for="sf-c-nombre">Nombre <span class="sf-req">*</span></label>
                            <input type="text" id="sf-c-nombre" name="nombre" required autocomplete="name" placeholder="Tu nombre completo">
                        </div>
                        <div class="sf-field">
                            <label for="sf-c-empresa">Empresa</label>
                            <input type="text" id="sf-c-empresa" name="empresa" autocomplete="organization" placeholder="Nombre de tu empresa (opcional)">
                        </div>
                        <div class="sf-field">
                            <label for="sf-c-tel">Telefono / WhatsApp <span class="sf-req">*</span></label>
                            <input type="tel" id="sf-c-tel" name="telefono" required autocomplete="tel" placeholder="+591 XXXXXXXX">
                        </div>
                        <div class="sf-field">
                            <label for="sf-c-email">Correo electronico</label>
                            <input type="email" id="sf-c-email" name="email" autocomplete="email" placeholder="tu@correo.com">
                        </div>
                        <div class="sf-field">
                            <label for="sf-c-mensaje">Mensaje <span class="sf-req">*</span></label>
                            <textarea id="sf-c-mensaje" name="mensaje" rows="4" required placeholder="&#191;En que podemos ayudarte?"></textarea>
                        </div>
                        <button type="submit" class="sf-btn sf-btn-primary" style="width:100%;margin-top:4px;">
                            Enviar mensaje
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <script>
        (function() {
            var form = document.getElementById('sf-contact-form');
            var msg = document.getElementById('sf-contact-msg');
            if (!form) return;

            form.addEventListener('submit', function(evt) {
                evt.preventDefault();
                var submitBtn = form.querySelector('[type=submit]');
                if (submitBtn) submitBtn.disabled = true;

                fetch('tienda_lead.php', {
                        method: 'POST',
                        body: new FormData(form)
                    })
                    .then(function(r) {
                        return r.json();
                    })
                    .then(function(res) {
                        if (submitBtn) submitBtn.disabled = false;
                        if (msg) {
                            msg.textContent = res.message || (res.success ? 'Mensaje enviado. Nos pondremos en contacto pronto.' : 'Error al enviar.');
                            msg.className = 'sf-modal-msg ' + (res.success ? 'sf-modal-ok' : 'sf-modal-err');
                            msg.style.display = 'block';
                        }
                        if (res.success) form.reset();
                    })
                    .catch(function() {
                        if (submitBtn) submitBtn.disabled = false;
                        if (msg) {
                            msg.textContent = 'Error de conexion. Intenta nuevamente.';
                            msg.className = 'sf-modal-msg sf-modal-err';
                            msg.style.display = 'block';
                        }
                    });
            });
        })();
    </script>
</body>

</html>