// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({ behavior: 'smooth' });
        }
    });
});

// Scroll progress bar
const progressBar = document.getElementById('progress-bar');

window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const progress = (scrollTop / docHeight) * 100;
    progressBar.style.width = progress + '%';
});

// Student discount logic
const studentCheckbox = document.getElementById('student');

const plans = {
    normal:  { full: 10, label: 'Normal' },
    premium: { full: 15, label: 'Premium' }
};

function updatePrices() {
    const isStudent = studentCheckbox.checked;

    document.querySelectorAll('.radio-group label').forEach(lbl => {
        const input = lbl.querySelector('input[type="radio"]');
        if (!input) return;

        const plan = plans[input.value];
        if (!plan) return;

        const discounted = (plan.full * 0.7).toFixed(2);

        if (isStudent) {
            lbl.innerHTML = `
                <input type="radio" name="plan" value="${input.value}" ${input.checked ? 'checked' : ''} ${input.required ? 'required' : ''}>
                ${plan.label} —
                <span class="price-original">$${plan.full}/mes</span>
                <span class="price-discount">20% OFF</span>
                <span class="price-new">$${discounted}/mes</span>
            `;
        } else {
            lbl.innerHTML = `
                <input type="radio" name="plan" value="${input.value}" ${input.checked ? 'checked' : ''} ${input.required ? 'required' : ''}>
                ${plan.label} — $${plan.full}/mes
            `;
        }
    });
}

studentCheckbox.addEventListener('change', updatePrices);

// Character counter for textarea
const textarea = document.getElementById('reason');
const counter = document.getElementById('reason-counter');
const MAX_CHARS = 300;

textarea.addEventListener('input', () => {
    const len = textarea.value.length;
    counter.textContent = `${len} / ${MAX_CHARS}`;

    counter.classList.remove('near-limit', 'at-limit');

    if (len >= MAX_CHARS) {
        textarea.value = textarea.value.slice(0, MAX_CHARS);
        counter.classList.add('at-limit');
    } else if (len >= MAX_CHARS * 0.8) {
        counter.classList.add('near-limit');
    }
});

// Form validation
function setFieldState(input, isValid) {
    const group = input.closest('.field-group');
    if (!group) return;
    group.classList.remove('error', 'success');
    if (input.value.trim() === '') return;
    group.classList.add(isValid ? 'success' : 'error');
}

// Name and Lastname
['name', 'lastname'].forEach(id => {
    document.getElementById(id).addEventListener('input', function() {
        setFieldState(this, this.value.trim().length >= 2);
    });
});

// Email
document.getElementById('email').addEventListener('input', function() {
    const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.value);
    setFieldState(this, valid);
});

// MMAA validation
document.getElementById('expiry').addEventListener('input', function() {
    this.value = this.value.replace(/[^\d]/g, '').slice(0, 4);
    if (this.value.length > 2) {
        this.value = this.value.slice(0, 2) + '/' + this.value.slice(2);
    }
    const valid = /^(0[1-9]|1[0-2])\/\d{2}$/.test(this.value);
    setFieldState(this, valid);
});

// CVV
document.getElementById('cvv').addEventListener('input', function() {
    this.value = this.value.replace(/\D/g, '').slice(0, 4);
    setFieldState(this, this.value.length >= 3);
});


// Plan preview logic
const planData = {
    normal: {
        name: 'Normal',
        price: '$10/mes',
        priceStudent: '$7.00/mes',
        features: [
            '250 g por envío',
            '1 café de origen único por mes',
            'Envío gratuito',
            'Guía de preparación'
        ]
    },
    premium: {
        name: 'Premium',
        price: '$15/mes',
        priceStudent: '$10.50/mes',
        features: [
            '500 g por envío',
            '2 cafés de origen único por mes',
            'Envío gratuito',
            'Guía de preparación',
            'Acceso a lotes exclusivos'
        ]
    }
};

const planPreview     = document.getElementById('plan-preview');
const planPreviewName = document.getElementById('plan-preview-name');
const planPreviewPrice = document.getElementById('plan-preview-price');
const planPreviewFeatures = document.getElementById('plan-preview-features');

function updatePlanPreview() {
    const selected = document.querySelector('input[name="plan"]:checked');
    if (!selected) {
        planPreview.classList.remove('visible');
        return;
    }

    const plan = planData[selected.value];
    const isStudent = document.getElementById('student').checked;

    planPreviewName.textContent = plan.name;
    planPreviewPrice.textContent = isStudent ? plan.priceStudent : plan.price;

    planPreviewFeatures.innerHTML = plan.features
        .map(f => `<li>${f}</li>`)
        .join('');

    planPreview.classList.add('visible');
}

document.querySelectorAll('input[name="plan"]').forEach(radio => {
    radio.addEventListener('change', updatePlanPreview);
});

// Update prices and preview when student checkbox changes
studentCheckbox.addEventListener('change', () => {
    updatePrices();
    updatePlanPreview();
});

// Credit card validation and brand detection
const cardInput = document.getElementById('card');
const cardBrand = document.getElementById('card-brand');

const cardPatterns = {
    Visa:       /^4/,
    Mastercard: /^5[1-5]|^2[2-7]/,
    Amex:       /^3[47]/,
    Naranja:    /^589562/,
    Cabal:      /^604201|^589657/,
};

function detectCardBrand(number) {
    const clean = number.replace(/\s/g, '');
    for (const [brand, pattern] of Object.entries(cardPatterns)) {
        if (pattern.test(clean)) return brand;
    }
    return null;
}

function validateCard(number) {
    const clean = number.replace(/\s/g, '');
    if (clean.length < 13) return false;

    // Luhn algorithm
    let sum = 0;
    let alternate = false;
    for (let i = clean.length - 1; i >= 0; i--) {
        let n = parseInt(clean[i]);
        if (alternate) {
            n *= 2;
            if (n > 9) n -= 9;
        }
        sum += n;
        alternate = !alternate;
    }
    return sum % 10 === 0;
}

cardInput.addEventListener('input', function() {
    // Remove non-digits and limit to 16 characters
    let val = this.value.replace(/\D/g, '').slice(0, 16);
    this.value = val.replace(/(.{4})/g, '$1 ').trim();

    const brand = detectCardBrand(this.value);
    const valid = validateCard(this.value);

    if (brand) {
        cardBrand.textContent = brand;
        cardBrand.classList.add('visible');
    } else {
        cardBrand.classList.remove('visible');
    }

    setFieldState(this, valid);
});

// Payment cuotas logic
const paymentSelect = document.getElementById('payment');
const cuotasGroup = document.getElementById('cuotas-group');
const cuotasInput = document.getElementById('cuotas');

paymentSelect.addEventListener('change', function() {
    if (this.value === 'credit') {
        cuotasGroup.style.display = 'flex';
        cuotasInput.setAttribute('required', '');
    } else {
        cuotasGroup.style.display = 'none';
        cuotasInput.removeAttribute('required');
        cuotasInput.value = '';
    }
});

// Cuotas validation
cuotasInput.addEventListener('input', function() {
    const val = parseInt(this.value);
    setFieldState(this, val >= 1 && val <= 12);
});

// Form submission logic
const form = document.querySelector('form');
const submitBtn = document.querySelector('.cta-button[type="submit"]');
const confirmation = document.getElementById('form-confirmation');
const confirmDate = document.getElementById('confirm-date');
const subsCounter = document.querySelector('.hero-stats .stat-item:last-child .stat-number');

form.addEventListener('submit', function(e) {
    e.preventDefault();

    // loading state
    submitBtn.classList.add('loading');
    submitBtn.innerHTML = '<span class="spinner"></span> Procesando...';

    setTimeout(() => {
        // Hidden form
        form.style.transition = 'opacity 0.3s ease';
        form.style.opacity = '0';

        setTimeout(() => {
            form.style.display = 'none';

            // Calculate delivery date (7 days from now)
            const delivery = new Date();
            delivery.setDate(delivery.getDate() + 7);
            confirmDate.textContent = delivery.toLocaleDateString('es-AR', {
                day: 'numeric',
                month: 'long',
                year: 'numeric'
            });

            // Show confirmation
            confirmation.style.display = 'flex';
            requestAnimationFrame(() => {
                requestAnimationFrame(() => {
                    confirmation.classList.add('visible');
                });
            });

            // +1 to subscriber counter
            if (subsCounter) {
                const current = parseInt(subsCounter.textContent);
                subsCounter.textContent = current + 1;
            }

        }, 300);

    }, 2000); // simulate processing delay
});