AI Chatbot

<div class="answer-card" id="answer-card">
    <div class="card-glow"></div>
    <div class="card-content">
        <div class="icon-wrapper" id="icon-wrapper">
            <!-- Dynamic icon based on state -->
        </div>
        <p class="answer-text" id="answer-text">
            Escribe una pregunta sobre mi experiencia...
        </p>
    </div>
</div>

<div class="quick-questions" id="quick-questions">
    <button class="q-btn" data-q="¿Cuáles son tus principales fortalezas?">
        <span class="q-icon">💪</span>
        <span class="q-text">Fortalezas</span>
    </button>
    <!-- More quick question buttons -->
</div>

<form class="oracle-input" id="oracle-form">
    <input 
        type="text" 
        id="oracle-input" 
        placeholder="Escribe tu pregunta aquí..."
        autocomplete="off"
    />
    <button type="submit" id="ask-btn" aria-label="Consultar">
        <span class="btn-text">Consultar</span>
        <!-- Search icon SVG -->
    </button>
</form>

const GROQ_URL = 'https://api.groq.com/openai/v1/chat/completions';

const response = await fetch(GROQ_URL, {
    method: 'POST',
    headers: {
        'Authorization': 'Bearer ' + API_KEY,
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        model: 'llama-3.3-70b-versatile',
        messages: [
            { role: 'system', content: systemPrompt }
        ].concat(conversationHistory),
        max_tokens: 500,
        temperature: 0.7
    })
});

const systemPrompt = 'Eres Nico AI, la versión digital de Nicolás Gaitán. ' +
    'Tu objetivo es representarlo de manera auténtica...\n\n' +
    'INFORMACIÓN DE NICO:\n' + JSON.stringify(nicoProfile, null, 2) + '\n\n' +
    'INSTRUCCIONES:\n' +
    '- Responde en primera persona como si fueras Nico\n' +
    '- Sé cercano, entusiasta y profesional\n' +
    '- Destaca siempre los puntos fuertes...';

function setLoading(loading) {
    isLoading = loading;
    askBtn.disabled = loading;
    oracleInput.disabled = loading;
    
    if (loading) {
        answerCard.classList.add('loading');
        iconWrapper.innerHTML = '<div class="spinner"></div>';
        answerText.textContent = 'Analizando tu consulta...';
        quickQuestions.style.opacity = '0.3';
        quickQuestions.style.pointerEvents = 'none';
    } else {
        answerCard.classList.remove('loading');
        answerCard.classList.add('answered');
        // Update icon to checkmark
    }
}

function showAnswer(text, isError) {
    answerText.textContent = text;
    answerCard.classList.add('revealed');
    
    if (isError) {
        answerCard.classList.add('error');
        // Show error icon
    } else {
        answerCard.classList.remove('error');
    }
}

const COOLDOWN_MS = 2000;
let lastMessageTime = 0;

function getCooldownRemaining() {
    const elapsed = Date.now() - lastMessageTime;
    return Math.max(0, COOLDOWN_MS - elapsed);
}

// In askQuestion function:
const cooldown = getCooldownRemaining();
if (cooldown > 0) {
    showAnswer('⏳ Espera ' + Math.ceil(cooldown / 1000) + ' segundos...', true);
    return;
}

try {
    const response = await fetch(GROQ_URL, {...});
    
    if (!response.ok) {
        if (response.status === 429) {
            throw new Error('RATE_LIMIT');
        }
        // Parse error message from response
        throw new Error(errorMsg);
    }
    
    const data = await response.json();
    // Process answer...
    
} catch (error) {
    setLoading(false);
    
    if (error.message === 'RATE_LIMIT') {
        lastMessageTime = Date.now() + 10000;
        showAnswer('⏳ Demasiadas consultas. Espera 10 segundos.', true);
    } else {
        showAnswer('😅 Algo salió mal. Contáctame directamente...', true);
    }
    conversationHistory.pop(); // Remove failed question
}

.card-glow {
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--color-primary), #ff6b6b, var(--color-primary));
    background-size: 200% 200%;
    border-radius: 1.5rem;
    opacity: 0;
    animation: gradientShift 3s ease infinite;
}

.answer-card.loading .card-glow,
.answer-card.answered .card-glow {
    opacity: 1;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

PUBLIC_GROQ_API_KEY=your_groq_api_key_here

model: 'llama-3.3-70b-versatile',
max_tokens: 500,        // Maximum response length
temperature: 0.7        // Response creativity (0-1)

{
    "name": "Nicolás Gaitán",
    "experience": [...],
    "skills": [...],
    "strengths": [...]
}

oracleForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const question = oracleInput.value.trim();
    if (!question || isLoading) return;
    
    oracleInput.value = '';
    askQuestion(question);
});

quickBtns.forEach(function(btn) {
    btn.addEventListener('click', function() {
        const question = btn.getAttribute('data-q');
        if (question && !isLoading) {
            askQuestion(question);
        }
    });
});

@media (max-width: 640px) {
    .answer-card {
        min-height: 220px;
        padding: 1.5rem;
    }
    
    .oracle-input button .btn-text {
        display: none;  /* Show only icon on mobile */
    }
}