<!DOCTYPE html>

<!--
 // WEBSITE: https://themefisher.com
 // TWITTER: https://twitter.com/themefisher
 // FACEBOOK: https://www.facebook.com/themefisher
 // GITHUB: https://github.com/themefisher/
-->

<html lang="zxx">

<head>
  <meta charset="utf-8">
  <title>AutoECU | Cotiza tu Reparación de Computadora Automotriz</title>

   <!-- mobile responsive meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
  <!-- theme meta -->
  <meta name="theme-name" content="godocs-bulma" />
  
  <!-- ** Plugins Needed for the Project ** -->
  <!-- plugins -->
  <link rel="stylesheet" href="plugins/bulma/bulma.min.css">
  <link rel="stylesheet" href="plugins/themify-icons/themify-icons.css">
  <!-- Main Stylesheet -->
  <link href="css/style.css" rel="stylesheet">
  
  <!--Favicon-->
  <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
  <link rel="icon" href="images/favicon.ico" type="image/x-icon">
  <style>
    .quote-result {
      background: #e8f4fd;
      border-left: 4px solid #3366cc;
      padding: 1.5rem;
      margin-top: 1.5rem;
      border-radius: 8px;
      display: none;
    }
    .quote-result.show {
      display: block;
      animation: fadeIn 0.5s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .price-tag {
      font-size: 2rem;
      font-weight: bold;
      color: #3366cc;
    }
    .form-group select, .form-group input, .form-group textarea {
      width: 100%;
    }
  </style>

</head>

<body>

<nav class="navbar is-sticky-top navigation" role="navigation" aria-label="main navigation">
   <div class="container">
      <div class="navbar-brand">
         <a class="navbar-item" href="index.html">
            <img class="img-fluid" src="images/logo.png" alt="ElectroMotriz" width="200px">
         </a>
   
         <a role="button" class="navbar-burger burger" aria-expanded="false" data-target="navbar-links">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
         </a>
      </div>
   
      <div id="navbar-links" class="navbar-menu">
         <div class="navbar-start ml-auto">
            <a class="navbar-item" href="/">Inicio</a>
            <a class="navbar-item" href="/cotizacion">Cotizacion  online</a>
            <a class="navbar-item" href="search.html">Diagnóstico</a>

            <a class="navbar-item" href="tel:6637006341">📞 +52 663 700 6341</a>
         </div>
   
         <div class="navbar-end ml-0">
            <div class="navbar-item py-0">
               <a href="/singup" class="btn btn-sm btn-primary  ml-4">Crear Cuenta</a>
               <a href="/login" class="btn btn-sm btn-outline-primary ml-4">Accceder</a>
            </div>
         </div>
      </div>
   </div>
</nav>
<section class="section">
   <div class="container">
      <div class="columns is-desktop is-justify-content-center">
         <div class="column is-8-desktop">
            <div class="p-6 shadow rounded content">
               <h2 class="section-title">Cotiza tu Reparación de Computadora Automotriz (ECU)</h2>
               <p class="mb-5">Completa los siguientes datos y te daremos un precio estimado para la reparación de tu centralita electrónica.</p>
               
               <form id="quoteForm" method="POST" action="#">
                  <div class="columns is-multiline">
                     
                     <!-- Nombre -->
                     <div class="form-group column is-6-desktop">
                        <label for="fname">Nombre(s)</label>
                        <input type="text" class="input" id="fname" name="fname" placeholder="Tu nombre" required>
                     </div>
                     
                     <!-- Apellido -->
                     <div class="form-group column is-6-desktop">
                        <label for="lname">Apellido(s)</label>
                        <input type="text" class="input" id="lname" name="lname" placeholder="Tu apellido" required>
                     </div>
                     
                     <!-- Email -->
                     <div class="form-group column is-12">
                        <label for="email">Correo Electrónico</label>
                        <input type="email" class="input" id="email" name="email" placeholder="tucorreo@ejemplo.com" required>
                     </div>
                     
                     <!-- Teléfono -->
                     <div class="form-group column is-12">
                        <label for="phone">Teléfono / WhatsApp</label>
                        <input type="tel" class="input" id="phone" name="phone" placeholder="55 1234 5678" required>
                     </div>

                     <!-- MARCA -->
                     <div class="form-group column is-4-desktop">
                        <label for="brand">Marca del Vehículo</label>
                        <select id="brand" class="input custom-select" name="brand" required>
                           <option selected disabled value="">Selecciona la marca</option>
                           <option value="acura">Acura</option>
                           <option value="audi">Audi</option>
                           <option value="bmw">BMW</option>
                           <option value="chevrolet">Chevrolet</option>
                           <option value="chrysler">Chrysler</option>
                           <option value="citroen">Citroën</option>
                           <option value="dodge">Dodge</option>
                           <option value="fiat">Fiat</option>
                           <option value="ford">Ford</option>
                           <option value="honda">Honda</option>
                           <option value="hyundai">Hyundai</option>
                           <option value="infiniti">Infiniti</option>
                           <option value="jaguar">Jaguar</option>
                           <option value="jeep">Jeep</option>
                           <option value="kia">Kia</option>
                           <option value="landrover">Land Rover</option>
                           <option value="lexus">Lexus</option>
                           <option value="mazda">Mazda</option>
                           <option value="mercedes">Mercedes-Benz</option>
                           <option value="mini">Mini</option>
                           <option value="mitsubishi">Mitsubishi</option>
                           <option value="nissan">Nissan</option>
                           <option value="peugeot">Peugeot</option>
                           <option value="porsche">Porsche</option>
                           <option value="renault">Renault</option>
                           <option value="seat">Seat</option>
                           <option value="skoda">Skoda</option>
                           <option value="subaru">Subaru</option>
                           <option value="suzuki">Suzuki</option>
                           <option value="toyota">Toyota</option>
                           <option value="volkswagen">Volkswagen</option>
                           <option value="volvo">Volvo</option>
                           <option value="otra">Otra</option>
                        </select>
                     </div>

                     <!-- MODELO -->
                     <div class="form-group column is-4-desktop">
                        <label for="model">Modelo del Vehículo</label>
                        <input type="text" class="input" id="model" name="model" placeholder="Ej: Civic, Focus, 3 Series" required>
                     </div>

                     <!-- AÑO -->
                     <div class="form-group column is-4-desktop">
                        <label for="year">Año del Vehículo</label>
                        <select id="year" class="input custom-select" name="year" required>
                           <option selected disabled value="">Selecciona el año</option>
                           <option value="2025">2025</option>
                           <option value="2024">2024</option>
                           <option value="2023">2023</option>
                           <option value="2022">2022</option>
                           <option value="2021">2021</option>
                           <option value="2020">2020</option>
                           <option value="2019">2019</option>
                           <option value="2018">2018</option>
                           <option value="2017">2017</option>
                           <option value="2016">2016</option>
                           <option value="2015">2015</option>
                           <option value="2014">2014</option>
                           <option value="2013">2013</option>
                           <option value="2012">2012</option>
                           <option value="2011">2011</option>
                           <option value="2010">2010</option>
                           <option value="2009">2009</option>
                           <option value="2008">2008</option>
                           <option value="2007">2007</option>
                           <option value="2006">2006</option>
                           <option value="2005">2005</option>
                           <option value="2004">2004</option>
                           <option value="2003">2003</option>
                           <option value="2002">2002</option>
                           <option value="2001">2001</option>
                           <option value="2000">2000</option>
                           <option value="1999">1999</option>
                           <option value="1998">1998</option>
                           <option value="1997">1997</option>
                           <option value="1996">1996</option>
                           <option value="1995">1995</option>
                        </select>
                     </div>

                     <!-- DESCRIPCIÓN DEL PROBLEMA -->
                     <div class="form-group column is-12">
                        <label for="problem">Descripción del problema (síntomas que presenta el auto o la computadora)</label>
                        <textarea name="problem" id="problem" class="input" rows="4" placeholder="Ej: El auto no enciende, la computadora no comunica con el escáner, tiene agua en la ECU, fallos intermitentes, luces en el tablero, etc..." required></textarea>
                     </div>

                     <!-- BOTÓN -->
                     <div class="column is-12">
                        <button type="submit" class="btn btn-primary">Cotizar mi reparación</button>
                     </div>
                  </div>
               </form>

               <!-- Resultado de cotización -->
               <div id="quoteResult" class="quote-result">
                  <h3>📄 Cotización Estimada</h3>
                  <p><strong>Cliente:</strong> <span id="resultName"></span></p>
                  <p><strong>Vehículo:</strong> <span id="resultVehicle"></span></p>
                  <p><strong>Problema descrito:</strong> <span id="resultProblem"></span></p>
                  <p><strong>Precio estimado de reparación:</strong></p>
                  <p class="price-tag" id="resultPrice"></p>
                  <p class="mt-3">*Este es un precio de referencia. Un asesor se pondrá en contacto contigo para afinar el diagnóstico y ofrecerte el precio final exacto.</p>
                  <button type="button" class="btn btn-outline-primary mt-2" onclick="document.getElementById('quoteForm').reset(); document.getElementById('quoteResult').classList.remove('show');">Cotizar otro vehículo</button>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

<footer>
   <div class="container">
      <div class="columns is-multiline is-align-items-center border-bottom py-5">
         <div class="column is-4-desktop is-12-tablet">
            <ul class="list-inline footer-menu has-text-centered has-text-left-desktop">
               <li class="list-inline-item"><a href="changelog.html">Garantía</a></li>
               <li class="list-inline-item"><a href="contact.html">Contacto</a></li>
               <li class="list-inline-item"><a href="search.html">Diagnóstico</a></li>
            </ul>
         </div>
         <div class="column is-4-desktop is-12-tablet">
            <a class="navbar-brand is-justify-content-center" href="index.html">
               <img class="img-fluid" src="images/logo.png" alt="AutoECU - Cotizador de reparación de computadoras automotrices">
            </a>
         </div>
         <div class="column is-4-desktop is-12-tablet">
            <ul class="list-inline social-icons has-text-right-desktop has-text-centered">
               <li class="list-inline-item"><a href="#"><i class="ti-facebook"></i></a></li>
               <li class="list-inline-item"><a href="#"><i class="ti-twitter-alt"></i></a></li>
               <li class="list-inline-item"><a href="#"><i class="ti-github"></i></a></li>
               <li class="list-inline-item"><a href="#"><i class="ti-linkedin"></i></a></li>
            </ul>
         </div>
      </div>
      <div class="py-4 has-text-centered">
         <small class="text-light">Copyright © 2025 - AutoECU | Especialistas en Reparación de Centralitas Electrónicas</small>
      </div>
   </div>
</footer>

<!-- plugins -->
<script src="plugins/jQuery/jquery.min.js"></script>
<script src="plugins/masonry/masonry.min.js"></script>
<script src="plugins/clipboard/clipboard.min.js"></script>
<script src="plugins/match-height/jquery.matchHeight-min.js"></script>

<!-- Main Script -->
<script src="js/script.js"></script>

<!-- Lógica de cotización -->
<script>
  document.getElementById('quoteForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Obtener valores
    const firstName = document.getElementById('fname').value;
    const lastName = document.getElementById('lname').value;
    const fullName = "dwdwwwww";
    const brandSelect = document.getElementById('brand');
    const brandText = brandSelect.options[brandSelect.selectedIndex]?.text || brandSelect.value;
    const model = document.getElementById('model').value;
    const year = document.getElementById('year').value;
    const problem = document.getElementById('problem').value;
    
    // Validar que los campos obligatorios estén llenos
    if (!firstName || !lastName || !document.getElementById('email').value || !document.getElementById('phone').value || !brandSelect.value || !model || !year || !problem) {
      alert('Por favor completa todos los campos obligatorios.');
      return;
    }
    
    // Calcular precio base según marca y año
    let basePrice = 0;
    const brand = brandSelect.value;
    const yearNum = parseInt(year);
    
    // Precios base por marca (categorías)
    const premiumBrands = ['audi', 'bmw', 'mercedes', 'landrover', 'porsche', 'jaguar', 'lexus', 'infiniti', 'volvo'];
    const standardBrands = ['ford', 'chevrolet', 'nissan', 'toyota', 'honda', 'hyundai', 'kia', 'mazda', 'volkswagen', 'subaru', 'mitsubishi', 'suzuki'];
    
    if (premiumBrands.includes(brand)) {
      basePrice = 3800;
    } else if (standardBrands.includes(brand)) {
      basePrice = 2500;
    } else {
      basePrice = 2800; // Otras marcas
    }
    
    // Ajuste por antigüedad
    let ageMultiplier = 1;
    if (yearNum >= 2020) {
      ageMultiplier = 1.3; // Vehículos más nuevos, electrónica más compleja
    } else if (yearNum >= 2010) {
      ageMultiplier = 1.1;
    } else if (yearNum >= 2000) {
      ageMultiplier = 0.9;
    } else {
      ageMultiplier = 0.8;
    }
    
    // Ajuste por palabras clave en la descripción (complejidad)
    let complexityMultiplier = 1;
    const problemLower = problem.toLowerCase();
    if (problemLower.includes('agua') || problemLower.includes('humedad') || problemLower.includes('corrosión')) {
      complexityMultiplier += 0.4;
    }
    if (problemLower.includes('no enciende') || problemLower.includes('no arranca')) {
      complexityMultiplier += 0.2;
    }
    if (problemLower.includes('reprogramar') || problemLower.includes('programación') || problemLower.includes('inmovilizador')) {
      complexityMultiplier += 0.3;
    }
    if (problemLower.includes('corto') || problemLower.includes('quemado') || problemLower.includes('olor')) {
      complexityMultiplier += 0.35;
    }
    if (problemLower.includes('transmisión') || problemLower.includes('caja')) {
      complexityMultiplier += 0.25;
    }
    
    let finalPrice = Math.round(basePrice * ageMultiplier * complexityMultiplier);
    
    // Redondear a múltiplos de 50 para mejor presentación
    finalPrice = Math.ceil(finalPrice / 50) * 50;
    
    // Formatear precio
    const formattedPrice = new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' }).format(finalPrice);
    
    // Mostrar resultado
    document.getElementById('resultName').innerText = fullName;
    document.getElementById('resultVehicle').innerText = `awdawdawdawawawdad`;
    document.getElementById('resultProblem').innerText = problem.length > 100 ? problem.substring(0, 100) + '...' : problem;
    document.getElementById('resultPrice').innerHTML = formattedPrice;
    
    // Mostrar el cuadro de cotización y ocultar formulario (opcional, pero mejor mantener ambos)
    const quoteDiv = document.getElementById('quoteResult');
    quoteDiv.classList.add('show');
    
    // Scroll suave al resultado
    quoteDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
    
    // Opcional: Aquí podrías enviar los datos a un servidor con fetch si lo deseas
    // Ejemplo:
    /*
    fetch('/api/cotizar', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: fullName,
        email: document.getElementById('email').value,
        phone: document.getElementById('phone').value,
        brand: brandText,
        model: model,
        year: year,
        problem: problem,
        estimatedPrice: finalPrice
      })
    });
    */
    
    // Mostrar mensaje de éxito
    console.log('Cotización generada para:', fullName, 'Vehículo:', brandText, model, 'Precio:', formattedPrice);
  });
</script>

</body>
</html>