script.js

// ============================================================================
// 1. GET REFERENCES TO HTML ELEMENTS
// ============================================================================

const userQuestionInput = document.getElementById('user-question');
const choiceContainer = document.getElementById('choice-container');
const thinkingContainer = document.getElementById('thinking-container');
const resultContainer = document.getElementById('result-container');

const yesButton = document.getElementById('yes-button');
const noButton = document.getElementById('no-button');
const decideButton = document.getElementById('decide-button');
const resultText = document.getElementById('result-text');


// ============================================================================
// 2. DATA / STATE
// ============================================================================

// The list of random placeholder suggestions that appear on focus.
const placeholderSuggestions = [
    "the void answer truthfully",
    "the stars align",
    "I am on the right path",
    "things be okay",
    "I find what I'm looking for",
    "a new door open",
    "the message be received",
    "my universe expand"
];


// ============================================================================
// 3. CORE FUNCTIONS
// ============================================================================

/**
 * Runs when the user makes a final choice ("Yes" or "No").
 * It hides the choices, shows the thinking state, and then reveals the result.
 */
function makeChoice() {
    // First, remove any highlight effect from the buttons.
    yesButton.classList.remove('highlight');
    noButton.classList.remove('highlight');
    
    // Hide the main choice interface.
    choiceContainer.classList.add('hidden');

    // Show the "Gazing into the void..." state.
    thinkingContainer.classList.remove('hidden');

    // Wait for 2 seconds before showing the final result.
    setTimeout(() => {
        thinkingContainer.classList.add('hidden');

        // Randomly determine the outcome (a 50/50 chance).
        const result = Math.random() < 0.5 ? 'Yes.' : 'No.';

        // Display the result.
        resultText.textContent = result;
        resultContainer.classList.remove('hidden');
    }, 2000); // 2000ms = 2 seconds
}

/**
 * Resets the entire interface to its initial state for a new question.
 */
function reset() {
    resultContainer.classList.add('hidden');
    choiceContainer.classList.remove('hidden');

    // Clear the user's previous question.
    userQuestionInput.value = '';
    
    // Reset the placeholder back to its mysterious initial state.
    userQuestionInput.placeholder = '...'; 
    
    // Automatically focus the input for a smooth user experience.
    userQuestionInput.focus();
}

/**
 * Provides a random suggestion by highlighting either the "Yes" or "No" button.
 */
function helpMeDecide() {
    // First, clear any highlights from a previous suggestion.
    yesButton.classList.remove('highlight');
    noButton.classList.remove('highlight');

    // Randomly choose which button to highlight.
    const choice = Math.random() < 0.5 ? yesButton : noButton;
    choice.classList.add('highlight');

    // The highlight is temporary. It fades after 3 seconds to prompt the user to act.
    setTimeout(() => {
        choice.classList.remove('highlight');
    }, 3000); // 3000ms = 3 seconds
}


// ============================================================================
// 4. EVENT LISTENERS (Attaching functions to user actions)
// ============================================================================

// --- Main Action Buttons ---
yesButton.addEventListener('click', makeChoice);
noButton.addEventListener('click', makeChoice);
decideButton.addEventListener('click', helpMeDecide);
resultContainer.addEventListener('click', reset);

// --- Interactive Placeholder Logic ---

// When the user clicks INTO the input box...
userQuestionInput.addEventListener('focus', () => {
    const randomIndex = Math.floor(Math.random() * placeholderSuggestions.length);
    userQuestionInput.placeholder = placeholderSuggestions[randomIndex];
});

// When the user clicks AWAY from the input box...
userQuestionInput.addEventListener('blur', () => {
    // If they didn't type anything, reset the placeholder back to "...".
    if (userQuestionInput.value === '') {
        userQuestionInput.placeholder = '...';
    }
});

// --- On Page Load ---

// When the page first loads, automatically focus the cursor in the input box.
window.onload = () => {
    userQuestionInput.focus();
};