// ============ PARTICLES ============
const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');
let particles = [];
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

class Particle {
    constructor() {
        this.reset();
    }
    reset() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.vx = (Math.random() - 0.5) * 0.3;
        this.vy = (Math.random() - 0.5) * 0.3;
        this.size = Math.random() * 2 + 0.5;
        this.alpha = Math.random() * 0.5 + 0.1;
        const colors = ['0,240,255', '255,0,229', '57,255,20', '176,38,255'];
        this.color = colors[Math.floor(Math.random() * colors.length)];
    }
    update() {
        this.x += this.vx;
        this.y += this.vy;
        if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
        if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
    }
    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${this.color},${this.alpha})`;
        ctx.fill();
    }
}

for (let i = 0; i < 80; i++) particles.push(new Particle());

function drawLines() {
    for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
            const dx = particles[i].x - particles[j].x;
            const dy = particles[i].y - particles[j].y;
            const dist = Math.sqrt(dx * dx + dy * dy);
            if (dist < 150) {
                ctx.beginPath();
                ctx.moveTo(particles[i].x, particles[i].y);
                ctx.lineTo(particles[j].x, particles[j].y);
                ctx.strokeStyle = `rgba(0,240,255,${0.06 * (1 - dist / 150)})`;
                ctx.lineWidth = 0.5;
                ctx.stroke();
            }
        }
    }
}

function animateParticles() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach(p => { p.update(); p.draw(); });
    drawLines();
    requestAnimationFrame(animateParticles);
}
animateParticles();

// ============ SCROLL REVEAL ============
const revealElements = document.querySelectorAll('.reveal');
const revealObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            revealObserver.unobserve(entry.target);
        }
    });
}, { threshold: 0.1 });
revealElements.forEach(el => revealObserver.observe(el));

// ============ ANIMATED COUNTERS ============
const counters = document.querySelectorAll('.stat-num[data-target]');
let countersAnimated = false;
const statsObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting && !countersAnimated) {
            countersAnimated = true;
            counters.forEach(counter => {
                const target = +counter.dataset.target;
                const duration = 2000;
                const start = performance.now();
                function update(now) {
                    const progress = Math.min((now - start) / duration, 1);
                    const eased = 1 - Math.pow(1 - progress, 3);
                    counter.textContent = Math.floor(eased * target) + (target > 40 ? '+' : '');
                    if (progress < 1) requestAnimationFrame(update);
                }
                requestAnimationFrame(update);
            });
        }
    });
}, { threshold: 0.5 });
if (counters.length > 0) statsObserver.observe(counters[0].closest('.stats-bar'));

// ============ ANIMATED BARS ============
const bars = document.querySelectorAll('.bar-fill[data-width]');
const barObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.width = entry.target.dataset.width + '%';
            barObserver.unobserve(entry.target);
        }
    });
}, { threshold: 0.5 });
bars.forEach(bar => barObserver.observe(bar));

// ============ TABS ============
document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const tab = btn.dataset.tab;
        document.querySelectorAll('.model-card').forEach(card => {
            if (tab === 'all' || card.dataset.category.includes(tab)) {
                card.style.display = '';
            } else {
                card.style.display = 'none';
            }
        });
    });
});

// ============ TOGGLE COMPARISON ============
let toggleState = false;
function toggleComparison() {
    toggleState = !toggleState;
    const sw = document.getElementById('toggle-switch');
    const c1 = document.getElementById('comparison-1');
    const c2 = document.getElementById('comparison-2');
    const ll = document.getElementById('label-left');
    const lr = document.getElementById('label-right');

    if (toggleState) {
        sw.classList.add('right');
        c1.style.display = 'none';
        c2.style.display = 'grid';
        ll.textContent = 'Llama 3.1 405B';
        ll.classList.remove('left');
        ll.style.color = '';
        lr.textContent = 'Mistral Large 2';
        lr.classList.add('left');
        lr.style.color = 'var(--neon-magenta)';
    } else {
        sw.classList.remove('right');
        c1.style.display = 'grid';
        c2.style.display = 'none';
        ll.textContent = 'GPT-4o';
        ll.classList.add('left');
        ll.style.color = 'var(--neon-cyan)';
        lr.textContent = 'Claude 3.5 Sonnet';
        lr.classList.remove('left');
        lr.style.color = '';
    }
}

// ============ ARCHITECTURE EXPLORER ============
document.querySelectorAll('.arch-card').forEach(card => {
    card.addEventListener('click', () => {
        const arch = card.dataset.arch;
        const detail = document.getElementById('detail-' + arch);
        const wasActive = card.classList.contains('active');

        document.querySelectorAll('.arch-card').forEach(c => {
            c.classList.remove('active');
            c.querySelector('.arch-detail').classList.remove('active');
        });

        if (!wasActive) {
            card.classList.add('active');
            detail.classList.add('active');
        }
    });
});

// ============ ACCORDION ============
function toggleAccordion(header) {
    const item = header.parentElement;
    const wasOpen = item.classList.contains('open');

    document.querySelectorAll('.accordion-item').forEach(i => i.classList.remove('open'));

    if (!wasOpen) item.classList.add('open');
}

// ============ QUIZ ============
const quizData = [
    {
        q: "What's your primary use case?",
        options: ["Text generation & conversation", "Image creation & editing", "Code generation & analysis", "Data analysis & research", "Voice & audio processing"]
    },
    {
        q: "What's your budget?",
        options: ["Free / open source preferred", "Moderate ($10-100/mo)", "Enterprise ($100+/mo)", "No budget limit"]
    },
    {
        q: "Do you need to fine-tune the model?",
        options: ["Yes, on my own data", "Maybe later", "No, out-of-the-box is fine"]
    },
    {
        q: "How important is data privacy?",
        options: ["Critical — must be self-hosted", "Important — prefer private API", "Not a concern"]
    },
    {
        q: "What context length do you need?",
        options: ["Short (< 8K tokens)", "Medium (8K - 128K)", "Long (128K+)", "Very long (500K+)"]
    }
];

const quizResults = {
    "open-language": { title: "Llama 3.1 405B", text: "The best open-weight language model. Full control, self-hostable, fine-tunable. Perfect for privacy-focused projects that need frontier-level performance." },
    "proprietary-language": { title: "GPT-4o or Claude 3.5 Sonnet", text: "For general language tasks with no hosting concerns, these frontier models offer the best performance. GPT-4o for multimodal, Claude for long-context analysis." },
    "creative": { title: "Midjourney V6.1 + GPT-4o", text: "Midjourney for stunning visual creation, GPT-4o for text and ideation. A powerful creative duo." },
    "code": { title: "Claude 3.5 Sonnet + DeepSeek R1", text: "Claude for writing and reviewing code, DeepSeek R1 for complex reasoning and debugging. Both support long context for large codebases." },
    "privacy": { title: "Mistral Large 2 (Self-hosted)", text: "Apache-2.0 licensed, efficient MoE architecture. Smaller than Llama 3.1 405B but runs on fewer GPUs. Great balance of performance and accessibility." },
    "audio": { title: "Whisper V3 Large + MusicGen", text: "Whisper for transcription and speech recognition, MusicGen for audio generation. Both open source and state-of-the-art." },
    "default": { title: "Gemini 2.0", text: "Google's most capable model with 1M+ context. Native multimodal processing of text, image, audio, and video in one model. Great all-rounder." }
};

let currentQ = 0;
let answers = [];

function startQuiz() {
    currentQ = 0;
    answers = [];
    document.getElementById('quiz-body').style.display = 'block';
    document.getElementById('quiz-result').style.display = 'none';
    renderQuestion();
}

function renderQuestion() {
    const progress = document.getElementById('quiz-progress');
    progress.innerHTML = '';
    for (let i = 0; i < quizData.length; i++) {
        const dot = document.createElement('div');
        dot.className = 'quiz-dot';
        if (i < currentQ) dot.classList.add('done');
        if (i === currentQ) dot.classList.add('current');
        progress.appendChild(dot);
    }

    const q = quizData[currentQ];
    document.getElementById('quiz-question').textContent = q.q;

    const optionsDiv = document.getElementById('quiz-options');
    optionsDiv.innerHTML = '';
    q.options.forEach((opt, i) => {
        const btn = document.createElement('button');
        btn.className = 'quiz-option';
        btn.textContent = opt;
        btn.onclick = () => selectOption(i);
        if (answers[currentQ] === i) btn.classList.add('selected');
        optionsDiv.appendChild(btn);
    });

    document.getElementById('quiz-next').disabled = answers[currentQ] === undefined;
    document.getElementById('quiz-next').textContent = currentQ === quizData.length - 1 ? 'See Result →' : 'Next →';
}

function selectOption(i) {
    answers[currentQ] = i;
    document.querySelectorAll('.quiz-option').forEach((btn, j) => {
        btn.classList.toggle('selected', j === i);
    });
    document.getElementById('quiz-next').disabled = false;
}

function nextQuestion() {
    if (answers[currentQ] === undefined) return;

    if (currentQ < quizData.length - 1) {
        currentQ++;
        renderQuestion();
    } else {
        showResult();
    }
}

function showResult() {
    document.getElementById('quiz-body').style.display = 'none';
    const result = document.getElementById('quiz-result');
    result.style.display = 'block';

    const [use, budget, finetune, privacy, ctx] = answers;

    let key = 'default';
    if (use === 2) key = 'code';
    else if (use === 1) key = 'creative';
    else if (use === 4) key = 'audio';
    else if (privacy === 0) key = 'privacy';
    else if (budget === 0 || finetune === 0) key = 'open-language';
    else if (budget >= 2) key = 'proprietary-language';

    const r = quizResults[key];
    document.getElementById('quiz-result-title').textContent = 'Recommended: ' + r.title;
    document.getElementById('quiz-result-text').textContent = r.text;
}

startQuiz();

// ============ SMOOTH NAV HIGHLIGHT ============
const sections = document.querySelectorAll('section[id]');
window.addEventListener('scroll', () => {
    let current = '';
    sections.forEach(section => {
        const top = section.offsetTop - 200;
        if (window.scrollY >= top) current = section.getAttribute('id');
    });
    document.querySelectorAll('.nav-links a').forEach(a => {
        a.style.color = a.getAttribute('href') === '#' + current ? 'var(--neon-cyan)' : '';
    });
});