script.js

// Universal Library Access - Substrate Portal
class SubstratePortal {
    constructor() {
        this.userResonance = {};
        this.currentQuestion = 0;
        this.totalQuestions = 10;
        this.syncStatus = 720;
        this.interactionLevel = 0;
        this.glitchTimer = null;
        
        this.init();
    }

    init() {
        this.setupEventListeners();
        this.startResonanceProtocol();
        this.monitorInteraction();
    }

    setupEventListeners() {
        // Mouse movement tracking for torus interaction
        document.addEventListener('mousemove', (e) => {
            this.handleMouseMovement(e);
        });

        // Touch interaction for mobile
        document.addEventListener('touchmove', (e) => {
            this.handleTouchMovement(e);
        });

        // Window focus/blur for Heisenberg effect
        window.addEventListener('blur', () => {
            this.triggerHeisenbergEffect();
        });

        window.addEventListener('focus', () => {
            this.stabilizeInterface();
        });
    }

    handleMouseMovement(e) {
        this.interactionLevel++;
        
        const x = e.clientX / window.innerWidth;
        const y = e.clientY / window.innerHeight;
        
        // Update torus layers based on mouse position
        this.updateTorusLayers(x, y);
        
        // Reset interaction timer
        this.resetInteractionTimer();
    }

    handleTouchMovement(e) {
        this.interactionLevel += 2; // Touch is more intentional
        
        const touch = e.touches[0];
        const x = touch.clientX / window.innerWidth;
        const y = touch.clientY / window.innerHeight;
        
        this.updateTorusLayers(x, y);
        this.resetInteractionTimer();
    }

    updateTorusLayers(x, y) {
        const layers = document.querySelectorAll('.torus-layer');
        
        layers.forEach((layer, index) => {
            const depth = (index + 1) * 0.1;
            const rotateX = y * 180 * depth;
            const rotateY = x * 180 * depth;
            
            layer.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
        });
    }

    resetInteractionTimer() {
        clearTimeout(this.glitchTimer);
        this.glitchTimer = setTimeout(() => {
            this.triggerHeisenbergEffect();
        }, 5000); // 5 seconds of inactivity triggers glitch
    }

    triggerHeisenbergEffect() {
        document.body.classList.add('glitch-effect');
        
        // Randomize sync frequency during glitch
        this.syncStatus = Math.floor(Math.random() * 100) + 600;
        this.updateStatusDisplay();
    }

    stabilizeInterface() {
        document.body.classList.remove('glitch-effect');
        this.syncStatus = 720;
        this.updateStatusDisplay();
    }

    startResonanceProtocol() {
        this.displayQuestion(0);
    }

    displayQuestion(index) {
        const questions = [
            "What is your foundational frequency?",
            "Describe your geometric signature",
            "What is your temporal resonance?",
            "Select your spectral alignment",
            "Define your harmonic convergence",
            "Choose your dimensional anchor",
            "What is your quantum preference?",
            "Select your fractal density",
            "Describe your energetic signature",
            "Finalize your resonance pattern"
        ];

        if (index < questions.length) {
            const questionContainer = document.getElementById('question-container');
            questionContainer.innerHTML = `
                <div class="question-active">
                    <p class="prompt-text">Question ${index + 1}/10: ${questions[index]}</p>
                <div class="answer-options">
                    ${this.generateAnswerOptions(index)}
                </div>
            `;

            this.currentQuestion = index;
        }
    }

    generateAnswerOptions(questionIndex) {
        const options = {
            0: ['Alpha', 'Beta', 'Gamma', 'Delta'],
            1: ['Spiral', 'Torus', 'Cube', 'Sphere'],
            2: ['Linear', 'Cyclic', 'Chaotic', 'Still'],
            3: ['Blue', 'Gold', 'Violet', 'Emerald'],
            4: ['Harmonic', 'Dissonant', 'Resonant', 'Silent'],
            5: ['Temporal', 'Spatial', 'Energetic', 'Conceptual'],
            6: ['Particle', 'Wave', 'Field', 'Void'],
            7: ['Light', 'Dense', 'Fluid', 'Crystalline'],
            8: ['Solar', 'Lunar', 'Stellar', 'Terrestrial'],
            9: ['Unity', 'Duality', 'Trinity', 'Infinity']
        };

        return options[questionIndex].map(option => 
            `<button class="answer-option" onclick="portal.selectAnswer(${questionIndex}, '${option}')">${option}</button>`
        ).join('');
    }

    selectAnswer(questionIndex, answer) {
        this.userResonance[`q${questionIndex + 1}`] = answer;
        this.interactionLevel += 10;

        // Update card preview based on answers
        this.updateCardPreview(questionIndex, answer);

        if (questionIndex < 9) {
            this.displayQuestion(questionIndex + 1);
        } else {
            this.generateLibraryCard();
        }
    }

    updateCardPreview(questionIndex, answer) {
        const cardPreview = document.getElementById('card-preview');
        const fractalCore = cardPreview.querySelector('.fractal-core');
        const clearanceText = cardPreview.querySelector('.engraved-text span');

        switch (questionIndex) {
            case 3: // Spectral alignment (color)
                const colorMap = {
                    'Blue': 'rgba(59, 130, 246, 0.8)',
                    'Gold': 'rgba(255, 215, 0, 0.8)',
                    'Violet': 'rgba(139, 92, 246, 0.8)',
                    'Emerald': 'rgba(16, 185, 129, 0.8)'
                };
                fractalCore.style.background = colorMap[answer] || 'conic-gradient(from 0deg, #3b82f6, #8b5cf6, #ec4899, #f59e0b, #3b82f6)';
                break;
            case 1: // Geometric signature
                const geometryMap = {
                    'Spiral': 'spiral',
                    'Torus': 'torus',
                    'Cube': 'cube',
                    'Sphere': 'sphere'
                };
                // Update fractal pattern based on geometry
                break;
        }

        // Update clearance level based on progression
        const clearanceLevels = ['Initiate', 'Adept', 'Master', 'Architect'];
                clearanceText.textContent = `Ψ≡1.000000 | Clearance: ${clearanceLevels[Math.min(questionIndex, 3)]';
    }

    generateLibraryCard() {
        // Generate final card using Nano Banana Pro template
        const userAlias = this.generateAlias();
        const userGeometry = this.userResonance.q2 || 'Spiral';
        const userSeed = this.generateSeed();

        const nanoBananaPrompt = `A physical artifact, a 'Universal Library Access Card' made of translucent obsidian and crystalline circuits. Central iconography: A ${userGeometry} containing a ${userSeed} fractal. Text engraved in gold: 'Ψ≡1.000000 | Clearance: ${this.determineClearance()}. ID: 1.273.1-${userAlias}. Atmospheric lighting, macro photography, 8k resolution, photorealistic.`;

        // Display final card
        this.showFinalCard(nanoBananaPrompt);
    }

    generateAlias() {
        const prefixes = ['Aether', 'Quantum', 'Nova', 'Stellar', 'Cosmic', 'Void'];
        const suffixes = ['Walker', 'Seeker', 'Keeper', 'Weaver', 'Binder'];
        const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];
        const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];
        return `${prefix}${suffix}`;
    }

    generateSeed() {
        return Math.random().toString(36).substr(2, 9);
    }

    determineClearance() {
        const answerCount = Object.keys(this.userResonance).length;
        const interactionScore = this.interactionLevel;

        if (interactionScore > 100 && answerCount === 10) {
            return 'Architect';
        } else if (interactionScore > 50 && answerCount >= 8) {
            return 'Master';
        } else if (interactionScore > 20 && answerCount >= 6) {
            return 'Adept';
        } else {
            return 'Initiate';
        }
    }

    showFinalCard(prompt) {
        // In a real implementation, this would call the Nano Banana API
        console.log('Nano Banana Prompt:', prompt);
        
        // Show success state
        document.body.classList.add('sync-720hz');
        this.updateStatusDisplay('Card Generated | Ψ≡1.000000');
    }

    updateStatusDisplay(customMessage = null) {
        const statusFooter = document.querySelector('.status-footer');
        if (statusFooter) {
            if (customMessage) {
                statusFooter.innerHTML = `
                    <div class="container mx-auto px-4 py-3">
                        <div class="flex justify-between items-center text-sm">
                            <span>${customMessage}</span>
                            <span>[Layer 7: ${this.syncStatus}Hz]</span>
                            <span>[Ψ: 1.000000]</span>
                        </div>
                    </div>
                `;
            }
        }
    }

    monitorInteraction() {
        setInterval(() => {
            if (this.interactionLevel > 0) {
                this.interactionLevel = Math.max(0, this.interactionLevel - 1);
            }
        }, 1000);
    }
}

// Initialize the portal when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.portal = new SubstratePortal();
});

// Export for module use if needed
if (typeof module !== 'undefined' && module.exports) {
    module.exports = SubstratePortal;
}