<!DOCTYPE html>
<html lang="es" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plan Recambio - La forma inteligente de estrenar tu 0KM.</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Google Fonts: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- Favicon -->
    <link rel="icon" href="https://placehold.co/32x32/007AFF/FFFFFF?text=PR" type="image/png">

    <!-- Estilos personalizados -->
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #000000;
            color: #f5f5f7;
        }
        .hero-bg {
            background-image: linear-gradient(to top, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 1) 95%), url('https://www.megautos.com/wp-content/uploads/2024/05/Ram_Rampage_Laramie_Night_Edition_009.jpg');
            background-size: cover;
            background-position: center;
        }
        .glassmorphism {
            background: rgba(22, 22, 23, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .cta-button-main {
            background-color: #007AFF;
            color: white;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }
        .cta-button-main:hover {
            background-color: #0071e3;
            transform: scale(1.05);
        }
        .form-input, .form-select {
            background-color: #1d1d1f;
            border: 1px solid #424245;
            color: #f5f5f7;
            transition: all 0.3s ease;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
            padding-right: 2.5rem;
        }
        .form-input:focus, .form-select:focus {
            border-color: #007AFF;
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.5);
            outline: none;
        }
        .step-card {
            background: #111;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 2.5rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .step-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        .brand-logo {
            filter: grayscale(1) brightness(1.5);
            opacity: 0.6;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .brand-logo:hover {
            filter: grayscale(0) brightness(1);
            opacity: 1;
            transform: scale(1.1);
        }
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body class="antialiased">

    <!-- Header -->
    <header class="glassmorphism sticky top-0 z-50">
        <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
            <a href="#" class="text-xl font-bold text-white tracking-wide">
                Plan<span class="font-light">Recambio</span>
            </a>
            <a href="#contacto" class="cta-button-main text-sm font-semibold py-2 px-4 rounded-full">
                Cotizar ahora
            </a>
        </nav>
    </header>

    <!-- Main Content -->
    <main>
        <!-- Hero Section -->
        <section class="hero-bg text-white min-h-[80vh] flex items-center py-20">
            <div class="container mx-auto px-6 text-center">
                <h1 class="text-5xl md:text-7xl font-bold leading-tight mb-4 text-transparent bg-clip-text bg-gradient-to-r from-gray-200 to-white">
                    CAMBIÁ TU USADO POR UN 0KM<br>EN CUOTAS
                </h1>
                <p class="text-lg md:text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
                    Entregá tu usado en parte de pago y accedé a tu 0KM de forma simple, rápida y transparente.
                </p>
                <a href="#contacto" class="cta-button-main font-semibold text-lg py-3 px-8 rounded-full inline-block">
                    Iniciar cotización
                </a>
            </div>
        </section>

        <!-- Marcas Section -->
        <section id="marcas" class="py-20 bg-black">
            <div class="container mx-auto px-6 text-center">
                <h2 class="text-2xl font-semibold text-gray-400 mb-12 fade-in">Con la confianza de las marcas lideres del Grupo Giama</h2>
                <div class="grid grid-cols-3 md:grid-cols-6 gap-x-8 gap-y-12 items-center">
                    <div class="flex justify-center fade-in"><img src="https://www.carlogos.org/logo/Citroen-logo-2009-2560x1440.png" alt="Citroën" class="h-12 brand-logo" onerror="this.onerror=null;this.src='https://placehold.co/150x50/cccccc/000000?text=Citroen';"></div>
                    <div class="flex justify-center fade-in"><img src="https://www.carlogos.org/logo/Chevrolet-logo-2013-2560x1440.png" alt="Chevrolet" class="h-8 brand-logo" onerror="this.onerror=null;this.src='https://placehold.co/150x50/cccccc/000000?text=Chevrolet';"></div>
                    <div class="flex justify-center fade-in"><img src="https://www.carlogos.org/logo/Peugeot-logo-2010-1920x1080.png" alt="Peugeot" class="h-12 brand-logo" onerror="this.onerror=null;this.src='https://placehold.co/150x50/cccccc/000000?text=Peugeot';"></div>
                    <div class="flex justify-center fade-in"><img src="https://www.carlogos.org/logo/Jeep-logo-1993-1920x1080.png" alt="Jeep" class="h-8 brand-logo" onerror="this.onerror=null;this.src='https://placehold.co/150x50/cccccc/000000?text=Jeep';"></div>
                    <div class="flex justify-center fade-in"><img src="https://www.carlogos.org/logo/Fiat-logo-2006-1920x1080.png" alt="Fiat" class="h-12 brand-logo" onerror="this.onerror=null;this.src='https://placehold.co/150x50/cccccc/000000?text=Fiat';"></div>
                    <div class="flex justify-center fade-in"><img src="https://www.carlogos.org/logo/RAM-logo-2009-1920x1080.png" alt="Ram" class="h-12 brand-logo" onerror="this.onerror=null;this.src='https://placehold.co/150x50/cccccc/000000?text=Ram';"></div>
                </div>
            </div>
        </section>

        <!-- Proceso Section -->
        <section id="proceso" class="py-24 bg-black">
            <div class="container mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-4xl md:text-5xl font-bold fade-in">Un proceso totalmente simple</h2>
                </div>
                <div class="grid md:grid-cols-3 gap-8">
                    <!-- Step 1 -->
                    <div class="step-card text-center fade-in">
                        <div class="text-5xl text-blue-500 mb-4"><i class="fas fa-mobile-alt"></i></div>
                        <h3 class="text-2xl font-semibold mb-3">1. COTIZÁS</h3>
                        <p class="text-gray-400">Completá el formulario con los datos. En minutos, te contactamos por WhatsApp.</p>
                    </div>
                    <!-- Step 2 -->
                    <div class="step-card text-center fade-in" style="transition-delay: 200ms;">
                        <div class="text-5xl text-blue-500 mb-4"><i class="fas fa-hand-holding-usd"></i></div>
                        <h3 class="text-2xl font-semibold mb-3">2. Tasación Premium</h3>
                        <p class="text-gray-400">Recibí una cotización de tu usado y las opciones de financiación que mejor se adaptan a tu interés y posibilidades de pago.</p>
                    </div>
                    <!-- Step 3 -->
                    <div class="step-card text-center fade-in" style="transition-delay: 400ms;">
                        <div class="text-5xl text-blue-500 mb-4"><i class="fas fa-key"></i></div>
                        <h3 class="text-2xl font-semibold mb-3">3. Llave en Mano</h3>
                        <p class="text-gray-400">El sistema Llave por Llave te permite tener tu usado hasta salir manejando tu 0Km.</p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Formulario Section -->
        <section id="contacto" class="py-24 bg-gray-900/50">
            <div class="container mx-auto px-6">
                <div class="max-w-xl mx-auto text-center fade-in">
                    <h2 class="text-4xl md:text-5xl font-bold mb-4">Empezá acá.</h2>
                    <p class="text-gray-400 mb-10">Consultá la financiación entregando tu vehículo usado en parte de pago. Tambíen puede ser un anticipo y la mejor financiación en cuotas.</p>
                    <div class="bg-[#1d1d1f] p-8 rounded-2xl border border-gray-700">
                        <form id="whatsapp-form">
                            <div class="space-y-6">
                                <input type="text" id="nombre" name="nombre" class="form-input w-full p-4 rounded-lg" placeholder="Nombre y Apellido" required>
                                <input type="tel" id="whatsapp" name="whatsapp" class="form-input w-full p-4 rounded-lg" placeholder="Número de WhatsApp" required>
                                <input type="text" id="auto-usado" name="auto-usado" class="form-input w-full p-4 rounded-lg" placeholder="Mi auto actual (Marca, modelo y año)" required>
                                
                                <!-- Campo de Marca -->
                                <select id="marca-interes" name="marca-interes" class="form-select w-full p-4 rounded-lg">
                                    <option value="">¿En qué marca estás interesado? (Opcional)</option>
                                    <option value="Citroen">Citroen</option>
                                    <option value="Chevrolet">Chevrolet</option>
                                    <option value="Peugeot">Peugeot</option>
                                    <option value="Jeep">Jeep</option>
                                    <option value="Fiat">Fiat</option>
                                </select>

                                <!-- Campo de Modelo (dinámico) -->
                                <div id="modelo-container" class="hidden">
                                    <select id="modelo-interes" name="modelo-interes" class="form-select w-full p-4 rounded-lg">
                                        <option value="">Seleccioná un modelo</option>
                                    </select>
                                </div>
                            </div>
                            <button type="submit" class="w-full cta-button-main font-semibold text-lg py-4 px-4 rounded-lg mt-8">
                                Enviar para cotizar
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-black">
        <div class="container mx-auto px-6 py-12 text-center text-gray-500 border-t border-gray-800">
            <p class="text-sm">© 2024 Plan Recambio. Todos los derechos reservados.</p>
            <p class="text-xs mt-2">Las imágenes son a modo ilustrativo. La disponibilidad de los modelos está sujeta a stock.</p>
        </div>
    </footer>

    <script>
        // --- Lógica para el formulario dinámico ---
        const modelosPorMarca = {
            Citroen: ["Citroen C3", "Citroen C3 Aircross", "Citroen Basalt", "Berlingo"],
            Chevrolet: ["Joy Plus 4p", "Onix Turbo 5p", "Tracker", "Spin", "Montana", "S10"],
            Peugeot: ["Peugeot 208", "Peugeot 2008", "Partner"],
            Jeep: ["Renegade Willys", "Renegade", "Compass", "Commander", "Rampage"],
            Fiat: ["Cronos", "Mobi", "Pulse", "Fastback", "Strada", "Fiorino", "Toro", "Titano"]
        };

        const marcaSelect = document.getElementById('marca-interes');
        const modeloContainer = document.getElementById('modelo-container');
        const modeloSelect = document.getElementById('modelo-interes');

        marcaSelect.addEventListener('change', function() {
            const marcaSeleccionada = this.value;
            // Limpiar opciones anteriores
            modeloSelect.innerHTML = '<option value="">Seleccioná un modelo</option>';

            if (marcaSeleccionada && modelosPorMarca[marcaSeleccionada]) {
                // Llenar con nuevos modelos
                const modelos = modelosPorMarca[marcaSeleccionada];
                modelos.forEach(modelo => {
                    const option = document.createElement('option');
                    option.value = modelo;
                    option.textContent = modelo;
                    modeloSelect.appendChild(option);
                });
                // Mostrar el campo de modelos
                modeloContainer.classList.remove('hidden');
            } else {
                // Ocultar si no se selecciona marca
                modeloContainer.classList.add('hidden');
            }
        });

        // --- Script para el envío a WhatsApp ---
        document.getElementById('whatsapp-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const nombre = document.getElementById('nombre').value;
            const whatsapp = document.getElementById('whatsapp').value;
            const autoUsado = document.getElementById('auto-usado').value;
            const marcaInteres = document.getElementById('marca-interes').value;
            const modeloInteres = document.getElementById('modelo-interes').value;

            if (!nombre || !whatsapp || !autoUsado) {
                alert('Por favor, completa los campos obligatorios.');
                return;
            }

            const telefonoDestino = '5491121757709';
            
            let mensaje = `Hola Plan Recambio,\n\nQuisiera iniciar la cotización de mi vehículo.\n\n- Nombre: ${nombre}\n- WhatsApp: ${whatsapp}\n- Mi auto actual: ${autoUsado}`;
            
            if (marcaInteres) {
                mensaje += `\n- Marca de interés: ${marcaInteres}`;
            }
            if (modeloInteres) {
                mensaje += `\n- Modelo de interés: ${modeloInteres}`;
            }

            mensaje += `\n\nGracias.`;

            const urlWhatsApp = `https://api.whatsapp.com/send?phone=${telefonoDestino}&text=${encodeURIComponent(mensaje)}`;
            window.open(urlWhatsApp, '_blank');
        });

        // --- Script para animación de aparición al hacer scroll ---
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('.fade-in').forEach(el => {
            observer.observe(el);
        });
    </script>

</body>
</html>