const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');

if (mobileMenuBtn && mobileMenu) {
    mobileMenuBtn.addEventListener('click', () => {
        mobileMenu.classList.toggle('active');
    });
}

const miaButtons = document.querySelectorAll('.mia-option');
const miaWhatsAppBtn = document.getElementById('miaWhatsAppBtn');

if (miaButtons.length && miaWhatsAppBtn) {
    miaButtons.forEach((button) => {
        button.addEventListener('click', () => {
            miaButtons.forEach((btn) => btn.classList.remove('active'));
            button.classList.add('active');

            const message = button.getAttribute('data-message');
            const encoded = encodeURIComponent(message);
            miaWhatsAppBtn.href = `https://wa.me/573174549037?text=${encoded}`;
        });
    });
}
<main class="site-main inner-page">

    <section class="page-hero page-hero-mia">
        <div class="container page-hero-content">
            <span class="eyebrow">Diamond by Yanne</span>
            <h1>Hola, soy Mia ✨</h1>
            <p>
                Estoy aquí para ayudarte a encontrar joyería, belleza, lociones,
                regalos y detalles especiales según tu estilo, ocasión y presupuesto.
            </p>
            <div class="hero-actions">
                <a href="#mia-flow" class="btn btn-primary">Empezar</a>
                <a
                    href="https://wa.me/573174549037?text=Hola,%20Mia.%20Quiero%20asesor%C3%ADa%20en%20Diamond%20by%20Yanne"
                    class="btn btn-secondary"
                    target="_blank"
                >
                    WhatsApp
                </a>
            </div>
        </div>
    </section>

    <section class="container section-spacing" id="mia-flow">
        <div class="section-heading">
            <span class="eyebrow">Asesoría guiada</span>
            <h2>Cuéntame qué estás buscando</h2>
            <p>
                Elige una opción y te llevo a una recomendación más clara.
            </p>
        </div>

        <div class="mia-flow-card">
            <div class="mia-step active" data-step="1">
                <h3>1. ¿Qué buscas hoy?</h3>
                <div class="mia-choice-grid">
                    <button class="mia-choice" data-value="joyería">Joyería</button>
                    <button class="mia-choice" data-value="lociones">Lociones</button>
                    <button class="mia-choice" data-value="belleza">Belleza</button>
                    <button class="mia-choice" data-value="regalo">Regalo</button>
                    <button class="mia-choice" data-value="quinceañera">Quinceañera</button>
                </div>
                <button class="btn btn-primary mia-next">Siguiente</button>
            </div>

            <div class="mia-step" data-step="2">
                <h3>2. ¿Es para ti o para alguien más?</h3>
                <div class="mia-choice-grid">
                    <button class="mia-choice" data-value="para mí">Para mí</button>
                    <button class="mia-choice" data-value="para regalo">Para regalo</button>
                    <button class="mia-choice" data-value="para quinceañera">Para una quinceañera</button>
                </div>
                <div class="hero-actions">
                    <button class="btn btn-secondary mia-prev">Atrás</button>
                    <button class="btn btn-primary mia-next">Siguiente</button>
                </div>
            </div>

            <div class="mia-step" data-step="3">
                <h3>3. ¿Qué estilo te gusta?</h3>
                <div class="mia-choice-grid">
                    <button class="mia-choice" data-value="delicado">Delicado</button>
                    <button class="mia-choice" data-value="elegante">Elegante</button>
                    <button class="mia-choice" data-value="romántico">Romántico</button>
                    <button class="mia-choice" data-value="brillante">Brillante</button>
                    <button class="mia-choice" data-value="moderno">Moderno</button>
                </div>
                <div class="hero-actions">
                    <button class="btn btn-secondary mia-prev">Atrás</button>
                    <button class="btn btn-primary mia-next">Siguiente</button>
                </div>
            </div>

            <div class="mia-step" data-step="4">
                <h3>4. ¿Qué presupuesto tienes?</h3>
                <div class="mia-choice-grid">
                    <button class="mia-choice" data-value="bajo">Bajo</button>
                    <button class="mia-choice" data-value="medio">Medio</button>
                    <button class="mia-choice" data-value="premium">Premium</button>
                </div>
                <div class="hero-actions">
                    <button class="btn btn-secondary mia-prev">Atrás</button>
                    <button class="btn btn-primary mia-next">Ver recomendación</button>
                </div>
            </div>

            <div class="mia-step" data-step="5">
                <h3>✨ Tu asesoría está lista</h3>
                <p id="miaResultText">
                    Ya tengo una idea de lo que buscas.
                </p>

                <div class="mia-result-box">
                    <p>
                        Escríbeme por WhatsApp y te envío una propuesta
                        según lo que elegiste.
                    </p>
                    <a
                        id="miaResultLink"
                        target="_blank"
                        class="btn btn-primary"
                        href="https://wa.me/573174549037?text=Hola,%20Mia.%20Quiero%20asesor%C3%ADa%20en%20Diamond%20by%20Yanne"
                    >
                        Hablar con Mia por WhatsApp
                    </a>
                </div>

                <div class="hero-actions">
                    <button class="btn btn-secondary mia-prev">Atrás</button>
                    <button class="btn btn-primary mia-reset">Empezar de nuevo</button>
                </div>
            </div>
        </div>
    </section>

</main>

<footer class="site-footer">
    <div class="container footer-grid">
        <div>
            <h3>Diamond by Yanne</h3>
            <p>
                Belleza, joyería, lociones y detalles para mujeres y momentos especiales.
            </p>
        </div>

        <div>
            <h4>Categorías</h4>
            <ul>
                <li><a href="belleza.php">Belleza</a></li>
                <li><a href="joyeria.php">Joyería</a></li>
                <li><a href="lociones.php">Lociones</a></li>
                <li><a href="quinceaneras.php">Quinceañeras</a></li>
                <li><a href="regalos.php">Regalos</a></li>
                <li><a href="catalogo.php">Catálogo</a></li>
            </ul>
        </div>

        <div>
            <h4>Contacto</h4>
            <p>WhatsApp: +57 317 454 9037</p>
            <a href="contacto.php">Contáctanos</a>
        </div>
    </div>

    <div class="footer-bottom">
        <p>© 2026 Diamond by Yanne. Todos los derechos reservados.</p>
    </div>
</footer>

<script src="assets/js/main.js?v=2"></script>
</body>
</html><nav class="mobile-dock">
    <a href="index.php" class="dock-item">
        <span class="dock-icon">⌂</span>
        <span class="dock-label">Inicio</span>
    </a>

    <a href="catalogo.php" class="dock-item">
        <span class="dock-icon">◇</span>
        <span class="dock-label">Catálogo</span>
    </a>

    <a href="asistente-mia.php" class="dock-item dock-item-mia">
        <span class="dock-icon">✦</span>
        <span class="dock-label">Mia</span>
    </a>

    <a href="quinceaneras.php" class="dock-item">
        <span class="dock-icon">♡</span>
        <span class="dock-label">Quince</span>
    </a>

    <a href="https://wa.me/573174549037?text=Hola,%20quiero%20informaci%C3%B3n%20sobre%20Diamond%20by%20Yanne" target="_blank" class="dock-item">
        <span class="dock-icon">✆</span>
        <span class="dock-label">WhatsApp</span>
    </a>
</nav>