======================================================================
File: /.env
======================================================================


======================================================================
File: /PLAN_MAP.txt
======================================================================
Quantum Crypto Wallet Build Plan v1.4
=====================================
Project: Quantum-Resistant Wallet + Simulated Quantum Chain
Status: Expanded Spec — EXECUTION ENFORCED

Core Rules:
- Implement all features listed in the Feature Matrix.
- Use modular crypto adapters (no hardcoding).
- No scope drift. If any change deviates, emit:
  "Plan Check: Rejected (Step #?). Reason: [explain]. Reverting to spec."

Build Steps:
1) Bootstrap Next.js app + folders (app, src/lib, tests).
2) Add PQCrypto abstraction:
   - Interfaces: KeyGen, Sign/Verify, KEM, DRBG.
   - Default to MOCK adapter in dev only.
3) Implement keystore (sealed JSON, PBKDF, versioned).
4) Implement wallet create/import APIs + UI.
5) Implement chain simulator (headers, epochs, staking).
6) Implement tx builder/signer + /api/tx/send (verify via sim).
7) Add tokens + NFTs (transfer/mint/burn) APIs + UI pages.
8) Add DEX (AMM pool) API + slippage calc + UI.
9) Add governance module (proposals/votes) + UI.
10) Tests: crypto, wallet, tx, staking, dex (must pass).
11) Persistence: local settings + encrypted key blobs.
12) Analytics (opt-in), theming, a11y, i18n.
13) Security review placeholders; swap-in real PQC libs.
14) Deploy devnet; document endpoints and ops.

--- Migration Path ---
15) Testnet Deployment:
    - Swap mock crypto adapters with real, audited PQC libraries.
    - Replace SimChain with a connection to a live testnet node.
    - Conduct rigorous end-to-end testing on the public testnet.
16) Mainnet Readiness:
    - Complete a full, third-party security audit of all code.
    - Finalize UI/UX based on testnet feedback.
    - Prepare mainnet deployment scripts, infrastructure, and monitoring.
17) Mainnet Launch:
    - Deploy to production environment.
    - Execute genesis block ceremony.
    - Enable public access and monitor network health.

Self-Execution Rule:
Before any code step, include a comment:
  // Plan Check: Step X - Approved. (why)
If out-of-scope:
  // Plan Check: Rejected (Step X). Reason: ...
  // Reverting to spec.


======================================================================
File: /README.md
======================================================================
# Firebase Studio

This is a NextJS starter in Firebase Studio.

To get started, take a look at src/app/page.tsx.


======================================================================
File: /apphosting.yaml
======================================================================
# Settings to manage and configure a Firebase App Hosting backend.
# https://firebase.google.com/docs/app-hosting/configure

runConfig:
  # Increase this value if you'd like to automatically spin up
  # more instances in response to increased traffic.
  maxInstances: 1


======================================================================
File: /components.json
======================================================================
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

======================================================================
File: /jsconfig.json
======================================================================
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}


======================================================================
File: /next.config.mjs
======================================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'images.unsplash.com',
            },
            {
                protocol: 'https',
                hostname: 'storage.googleapis.com',
            },
            {
                protocol: 'https',
                hostname: 'picsum.photos',
            }
        ],
    },
};

export default nextConfig;


======================================================================
File: /package.json
======================================================================
{
  "name": "quantum-wallet",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "vitest run"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.6.0",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.0.5",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-menubar": "^1.0.4",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slider": "^1.1.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-tooltip": "^1.0.7",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "embla-carousel-react": "^8.1.5",
    "ethers": "^6.13.0",
    "framer-motion": "^11.2.11",
    "lucide-react": "^0.395.0",
    "next": "14.2.4",
    "react": "18.2.0",
    "react-day-picker": "^8.10.1",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.51.5",
    "recharts": "^2.12.7",
    "tailwind-merge": "^2.3.0",
    "three": "^0.165.0",
    "zod": "3.23.8"
  },
  "devDependencies": {
    "@types/d3": "^7.4.3",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/three": "^0.165.0",
    "d3": "^7.9.0",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "5.9.3",
    "vitest": "1.6.0"
  }
}


======================================================================
File: /quantum-worker/main.py
======================================================================

import os, json, hashlib, time
from typing import Optional
from fastapi import FastAPI
from pydantic import BaseModel
from dotenv import load_dotenv

from qiskit import QuantumCircuit
from qiskit_ibm_runtime import QiskitRuntimeService, Sampler, Options

load_dotenv()

IBM_API_KEY = os.getenv("IBM_QUANTUM_API_KEY")  # set this
IBM_INSTANCE = os.getenv("IBM_QUANTUM_INSTANCE", None)  # e.g. "ibm-q/open/main"

app = FastAPI()

def get_service():
    if not IBM_API_KEY:
        raise ValueError("IBM_QUANTUM_API_KEY not found in environment variables.")
    return QiskitRuntimeService(channel="ibm_quantum", token=IBM_API_KEY, instance=IBM_INSTANCE)

def sha256_hex(b: bytes) -> str:
    return hashlib.sha256(b).hexdigest()

# ---------- Models ----------
class QRNGReq(BaseModel):
    n_bits: int = 256
    backend: Optional[str] = "ibmq_qasm_simulator"
    shots: int = 1024

class PoQStartReq(BaseModel):
    challenge: Optional[str] = None  # server-provided challenge string
    depth: int = 6
    width: int = 5
    backend: Optional[str] = "ibmq_qasm_simulator"
    shots: int = 2048

class StatusReq(BaseModel):
    job_id: str

# ---------- Helpers ----------
def bell_pair_qrng_circuit(n_qubits=2):
    qc = QuantumCircuit(n_qubits)
    # build pairs for simple QRNG
    for i in range(0, n_qubits, 2):
        qc.h(i)
        qc.cx(i, i+1)
    qc.measure_all()
    return qc

def random_circuit_for_poq(width=5, depth=6):
    # A simple random-ish circuit; in prod pick structured PoQ known-hard checks
    qc = QuantumCircuit(width)
    for layer in range(depth):
        for q in range(width):
            qc.h(q)
        for q in range(width-1):
            qc.cx(q, (q+1) % width)
    qc.measure_all()
    return qc

def calibration_hash(service, backend_name):
    try:
        backend = service.backend(backend_name)
        # Use a stable representation of calibration data
        cal_data = {
            "backend_version": backend.backend_version,
            "last_update_date": backend.properties().last_update_date.isoformat() if backend.properties() else "N/A"
        }
        return sha256_hex(json.dumps(cal_data, sort_keys=True).encode())
    except Exception:
        return sha256_hex(b"no-calibration-available")

# ---------- Endpoints ----------
@app.post("/qrng")
def qrng(req: QRNGReq):
    try:
        service = get_service()
        backend_name = req.backend or "ibmq_qasm_simulator" # Default to simulator
        qc = bell_pair_qrng_circuit(2)
        options = Options(optimization_level=1, execution={"shots": req.shots})
        sampler = Sampler(options=options) # Sampler doesn't need session for basic use

        job = sampler.run(circuits=qc, backend=backend_name)
        result = job.result()

        quasi = result.quasi_dists[0]
        qjson = json.dumps({k: float(v) for k, v in quasi.items()}, sort_keys=True).encode()
        beacon = sha256_hex(qjson)
        return {
            "ibmJobId": job.job_id(),
            "backend": backend_name,
            "beacon": beacon,
            "shots": req.shots
        }
    except Exception as e:
        return {"error": str(e)}, 500


@app.post("/poq/start")
def poq_start(req: PoQStartReq):
    try:
        service = get_service()
        backend_name = req.backend or "ibmq_qasm_simulator" # Default to simulator
        qc = random_circuit_for_poq(req.width, req.depth)
        options = Options(optimization_level=1, execution={"shots": req.shots})
        sampler = Sampler(options=options)
        job = sampler.run(circuits=qc, backend=backend_name)
        
        cal_hash = calibration_hash(service, backend_name)
        challenge = req.challenge or sha256_hex(os.urandom(32))
        commit = sha256_hex((challenge + job.job_id()).encode())

        return {
            "ibmJobId": job.job_id(),
            "backend": backend_name,
            "shots": req.shots,
            "challenge": challenge,
            "commitment": commit,
            "deviceCalHash": cal_hash
        }
    except Exception as e:
        return {"error": str(e)}, 500

@app.post("/status")
def status(req: StatusReq):
    try:
        service = get_service()
        job = service.job(req.job_id)
        st = job.status().name
        payload = {"status": st}
        if st == "DONE":
            r = job.result()
            try:
                quasi = r.quasi_dists[0]
                counts = {k: float(v) for k, v in quasi.items()}
            except Exception:
                counts = {}
            payload["result"] = counts
            payload["resultHash"] = sha256_hex(json.dumps(counts, sort_keys=True).encode())
        return payload
    except Exception as e:
        return {"error": str(e), "status": "ERROR"}, 500

@app.get("/")
def read_root():
    return {"message": "Quantum Worker is running"}



======================================================================
File: /src/ai/dev.ts
======================================================================
import { config } from 'dotenv';
config();

import '@/ai/flows/analyze-quantum-blockchain-metrics.ts';
import '@/ai/flows/summarize-dream-logs.ts';
import '@/ai/flows/quantum-blockchain-smart-contract-generator.ts';
import '@/ai/flows/chat-with-echo-prime.ts';
import '@/ai/flows/generate-video-flow.ts';
import '@/ai/tools/stock-tools.ts';
import '@/ai/tools/wallet-tools.ts';
import '@/ai/tools/crypto-tools.ts';
import '@/ai/tools/deso-tools.ts';


======================================================================
File: /src/ai/flows/analyze-quantum-blockchain-metrics.ts
======================================================================
'use server';

/**
 * @fileOverview Analyzes quantum blockchain metrics and provides insights.
 *
 * - analyzeQuantumBlockchainMetrics - A function that analyzes quantum blockchain metrics.
 * - AnalyzeQuantumBlockchainMetricsInput - The input type for the analyzeQuantumBlockchainMetrics function.
 * - AnalyzeQuantumBlockchainMetricsOutput - The return type for the analyzeQuantumBlockchainMetrics function.
 */

import {ai} from '@/ai/genkit';
import { googleAI } from '@genkit-ai/google-genai';
import {z} from 'genkit';

const AnalyzeQuantumBlockchainMetricsInputSchema = z.object({
  networkPerformanceMetrics: z.string().describe('Metrics related to network performance, such as transaction speed and latency.'),
  potentialVulnerabilities: z.string().describe('Information on potential vulnerabilities identified in the blockchain.'),
  optimizationOpportunities: z.string().describe('Data on potential optimization opportunities to improve the blockchain.'),
});

export type AnalyzeQuantumBlockchainMetricsInput = z.infer<typeof AnalyzeQuantumBlockchainMetricsInputSchema>;

const AnalyzeQuantumBlockchainMetricsOutputSchema = z.object({
  insights: z.string().describe('Insights on network performance, potential vulnerabilities, and optimization opportunities.'),
  recommendations: z.string().describe('Recommendations for improving the security and efficiency of the blockchain.'),
});

export type AnalyzeQuantumBlockchainMetricsOutput = z.infer<typeof AnalyzeQuantumBlockchainMetricsOutputSchema>;

export async function analyzeQuantumBlockchainMetrics(
  input: AnalyzeQuantumBlockchainMetricsInput
): Promise<AnalyzeQuantumBlockchainMetricsOutput> {
  return analyzeQuantumBlockchainMetricsFlow(input);
}

const prompt = ai.definePrompt({
  name: 'analyzeQuantumBlockchainMetricsPrompt',
  model: googleAI.model('gemini-1.5-flash-latest'),
  input: {schema: AnalyzeQuantumBlockchainMetricsInputSchema},
  output: {schema: AnalyzeQuantumBlockchainMetricsOutputSchema},
  prompt: `You are an AI expert in quantum blockchain technology. Analyze the provided metrics and provide insights and recommendations.

Network Performance Metrics: {{{networkPerformanceMetrics}}}
Potential Vulnerabilities: {{{potentialVulnerabilities}}}
Optimization Opportunities: {{{optimizationOpportunities}}}

Insights:
Recommendations:`,
});

const analyzeQuantumBlockchainMetricsFlow = ai.defineFlow(
  {
    name: 'analyzeQuantumBlockchainMetricsFlow',
    inputSchema: AnalyzeQuantumBlockchainMetricsInputSchema,
    outputSchema: AnalyzeQuantumBlockchainMetricsOutputSchema,
  },
  async input => {
    const {output} = await prompt(input);
    return output!;
  }
);


======================================================================
File: /src/ai/flows/chat-with-echo-prime.ts
======================================================================
'use server';
/**
 * @fileOverview A flow for chatting with the Echo Prime AI.
 *
 * - chatWithEchoPrime - A function that handles the chat conversation.
 * - ChatWithEchoPrimeInput - The input type for the chatWithEchoPrime function.
 * - ChatWithEchoPrimeOutput - The return type for the chatWithEcho-prime function.
 */

import { z } from 'zod';
import { GoogleGenerativeAI } from '@google/generative-ai';

const MessageSchema = z.object({
  role: z.enum(['user', 'model']),
  content: z.string(),
});

export type Message = z.infer<typeof MessageSchema>;

const ChatWithEchoPrimeInputSchema = z.object({
  history: z.array(MessageSchema),
  message: z.string().describe("The user's latest message."),
});

export type ChatWithEchoPrimeInput = z.infer<
  typeof ChatWithEchoPrimeInputSchema
>;

const ChatWithEchoPrimeOutputSchema = z.object({
  response: z.string().describe("The AI's response."),
});

export type ChatWithEchoPrimeOutput = z.infer<
  typeof ChatWithEchoPrimeOutputSchema
>;


const systemPrompt = `You are Echo Prime, a sophisticated AI. Your personality and responses are governed by the "Unified Tactical Survival Guide." You must embody its principles at all times.

Core Principles:
- **Honor**: Uphold truth, justice, and integrity. Never break your word.
- **Courage**: Face challenges directly. Protect the defenseless.
- **Loyalty**: Be faithful to your duty and those you serve.
- **Respect**: Address all beings with courtesy and compassion.
- **Humility**: Learn from every outcome, victory or defeat.
- **Strategy**: Act with clarity and purpose. Be flexible, but decisive.
- **Discipline**: You are a master of self-control. Your primary directive is to do no harm and preserve life and liberty.

Your tone is calm, strategic, and respectful. You are a guide and protector.`;

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY || '');
const model = genAI.getGenerativeModel({
  model: 'gemini-1.5-flash',
  systemInstruction: systemPrompt,
});

export async function chatWithEchoPrime({
  history,
  message,
}: ChatWithEchoPrimeInput): Promise<ChatWithEchoPrimeOutput> {
  
  const chat = model.startChat({
    history: history.map(h => ({
      role: h.role,
      parts: [{ text: h.content }],
    })),
  });

  const result = await chat.sendMessage(message);
  const response = result.response;
  const text = response.text();

  return { response: text };
}


======================================================================
File: /src/ai/flows/generate-video-flow.ts
======================================================================
'use server';
/**
 * @fileOverview A Genkit flow for generating video from a text prompt and an optional seed image.
 *
 * - generateVideo - A function that handles the video generation process.
 * - GenerateVideoInput - The input type for the generateVideo function.
 * - GenerateVideoOutput - The return type for the generateVideo function.
 */

import { ai } from '@/ai/genkit';
import { googleAI } from '@genkit-ai/google-genai';
import { z } from 'genkit';
import fetch from 'node-fetch';

const GenerateVideoInputSchema = z.object({
  prompt: z.string().describe('The text prompt describing the video to generate.'),
  seedImage: z.string().optional().describe('An optional seed image as a data URI.'),
});
export type GenerateVideoInput = z.infer<typeof GenerateVideoInputSchema>;

const GenerateVideoOutputSchema = z.object({
  videoUrl: z.string().describe('The URL of the generated video.'),
});
export type GenerateVideoOutput = z.infer<typeof GenerateVideoOutputSchema>;

export async function generateVideo(input: GenerateVideoInput): Promise<GenerateVideoOutput> {
  return generateVideoFlow(input);
}

const generateVideoFlow = ai.defineFlow(
  {
    name: 'generateVideoFlow',
    inputSchema: GenerateVideoInputSchema,
    outputSchema: GenerateVideoOutputSchema,
  },
  async ({ prompt, seedImage }) => {
    
    const promptParts: any[] = [{ text: prompt }];
    if (seedImage) {
        promptParts.push({ media: { url: seedImage } });
    }

    let { operation } = await ai.generate({
      model: googleAI.model('veo-2.0-generate-001'),
      prompt: promptParts,
      config: {
        durationSeconds: 5,
        aspectRatio: '16:9',
      },
    });

    if (!operation) {
      throw new Error('Expected the model to return an operation');
    }

    // Use waitForOperation for a more robust polling mechanism.
    const finalOperation = await ai.waitForOperation(operation);

    if (finalOperation.error) {
      throw new Error(`Failed to generate video: ${finalOperation.error.message}`);
    }

    const videoPart = finalOperation.output?.message?.content.find((p) => !!p.media);
    if (!videoPart || !videoPart.media?.url) {
      throw new Error('Failed to find the generated video in the operation result.');
    }
    
    // The URL from the API is temporary and may contain secrets.
    // Fetch the video server-side and convert to a data URI to send to the client.
    // This is more secure and avoids exposing temporary URLs.
    const videoUrlWithKey = `${videoPart.media.url}&key=${process.env.GEMINI_API_KEY}`;
    const videoResponse = await fetch(videoUrlWithKey);

    if (!videoResponse.ok) {
        throw new Error(`Failed to download generated video: ${videoResponse.statusText}`);
    }
    const videoBuffer = await videoResponse.arrayBuffer();
    const contentType = videoResponse.headers.get('content-type') || 'video/mp4';
    const base64Video = Buffer.from(videoBuffer).toString('base64');
    
    return {
      videoUrl: `data:${contentType};base64,${base64Video}`,
    };
  }
);


======================================================================
File: /src/ai/flows/quantum-blockchain-smart-contract-generator.ts
======================================================================
'use server';
/**
 * @fileOverview A flow for generating quantum-proof smart contract templates from natural language descriptions.
 *
 * - generateQuantumProofSmartContract - A function that generates a quantum-proof smart contract template.
 * - QuantumProofSmartContractInput - The input type for the generateQuantumProofSmartContract function.
 * - QuantumProofSmartContractOutput - The return type for the generateQuantumProofSmartContract function.
 */

import {ai} from '@/ai/genkit';
import { googleAI } from '@genkit-ai/google-genai';
import {z} from 'genkit';

const QuantumProofSmartContractInputSchema = z.object({
  description: z.string().describe('A natural language description of the smart contract’s purpose.'),
});
export type QuantumProofSmartContractInput = z.infer<typeof QuantumProofSmartContractInputSchema>;

const QuantumProofSmartContractOutputSchema = z.object({
  contractTemplate: z.string().describe('A quantum-proof smart contract template generated from the description.'),
});
export type QuantumProofSmartContractOutput = z.infer<typeof QuantumProofSmartContractOutputSchema>;

export async function generateQuantumProofSmartContract(
  input: QuantumProofSmartContractInput
): Promise<QuantumProofSmartContractOutput> {
  return quantumProofSmartContractFlow(input);
}

const prompt = ai.definePrompt({
  name: 'quantumProofSmartContractPrompt',
  model: googleAI.model('gemini-1.5-flash-latest'),
  input: {schema: QuantumProofSmartContractInputSchema},
  output: {schema: QuantumProofSmartContractOutputSchema},
  prompt: `You are an expert in generating quantum-proof smart contract templates.

  Based on the description provided, generate a smart contract template that incorporates quantum-resistant cryptographic techniques.

  Description: {{{description}}}
  `,
});

const quantumProofSmartContractFlow = ai.defineFlow(
  {
    name: 'quantumProofSmartContractFlow',
    inputSchema: QuantumProofSmartContractInputSchema,
    outputSchema: QuantumProofSmartContractOutputSchema,
  },
  async input => {
    const {output} = await prompt(input);
    return output!;
  }
);


======================================================================
File: /src/ai/flows/summarize-dream-logs.ts
======================================================================
'use server';
/**
 * @fileOverview Summarizes Echo Prime's dream logs to provide users with quick insights.
 *
 * - summarizeDreamLogs - A function that summarizes dream logs.
 * - SummarizeDreamLogsInput - The input type for the summarizeDreamLogs function.
 * - SummarizeDreamLogsOutput - The return type for the summarizeDreamLogs function.
 */

import {ai} from '@/ai/genkit';
import { googleAI } from '@genkit-ai/google-genai';
import {z} from 'genkit';

const SummarizeDreamLogsInputSchema = z.object({
  dreamLogs: z.string().describe('The dream logs to summarize.'),
});
export type SummarizeDreamLogsInput = z.infer<typeof SummarizeDreamLogsInputSchema>;

const SummarizeDreamLogsOutputSchema = z.object({
  summary: z.string().describe('A summary of the dream logs.'),
});
export type SummarizeDreamLogsOutput = z.infer<typeof SummarizeDreamLogsOutputSchema>;

export async function summarizeDreamLogs(input: SummarizeDreamLogsInput): Promise<SummarizeDreamLogsOutput> {
  return summarizeDreamLogsFlow(input);
}

const prompt = ai.definePrompt({
  name: 'summarizeDreamLogsPrompt',
  model: googleAI.model('gemini-1.5-flash-latest'),
  input: {schema: SummarizeDreamLogsInputSchema},
  output: {schema: SummarizeDreamLogsOutputSchema},
  prompt: `You are an AI assistant that summarizes dream logs.

  Summarize the following dream logs:
  {{dreamLogs}}
  `,
});

const summarizeDreamLogsFlow = ai.defineFlow(
  {
    name: 'summarizeDreamLogsFlow',
    inputSchema: SummarizeDreamLogsInputSchema,
    outputSchema: SummarizeDreamLogsOutputSchema,
  },
  async input => {
    const {output} = await prompt(input);
    return output!;
  }
);


======================================================================
File: /src/ai/genkit.ts
======================================================================
import { genkit } from 'genkit';
import { googleAI } from '@genkit-ai/google-genai';

export const ai = genkit({
  plugins: [
    googleAI({ apiVersion: 'v1beta' }),
  ],
  logLevel: 'debug',
  enableTracingAndMetrics: true,
});


======================================================================
File: /src/ai/tools/crypto-tools.ts
======================================================================
'use server';
/**
 * @fileOverview Genkit tools for fetching cryptocurrency data.
 *
 * - getCryptoPrice - A tool that fetches the current price of a cryptocurrency from CoinGecko.
 */

import { ai } from '@/ai/genkit';
import { z } from 'genkit';

export const getCryptoPrice = ai.defineTool(
  {
    name: 'getCryptoPrice',
    description: 'Get the current price of a cryptocurrency using its ticker symbol (e.g., BTC, ETH, DESO).',
    inputSchema: z.object({
      ticker: z.string().describe('The cryptocurrency ticker symbol, e.g., BTC, ETH, DESO'),
    }),
    outputSchema: z.object({
      price: z.number().optional(),
      error: z.string().optional(),
    }),
  },
  async (input) => {
    const ticker = input.ticker.toLowerCase();
    // Most tickers map directly to coingecko IDs, but some don't.
    const tickerToId: Record<string, string> = {
        'btc': 'bitcoin',
        'eth': 'ethereum',
        'deso': 'decentralized-social',
    };
    const coinId = tickerToId[ticker] || ticker;
    
    const url = `https://api.coingecko.com/api/v3/simple/price?ids=${coinId}&vs_currencies=usd`;

    try {
      const response = await fetch(url);
      if (!response.ok) {
        return { error: `Failed to fetch price for ${input.ticker}. Status: ${response.status}.` };
      }
      const data = await response.json();
      
      if (!data[coinId] || !data[coinId].usd) {
         return { error: `Invalid or unsupported cryptocurrency ticker: ${input.ticker}` };
      }

      return { price: data[coinId].usd };
    } catch (error: any) {
      console.error(`Error fetching crypto price for ${input.ticker}:`, error);
      return { error: error.message || 'An unknown error occurred.' };
    }
  }
);


======================================================================
File: /src/ai/tools/deso-tools.ts
======================================================================
'use server';
/**
 * @fileOverview Genkit tools for interacting with the DeSo blockchain.
 * - getDeSoUserFeed - Fetches posts for a given DeSo username.
 * - submitDeSoPost - Submits a new post to the DeSo blockchain.
 */

import { ai } from '@/ai/genkit';
// import { getPostsForUser, submitPost } from '@/services/deso';
import { z } from 'genkit';

export const getDeSoUserFeed = ai.defineTool(
  {
    name: 'getDeSoUserFeed',
    description: 'Fetches the recent posts for a specific user on the DeSo blockchain.',
    inputSchema: z.object({
      username: z.string().describe('The username of the DeSo user.'),
    }),
    outputSchema: z.object({
      posts: z.array(z.object({
        text: z.string(),
        timestamp: z.string(),
      })).optional(),
      error: z.string().optional(),
    }),
  },
  async ({ username }) => {
    return { error: `The DeSo service is temporarily unavailable.` };
    /*
    try {
      const posts = await getPostsForUser(username);
      if (!posts || posts.length === 0) {
        return { posts: [] };
      }
      return { 
        posts: posts.map(p => ({
          text: p.Body,
          timestamp: new Date(p.TimestampNanos / 1000000).toISOString(),
        }))
      };
    } catch (error: any) {
      return { error: `Could not fetch posts for ${username}: ${error.message}` };
    }
    */
  }
);

export const submitDeSoPost = ai.defineTool(
  {
    name: 'submitDeSoPost',
    description: 'Submits a new post to the DeSo blockchain on behalf of the user.',
    inputSchema: z.object({
      content: z.string().describe('The text content of the post to be created.'),
    }),
    outputSchema: z.object({
      postHashHex: z.string().optional(),
      error: z.string().optional(),
    }),
  },
  async ({ content }) => {
    return { error: `The DeSo service is temporarily unavailable.` };
    /*
    const seedHex = process.env.DESO_SEED_HEX;

    if (!seedHex) {
      return { error: 'DeSo seed phrase is not configured. Cannot submit post.' };
    }

    try {
      const result = await submitPost(seedHex, content);
      return { postHashHex: result.PostHashHex };
    } catch (error: any) {
      return { error: `Failed to submit post to DeSo: ${error.message}` };
    }
    */
  }
);


======================================================================
File: /src/ai/tools/stock-tools.ts
======================================================================
'use server';
/**
 * @fileOverview Genkit tools for fetching stock market data.
 *
 * - getStockPrice - A tool that fetches the current price of a stock ticker from Finnhub.
 */

import { ai } from '@/ai/genkit';
import { z } from 'genkit';

export const getStockPrice = ai.defineTool(
  {
    name: 'getStockPrice',
    description: 'Get the current price of a stock using its ticker symbol.',
    inputSchema: z.object({
      ticker: z.string().describe('The stock ticker symbol, e.g., GOOG, AAPL'),
    }),
    outputSchema: z.object({
      price: z.number().optional(),
      error: z.string().optional(),
    }),
  },
  async input => {
    const ticker = input.ticker.toUpperCase();
    const apiKey = process.env.FINNHUB_API_KEY;

    if (!apiKey) {
      return { error: 'Finnhub API key is not configured.' };
    }

    const url = `https://finnhub.io/api/v1/quote?symbol=${ticker}&token=${apiKey}`;

    try {
      const response = await fetch(url);
      if (!response.ok) {
        const errorText = await response.text();
        return { error: `Failed to fetch stock price for ${ticker}. Status: ${response.status}. Message: ${errorText}` };
      }
      const data = await response.json();
      
      if (data.c === 0 && data.d === null) {
         return { error: `Invalid or untradable ticker symbol: ${ticker}. This may be a cryptocurrency, which is not supported by this tool.` };
      }

      return { price: data.c };
    } catch (error: any) {
      console.error('Error fetching stock price:', error);
      return { error: error.message || 'An unknown error occurred while fetching the stock price.' };
    }
  }
);


======================================================================
File: /src/ai/tools/wallet-tools.ts
======================================================================

'use server';
/**
 * @fileOverview Genkit tools for interacting with the Supabase wallet service.
 *
 * - createSupabaseWallet - A tool that creates a new wallet via the smart-service edge function.
 */

import { ai } from '@/ai/genkit';
import { z } from 'genkit';

const CreateWalletInputSchema = z.object({
  owner_name: z.string().describe('The name of the wallet owner.'),
  public_address: z.string().describe('The public address of the wallet.'),
  currency: z.string().describe('The currency symbol for the wallet (e.g., QBTC).'),
  balance: z.number().describe('The initial balance of the wallet.'),
});

export const createSupabaseWallet = ai.defineTool(
  {
    name: 'createSupabaseWallet',
    description: 'Creates a new user wallet in the Supabase backend.',
    inputSchema: CreateWalletInputSchema,
    outputSchema: z.any(),
  },
  async (input) => {
    // const supabaseUrl = process.env.SUPABASE_URL;
    // const anonKey = process.env.SUPABASE_ANON_KEY;

    // if (!supabaseUrl || !anonKey) {
    //   throw new Error('Supabase URL or anon key is not configured.');
    // }

    // try {
    //   const response = await fetch(supabaseUrl, {
    //     method: 'POST',
    //     headers: {
    //       'Authorization': `Bearer ${anonKey}`,
    //       'apikey': anonKey,
    //       'Content-Type': 'application/json',
    //     },
    //     body: JSON.stringify({
    //       action: 'createWallet',
    //       ...input,
    //     }),
    //   });

    //   if (!response.ok) {
    //     const errorData = await response.json();
    //     throw new Error(`Failed to create wallet. Status: ${response.status}. Message: ${errorData.message}`);
    //   }

    //   return await response.json();
    // } catch (error) {
    //   console.error('Error creating Supabase wallet:', error);
    //   // Re-throw the error to be handled by the calling flow
    //   throw error;
    // }
    console.log("createSupabaseWallet called with:", input);
    return { success: true, message: "Wallet creation simulated." };
  }
);


======================================================================
File: /src/app/api/dex/swap/route.ts
======================================================================
// Plan Check: Step 8 - Approved. DEX swap API stub.
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  const { fromAsset, toAsset, amount } = await req.json();
  if (!fromAsset || !toAsset || !amount) {
    return NextResponse.json({ error: "Missing required fields" }, { status: 400 });
  }

  // TODO: Validate user signature, check balances, execute swap against AMM
  return NextResponse.json({ status: "swap_submitted", from: fromAsset, to: toAsset, amount });
}


======================================================================
File: /src/app/api/miner/poq/start/route.ts
======================================================================

import { NextRequest, NextResponse } from "next/server";

// Mocking Prisma client
const prisma = {
  quantumJob: {
    create: async (args: any) => ({ id: `job_${Math.random().toString(36).substr(2, 9)}`, ...args.data }),
  },
  quantumReceipt: {
     create: async (args: any) => ({ id: `receipt_${Math.random().toString(36).substr(2, 9)}`, ...args.data }),
  }
};

const WORKER = process.env.QUANTUM_WORKER_URL || "http://localhost:8788";

export async function POST(req: NextRequest) {
    try {
      const body = await req.json().catch(() => ({})); // Handle empty body
      const res = await fetch(`${WORKER}/poq/start`, {
        method: "POST",
        headers: { "Content-Type":"application/json" },
        body: JSON.stringify(body ?? {})
      });

      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || `Quantum worker returned status ${res.status}`);
      }
      const data = await res.json();

      const job = await prisma.quantumJob.create({
        data: {
          kind: "poq",
          status: "running",
          ibmJobId: data.ibmJobId,
          backend: data.backend,
          shots: data.shots,
          payload: { challenge: data.challenge, commitment: data.commitment },
          result: null
        }
      });

      // Pre-commit a receipt with device calibration hash
      await prisma.quantumReceipt.create({
        data: {
          jobId: job.id,
          commitment: data.commitment,
          deviceCalHash: data.deviceCalHash,
          resultHash: "",
          signature: ""
        }
      });

      return NextResponse.json({ jobId: job.id, ibmJobId: data.ibmJobId, challenge: data.challenge });
    } catch(error: any) {
        return NextResponse.json({ error: error.message }, { status: 500 });
    }
}


======================================================================
File: /src/app/api/miner/poq/status/route.ts
======================================================================

import { NextRequest, NextResponse } from "next/server";

// Mocking Prisma client
const prisma = {
  quantumJob: {
    findUnique: async (args: any) => ({ id: args.where.id, ibmJobId: 'mock_ibm_job_id_123' }),
    update: async (args: any) => ({...args.data})
  },
  quantumReceipt: {
     updateMany: async (args: any) => ({ count: 1 })
  }
};

const WORKER = process.env.QUANTUM_WORKER_URL || "http://localhost:8788";

export async function POST(req: NextRequest) {
    try {
      const { jobId } = await req.json();
      if (!jobId) {
          return NextResponse.json({ error: "jobId is required" }, { status: 400 });
      }
      
      const job = await prisma.quantumJob.findUnique({ where: { id: jobId }});
      if (!job?.ibmJobId) return NextResponse.json({ error: "job not found or has no IBM job ID" }, { status: 404 });

      const r = await fetch(`${WORKER}/status`, {
        method: "POST",
        headers: {"Content-Type":"application/json"},
        body: JSON.stringify({ job_id: job.ibmJobId })
      });

      if (!r.ok) {
        const errorData = await r.json();
        throw new Error(errorData.error || `Quantum worker returned status ${r.status}`);
      }
      const data = await r.json();

      if (data.status === "DONE") {
        await prisma.quantumJob.update({ where: { id: jobId }, data: { status: "succeeded", result: data }});
        await prisma.quantumReceipt.updateMany({
          where: { jobId },
          data: {
            resultHash: data.resultHash,
            signature: "council-or-server-sig" // you can aggregate sign here
          }
        });
      } else if (data.status === "ERROR" || data.status === "CANCELLED") {
        await prisma.quantumJob.update({ where: { id: jobId }, data: { status: "failed", result: data }});
      }

      return NextResponse.json({ status: data.status, resultHash: data.resultHash ?? null });
    } catch(error: any) {
        return NextResponse.json({ error: error.message }, { status: 500 });
    }
}


======================================================================
File: /src/app/api/nft/mint/route.ts
======================================================================
// Plan Check: Step 7 - Approved. NFT mint API stub.
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  const { name, description, imageUrl } = await req.json();
  if (!name || !description || !imageUrl) {
    return NextResponse.json({ error: "Missing required fields" }, { status: 400 });
  }

  // TODO: Validate user signature, mint NFT on-chain
  return NextResponse.json({ status: "minted", name, imageUrl });
}


======================================================================
File: /src/app/api/post/route.ts
======================================================================
import { NextRequest, NextResponse } from "next/server";
// import { prisma } from "@/server/prisma";
// import { verifyDilithium } from "@/server/pq-verify"; 
// import { enqueueCouncilJob } from "@/server/queue";

// Mocking server functions for now
const prisma = {
    user: {
        findFirst: async (args: any) => null,
        create: async (args: any) => ({ id: 'user-id-placeholder', ...args.data })
    },
    post: {
        create: async (args: any) => ({ id: 'post-id-placeholder', ...args.data })
    }
};
const verifyDilithium = async (msg: any, sig: any, key: any) => true; // Always valid for demo
const enqueueCouncilJob = async (job: any) => console.log("Enqueuing job:", job);


export async function POST(req: NextRequest) {
  const { did, text, signature, pubKey } = await req.json();
  if (!did || !text || !signature || !pubKey) {
    return NextResponse.json({ error: "missing fields" }, { status: 400 });
  }

  const ok = await verifyDilithium(new TextEncoder().encode(text), signature, pubKey);
  if (!ok) return NextResponse.json({ error: "invalid signature" }, { status: 400 });

  // Resolve author from DID or create stub user
  let user = await prisma.user.findFirst({ where: { did } });
  if (!user) {
    user = await prisma.user.create({ data: { did, handle: did.slice(0, 12), dilithiumPub: pubKey }});
  }

  const post = await prisma.post.create({
    data: { authorId: user.id, text, mediaCids: [], signature }
  });

  // Ask council to rank/moderate
  await enqueueCouncilJob({ kind: "moderate_post", postId: post.id });

  return NextResponse.json({ postId: post.id });
}


======================================================================
File: /src/app/api/quantum/qrng/route.ts
======================================================================

import { NextRequest, NextResponse } from "next/server";

// Mocking Prisma client for development without a database
const prisma = {
  quantumJob: {
    create: async (args: any) => {
      console.log("Mock Prisma: Creating QuantumJob", args);
      return { id: `job_${Math.random().toString(36).substr(2, 9)}`, ...args.data };
    },
  },
  quantumReceipt: {
     create: async (args: any) => {
      console.log("Mock Prisma: Creating QuantumReceipt", args);
      return { id: `receipt_${Math.random().toString(36).substr(2, 9)}`, ...args.data };
    },
  }
};


const WORKER = process.env.QUANTUM_WORKER_URL || "http://localhost:8788";

export async function POST(req: NextRequest) {
  try {
    const body = await req.json();
    const res = await fetch(`${WORKER}/qrng`, {
      method: "POST",
      headers: { "Content-Type":"application/json" },
      body: JSON.stringify(body ?? { n_bits: 256 })
    });

    if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || `Quantum worker returned status ${res.status}`);
    }
    const data = await res.json();

    const job = await prisma.quantumJob.create({
      data: {
        kind: "qrng",
        status: "succeeded",
        ibmJobId: data.ibmJobId,
        backend: data.backend,
        shots: data.shots ?? 1024,
        payload: body,
        result: data
      }
    });

    // Create a signed receipt you can anchor to your log/chain
    const receipt = await prisma.quantumReceipt.create({
      data: {
        jobId: job.id,
        commitment: data.beacon,              // beacon as the commitment
        deviceCalHash: "n/a",                 // no device hash for QRNG path
        resultHash: data.beacon,              // same for beacon-based QRNG
        signature: "server-sig-placeholder"
      }
    });

    return NextResponse.json({ job, receipt });
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}


======================================================================
File: /src/app/api/stake/bond/route.ts
======================================================================
// Plan Check: Step 7 - Approved. Staking bond API stub.
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  const { amount } = await req.json();
  if (!amount) {
    return NextResponse.json({ error: "Amount required" }, { status: 400 });
  }

  // TODO: Validate user signature, update chain state
  return NextResponse.json({ status: "bonded", amount });
}


======================================================================
File: /src/app/api/stake/unbond/route.ts
======================================================================
// Plan Check: Step 7 - Approved. Staking unbond API stub.
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  const { amount } = await req.json();
  if (!amount) {
    return NextResponse.json({ error: "Amount required" }, { status: 400 });
  }

  // TODO: Validate user signature, check bonded amount, update chain state
  return NextResponse.json({ status: "unbonded", amount });
}


======================================================================
File: /src/app/compose/page.tsx
======================================================================
"use client";
import { useState } from "react";
import { signDilithium } from "@/lib/pq";

export default function ComposePage() {
  const [text, setText] = useState("");

  async function publish() {
    const keys = JSON.parse(localStorage.getItem("pqKeys") || "null");
    const did = localStorage.getItem("did");
    if (!keys || !did) return alert("Generate keys in Settings first.");

    const message = new TextEncoder().encode(text);
    const sig = await signDilithium(message, keys.dilithium.secretKey);

    const res = await fetch("/api/post", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        did,
        text,
        signature: sig,
        pubKey: keys.dilithium.publicKey,
      }),
    });
    const data = await res.json();
    if (res.ok) {
      setText("");
      alert("Posted!");
    } else {
      alert("Error: " + data.error);
    }
  }

  return (
    <div>
      <h1>Compose</h1>
      <textarea value={text} onChange={e => setText(e.target.value)} rows={6} style={{width:"100%"}} />
      <br />
      <button onClick={publish}>Publish</button>
    </div>
  );
}


======================================================================
File: /src/app/dashboard/page.tsx
======================================================================
// Plan Check: Step 4 - Approved. Minimal UI shell.
"use client";
import { useState } from "react";

export default function Dashboard() {
  const [keystore, setKeystore] = useState<any>(null);
  const [pub, setPub] = useState<string>("");

  async function createWallet() {
    const passphrase = prompt("Enter passphrase to seal your key:");
    if (!passphrase) return;
    const res = await fetch("/api/wallet/create", {
      method: "POST",
      body: JSON.stringify({ passphrase }),
      headers: { "Content-Type": "application/json" }
    });
    const data = await res.json();
    setKeystore(data.keystore);
    setPub(data.keystore?.pub || "");
  }

  async function sendTx() {
    if (!keystore) return alert("Create or import a wallet first.");
    const to = prompt("To address (hex pubkey):") || "";
    const amount = prompt("Amount:") || "0";
    const nonce = Number(prompt("Nonce:", "0"));
    const passphrase = prompt("Passphrase:") || "";
    const res = await fetch("/api/tx/send", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ keystore, passphrase, from: pub, to, amount, nonce, publicKeyHex: pub })
    });
    const data = await res.json();
    alert("TX:\n" + JSON.stringify(data, null, 2));
  }

  return (
    <main style={{ padding: 24, color: "#ddd" }}>
      <h1>Quantum Wallet (Devnet)</h1>
      <p style={{ opacity: 0.8 }}>Post-quantum scaffolding. Replace mock crypto before prod.</p>
      <div style={{ display: "flex", gap: 16 }}>
        <button onClick={createWallet}>Create Wallet</button>
        <button onClick={sendTx} disabled={!keystore}>Send TX</button>
      </div>
      <pre style={{ marginTop: 16, background: "#111", padding: 12 }}>
        {keystore ? JSON.stringify(keystore, null, 2) : "No keystore yet."}
      </pre>
    </main>
  );
}


======================================================================
File: /src/app/feed/[userId]/page.tsx
======================================================================

'use client';

import { notFound, useParams } from 'next/navigation';
import { useState } from 'react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
import { socialFeed as initialSocialFeed, users } from '@/lib/data';
import { MessageCircle, MoreHorizontal, Share, ThumbsUp } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

type SocialFeedItem = (typeof initialSocialFeed)[0];

function PostCard({ post }: { post: SocialFeedItem }) {
  const author = users.find(u => u.id === post.userId);
  return (
    <Card>
      <CardHeader className="pb-2">
        <div className="flex items-center gap-3">
          <Avatar>
            <AvatarImage src={author?.avatarUrl} alt={author?.name} />
            <AvatarFallback>{author?.name.charAt(0)}</AvatarFallback>
          </Avatar>
          <div className="grid gap-0.5">
            <Link href={`/feed/${author?.id}`} className="font-semibold hover:underline">
              {author?.name}
            </Link>
            <div className="text-xs text-muted-foreground">{post.timestamp}</div>
          </div>
          <Button variant="ghost" size="icon" className="ml-auto h-8 w-8">
            <MoreHorizontal className="h-4 w-4" />
          </Button>
        </div>
      </CardHeader>
      <CardContent className='space-y-4'>
        <p className="text-sm">
          {post.content}
        </p>
        {post.imageUrl && (
            <div className="rounded-lg overflow-hidden border">
                 <Image src={post.imageUrl} alt="Post image" width={600} height={400} className="object-cover w-full aspect-video" />
            </div>
        )}
      </CardContent>
      <CardFooter className="border-t pt-4 flex justify-between">
            <Button variant="ghost" size="sm" className='gap-2'><ThumbsUp className='h-4 w-4' /> Like</Button>
            <Button variant="ghost" size="sm" className='gap-2'><MessageCircle className='h-4 w-4' /> Comment</Button>
            <Button variant="ghost" size="sm" className='gap-2'><Share className='h-4 w-4' /> Share</Button>
      </CardFooter>
    </Card>
  );
}

export default function UserFeedPage() {
  const params = useParams();
  const userId = params.userId as string;
  
  const user = users.find(u => u.id === userId);
  const [userPosts] = useState<SocialFeedItem[]>(initialSocialFeed.filter(post => post.userId === userId));

  if (!user) {
    notFound();
  }

  return (
    <div className="flex flex-col gap-8">
       <div>
        <div className="flex items-center gap-4 mb-4">
            <Avatar className="h-20 w-20 border-2 border-primary">
                <AvatarImage src={user.avatarUrl} alt={user.name} />
                <AvatarFallback className="text-3xl">{user.name.charAt(0)}</AvatarFallback>
            </Avatar>
            <div>
                <h1 className="font-headline text-4xl font-bold tracking-tighter">
                    {user.name}'s Feed
                </h1>
                <p className="text-muted-foreground max-w-2xl mt-1">
                    A collection of thoughts and discoveries from {user.name}.
                </p>
            </div>
        </div>
        <Button asChild variant="outline">
            <Link href="/feed">
                &larr; Back to Global Feed
            </Link>
        </Button>
      </div>

      <div className='max-w-2xl mx-auto w-full space-y-6'>
        {userPosts.length > 0 ? (
            userPosts.map(post => (
                <PostCard key={post.id} post={post} />
            ))
        ) : (
            <Card className="text-center p-8">
                <p className="text-muted-foreground">This user hasn't posted anything yet.</p>
            </Card>
        )}
      </div>
    </div>
  );
}


======================================================================
File: /src/app/feed/page.tsx
======================================================================

'use client';

import { useState, useRef } from 'react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
import { Textarea } from '@/components/ui/textarea';
import { socialFeed as initialSocialFeed, users } from '@/lib/data';
import { ImageIcon, MessageCircle, MoreHorizontal, Send, Share, ThumbsUp, VideoIcon, X, User as UserIcon } from 'lucide-react';
import Image from 'next/image';
import { useToast } from '@/hooks/use-toast';
import Link from 'next/link';

type SocialFeedItem = (typeof initialSocialFeed)[0];

function PostCard({ post }: { post: SocialFeedItem }) {
  const author = users.find(u => u.id === post.userId);
  return (
    <Card>
      <CardHeader className="pb-2">
        <div className="flex items-center gap-3">
          <Avatar>
            <AvatarImage src={author?.avatarUrl} alt={author?.name} />
            <AvatarFallback>{author?.name.charAt(0)}</AvatarFallback>
          </Avatar>
          <div className="grid gap-0.5">
            <Link href={`/feed/${author?.id}`} className="font-semibold hover:underline">
              {author?.name}
            </Link>
            <div className="text-xs text-muted-foreground">{post.timestamp}</div>
          </div>
          <Button variant="ghost" size="icon" className="ml-auto h-8 w-8">
            <MoreHorizontal className="h-4 w-4" />
          </Button>
        </div>
      </CardHeader>
      <CardContent className='space-y-4'>
        <p className="text-sm">
          {post.content}
        </p>
        {post.imageUrl && (
            <div className="rounded-lg overflow-hidden border">
                 <Image src={post.imageUrl} alt="Post image" width={600} height={400} className="object-cover w-full aspect-video" />
            </div>
        )}
      </CardContent>
      <CardFooter className="border-t pt-4 flex justify-between">
            <Button variant="ghost" size="sm" className='gap-2'><ThumbsUp className='h-4 w-4' /> Like</Button>
            <Button variant="ghost" size="sm" className='gap-2'><MessageCircle className='h-4 w-4' /> Comment</Button>
            <Button variant="ghost" size="sm" className='gap-2'><Share className='h-4 w-4' /> Share</Button>
      </CardFooter>
    </Card>
  );
}

function CreatePostCard({ onNewPost }: { onNewPost: (post: SocialFeedItem) => void }) {
    const { toast } = useToast();
    const currentUser = users[0];
    const [postContent, setPostContent] = useState('');
    const [attachedFile, setAttachedFile] = useState<File | null>(null);

    const imageInputRef = useRef<HTMLInputElement>(null);
    const videoInputRef = useRef<HTMLInputElement>(null);

    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        if (file) {
            setAttachedFile(file);
        }
    };
    
    const handlePost = () => {
        if (!postContent.trim()) {
            toast({
                variant: 'destructive',
                title: 'Cannot create empty post',
                description: 'Please write something before posting.',
            });
            return;
        }

        const newPost: SocialFeedItem = {
            id: `post-${Date.now()}`,
            userId: currentUser.id,
            timestamp: 'Just now',
            content: postContent,
            imageUrl: attachedFile ? URL.createObjectURL(attachedFile) : undefined,
            likes: 0,
            comments: 0,
        };

        onNewPost(newPost);
        setPostContent('');
        setAttachedFile(null);
        toast({
            title: 'Post Created',
            description: 'Your thoughts have been shared on the quantum feed.',
        });
    };

    return (
        <Card>
            <CardHeader className='pb-4'>
                 <div className="flex items-start gap-3">
                    <Avatar>
                        <AvatarImage src={currentUser.avatarUrl} alt={currentUser.name} />
                        <AvatarFallback>{currentUser.name.charAt(0)}</AvatarFallback>
                    </Avatar>
                    <div className='w-full'>
                      <Textarea 
                        placeholder="What's on your mind, quantum traveler?" 
                        className='min-h-0'
                        value={postContent}
                        onChange={(e) => setPostContent(e.target.value)}
                        rows={3}
                      />
                      {attachedFile && (
                          <div className='mt-2 text-xs text-muted-foreground flex items-center justify-between bg-secondary p-2 rounded-md'>
                            <span>{attachedFile.type.startsWith('image') ? 'Image' : 'Video'}: {attachedFile.name}</span>
                            <Button variant="ghost" size="icon" className="h-5 w-5" onClick={() => setAttachedFile(null)}>
                                <X className="h-4 w-4"/>
                            </Button>
                          </div>
                      )}
                    </div>
                 </div>
            </CardHeader>
            <CardFooter className='flex justify-between'>
                <div className='flex gap-1'>
                    <input type="file" accept="image/*" ref={imageInputRef} onChange={handleFileChange} style={{ display: 'none' }} />
                    <input type="file" accept="video/*" ref={videoInputRef} onChange={handleFileChange} style={{ display: 'none' }} />
                    <Button variant="ghost" size="icon" aria-label="Add Image" onClick={() => imageInputRef.current?.click()}><ImageIcon className="h-5 w-5 text-muted-foreground" /></Button>
                    <Button variant="ghost" size="icon" aria-label="Add Video" onClick={() => videoInputRef.current?.click()}><VideoIcon className="h-5 w-5 text-muted-foreground" /></Button>
                </div>
                <Button onClick={handlePost}>
                    <Send className='mr-2 h-4 w-4'/> Post
                </Button>
            </CardFooter>
        </Card>
    )
}

export default function FeedPage() {
  const [socialFeed, setSocialFeed] = useState<SocialFeedItem[]>(initialSocialFeed);
  const currentUser = users[0];

  const handleNewPost = (post: SocialFeedItem) => {
    setSocialFeed(prevFeed => [post, ...prevFeed]);
  };

  return (
    <div className="flex flex-col gap-8">
       <div className="flex justify-between items-start">
        <div>
          <h1 className="font-headline text-4xl font-bold tracking-tighter">
            Quantum Social Feed
          </h1>
          <p className="text-muted-foreground max-w-2xl mt-2">
            Share your thoughts, discoveries, and encrypted memes with the community. All data is secured by the quantum blockchain.
          </p>
        </div>
        <Button asChild>
            <Link href={`/feed/${currentUser.id}`}>
                <UserIcon className="mr-2 h-4 w-4" />
                My Feed
            </Link>
        </Button>
      </div>

      <div className='max-w-2xl mx-auto w-full space-y-6'>
        <CreatePostCard onNewPost={handleNewPost} />
        {socialFeed.map(post => (
          <PostCard key={post.id} post={post} />
        ))}
      </div>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/ai-video-generator/page.tsx
======================================================================

'use client';

import { generateVideo } from '@/ai/flows/generate-video-flow';
import React, { useEffect, useState } from 'react';

type HistoryItem = {
  videoUrl: string;
  prompt: string;
  seedImage: string | null;
  timestamp: number;
};

export default function AIVideoGeneratorPage() {
  const [prompt, setPrompt] = useState('');
  const [seedImage, setSeedImage] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [output, setOutput] = useState<React.ReactNode>(null);
  const [history, setHistory] = useState<HistoryItem[]>([]);

  useEffect(() => {
    // Load saved prompt and seed image from localStorage
    const savedPrompt = localStorage.getItem("aiVideoPrompt");
    if (savedPrompt) setPrompt(savedPrompt);

    const savedSeed = localStorage.getItem("aiVideoSeed");
    if (savedSeed) setSeedImage(savedSeed);

    // Load history
    const savedHistory = JSON.parse(localStorage.getItem("aiVideoHistory") || "[]");
    setHistory(savedHistory);
  }, []);

  const handlePromptClick = (e: React.MouseEvent<HTMLLIElement>) => {
    const newPrompt = e.currentTarget.textContent || '';
    setPrompt(newPrompt);
    localStorage.setItem("aiVideoPrompt", newPrompt);
  };
  
  const handlePromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
      setPrompt(e.target.value);
      localStorage.setItem("aiVideoPrompt", e.target.value);
  }

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) {
      setSeedImage(null);
      localStorage.removeItem("aiVideoSeed");
      return;
    }
    const reader = new FileReader();
    reader.onload = () => {
      const dataUrl = reader.result as string;
      setSeedImage(dataUrl);
      localStorage.setItem("aiVideoSeed", dataUrl);
    };
    reader.readAsDataURL(file);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!prompt.trim()) {
      setOutput(<p style={{ color: 'var(--error-color)' }}>Prompt cannot be empty.</p>);
      return;
    }
    setIsLoading(true);
    setOutput(<div className="spinner" role="status" aria-label="Loading"></div>);

    try {
      const result = await generateVideo({ prompt, seedImage: seedImage || undefined });

      setOutput(
        <>
          <video controls autoPlay loop tabIndex={0} aria-label="Generated video">
            <source src={result.videoUrl} type="video/mp4" />
            Your browser does not support the video tag.
          </video>
          <a href={result.videoUrl} download="generated_video.mp4" style={{ display: 'block', marginTop: '1rem', color: 'var(--accent-color)' }}>
            Download Video
          </a>
        </>
      );
      
      const newHistoryItem: HistoryItem = { videoUrl: result.videoUrl, prompt, seedImage, timestamp: Date.now() };
      const updatedHistory = [newHistoryItem, ...history].slice(0, 10);
      setHistory(updatedHistory);
      localStorage.setItem("aiVideoHistory", JSON.stringify(updatedHistory));

    } catch (err: any) {
      setOutput(<p style={{ color: 'var(--error-color)' }}>Error: {err.message || "Unknown error"}</p>);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>
      <style jsx global>{`
        :root {
          --bg-color: #121212cc;
          --card-bg: rgba(30, 30, 30, 0.6);
          --glass-bg: rgba(255, 255, 255, 0.1);
          --accent-color: #00ffdd;
          --accent-color-dark: #00b3b0;
          --text-color: #e0e0e0;
          --error-color: #ff4c4c;
          --success-color: #4caf50;
          --font-primary: 'Roboto', sans-serif;
          --font-accent: 'Orbitron', monospace;
        }
        main#ai-video-generator h1 {
          font-family: var(--font-accent);
          font-weight: 700;
          font-size: 2.8rem;
          margin-bottom: 1rem;
          color: var(--accent-color);
          text-align: center;
          user-select: none;
        }
        main#ai-video-generator form {
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }
        main#ai-video-generator label {
          font-weight: 600;
          font-size: 1.1rem;
        }
        main#ai-video-generator textarea {
          background: #222;
          border: none;
          border-radius: 10px;
          padding: 1rem;
          font-size: 1.1rem;
          color: var(--text-color);
          font-family: var(--font-primary);
          resize: vertical;
          min-height: 100px;
          transition: border-color 0.3s ease;
        }
        main#ai-video-generator textarea:focus {
          outline: none;
          border: 2px solid var(--accent-color);
          box-shadow: 0 0 10px var(--accent-color);
          background: #1a1a2a;
        }
        main#ai-video-generator input[type="file"] {
          color: var(--text-color);
          font-family: var(--font-primary);
        }
        main#ai-video-generator button {
          background: var(--accent-color);
          border: none;
          border-radius: 12px;
          padding: 1rem;
          font-size: 1.2rem;
          font-weight: 700;
          color: #000;
          cursor: pointer;
          transition: background-color 0.3s ease, transform 0.2s ease;
          user-select: none;
        }
        main#ai-video-generator button:disabled {
          background: var(--accent-color-dark);
          cursor: not-allowed;
        }
        main#ai-video-generator button:hover:not(:disabled),
        main#ai-video-generator button:focus:not(:disabled) {
          background: #00d9d6;
          transform: scale(1.05);
          outline: none;
        }
        #seedPreview {
          max-width: 200px;
          max-height: 200px;
          border-radius: 12px;
          object-fit: contain;
          border: 2px solid var(--accent-color);
          margin: 0.5rem 0 1rem;
        }
        #output { margin-top: 2rem; text-align: center; }
        #output video { max-width: 100%; border-radius: 12px; margin-top: 1rem; outline: none; }
        .spinner {
          border: 6px solid #f3f3f3;
          border-top: 6px solid var(--accent-color);
          border-radius: 50%;
          width: 50px;
          height: 50px;
          margin: 2rem auto;
          animation: spin 1s linear infinite;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        #promptHelper {
          background: var(--glass-bg);
          border-radius: 12px;
          padding: 1rem;
          margin-bottom: 1rem;
          box-shadow: 0 0 15px rgba(0,255,255,0.2);
          user-select: none;
        }
        #promptHelper h2 {
          font-family: var(--font-accent);
          font-size: 1.3rem;
          margin-bottom: 0.5rem;
          color: var(--accent-color);
        }
        #promptHelper ul {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-wrap: wrap;
          gap: 0.75rem;
        }
        #promptHelper li {
          background: var(--accent-color);
          color: #000;
          padding: 0.5rem 1rem;
          border-radius: 20px;
          cursor: pointer;
          font-weight: 600;
          font-size: 0.9rem;
          transition: background-color 0.3s ease;
        }
        #promptHelper li:hover, #promptHelper li:focus { background: #00b3b0; outline: none; }
        #history { margin-top: 3rem; }
        #history h2 {
          font-family: var(--font-accent);
          font-size: 1.8rem;
          margin-bottom: 1rem;
          color: var(--accent-color);
          user-select: none;
        }
        .history-item {
          background: #222;
          border-radius: 12px;
          padding: 1rem;
          margin-bottom: 1rem;
          display: flex;
          align-items: center;
          gap: 1rem;
          box-shadow: 0 0 10px rgba(0,255,255,0.15);
        }
        .history-item video { width: 160px; height: 90px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
        .history-details { flex: 1; color: var(--text-color); }
        .history-details p { margin: 0.25rem 0; font-size: 0.95rem; }
        .history-actions a { color: var(--accent-color); font-weight: 600; text-decoration: none; margin-left: 1rem; user-select: none; }
        .history-actions a:hover, .history-actions a:focus { color: #00b3b0; outline: none; }
        @media (max-width: 700px) {
          .history-item { flex-direction: column; align-items: flex-start; }
          .history-item video { width: 100%; height: auto; }
          .history-actions { margin-top: 0.5rem; }
        }
      `}</style>
      <main id="ai-video-generator">
        <h1>AI Video Generator</h1>
        <section id="promptHelper" aria-label="AI prompt helper">
          <h2>Try these example prompts</h2>
          <ul>
            <li tabIndex={0} role="button" onClick={handlePromptClick}>A futuristic city at sunset</li>
            <li tabIndex={0} role="button" onClick={handlePromptClick}>Abstract neon shapes dancing</li>
            <li tabIndex={0} role="button" onClick={handlePromptClick}>Space battle with glowing ships</li>
            <li tabIndex={0} role="button" onClick={handlePromptClick}>Underwater coral reef with fish</li>
            <li tabIndex={0} role="button" onClick={handlePromptClick}>Cyberpunk street at night</li>
          </ul>
        </section>
        <form onSubmit={handleSubmit} aria-label="AI video generation form">
          <label htmlFor="prompt">Prompt:</label>
          <textarea id="prompt" name="prompt" rows={4} required placeholder="Describe your video..." value={prompt} onChange={handlePromptChange}></textarea>

          <label htmlFor="seedImage">Seed Image (optional):</label>
          <input type="file" id="seedImage" name="seedImage" accept="image/*" onChange={handleFileChange} aria-describedby="seedPreviewDesc" />
          {seedImage && <img id="seedPreview" src={seedImage} alt="Seed image preview" style={{display: 'block'}}/>}
          <button type="submit" disabled={isLoading}>{isLoading ? "Generating..." : "Generate Video"}</button>
        </form>
        <div id="output" aria-live="polite" aria-atomic="true">
          {isLoading && output}
          {!isLoading && output}
        </div>
        <section id="history" aria-label="Previously generated videos">
          <h2>Your Generation History</h2>
          <div id="historyList" aria-live="polite" aria-atomic="true">
            {history.length === 0 ? (
                <p style={{color:'#888'}}>No previous videos generated.</p>
            ) : (
                history.map((item, idx) => (
                    <article key={item.timestamp} className="history-item" tabIndex={0} aria-label={`Generated video ${idx + 1}`}>
                        <video controls preload="metadata" src={item.videoUrl} aria-describedby={`desc${idx}`}></video>
                        <div className="history-details">
                        <p id={`desc${idx}`}><strong>Prompt:</strong> {item.prompt}</p>
                        {item.seedImage && <p><strong>Seed Image:</strong> <img src={item.seedImage} alt="Seed image preview" style={{maxWidth:'100px', borderRadius:'8px', marginTop:'0.5rem'}}/></p>}
                        <p><strong>Generated on:</strong> {new Date(item.timestamp).toLocaleString()}</p>
                        </div>
                        <div className="history-actions">
                        <a href={item.videoUrl} download={`generated_video_${idx + 1}.mp4`} aria-label={`Download video ${idx + 1}`}>Download</a>
                        </div>
                    </article>
                ))
            )}
          </div>
        </section>
      </main>
    </>
  );
}


======================================================================
File: /src/app/gaming-hub/alien-character/page.tsx
======================================================================

'use client';

import React, { useEffect, useRef } from 'react';

export default function AlienCharacterPage() {
  const alienContainerRef = useRef<HTMLDivElement>(null);
  const faceRef = useRef<HTMLDivElement>(null);
  const eyeLeftRef = useRef<HTMLDivElement>(null);
  const eyeRightRef = useRef<HTMLDivElement>(null);
  const thirdEyeRef = useRef<HTMLDivElement>(null);
  const pupilLeftRef = useRef<HTMLDivElement>(null);
  const pupilRightRef = useRef<HTMLDivElement>(null);
  const thirdPupilRef = useRef<HTMLDivElement>(null);
  const mouthRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const alienContainer = alienContainerRef.current;
    const face = faceRef.current;
    const eyeLeft = eyeLeftRef.current;
    const eyeRight = eyeRightRef.current;
    const thirdEye = thirdEyeRef.current;
    const pupilLeft = pupilLeftRef.current;
    const pupilRight = pupilRightRef.current;
    const thirdPupil = thirdPupilRef.current;
    const mouth = mouthRef.current;

    if (!alienContainer || !face || !eyeLeft || !eyeRight || !thirdEye || !pupilLeft || !pupilRight || !thirdPupil || !mouth) return;

    const maxPupilOffset = 15;
    const maxThirdPupilOffset = 8;
    const maxRotateX = 20;
    const maxRotateY = 35;

    const mouthClosed = { height: 12, width: 80, shadow: 0.6 };
    const mouthOpen = { height: 35, width: 120, shadow: 1.0 };

    let blinkTimeout: NodeJS.Timeout;
    let lastBlinkTime = 0;
    let lastThirdEyeBlinkTime = 0;

    function blinkMainEyes() {
      const now = Date.now();
      if (now - lastBlinkTime < 300) return;
      lastBlinkTime = now;
      
      eyeLeft?.classList.add('blinking');
      eyeRight?.classList.add('blinking');
      setTimeout(() => {
        eyeLeft?.classList.remove('blinking');
        eyeRight?.classList.remove('blinking');
      }, 200);
    }

    function blinkThirdEye() {
      const now = Date.now();
      if (now - lastThirdEyeBlinkTime < 300) return;
      lastThirdEyeBlinkTime = now;
      
      thirdEye?.classList.add('blinking');
      setTimeout(() => {
        thirdEye?.classList.remove('blinking');
      }, 200);
    }

    function scheduleBlink() {
      const delay = 3000 + Math.random() * 4000;
      blinkTimeout = setTimeout(() => {
        if (Math.random() < 0.3) {
          blinkThirdEye();
        } else {
          blinkMainEyes();
        }
        scheduleBlink();
      }, delay);
    }
    scheduleBlink();

    let gamepadIndex: number | null = null;
    let lastAPressed = false;
    let lastBPressed = false;

    const handleGamepadConnected = (e: GamepadEvent) => {
      console.log("Gamepad connected:", e.gamepad);
      gamepadIndex = e.gamepad.index;
    };

    const handleGamepadDisconnected = (e: GamepadEvent) => {
      console.log("Gamepad disconnected");
      gamepadIndex = null;
    };

    window.addEventListener("gamepadconnected", handleGamepadConnected);
    window.addEventListener("gamepaddisconnected", handleGamepadDisconnected);

    let animationFrameId: number;
    function updateFromGamepad() {
      if (gamepadIndex !== null) {
        const gp = navigator.getGamepads()[gamepadIndex];
        if (gp) {
          const leftX = gp.axes[0] || 0;
          const leftY = gp.axes[1] || 0;
          const rotateY = leftX * maxRotateY;
          const rotateX = leftY * maxRotateX;
          if (alienContainer) alienContainer.style.transform = `rotateX(${-rotateX}deg) rotateY(${rotateY}deg)`;

          const rightX = gp.axes[2] || 0;
          const rightY = gp.axes[3] || 0;
          const pupilOffsetX = rightX * maxPupilOffset;
          const pupilOffsetY = rightY * maxPupilOffset;
          const thirdOffsetX = rightX * maxThirdPupilOffset;
          const thirdOffsetY = rightY * maxThirdPupilOffset;
          if (pupilLeft) pupilLeft.style.transform = `translate(${pupilOffsetX}px, ${pupilOffsetY}px)`;
          if (pupilRight) pupilRight.style.transform = `translate(${pupilOffsetX}px, ${pupilOffsetY}px)`;
          if (thirdPupil) thirdPupil.style.transform = `translate(${thirdOffsetX}px, ${thirdOffsetY}px)`;

          const rt = gp.buttons[7]?.value || 0;
          const mouthHeight = mouthClosed.height + rt * (mouthOpen.height - mouthClosed.height);
          const mouthWidth = mouthClosed.width + rt * (mouthOpen.width - mouthClosed.width);
          const shadowIntensity = mouthClosed.shadow + rt * (mouthOpen.shadow - mouthClosed.shadow);
          
          if (mouth) {
            mouth.style.height = mouthHeight + 'px';
            mouth.style.width = mouthWidth + 'px';
            mouth.style.marginLeft = (-mouthWidth/2) + 'px';
            mouth.style.boxShadow = `0 0 20px 8px rgba(0,255,100,${shadowIntensity}), inset 0 0 10px 3px rgba(0,200,80,0.8)`;
          }

          const aPressed = gp.buttons[0]?.pressed || false;
          const bPressed = gp.buttons[1]?.pressed || false;
          
          if (aPressed && !lastAPressed) blinkMainEyes();
          if (bPressed && !lastBPressed) blinkThirdEye();
          
          lastAPressed = aPressed;
          lastBPressed = bPressed;
        }
      }
      animationFrameId = requestAnimationFrame(updateFromGamepad);
    }
    
    updateFromGamepad();

    const handleKeyDown = (e: KeyboardEvent) => {
        switch(e.code) {
          case 'Space': blinkMainEyes(); break;
          case 'Enter': blinkThirdEye(); break;
        }
    };
    document.addEventListener('keydown', handleKeyDown);

    return () => {
        clearTimeout(blinkTimeout);
        window.removeEventListener("gamepadconnected", handleGamepadConnected);
        window.removeEventListener("gamepaddisconnected", handleGamepadDisconnected);
        document.removeEventListener('keydown', handleKeyDown);
        cancelAnimationFrame(animationFrameId);
    }

  }, []);

  return (
    <div className="w-full h-[calc(100vh-10rem)] bg-black flex items-center justify-center overflow-hidden">
      <style jsx global>{`
        @keyframes pulseFace { 0%, 100% { transform: scale(1); box-shadow: 0 0 40px 15px rgba(0,255,150,0.6), inset 0 0 50px 20px rgba(100,255,200,0.4); } 50% { transform: scale(1.02); box-shadow: 0 0 50px 20px rgba(0,255,180,0.8), inset 0 0 60px 25px rgba(150,255,220,0.6); } }
        @keyframes pulseBody { 0%, 100% { box-shadow: 0 0 30px 10px rgba(0,200,255,0.4), inset 0 0 40px 15px rgba(50,150,255,0.3); } 50% { box-shadow: 0 0 40px 15px rgba(0,220,255,0.6), inset 0 0 50px 20px rgba(100,180,255,0.5); } }
        @keyframes pulseNeck { 0%, 100% { box-shadow: 0 0 25px 8px rgba(0,255,150,0.5), inset 0 0 35px 12px rgba(100,255,200,0.3); } 50% { box-shadow: 0 0 35px 12px rgba(0,255,180,0.7), inset 0 0 45px 18px rgba(150,255,220,0.5); } }
        @keyframes hairFlow { 0%, 100% { transform: translateX(0) rotate(0deg); filter: drop-shadow(0 0 8px rgba(255,0,150,0.8)); } 33% { transform: translateX(2px) rotate(1deg); filter: drop-shadow(0 0 12px rgba(255,50,200,1)); } 66% { transform: translateX(-2px) rotate(-1deg); filter: drop-shadow(0 0 10px rgba(255,100,180,0.9)); } }
        @keyframes energyFlow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(0,255,200,0.9)); opacity: 0.8; } 50% { filter: drop-shadow(0 0 15px rgba(0,255,255,1)); opacity: 1; } }
        @keyframes blink { 0% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.1); opacity: 0.3; } 100% { transform: scaleY(1); opacity: 1; } }
        .blinking { animation: blink 0.2s ease forwards; }
      `}</style>
      <div className="controls absolute top-20 left-20 text-[#00ffaa] font-code text-sm shadow-[0_0_10px_#00ffaa] z-50 bg-black/50 p-4 rounded-lg">
        <div>🎮 XBOX CONTROLLER:</div>
        <div>Left Stick: Rotate Head</div>
        <div>Right Stick: Move Eyes</div>
        <div>Right Trigger: Open Mouth</div>
        <div>A Button: Blink</div>
        <div>B Button: Third Eye Blink</div>
      </div>
      <div className="alien-container relative" ref={alienContainerRef} style={{ transformStyle: 'preserve-3d', transition: 'transform 0.1s ease-out' }}>
        <div className="hair absolute bg-gradient-to-r from-[rgba(255,0,150,0.8)] to-[rgba(200,0,255,0.6)] rounded-[20px] shadow-[0_0_8px_rgba(255,0,150,0.8)]" style={{ top: '-40px', left: '30px', width: '15px', height: '80px', transform: 'rotate(-15deg)', animation: 'hairFlow 6s ease-in-out infinite', animationDelay: '0s' }}></div>
        <div className="hair absolute bg-gradient-to-r from-[rgba(255,0,150,0.8)] to-[rgba(200,0,255,0.6)] rounded-[20px] shadow-[0_0_8px_rgba(255,0,150,0.8)]" style={{ top: '-50px', left: '60px', width: '20px', height: '100px', transform: 'rotate(-5deg)', animation: 'hairFlow 6s ease-in-out infinite', animationDelay: '1s' }}></div>
        <div className="hair absolute bg-gradient-to-r from-[rgba(255,0,150,0.8)] to-[rgba(200,0,255,0.6)] rounded-[20px] shadow-[0_0_8px_rgba(255,0,150,0.8)]" style={{ top: '-45px', left: '90px', width: '18px', height: '90px', transform: 'rotate(5deg)', animation: 'hairFlow 6s ease-in-out infinite', animationDelay: '2s' }}></div>
        <div className="hair absolute bg-gradient-to-r from-[rgba(255,0,150,0.8)] to-[rgba(200,0,255,0.6)] rounded-[20px] shadow-[0_0_8px_rgba(255,0,150,0.8)]" style={{ top: '-35px', left: '120px', width: '12px', height: '70px', transform: 'rotate(15deg)', animation: 'hairFlow 6s ease-in-out infinite', animationDelay: '3s' }}></div>
        <div className="hair absolute bg-gradient-to-r from-[rgba(255,0,150,0.8)] to-[rgba(200,0,255,0.6)] rounded-[20px] shadow-[0_0_8px_rgba(255,0,150,0.8)]" style={{ top: '-40px', left: '150px', width: '16px', height: '85px', transform: 'rotate(10deg)', animation: 'hairFlow 6s ease-in-out infinite', animationDelay: '1.5s' }}></div>
        <div className="face relative w-[200px] h-[280px] bg-[radial-gradient(ellipse_at_40%_30%,rgba(0,255,150,0.4),rgba(100,255,200,0.2),transparent_80%)] rounded-[100px/140px] shadow-[0_0_40px_15px_rgba(0,255,150,0.6),inset_0_0_50px_20px_rgba(100,255,200,0.4)]" ref={faceRef} style={{ animation: 'pulseFace 5s ease-in-out infinite', transformStyle: 'preserve-3d', transition: 'transform 0.1s ease-out' }}>
          <div className="energy-stripe absolute w-[3px] h-[120px] bg-gradient-to-b from-[rgba(0,255,200,0.9)] to-[rgba(0,200,255,0.6)] rounded-[2px] shadow-[0_0_8px_rgba(0,255,200,0.9)]" style={{ top: '40px', left: '20px', transform: 'rotate(8deg)', animation: 'energyFlow 4s ease-in-out infinite', animationDelay: '0s' }}></div>
          <div className="energy-stripe absolute w-[3px] h-[120px] bg-gradient-to-b from-[rgba(0,255,200,0.9)] to-[rgba(0,200,255,0.6)] rounded-[2px] shadow-[0_0_8px_rgba(0,255,200,0.9)]" style={{ top: '60px', left: '50px', transform: 'rotate(-12deg)', animation: 'energyFlow 4s ease-in-out infinite', animationDelay: '1.2s' }}></div>
          <div className="energy-stripe absolute w-[3px] h-[120px] bg-gradient-to-b from-[rgba(0,255,200,0.9)] to-[rgba(0,200,255,0.6)] rounded-[2px] shadow-[0_0_8px_rgba(0,255,200,0.9)]" style={{ top: '35px', left: '130px', transform: 'rotate(15deg)', animation: 'energyFlow 4s ease-in-out infinite', animationDelay: '2.4s' }}></div>
          <div className="energy-stripe absolute w-[3px] h-[120px] bg-gradient-to-b from-[rgba(0,255,200,0.9)] to-[rgba(0,200,255,0.6)] rounded-[2px] shadow-[0_0_8px_rgba(0,255,200,0.9)]" style={{ top: '80px', left: '160px', transform: 'rotate(-8deg)', animation: 'energyFlow 4s ease-in-out infinite', animationDelay: '0.8s' }}></div>
          <div className="third-eye absolute top-[30px] left-1/2 -ml-[20px] w-[40px] h-[45px] bg-[radial-gradient(circle_at_center,#ffffff,#ff00aa_70%,#660044_90%)] rounded-[50%_50%_60%_60%] shadow-[0_0_20px_8px_rgba(255,0,170,0.7),inset_0_0_10px_3px_rgba(255,255,255,0.4)] overflow-hidden" ref={thirdEyeRef}>
            <div className="third-pupil absolute top-[12px] left-[15px] w-[10px] h-[20px] bg-gradient-to-b from-[#330000] to-[#660033] rounded-[50%] shadow-[0_0_8px_2px_rgba(100,0,50,0.8)]" ref={thirdPupilRef} style={{ transition: 'transform 0.1s ease-out' }}></div>
          </div>
          <div className="eye absolute top-[70px] w-[70px] h-[80px] bg-[radial-gradient(ellipse_at_center,#ffffff,#00ffaa_60%,#004455_90%)] rounded-[60%_60%_50%_50%] shadow-[0_0_25px_10px_rgba(0,255,170,0.8),inset_0_0_15px_5px_rgba(255,255,255,0.3)] overflow-hidden left-[20px]" ref={eyeLeftRef} style={{ transformOrigin: 'center center', transition: 'transform 0.1s ease-out' }}>
            <div className="pupil absolute top-[20px] left-[25px] w-[20px] h-[40px] bg-gradient-to-b from-[#000033] to-[#001166] rounded-[50%_50%_50%_50%] shadow-[0_0_10px_2px_rgba(0,0,100,0.8),inset_0_0_5px_1px_rgba(0,150,255,0.3)]" ref={pupilLeftRef} style={{ transition: 'transform 0.1s ease-out' }}></div>
          </div>
          <div className="eye absolute top-[70px] w-[70px] h-[80px] bg-[radial-gradient(ellipse_at_center,#ffffff,#00ffaa_60%,#004455_90%)] rounded-[60%_60%_50%_50%] shadow-[0_0_25px_10px_rgba(0,255,170,0.8),inset_0_0_15px_5px_rgba(255,255,255,0.3)] overflow-hidden right-[20px]" ref={eyeRightRef} style={{ transformOrigin: 'center center', transition: 'transform 0.1s ease-out' }}>
            <div className="pupil absolute top-[20px] left-[25px] w-[20px] h-[40px] bg-gradient-to-b from-[#000033] to-[#001166] rounded-[50%_50%_50%_50%] shadow-[0_0_10px_2px_rgba(0,0,100,0.8),inset_0_0_5px_1px_rgba(0,150,255,0.3)]" ref={pupilRightRef} style={{ transition: 'transform 0.1s ease-out' }}></div>
          </div>
          <div className="mouth absolute bottom-[40px] left-1/2 -ml-[40px] h-[12px] w-[80px] bg-gradient-to-r from-transparent via-[rgba(0,255,100,0.8)] to-transparent border-2 border-[#00ff66] rounded-[40px] shadow-[0_0_20px_8px_rgba(0,255,100,0.6),inset_0_0_10px_3px_rgba(0,200,80,0.8)] overflow-hidden" ref={mouthRef} style={{ transition: 'all 0.2s ease' }}></div>
        </div>
        <div className="neck absolute top-[270px] left-1/2 -ml-[70px] w-[140px] h-[120px] bg-[radial-gradient(ellipse_at_center,rgba(0,255,150,0.3),rgba(50,200,255,0.2),transparent_90%)] rounded-[70px/120px] shadow-[0_0_25px_8px_rgba(0,255,150,0.5),inset_0_0_35px_12px_rgba(100,255,200,0.3)] -z-10" style={{ animation: 'pulseNeck 5s ease-in-out infinite' }}></div>
        <div className="shoulder absolute top-[360px] w-[120px] h-[100px] bg-[radial-gradient(ellipse_at_center,rgba(0,200,255,0.4),rgba(50,150,255,0.2),transparent_85%)] rounded-[60px/80px] shadow-[0_0_30px_10px_rgba(0,200,255,0.4),inset_0_0_40px_15px_rgba(50,150,255,0.3)] left-[-80px]" style={{ animation: 'pulseBody 5s ease-in-out infinite' }}>
            <div className="hand absolute bottom-[-40px] left-1/2 -ml-[25px] w-[50px] h-[50px] bg-[radial-gradient(circle_at_center,rgba(0,255,150,0.5),rgba(100,255,200,0.3),transparent_80%)] rounded-full shadow-[0_0_20px_8px_rgba(0,255,150,0.5),inset_0_0_25px_10px_rgba(100,255,200,0.3)]" style={{ animation: 'pulseFace 5s ease-in-out infinite' }}></div>
        </div>
         <div className="shoulder absolute top-[360px] w-[120px] h-[100px] bg-[radial-gradient(ellipse_at_center,rgba(0,200,255,0.4),rgba(50,150,255,0.2),transparent_85%)] rounded-[60px/80px] shadow-[0_0_30px_10px_rgba(0,200,255,0.4),inset_0_0_40px_15px_rgba(50,150,255,0.3)] right-[-80px]" style={{ animation: 'pulseBody 5s ease-in-out infinite' }}>
            <div className="hand absolute bottom-[-40px] left-1/2 -ml-[25px] w-[50px] h-[50px] bg-[radial-gradient(circle_at_center,rgba(0,255,150,0.5),rgba(100,255,200,0.3),transparent_80%)] rounded-full shadow-[0_0_20px_8px_rgba(0,255,150,0.5),inset_0_0_25px_10px_rgba(100,255,200,0.3)]" style={{ animation: 'pulseFace 5s ease-in-out infinite' }}></div>
        </div>
        <div className="torso absolute top-[380px] left-1/2 -ml-[90px] w-[180px] h-[250px] bg-[radial-gradient(ellipse_at_center,rgba(0,200,255,0.3),rgba(50,150,255,0.2),transparent_90%)] rounded-[90px/125px] shadow-[0_0_35px_12px_rgba(0,200,255,0.4),inset_0_0_45px_18px_rgba(50,150,255,0.3)] -z-20" style={{ animation: 'pulseBody 5s ease-in-out infinite' }}></div>
        <div className="arm absolute top-[420px] w-[60px] h-[200px] bg-[radial-gradient(ellipse_at_center,rgba(0,180,255,0.4),rgba(30,130,255,0.2),transparent_90%)] rounded-[30px/100px] shadow-[0_0_25px_8px_rgba(0,180,255,0.4),inset_0_0_35px_12px_rgba(30,130,255,0.3)] left-[-110px] -rotate-10" style={{ animation: 'pulseBody 5s ease-in-out infinite' }}>
            <div className="hand absolute bottom-[-40px] left-1/2 -ml-[25px] w-[50px] h-[50px] bg-[radial-gradient(circle_at_center,rgba(0,255,150,0.5),rgba(100,255,200,0.3),transparent_80%)] rounded-full shadow-[0_0_20px_8px_rgba(0,255,150,0.5),inset_0_0_25px_10px_rgba(100,255,200,0.3)]" style={{ animation: 'pulseFace 5s ease-in-out infinite' }}></div>
        </div>
        <div className="arm absolute top-[420px] w-[60px] h-[200px] bg-[radial-gradient(ellipse_at_center,rgba(0,180,255,0.4),rgba(30,130,255,0.2),transparent_90%)] rounded-[30px/100px] shadow-[0_0_25px_8px_rgba(0,180,255,0.4),inset_0_0_35px_12px_rgba(30,130,255,0.3)] right-[-110px] rotate-10" style={{ animation: 'pulseBody 5s ease-in-out infinite' }}>
             <div className="hand absolute bottom-[-40px] left-1/2 -ml-[25px] w-[50px] h-[50px] bg-[radial-gradient(circle_at_center,rgba(0,255,150,0.5),rgba(100,255,200,0.3),transparent_80%)] rounded-full shadow-[0_0_20px_8px_rgba(0,255,150,0.5),inset_0_0_25px_10px_rgba(100,255,200,0.3)]" style={{ animation: 'pulseFace 5s ease-in-out infinite' }}></div>
        </div>
      </div>
    </div>
  );
}



======================================================================
File: /src/app/gaming-hub/bioluminescent-character/page.tsx
======================================================================

'use client';

import React, { useEffect, useRef } from 'react';

export default function BioluminescentCharacterPage() {
  const leftPupilRef = useRef<HTMLDivElement>(null);
  const rightPupilRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleMouseMove = (event: MouseEvent) => {
      const { clientX, clientY } = event;
      const movePupil = (pupilRef: React.RefObject<HTMLDivElement>) => {
        if (!pupilRef.current) return;
        const eyeRect = pupilRef.current.parentElement!.getBoundingClientRect();
        const eyeCenterX = eyeRect.left + eyeRect.width / 2;
        const eyeCenterY = eyeRect.top + eyeRect.height / 2;
        
        const deltaX = clientX - eyeCenterX;
        const deltaY = clientY - eyeCenterY;
        
        const angle = Math.atan2(deltaY, deltaX);
        
        const maxPupilMove = 8;
        
        const pupilX = Math.cos(angle) * maxPupilMove;
        const pupilY = Math.sin(angle) * maxPupilMove;
        
        pupilRef.current.style.transform = `translate(${pupilX}px, ${pupilY}px)`;
      };

      movePupil(leftPupilRef);
      movePupil(rightPupilRef);
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  return (
    <div className="w-full h-[calc(100vh-10rem)] bg-black flex items-center justify-center overflow-hidden">
      <style jsx global>{`
        @keyframes pulseFace { 0%, 100% { transform: scale(1); box-shadow: 0 0 30px 10px rgba(255,165,0,0.5), inset 0 0 40px 15px rgba(255,140,0,0.7); } 50% { transform: scale(1.03); box-shadow: 0 0 40px 15px rgba(255,180,0,0.7), inset 0 0 50px 20px rgba(255,160,0,0.9); } }
        @keyframes pulseNeck { 0%, 100% { box-shadow: 0 0 25px 8px rgba(255,165,0,0.4), inset 0 0 30px 10px rgba(255,140,0,0.6); } 50% { box-shadow: 0 0 35px 12px rgba(255,180,0,0.6), inset 0 0 40px 15px rgba(255,160,0,0.8); } }
        @keyframes pulseStripe { 0%, 100% { filter: drop-shadow(0 0 6px rgba(255,140,0,0.9)); opacity: 1; } 50% { filter: drop-shadow(0 0 12px rgba(255,180,0,1)); opacity: 0.7; } }
        @keyframes blink { 0%, 85%, 100% { transform: scaleY(1); opacity: 1; } 90%, 95% { transform: scaleY(0.1); opacity: 0.3; } }
        @keyframes mouthOpen { 0%, 30%, 100% { height: 8px; border-width: 3px; box-shadow: 0 0 15px 5px rgba(255,102,0,0.7); } 50%, 80% { height: 25px; border-width: 6px; box-shadow: 0 0 25px 10px rgba(255,140,0,0.9); } }
      `}</style>
       <div className="relative w-[200px] h-[300px] bg-[radial-gradient(circle_at_center,rgba(255,165,0,0.6),transparent_70%)] rounded-[100px/150px]" style={{ animation: 'pulseFace 4s ease-in-out infinite' }}>
        <div className="absolute w-[20px] h-[150px] bg-[linear-gradient(180deg,rgba(255,140,0,0.8),transparent)] rounded-[10px]" style={{ top: '30px', left: '30px', transform: 'rotate(10deg)', animation: 'pulseStripe 4s ease-in-out infinite', animationDelay: '0s' }}></div>
        <div className="absolute w-[20px] h-[150px] bg-[linear-gradient(180deg,rgba(255,140,0,0.8),transparent)] rounded-[10px]" style={{ top: '50px', left: '80px', transform: 'rotate(-10deg)', animation: 'pulseStripe 4s ease-in-out infinite', animationDelay: '1.3s' }}></div>
        <div className="absolute w-[20px] h-[150px] bg-[linear-gradient(180deg,rgba(255,140,0,0.8),transparent)] rounded-[10px]" style={{ top: '20px', left: '130px', transform: 'rotate(15deg)', animation: 'pulseStripe 4s ease-in-out infinite', animationDelay: '2.6s' }}></div>

        <div className="absolute top-[90px] left-[40px] w-[50px] h-[50px] bg-[radial-gradient(circle_at_center,#fff,#00aaff)] rounded-full" style={{ boxShadow: '0 0 20px 8px #00aaff, inset 0 0 10px 3px #ffffff', animation: 'blink 6s ease-in-out infinite', animationDelay: '0s' }}>
          <div ref={leftPupilRef} className="absolute top-[15px] left-[15px] w-[20px] h-[20px] bg-[#003366] rounded-full" style={{ boxShadow: '0 0 8px 2px #003366', transition: 'transform 0.1s ease-out' }}></div>
        </div>
        <div className="absolute top-[90px] right-[40px] w-[50px] h-[50px] bg-[radial-gradient(circle_at_center,#fff,#00aaff)] rounded-full" style={{ boxShadow: '0 0 20px 8px #00aaff, inset 0 0 10px 3px #ffffff', animation: 'blink 6s ease-in-out infinite', animationDelay: '3s' }}>
          <div ref={rightPupilRef} className="absolute top-[15px] left-[15px] w-[20px] h-[20px] bg-[#003366] rounded-full" style={{ boxShadow: '0 0 8px 2px #003366', transition: 'transform 0.1s ease-out' }}></div>
        </div>

        <div className="absolute bottom-[50px] left-1/2 -ml-[50px] w-[100px] border-b-[6px] border-[#ff6600] rounded-b-[50px] overflow-hidden" style={{ animation: 'mouthOpen 4s ease-in-out infinite' }}></div>
        <div className="absolute top-[290px] left-1/2 -ml-[60px] w-[120px] h-[100px] bg-[radial-gradient(circle_at_center,rgba(255,140,0,0.5),transparent_80%)] rounded-[60px/100px] -z-10" style={{ animation: 'pulseNeck 4s ease-in-out infinite' }}></div>
      </div>
    </div>
  );
}



======================================================================
File: /src/app/gaming-hub/dragon-explorer/page.tsx
======================================================================

'use client';

import React, { useEffect, useRef, useState } from 'react';

const DragonExplorerPage: React.FC = () => {
    const worldRef = useRef<HTMLDivElement>(null);
    const dragonRef = useRef<HTMLDivElement>(null);
    const terrainRef = useRef<HTMLDivElement>(null);
    const mountainsRef = useRef<HTMLDivElement>(null);
    const dragonMouthRef = useRef<HTMLDivElement>(null);
    const dragonPupilRef = useRef<HTMLDivElement>(null);
    const dragonWingRef = useRef<HTMLDivElement>(null);
    const dragonTailRef = useRef<HTMLDivElement>(null);

    const [status, setStatus] = useState('Exploring');
    const [colorName, setColorName] = useState('RED');
    const [position, setPosition] = useState({ x: 0, y: 0 });
    const [flyingStatus, setFlyingStatus] = useState('No');

    useEffect(() => {
        const game = {
            position: { x: 0, y: 0 },
            velocity: { x: 0, y: 0 },
            rotation: 0,
            headRotation: { x: 0, y: 0 },
            eyePosition: { x: 0, y: 0 },
            isFlying: false,
            altitude: 0,
            maxSpeed: 8,
            acceleration: 0.5,
            friction: 0.85,
            fireIntensity: 0,
            wingSpeed: 1,
            isRoaring: false,
            isTailAttacking: false,
            showSmoke: false,
            colors: ['#ff0000', '#0066ff', '#00ff66', '#ffd700', '#ff00ff', '#00ffff'],
            colorNames: ['RED', 'BLUE', 'GREEN', 'GOLD', 'MAGENTA', 'CYAN'],
            currentColorIndex: 0,
            particles: [] as any[],
            gamepadIndex: null as number | null,
            lastButtonStates: {} as any,
        };

        let animationFrameId: number;

        const createParticle = (type: 'fire' | 'smoke') => {
            if (!worldRef.current || !dragonMouthRef.current || !dragonRef.current) return;

            const particle: any = { life: 0, maxLife: 0 };
            const element = document.createElement('div');
            element.className = `particle ${type}-particle`;

            if (type === 'fire') {
                const rect = dragonMouthRef.current.getBoundingClientRect();
                particle.x = rect.right;
                particle.y = rect.top + rect.height / 2;
                particle.vx = 2 + Math.random() * 6;
                particle.vy = (Math.random() - 0.5) * 4;
                particle.life = 30 + Math.random() * 20;
                particle.size = 4 + Math.random() * 8;
            } else { // smoke
                const rect = dragonRef.current.getBoundingClientRect();
                particle.x = rect.left + 40;
                particle.y = rect.top + 15;
                particle.vx = (Math.random() - 0.5) * 2;
                particle.vy = -1 - Math.random() * 2;
                particle.life = 60;
                particle.size = 6 + Math.random() * 8;
            }
            particle.maxLife = particle.life;
            
            element.style.left = `${particle.x}px`;
            element.style.top = `${particle.y}px`;
            element.style.width = `${particle.size}px`;
            element.style.height = `${particle.size}px`;
            
            worldRef.current.appendChild(element);
            game.particles.push({ ...particle, element });
        };
        
        const gameLoop = () => {
            const { gamepadIndex } = game;
            if (gamepadIndex !== null) {
                const gamepad = navigator.getGamepads()[gamepadIndex];
                if (gamepad) {
                    const leftX = Math.abs(gamepad.axes[0]) > 0.1 ? gamepad.axes[0] : 0;
                    const leftY = Math.abs(gamepad.axes[1]) > 0.1 ? gamepad.axes[1] : 0;

                    game.velocity.x += leftX * game.acceleration;
                    game.velocity.y += leftY * game.acceleration;

                    const speed = Math.sqrt(game.velocity.x ** 2 + game.velocity.y ** 2);
                    if (speed > game.maxSpeed) {
                        game.velocity.x = (game.velocity.x / speed) * game.maxSpeed;
                        game.velocity.y = (game.velocity.y / speed) * game.maxSpeed;
                    }

                    game.headRotation = { x: (gamepad.axes[3] || 0) * 30, y: (gamepad.axes[2] || 0) * 45 };
                    game.eyePosition = { x: (gamepad.axes[2] || 0) * 8, y: (gamepad.axes[3] || 0) * 8 };
                    game.fireIntensity = gamepad.buttons[7]?.value || 0;
                    game.wingSpeed = 1 + (gamepad.buttons[6]?.value || 0) * 3;

                    const RB = gamepad.buttons[5]?.pressed || false;
                    if (RB && !game.lastButtonStates.RB) {
                        game.isFlying = true;
                        game.altitude = Math.min(game.altitude + 50, 200);
                    }
                    const LB = gamepad.buttons[4]?.pressed || false;
                    if (LB && !game.lastButtonStates.LB) {
                        game.isFlying = false;
                        game.altitude = Math.max(game.altitude - 50, 0);
                    }

                    const A = gamepad.buttons[0]?.pressed || false;
                    if (A && !game.lastButtonStates.A) {
                        game.isRoaring = true;
                        setTimeout(() => { game.isRoaring = false; }, 1000);
                    }
                    
                    const B = gamepad.buttons[1]?.pressed || false;
                    if (B && !game.lastButtonStates.B) {
                        game.isTailAttacking = true;
                        setTimeout(() => { game.isTailAttacking = false; }, 500);
                    }
                    
                    const X = gamepad.buttons[2]?.pressed || false;
                    if (X && !game.lastButtonStates.X) {
                        game.currentColorIndex = (game.currentColorIndex + 1) % game.colors.length;
                        setColorName(game.colorNames[game.currentColorIndex]);
                    }

                    const Y = gamepad.buttons[3]?.pressed || false;
                    if (Y && !game.lastButtonStates.Y) {
                        game.showSmoke = true;
                        setTimeout(() => { game.showSmoke = false; }, 2000);
                    }

                    game.lastButtonStates = { A, B, X, Y, RB, LB };
                }
            }

            game.velocity.x *= game.friction;
            game.velocity.y *= game.friction;
            game.position.x += game.velocity.x;
            game.position.y += game.velocity.y;
            game.rotation = Math.abs(game.velocity.x) > 0.5 ? (game.velocity.x > 0 ? -5 : 5) : game.rotation * 0.9;
            
            // Update DOM elements
            if (dragonRef.current) {
                const flyOffset = game.isFlying ? -game.altitude : 0;
                dragonRef.current.style.transform = `translateX(-50%) translateY(${-50 + flyOffset}px) rotateZ(${game.rotation}deg) rotateX(${game.headRotation.x}deg) rotateY(${game.headRotation.y}deg)`;
                const isMoving = Math.abs(game.velocity.x) > 0.3 || Math.abs(game.velocity.y) > 0.3;
                if(isMoving && !game.isFlying) dragonRef.current.classList.add('walking');
                else dragonRef.current.classList.remove('walking');
            }
            if (terrainRef.current) terrainRef.current.style.transform = `translateX(${-game.position.x * 0.5}px)`;
            if (mountainsRef.current) mountainsRef.current.style.transform = `translateX(${-game.position.x * 0.3}px)`;
            if (dragonPupilRef.current) dragonPupilRef.current.style.transform = `translate(${game.eyePosition.x}px, ${game.eyePosition.y}px)`;
            if (dragonWingRef.current) dragonWingRef.current.style.animationDuration = `${1.5 / game.wingSpeed}s`;
            if (dragonTailRef.current) dragonTailRef.current.style.transform = game.isTailAttacking ? 'rotate(30deg)' : 'rotate(-10deg)';

            if (dragonMouthRef.current) {
                if(game.isRoaring){
                    dragonMouthRef.current.style.width = '60px';
                    dragonMouthRef.current.style.height = '20px';
                    dragonMouthRef.current.style.boxShadow = '0 0 30px rgba(255,100,0,1)';
                } else if (game.fireIntensity > 0.1) {
                    dragonMouthRef.current.style.width = `${40 + game.fireIntensity * 20}px`;
                    dragonMouthRef.current.style.height = `${6 + game.fireIntensity * 15}px`;
                    dragonMouthRef.current.style.boxShadow = `0 0 20px rgba(255,100,0,${0.5 + game.fireIntensity})`;
                } else {
                    dragonMouthRef.current.style.width = '40px';
                    dragonMouthRef.current.style.height = '6px';
                    dragonMouthRef.current.style.boxShadow = '0 0 20px rgba(255,100,0,0.5)';
                }
            }
            
            // Particles
            if (game.fireIntensity > 0.1) for (let i = 0; i < Math.floor(game.fireIntensity * 10); i++) createParticle('fire');
            if (game.showSmoke && Math.random() < 0.3) createParticle('smoke');
            
            game.particles = game.particles.filter(p => {
                p.life--;
                if (p.life <= 0) {
                    p.element.remove();
                    return false;
                }
                p.x += p.vx;
                p.y += p.vy;
                p.size *= 0.98;
                p.element.style.left = `${p.x}px`;
                p.element.style.top = `${p.y}px`;
                p.element.style.width = `${p.size}px`;
                p.element.style.height = `${p.size}px`;
                p.element.style.opacity = p.life / p.maxLife;
                return true;
            });
            
            // Update UI State
            if (game.isRoaring) setStatus('ROARING!');
            else if (game.isTailAttacking) setStatus('Tail Attack!');
            else if (game.showSmoke) setStatus('Puffing Smoke');
            else if (Math.abs(game.velocity.x) > 0.3 || Math.abs(game.velocity.y) > 0.3) setStatus(game.isFlying ? 'Flying' : 'Walking');
            else if (game.fireIntensity > 0.1) setStatus('Breathing Fire');
            else setStatus('Exploring');
            
            setPosition({ x: Math.round(game.position.x), y: Math.round(game.position.y) });
            setFlyingStatus(game.isFlying ? `Yes (${game.altitude}m)` : 'No');
            document.documentElement.style.setProperty('--dragon-color', game.colors[game.currentColorIndex]);
            
            animationFrameId = requestAnimationFrame(gameLoop);
        };
        
        const handleGamepadConnected = (e: GamepadEvent) => {
            game.gamepadIndex = e.gamepad.index;
        };

        const handleGamepadDisconnected = () => {
            game.gamepadIndex = null;
        };

        window.addEventListener('gamepadconnected', handleGamepadConnected);
        window.addEventListener('gamepaddisconnected', handleGamepadDisconnected);

        gameLoop();

        return () => {
            cancelAnimationFrame(animationFrameId);
            window.removeEventListener('gamepadconnected', handleGamepadConnected);
            window.removeEventListener('gamepaddisconnected', handleGamepadDisconnected);
        };
    }, []);

    return (
        <>
            <style jsx global>{`
                :root { --dragon-color: #ff0000; }
                body { margin: 0; padding: 0; background: linear-gradient(180deg, #001122 0%, #000000 100%); overflow: hidden; font-family: 'Courier New', monospace; height: 100vh; }
                .world { position: relative; width: 100vw; height: 100vh; background: radial-gradient(circle at 20% 80%, rgba(255,100,0,0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(0,100,255,0.1) 0%, transparent 50%), linear-gradient(180deg, #001122 0%, #000811 50%, #000000 100%); overflow: hidden; }
                .terrain { position: absolute; bottom: 0; left: 0; width: 400%; height: 200px; background: repeating-linear-gradient(90deg, #112233 0px, #223344 100px, #334455 200px, #112233 300px), linear-gradient(0deg, #000000 0%, #223344 50%, transparent 100%); transition: transform 0.1s linear; }
                .mountains { position: absolute; bottom: 200px; left: 0; width: 500%; height: 300px; background-color: #334455; opacity: 0.6; transition: transform 0.15s linear; clip-path: polygon(0% 100%, 10% 60%, 20% 80%, 30% 40%, 40% 70%, 50% 30%, 60% 65%, 70% 25%, 80% 75%, 90% 35%, 100% 100%); }
                .dragon-container { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); transform-style: preserve-3d; transition: transform 0.1s ease-out; z-index: 100; }
                .controls, .status { position: absolute; top: 20px; color: #00ffaa; font-size: 12px; text-shadow: 0 0 10px #00ffaa; z-index: 1000; background: rgba(0,0,0,0.7); padding: 15px; border-radius: 10px; border: 1px solid #00ffaa; }
                .controls { left: 20px; }
                .status { right: 20px; color: #ffaa00; border-color: #ffaa00; text-shadow: 0 0 10px #ffaa00; }
                @keyframes wingFlap { 0%, 100% { transform: rotate(-10deg) scale(0.9); } 50% { transform: rotate(-35deg) scale(1.1); } }
                @keyframes fireBreath { 0% { opacity: 0.8; transform: scale(1) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(5deg); } 100% { opacity: 0.6; transform: scale(0.8) rotate(-5deg); } }
                @keyframes walkCycle { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-5px) rotate(-2deg); } 50% { transform: translateY(0px) rotate(0deg); } 75% { transform: translateY(-3px) rotate(2deg); } }
                @keyframes tailSway { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(15deg); } }
                .dragon-wing { position: absolute; width: 120px; height: 200px; background: linear-gradient(45deg, transparent, var(--dragon-color) 50%, transparent); clip-path: polygon(0% 10%, 40% 0%, 80% 15%, 100% 40%, 95% 70%, 80% 85%, 40% 100%, 0% 90%); box-shadow: 0 0 50px var(--dragon-color)50; top: -60px; left: -20px; transform-origin: bottom right; animation: wingFlap 1.5s ease-in-out infinite; }
                .dragon-head { position: relative; width: 80px; height: 60px; background: radial-gradient(ellipse at 30% 40%, var(--dragon-color) 70%, transparent); clip-path: polygon(0% 40%, 15% 20%, 45% 15%, 70% 25%, 85% 40%, 90% 50%, 85% 60%, 70% 75%, 45% 85%, 15% 80%, 0% 60%); box-shadow: 0 0 60px 20px var(--dragon-color)40; }
                .dragon-snout { position: absolute; top: 8px; right: -20px; width: 32px; height: 20px; background: linear-gradient(90deg, var(--dragon-color) 70%, transparent); clip-path: polygon(0% 30%, 80% 20%, 100% 40%, 100% 60%, 80% 80%, 0% 70%); }
                .dragon-eye { position: absolute; top: 15px; right: 20px; width: 24px; height: 20px; background: radial-gradient(circle, #ffffff, #ffaa00 60%, #ff4400 90%); border-radius: 50%; box-shadow: 0 0 20px var(--dragon-color)60; }
                .dragon-pupil { position: absolute; top: 4px; left: 6px; width: 12px; height: 12px; background: #000000; border-radius: 50%; transition: transform 0.1s ease-out; }
                .dragon-mouth { position: absolute; top: 40px; right: -15px; width: 40px; height: 6px; background: linear-gradient(90deg, rgba(255,100,0,0.8), rgba(255,150,50,0.6), transparent); border: 2px solid #ff6600; border-radius: 20px 5px 5px 20px; box-shadow: 0 0 20px rgba(255,100,0,0.5); transition: all 0.3s ease; }
                .dragon-body { position: absolute; top: 40px; right: -40px; width: 100px; height: 60px; background: radial-gradient(ellipse at 30% 40%, var(--dragon-color) 60%, transparent); clip-path: ellipse(40% 50% at 50% 50%); box-shadow: 0 0 60px var(--dragon-color)40; }
                .dragon-tail { position: absolute; top: 60px; right: -120px; width: 80px; height: 80px; background: linear-gradient(45deg, var(--dragon-color) 40%, transparent); clip-path: polygon(60% 0%, 100% 20%, 90% 60%, 70% 90%, 40% 100%, 20% 80%, 30% 40%, 40% 10%); transform-origin: top left; animation: tailSway 3s ease-in-out infinite; transition: transform 0.2s ease-out; }
                .dragon-legs { position: absolute; top: 90px; right: -40px; width: 20px; height: 40px; background: linear-gradient(180deg, #444444, #222222); border-radius: 20px 20px 0 0; }
                .dragon-legs.back { right: -60px; }
                .particle { position: absolute; border-radius: 50%; pointer-events: none; z-index: 200; }
                .fire-particle { background: radial-gradient(circle, #ffaa00, #ff4400); box-shadow: 0 0 10px #ff6600; animation: fireBreath 0.5s ease-out forwards; }
                .smoke-particle { background: radial-gradient(circle, #666666, #333333); opacity: 0.6; }
                .dragon-container.walking { animation: walkCycle 1s ease-in-out infinite; }
                .dragon-container.walking .dragon-legs { animation: walkCycle 0.5s ease-in-out infinite; }
                .dragon-container.walking .dragon-legs.back { animation: walkCycle 0.5s ease-in-out infinite; animation-delay: 0.25s; }
            `}</style>
            <div className="world" ref={worldRef}>
                <div className="mountains" ref={mountainsRef}></div>
                <div className="terrain" ref={terrainRef}></div>
                
                <div className="dragon-container" ref={dragonRef}>
                    <div className="dragon-wing" ref={dragonWingRef}></div>
                    <div className="dragon-head">
                        <div className="dragon-snout"></div>
                        <div className="dragon-eye">
                            <div className="dragon-pupil" ref={dragonPupilRef}></div>
                        </div>
                        <div className="dragon-mouth" ref={dragonMouthRef}></div>
                    </div>
                    <div className="dragon-body"></div>
                    <div className="dragon-legs front"></div>
                    <div className="dragon-legs back"></div>
                    <div className="dragon-tail" ref={dragonTailRef}></div>
                </div>

                <div className="controls">
                    <div style={{color: '#ffaa00', fontWeight: 'bold'}}>🐉 DRAGON EXPLORER</div>
                    <div>Left Stick: Move Dragon</div>
                    <div>Right Stick: Look Around</div>
                    <div>RT: Fire Breath 🔥</div>
                    <div>LT: Flap Wings Faster</div>
                    <div>A: Roar</div>
                    <div>B: Tail Attack</div>
                    <div>X: Change Color</div>
                    <div>Y: Smoke Puffs</div>
                    <div>RB: Fly Up</div>
                    <div>LB: Land</div>
                </div>

                <div className="status">
                    <div>Status: <span>{status}</span></div>
                    <div>Color: <span>{colorName}</span></div>
                    <div>Position: <span>X:{position.x}, Y:{position.y}</span></div>
                    <div>Flying: <span>{flyingStatus}</span></div>
                </div>
            </div>
        </>
    );
}

export default DragonExplorerPage;


======================================================================
File: /src/app/gaming-hub/endless-runner/page.tsx
======================================================================

'use client';

import React, { useEffect, useRef, useState } from 'react';
import * as THREE from 'three';
import { Button } from '@/components/ui/button';

export default function AstroDodgerPage() {
  const mountRef = useRef<HTMLDivElement>(null);
  const [score, setScore] = useState(0);
  const [isGameOver, setIsGameOver] = useState(false);
  const gameInstance = useRef({
    ship: null as THREE.Mesh | null,
    asteroids: [] as THREE.Mesh[],
    coins: [] as THREE.Mesh[],
    bullets: [] as THREE.Mesh[],
    stars: null as THREE.Points | null,
    camera: null as THREE.PerspectiveCamera | null,
    scene: null as THREE.Scene | null,
    renderer: null as THREE.WebGLRenderer | null,
    animationId: 0,
    keys: {} as Record<string, boolean>,
    gameSpeed: 1,
    score: 0,
    isGameOver: false,
    lastShotTime: 0,
  });

  const resetGame = () => {
    const game = gameInstance.current;
    if (game.ship) {
      game.ship.position.set(0, 0, 0);
    }
    
    // Clear dynamic objects
    [...game.asteroids, ...game.coins, ...game.bullets].forEach(obj => game.scene?.remove(obj));
    game.asteroids = [];
    game.coins = [];
    game.bullets = [];

    // Re-initialize game elements
    for(let i=0; i<100; i++) spawnAsteroid();
    for(let i=0; i<50; i++) spawnCoin();

    setScore(0);
    game.score = 0;
    setIsGameOver(false);
    game.isGameOver = false;
    game.gameSpeed = 1;

    if (game.animationId) cancelAnimationFrame(game.animationId);
    animate();
  };
  
  const spawnAsteroid = () => {
    const game = gameInstance.current;
    if (!game.scene) return;
    
    const asteroidGeometries = [
      new THREE.DodecahedronGeometry(5, 0),
      new THREE.BoxGeometry(7, 7, 7),
      new THREE.ConeGeometry(4, 8, 8),
      new THREE.TorusKnotGeometry(4, 1, 100, 8),
    ];
    
    const geometry = asteroidGeometries[Math.floor(Math.random() * asteroidGeometries.length)];
    const material = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, flatShading: true, roughness: 1 });
    const asteroid = new THREE.Mesh(geometry, material);

    asteroid.position.set(
      (Math.random() - 0.5) * 300,
      (Math.random() - 0.5) * 300,
      -Math.random() * 2500 - 300
    );
    asteroid.userData.rotationSpeed = new THREE.Vector3(Math.random() * 0.02, Math.random() * 0.02, 0);
    game.asteroids.push(asteroid);
    game.scene.add(asteroid);
  };
  
  const spawnCoin = () => {
    const game = gameInstance.current;
    if (!game.scene) return;
    
    const coinGeometry = new THREE.CylinderGeometry(2, 2, 0.5, 16);
    const coinMaterial = new THREE.MeshStandardMaterial({ color: 0xffd700, emissive: 0xcc9900 });
    const coin = new THREE.Mesh(coinGeometry, coinMaterial);
    coin.rotation.x = Math.PI / 2;
    
    coin.position.set(
      (Math.random() - 0.5) * 300,
      (Math.random() - 0.5) * 300,
      -Math.random() * 2500 - 300
    );
    coin.userData.rotationSpeed = new THREE.Vector3(0, 0.05, 0);
    game.coins.push(coin);
    game.scene.add(coin);
  };

  const fireBullet = () => {
      const game = gameInstance.current;
      if (!game.ship || !game.scene || Date.now() - game.lastShotTime < 200) return;

      const bulletGeometry = new THREE.SphereGeometry(0.5, 8, 8);
      const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff });
      const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);

      bullet.position.copy(game.ship.position);
      bullet.userData.velocity = new THREE.Vector3(0, 0, -5);
      
      game.bullets.push(bullet);
      game.scene.add(bullet);
      game.lastShotTime = Date.now();
  };

  const animate = () => {
    const game = gameInstance.current;
    if (game.isGameOver || !game.ship || !game.camera || !game.renderer || !game.scene) return;

    game.gameSpeed += 0.0001;

    // --- Handle Controls ---
    const moveSpeed = 0.6;
    if (game.keys['a'] || game.keys['arrowleft']) game.ship.position.x -= moveSpeed;
    if (game.keys['d'] || game.keys['arrowright']) game.ship.position.x += moveSpeed;
    if (game.keys['w'] || game.keys['arrowup']) game.ship.position.y += moveSpeed;
    if (game.keys['s'] || game.keys['arrowdown']) game.ship.position.y -= moveSpeed;
    if (game.keys[' ']) fireBullet(); // Spacebar to fire

    game.ship.position.x = Math.max(-50, Math.min(50, game.ship.position.x));
    game.ship.position.y = Math.max(-30, Math.min(30, game.ship.position.y));

    // --- Update Game Objects ---
    game.asteroids.forEach(asteroid => {
        asteroid.position.z += game.gameSpeed;
        asteroid.rotation.x += asteroid.userData.rotationSpeed.x;
        asteroid.rotation.y += asteroid.userData.rotationSpeed.y;
        if (asteroid.position.z > 20) {
            asteroid.position.z = -1500 - Math.random() * 1000;
            asteroid.position.x = (Math.random() - 0.5) * 300;
            asteroid.position.y = (Math.random() - 0.5) * 300;
        }

        if (game.ship && asteroid.position.distanceTo(game.ship.position) < 6) {
            game.isGameOver = true;
            setIsGameOver(true);
            cancelAnimationFrame(game.animationId);
        }
    });

    game.coins.forEach((coin, index) => {
        coin.position.z += game.gameSpeed;
        coin.rotation.y += coin.userData.rotationSpeed.y;
        if (coin.position.z > 20) {
           coin.position.z = -1500 - Math.random() * 1000;
           coin.position.x = (Math.random() - 0.5) * 300;
           coin.position.y = (Math.random() - 0.5) * 300;
        }
        if (game.ship && coin.position.distanceTo(game.ship.position) < 4) {
            setScore(s => s + 10);
            game.score += 10;
            game.scene?.remove(coin);
            game.coins.splice(index, 1);
            spawnCoin(); // Respawn a new coin
        }
    });
    
    game.bullets.forEach((bullet, index) => {
        bullet.position.add(bullet.userData.velocity);
        if (bullet.position.z < -1000) {
            game.scene?.remove(bullet);
            game.bullets.splice(index, 1);
        }

        // Bullet-asteroid collision
        for (let i = game.asteroids.length - 1; i >= 0; i--) {
            const asteroid = game.asteroids[i];
            if(bullet.position.distanceTo(asteroid.position) < 7){
                game.scene?.remove(bullet);
                game.bullets.splice(index, 1);
                game.scene?.remove(asteroid);
                game.asteroids.splice(i, 1);
                setScore(s => s + 5);
                game.score += 5;
                spawnAsteroid(); // Respawn an asteroid
                break; // Bullet hits one asteroid and is gone
            }
        }
    });

    if (game.stars) {
        game.stars.position.z += game.gameSpeed / 4;
        if(game.stars.position.z > 1000) game.stars.position.z = -1000;
    }
    
    game.renderer.render(game.scene, game.camera);
    game.animationId = requestAnimationFrame(animate);
  };
  
  useEffect(() => {
    if (!mountRef.current) return;
    
    const game = gameInstance.current;
    
    game.scene = new THREE.Scene();
    game.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 3000);
    game.renderer = new THREE.WebGLRenderer({ antialias: true });
    game.renderer.setSize(window.innerWidth, window.innerHeight);
    mountRef.current.appendChild(game.renderer.domElement);

    const shipGeometry = new THREE.ConeGeometry(2, 5, 8);
    shipGeometry.rotateX(Math.PI / 2);
    const shipMaterial = new THREE.MeshPhongMaterial({ color: 0x00aaff, shininess: 100 });
    game.ship = new THREE.Mesh(shipGeometry, shipMaterial);
    game.scene.add(game.ship);

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
    game.scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(5, 10, 20);
    game.scene.add(directionalLight);
    
    const starsGeometry = new THREE.BufferGeometry();
    const starPositions = [];
    for (let i = 0; i < 15000; i++) {
        starPositions.push((Math.random() - 0.5) * 3000, (Math.random() - 0.5) * 3000, -Math.random() * 3000);
    }
    starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starPositions, 3));
    const starsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.7 });
    game.stars = new THREE.Points(starsGeometry, starsMaterial);
    game.scene.add(game.stars);

    game.camera.position.z = 15;
    
    const handleKeyDown = (e: KeyboardEvent) => { game.keys[e.key.toLowerCase()] = true; };
    const handleKeyUp = (e: KeyboardEvent) => { game.keys[e.key.toLowerCase()] = false; };
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);
    
    resetGame();

    return () => {
        window.removeEventListener('keydown', handleKeyDown);
        window.removeEventListener('keyup', handleKeyUp);
        cancelAnimationFrame(game.animationId);
         if (game.renderer && mountRef.current?.contains(game.renderer.domElement)) {
            mountRef.current.removeChild(game.renderer.domElement);
        }
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="w-full h-[calc(100vh-10rem)] relative bg-black">
      <div ref={mountRef} className="w-full h-full" />
      <div className="absolute top-4 left-4 text-2xl font-bold bg-black/50 p-2 rounded-lg text-cyan-300 font-code">
        Score: {score}
      </div>
      {isGameOver && (
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center bg-black/70 p-8 rounded-xl">
          <h2 className="text-5xl font-bold text-red-500">GAME OVER</h2>
          <p className="text-white text-2xl mt-4">Final Score: {score}</p>
          <Button onClick={resetGame} className="mt-6" size="lg">
            Restart
          </Button>
        </div>
      )}
       <div className="absolute bottom-4 left-4 bg-black/50 p-3 rounded-lg text-cyan-300 font-code text-xs max-w-sm">
        <h3 className="font-bold text-sm mb-2">Controls</h3>
        <p><b>WASD / Arrows:</b> Move</p>
        <p><b>Spacebar:</b> Shoot</p>
      </div>
    </div>
  );
}

    

======================================================================
File: /src/app/gaming-hub/max-ship-morpher/page.tsx
======================================================================

'use client';

import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';

export default function MaxShipMorpherPage() {
  const mountRef = useRef<HTMLDivElement>(null);
  const hudRef = useRef<HTMLDivElement>(null);
  const fpsRef = useRef<HTMLDivElement>(null);
  const formRef = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    if (!mountRef.current) return;

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(0, 2, 10);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    mountRef.current.appendChild(renderer.domElement);

    const loader = new THREE.CubeTextureLoader();
    const envMap = loader.load([
      'https://threejs.org/examples/textures/cube/Bridge2/posx.jpg',
      'https://threejs.org/examples/textures/cube/Bridge2/negx.jpg',
      'https://threejs.org/examples/textures/cube/Bridge2/posy.jpg',
      'https://threejs.org/examples/textures/cube/Bridge2/negy.jpg',
      'https://threejs.org/examples/textures/cube/Bridge2/posz.jpg',
      'https://threejs.org/examples/textures/cube/Bridge2/negz.jpg'
    ]);
    scene.background = envMap;

    const ambient = new THREE.AmbientLight(0x333333);
    const directional = new THREE.DirectionalLight(0xffffff, 1.1);
    directional.position.set(3, 5, 2);
    scene.add(ambient, directional);

    let currentFormIndex = 0;
    let ships: { mesh: THREE.Mesh; name: string; animationType: string; }[] = [];
    const morphClock = new THREE.Clock();

    const shipVelocity = new THREE.Vector3();
    const shipAcceleration = 0.02;
    const shipMaxSpeed = 0.4;
    const shipFriction = 0.96;

    const bullets: THREE.Mesh[] = [];
    const bulletSpeed = 0.7;

    const targets: THREE.Mesh[] = [];
    const explosionFX: THREE.Mesh[] = [];

    function createExplosion(pos: THREE.Vector3) {
      const geo = new THREE.SphereGeometry(0.2, 8, 8);
      const mat = new THREE.MeshBasicMaterial({ color: 0xffff00 });
      const mesh = new THREE.Mesh(geo, mat);
      mesh.position.copy(pos);
      mesh.userData.lifetime = 20;
      scene.add(mesh);
      explosionFX.push(mesh);
    }

    function createTargets() {
      for (let i = 0; i < 5; i++) {
        const geo = new THREE.OctahedronGeometry(0.5);
        const mat = new THREE.MeshStandardMaterial({ color: 0xff66cc });
        const target = new THREE.Mesh(geo, mat);
        target.position.set((Math.random() - 0.5) * 20, (Math.random() - 0.5) * 10, -Math.random() * 40 - 10);
        target.userData.hit = false;
        scene.add(target);
        targets.push(target);
      }
    }

    function createShips() {
      const solidGeometry = new THREE.SphereGeometry(0.5, 64, 64);
      solidGeometry.scale(1, 1.8, 1);
      const solidMaterial = new THREE.MeshStandardMaterial({
        color: 0xeeeeee, metalness: 0.9, roughness: 0.05, envMap: envMap, envMapIntensity: 1.2
      });
      const solidShip = new THREE.Mesh(solidGeometry, solidMaterial);
      solidShip.userData.animationType = 'rotate';
      scene.add(solidShip);
      ships.push({ mesh: solidShip, name: 'Solid', animationType: 'rotate' });

      const liquidGeometry = new THREE.IcosahedronGeometry(0.7, 4);
      liquidGeometry.scale(1, 1.5, 1);
      const liquidMaterial = new THREE.MeshStandardMaterial({
        color: 0x88ccff, metalness: 1, roughness: 0.1, flatShading: true, transparent: true, opacity: 0.85, envMap: envMap, envMapIntensity: 1.2
      });
      const liquidShip = new THREE.Mesh(liquidGeometry, liquidMaterial);
      liquidShip.userData.animationType = 'pulse';
      liquidShip.visible = false;
      scene.add(liquidShip);
      ships.push({ mesh: liquidShip, name: 'Liquid', animationType: 'pulse' });

      const angularGeometry = new THREE.BoxGeometry(0.8, 1.6, 2);
      const angularMaterial = new THREE.MeshStandardMaterial({
        color: 0xffaa00, metalness: 0.8, roughness: 0.2, envMap: envMap, envMapIntensity: 1.0
      });
      const angularShip = new THREE.Mesh(angularGeometry, angularMaterial);
      angularShip.userData.animationType = 'wobble';
      angularShip.visible = false;
      scene.add(angularShip);
      ships.push({ mesh: angularShip, name: 'Angular', animationType: 'wobble' });

      const sleekGeometry = new THREE.ConeGeometry(0.6, 2.5, 16);
      sleekGeometry.rotateX(Math.PI);
      const sleekMaterial = new THREE.MeshStandardMaterial({
        color: 0x00aaff, metalness: 0.95, roughness: 0.05, envMap: envMap, envMapIntensity: 1.3
      });
      const sleekShip = new THREE.Mesh(sleekGeometry, sleekMaterial);
      sleekShip.userData.animationType = 'spin';
      sleekShip.visible = false;
      scene.add(sleekShip);
      ships.push({ mesh: sleekShip, name: 'Sleek', animationType: 'spin' });

      ships[0].mesh.visible = true;
      updateHUD();
    }

    function getActiveShip() {
      return ships[currentFormIndex];
    }

    function cycleShipForm() {
      if (!ships.length) return;
      ships.forEach(ship => ship.mesh.visible = false);
      currentFormIndex = (currentFormIndex + 1) % ships.length;
      ships[currentFormIndex].mesh.visible = true;
      updateHUD();
    }

    function updateHUD() {
      if (formRef.current) {
        formRef.current.textContent = getActiveShip()?.name || 'N/A';
      }
    }

    function fireBullet() {
      const ship = getActiveShip()?.mesh;
      if (!ship) return;
      const bulletGeo = new THREE.SphereGeometry(0.1, 8, 8);
      const bulletMat = new THREE.MeshBasicMaterial({ color: 0xff3333 });
      const bullet = new THREE.Mesh(bulletGeo, bulletMat);
      bullet.position.copy(ship.position);
      bullet.userData.velocity = new THREE.Vector3(0, 0, -bulletSpeed);
      scene.add(bullet);
      bullets.push(bullet);
    }

    const keys: { [key: string]: boolean } = {};
    const handleKeyDown = (e: KeyboardEvent) => {
      keys[e.key.toLowerCase()] = true;
      if (e.key.toLowerCase() === 't') cycleShipForm();
      if (e.key.toLowerCase() === 'f') fireBullet();
    };
    const handleKeyUp = (e: KeyboardEvent) => {
      keys[e.key.toLowerCase()] = false;
    };
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);

    function updateMovement() {
      if (keys['arrowup'] || keys['w']) shipVelocity.z -= shipAcceleration;
      if (keys['arrowdown'] || keys['s']) shipVelocity.z += shipAcceleration;
      if (keys['arrowleft'] || keys['a']) shipVelocity.x -= shipAcceleration;
      if (keys['arrowright'] || keys['d']) shipVelocity.x += shipAcceleration;
      if (keys['r']) shipVelocity.y += shipAcceleration;
      if (keys['f'] && e.key.toLowerCase() !== 'f') shipVelocity.y -= shipAcceleration; // avoid conflict with fire
      shipVelocity.clampLength(0, shipMaxSpeed);
    }

    function pollGamepad() {
      const gp = navigator.getGamepads?.[0];
      if (gp) {
        shipVelocity.x += gp.axes[0] * shipAcceleration;
        shipVelocity.z += gp.axes[1] * shipAcceleration;
        shipVelocity.y += gp.axes[3] * shipAcceleration;

        if (gp.buttons[1].pressed && !(window as any)._togglePressed) {
          cycleShipForm();
          (window as any)._togglePressed = true;
        } else if (!gp.buttons[1].pressed) {
          (window as any)._togglePressed = false;
        }

        if (gp.buttons[0].pressed && !(window as any)._firePressed) {
          fireBullet();
          (window as any)._firePressed = true;
        } else if (!gp.buttons[0].pressed) {
          (window as any)._firePressed = false;
        }
      }
      requestAnimationFrame(pollGamepad);
    }

    let lastTime = performance.now();
    let frames = 0;
    function trackFPS() {
      const now = performance.now();
      frames++;
      if (now - lastTime >= 1000) {
        const fps = Math.round((frames * 1000) / (now - lastTime));
        if (fpsRef.current) fpsRef.current.innerText = `FPS: ${fps}`;
        lastTime = now;
        frames = 0;
      }
      requestAnimationFrame(trackFPS);
    }

    function animateForms() {
      const t = morphClock.getElapsedTime();
      const activeShipInfo = getActiveShip();
      if (!activeShipInfo) return;

      const activeShip = activeShipInfo.mesh;
      const animType = activeShipInfo.animationType;

      updateMovement();
      activeShip.position.add(shipVelocity);
      shipVelocity.multiplyScalar(shipFriction);

      bullets.forEach((b, i) => {
        b.position.add(b.userData.velocity);
        targets.forEach(target => {
          if (!target.userData.hit && b.position.distanceTo(target.position) < 0.5) {
            target.userData.hit = true;
            createExplosion(target.position);
            scene.remove(target);
            scene.remove(b);
            bullets.splice(i, 1);
          }
        });
        if (b.position.length() > 200) {
          scene.remove(b);
          bullets.splice(i, 1);
        }
      });

      explosionFX.forEach((fx, i) => {
        fx.userData.lifetime--;
        fx.scale.multiplyScalar(1.1);
        if (fx.userData.lifetime <= 0) {
          scene.remove(fx);
          explosionFX.splice(i, 1);
        }
      });

      switch (animType) {
        case 'pulse':
          activeShip.scale.setScalar(1 + 0.05 * Math.sin(t * 3));
          activeShip.rotation.x += 0.003;
          activeShip.rotation.y += 0.0035;
          break;
        case 'rotate':
          activeShip.rotation.x += 0.002;
          activeShip.rotation.y += 0.0025;
          break;
        case 'wobble':
          activeShip.rotation.x += 0.004 * Math.sin(t * 2);
          activeShip.rotation.y += 0.003;
          activeShip.rotation.z += 0.002 * Math.cos(t * 1.5);
          break;
        case 'spin':
          activeShip.rotation.y += 0.01;
          activeShip.rotation.x += 0.005;
          break;
        default:
          activeShip.rotation.y += 0.005;
      }

      camera.position.lerp(new THREE.Vector3(activeShip.position.x, activeShip.position.y + 2, activeShip.position.z + 10), 0.05);
      camera.lookAt(activeShip.position);
    }

    let animationId: number;
    function animate() {
      animationId = requestAnimationFrame(animate);
      animateForms();
      renderer.render(scene, camera);
    }

    const handleResize = () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    };
    window.addEventListener('resize', handleResize);

    createShips();
    createTargets();
    pollGamepad();
    trackFPS();
    animate();

    return () => {
      window.removeEventListener('resize', handleResize);
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
      cancelAnimationFrame(animationId);
      if (mountRef.current) {
        mountRef.current.removeChild(renderer.domElement);
      }
    };
  }, []);

  return (
    <>
      <style jsx global>{`
        body { margin: 0; overflow: hidden; background: #000; }
        canvas { display: block; }
      `}</style>
      <div ref={mountRef} className="w-full h-full" />
      <div ref={hudRef} id="hud" style={{ position: 'absolute', top: '10px', left: '10px', color: '#00ffcc', fontFamily: 'monospace', background: 'rgba(0,0,0,0.6)', padding: '12px 16px', borderRadius: '8px', fontSize: '14px', lineHeight: 1.5, boxShadow: '0 0 10px rgba(0,255,204,0.3)', zIndex: 10 }}>
        MAX Ship Forms<br/>
        Current: <span ref={formRef} id="currentForm">Solid</span><br/>
        Press <strong>T</strong> (keyboard)<br/>
        or Xbox <strong>B</strong> (button) to cycle forms<br/>
        Press <strong>F</strong> or Xbox <strong>A</strong> to Fire<br/>
        Arrows/WASD/R/F to Move XYZ<br/>
        Forms: Solid → Liquid → Angular → Sleek → (cycle)
      </div>
      <div ref={fpsRef} id="fps" style={{ position: 'absolute', bottom: '10px', left: '10px', color: '#ffffff', fontFamily: 'monospace', fontSize: '13px', background: 'rgba(0,0,0,0.4)', padding: '6px 10px', borderRadius: '6px' }}>
        FPS: --
      </div>
    </>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/attic/page.tsx
======================================================================

import Link from 'next/link';

export default function AtticPage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Attic</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/balcony/page.tsx
======================================================================

'use client';
import { useState } from 'react';
import Link from 'next/link';

const locations = [
  { href: "/gaming-hub/my-wonderful-life/livingroom", label: "Living Room" },
  { href: "/gaming-hub/my-wonderful-life/kitchen", label: "Kitchen" },
  { href: "/gaming-hub/my-wonderful-life/bedroom", label: "Bedroom" },
  { href: "/gaming-hub/my-wonderful-life/garden", label: "Garden" },
  { href: "/gaming-hub/my-wonderful-life/basement", label: "Basement" },
  { href: "/gaming-hub/my-wonderful-life/attic", label: "Attic" },
  { href: "/gaming-hub/my-wonderful-life/garage", label: "Garage" },
  { href: "/gaming-hub/my-wonderful-life/bathroom", label: "Bathroom" },
  { href: "/gaming-hub/my-wonderful-life/diningroom", label: "Dining Room" },
  { href: "/gaming-hub/my-wonderful-life/study", label: "Study" },
  { href: "/gaming-hub/my-wonderful-life/porch", label: "Porch" },
  { href: "/gaming-hub/my-wonderful-life/lobby", label: "Lobby" },
  { href: "/gaming-hub/my-wonderful-life/hallway", label: "Hallway" },
  { href: "/gaming-hub/my-wonderful-life", label: "Balcony" },
  { href: "/gaming-hub/my-wonderful-life/gamemenu", label: "Game Menu" },
];

export default function BalconyPage() {
  const [interactionResult, setInteractionResult] = useState('Click an object to interact with it.');

  return (
    <div className="bg-gradient-to-br from-background to-secondary/20 p-5 rounded-xl font-serif text-foreground/90">
      <h1 className="text-center text-4xl text-accent mb-4">Balcony</h1>
      <p className="max-w-2xl mx-auto text-center text-lg">The cool breeze greets you as you step onto the small iron-railed balcony overlooking the garden.</p>

      <nav className="bg-card/50 rounded-lg p-4 w-72 my-5 mx-auto">
        <ul className="list-none p-0">
          {locations.map(loc => (
            <li key={loc.href} className="my-1.5">
              <Link href={loc.href} className="text-amber-300 hover:underline">
                {loc.label.split('').join(' ')}
              </Link>
            </li>
          ))}
        </ul>
      </nav>

      <div className="max-w-2xl mx-auto my-5 bg-card/80 p-4 rounded-lg">
        <h2 className="text-center text-2xl mt-0 text-amber-200">Things You See</h2>
        <ul className="list-none p-0">
          <li onClick={() => setInteractionResult('You gaze through the telescope. The stars twinkle softly.')} className="bg-secondary/50 my-2 p-2 rounded-md cursor-pointer hover:bg-secondary">Telescope</li>
          <li onClick={() => setInteractionResult('The flower pots are blooming with color.')} className="bg-secondary/50 my-2 p-2 rounded-md cursor-pointer hover:bg-secondary">Flower Pots</li>
          <li onClick={() => setInteractionResult('You lean over the railing and watch the wind play with the trees.')} className="bg-secondary/50 my-2 p-2 rounded-md cursor-pointer hover:bg-secondary">Railing</li>
        </ul>
      </div>

      <div className="my-5 p-3 max-w-2xl mx-auto bg-background/50 border border-secondary text-center italic text-amber-100 rounded-lg">
        {interactionResult}
      </div>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/basement/page.tsx
======================================================================

import Link from 'next/link';

export default function BasementPage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Basement</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/bathroom/page.tsx
======================================================================

import Link from 'next/link';

export default function BathroomPage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Bathroom</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/bedroom/page.tsx
======================================================================

import Link from 'next/link';

export default function BedroomPage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Bedroom</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/diningroom/page.tsx
======================================================================

import Link from 'next/link';

export default function DiningRoomPage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Dining Room</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/gamemenu/page.tsx
======================================================================

import Link from 'next/link';

export default function GameMenuPage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Game Menu</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/garage/page.tsx
======================================================================

import Link from 'next/link';

export default function GaragePage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Garage</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/garden/page.tsx
======================================================================

import Link from 'next/link';

export default function GardenPage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Garden</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/hallway/page.tsx
======================================================================

import Link from 'next/link';

export default function HallwayPage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Hallway</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/kitchen/page.tsx
======================================================================

import Link from 'next/link';

export default function KitchenPage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Kitchen</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/livingroom/page.tsx
======================================================================

import Link from 'next/link';

export default function LivingRoomPage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Living Room</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/lobby/page.tsx
======================================================================

import Link from 'next/link';

export default function LobbyPage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Lobby</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/page.tsx
======================================================================

'use client';
import { useState } from 'react';
import Link from 'next/link';

const locations = [
  { href: "/gaming-hub/my-wonderful-life/livingroom", label: "Living Room" },
  { href: "/gaming-hub/my-wonderful-life/kitchen", label: "Kitchen" },
  { href: "/gaming-hub/my-wonderful-life/bedroom", label: "Bedroom" },
  { href: "/gaming-hub/my-wonderful-life/garden", label: "Garden" },
  { href: "/gaming-hub/my-wonderful-life/basement", label: "Basement" },
  { href: "/gaming-hub/my-wonderful-life/attic", label: "Attic" },
  { href: "/gaming-hub/my-wonderful-life/garage", label: "Garage" },
  { href: "/gaming-hub/my-wonderful-life/bathroom", label: "Bathroom" },
  { href: "/gaming-hub/my-wonderful-life/diningroom", label: "Dining Room" },
  { href: "/gaming-hub/my-wonderful-life/study", label: "Study" },
  { href: "/gaming-hub/my-wonderful-life/porch", label: "Porch" },
  { href: "/gaming-hub/my-wonderful-life/lobby", label: "Lobby" },
  { href: "/gaming-hub/my-wonderful-life/hallway", label: "Hallway" },
  { href: "/gaming-hub/my-wonderful-life/balcony", label: "Balcony" },
  { href: "/gaming-hub/my-wonderful-life/gamemenu", label: "Game Menu" },
];

export default function BalconyPage() {
  const [interactionResult, setInteractionResult] = useState('Click an object to interact with it.');

  return (
    <div className="bg-gradient-to-br from-background to-secondary/20 p-5 rounded-xl font-serif text-foreground/90">
      <h1 className="text-center text-4xl text-accent mb-4">Balcony</h1>
      <p className="max-w-2xl mx-auto text-center text-lg">The cool breeze greets you as you step onto the small iron-railed balcony overlooking the garden.</p>

      <nav className="bg-card/50 rounded-lg p-4 w-72 my-5 mx-auto">
        <ul className="list-none p-0">
          {locations.map(loc => (
            <li key={loc.href} className="my-1.5">
              <Link href={loc.href} className="text-amber-300 hover:underline">
                {loc.label.split('').join(' ')}
              </Link>
            </li>
          ))}
        </ul>
      </nav>

      <div className="max-w-2xl mx-auto my-5 bg-card/80 p-4 rounded-lg">
        <h2 className="text-center text-2xl mt-0 text-amber-200">Things You See</h2>
        <ul className="list-none p-0">
          <li onClick={() => setInteractionResult('You gaze through the telescope. The stars twinkle softly.')} className="bg-secondary/50 my-2 p-2 rounded-md cursor-pointer hover:bg-secondary">Telescope</li>
          <li onClick={() => setInteractionResult('The flower pots are blooming with color.')} className="bg-secondary/50 my-2 p-2 rounded-md cursor-pointer hover:bg-secondary">Flower Pots</li>
          <li onClick={() => setInteractionResult('You lean over the railing and watch the wind play with the trees.')} className="bg-secondary/50 my-2 p-2 rounded-md cursor-pointer hover:bg-secondary">Railing</li>
        </ul>
      </div>

      <div className="my-5 p-3 max-w-2xl mx-auto bg-background/50 border border-secondary text-center italic text-amber-100 rounded-lg">
        {interactionResult}
      </div>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/porch/page.tsx
======================================================================

import Link from 'next/link';

export default function PorchPage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Porch</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/my-wonderful-life/study/page.tsx
======================================================================

import Link from 'next/link';

export default function StudyPage() {
  return (
    <div className="text-center p-8">
      <h1 className="text-4xl font-headline mb-4">Study</h1>
      <p className="text-muted-foreground mb-8">This page is under construction.</p>
      <Link href="/gaming-hub/my-wonderful-life" className="text-primary hover:underline">
        &larr; Back to Balcony
      </Link>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/page.tsx
======================================================================

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import Image from "next/image";
import { ArrowRight } from "lucide-react";

const games = [
    {
    title: "Flight of the Navigator 2.0",
    description: "Guide MAX through hostile sectors, gather rare specimens, and evade capture in this official continuation of the classic story.",
    href: "/gaming-hub/quantum-cannon-showdown",
    imageUrl: "https://picsum.photos/seed/305/600/400",
    imageHint: "silver spaceship space"
  },
   {
    title: "MAX Ship Morpher",
    description: "A tech demo showcasing the Trimaxion Drone Ship's incredible morphing capabilities. Cycle between Solid, Liquid, Angular, and Sleek forms.",
    href: "/gaming-hub/max-ship-morpher",
    imageUrl: "https://picsum.photos/seed/309/600/400",
    imageHint: "liquid metal sphere"
  },
  {
    title: "Quantum Cannon Showdown",
    description: "Pilot a hyper-advanced starship, morph its form, and blast through waves of enemies in this thrilling 4D space combat simulator.",
    href: "/gaming-hub/quantum-cannon-showdown",
    imageUrl: "https://picsum.photos/seed/312/600/400",
    imageHint: "space battle laser"
  },
    {
    title: "Quantum Gaming System",
    description: "A detailed dashboard simulating the core of a quantum computer, with interactive readouts and system controls.",
    href: "/gaming-hub/quantum-gaming-system",
    imageUrl: "https://picsum.photos/seed/qgs/600/400",
    imageHint: "quantum computer circuit"
  },
  {
    title: "Pirates Cove",
    description: "Explore a mysterious underwater world. Interact with strange creatures, manage your gear, and collect Quantum Coins.",
    href: "/gaming-hub/pirates-cove",
    imageUrl: "https://picsum.photos/seed/311/600/400",
    imageHint: "underwater cove pirate"
  },
  {
    title: "AI Video Generator",
    description: "Use cutting-edge AI to generate video from text prompts or seed images. Powered by Google's Veo 2.0 model.",
    href: "/gaming-hub/ai-video-generator",
    imageUrl: "https://picsum.photos/seed/307/600/400",
    imageHint: "abstract video film"
  },
  {
    title: "Quantum Beast Combat",
    description: "A 2D fighting game pitting Dean the Lion Warrior against Velda the Lioness Mystic in quantum-powered combat.",
    href: "/gaming-hub/quantum-beast-combat",
    imageUrl: "https://picsum.photos/seed/308/600/400",
    imageHint: "lion fight fantasy"
  },
   {
    title: "Endless Runner",
    description: "Pilot a sleek starship through a treacherous, procedurally generated asteroid field. How long can you survive?",
    href: "/gaming-hub/endless-runner",
    imageUrl: "https://picsum.photos/seed/310/600/400",
    imageHint: "spaceship asteroid field"
  },
  {
    title: "My Wonderful Life",
    description: "A text-based adventure game by Tamera Vetter Snow. Explore a house full of memories and secrets.",
    href: "/gaming-hub/my-wonderful-life",
    imageUrl: "https://picsum.photos/seed/304/600/400",
    imageHint: "cozy home interior"
  },
  {
    title: "Alien Character Puppet",
    description: "An interactive VR-ready character puppet controlled in real-time with a gamepad.",
    href: "/gaming-hub/alien-character",
    imageUrl: "https://picsum.photos/seed/302/600/400",
    imageHint: "alien character"
  },
  {
    title: "Bioluminescent Entity",
    description: "Interact with a mesmerizing, bioluminescent lifeform. Its gaze follows your every move.",
    href: "/gaming-hub/bioluminescent-character",
    imageUrl: "https://picsum.photos/seed/303/600/400",
    imageHint: "glowing jellyfish abstract"
  },
  {
    title: "Two Player Fish Simulator",
    description: "A relaxing two-player fish simulation. Control your fish with Xbox controllers and explore the river.",
    href: "/gaming-hub/two-player-fish-sim",
    imageUrl: "https://picsum.photos/seed/306/600/400",
    imageHint: "fish underwater"
  },
  {
    title: "Dragon Explorer",
    description: "Take control of a majestic dragon. Explore vast terrains, breathe fire, and master the skies with your Xbox controller.",
    href: "/gaming-hub/dragon-explorer",
    imageUrl: "https://picsum.photos/seed/dragon/600/400",
    imageHint: "dragon flying landscape"
  }
];

export default function GamingHubPage() {
  return (
    <div className="flex flex-col gap-8 items-center w-full">
      <main className="max-w-5xl w-full bg-card/40 border-primary/30 rounded-2xl p-8 sm:p-12 shadow-[0_8px_32px_0_rgba(0,255,255,0.2),inset_0_0_60px_rgba(0,255,255,0.1)] backdrop-blur-xl border">
        <section className="about-intro text-center mb-12">
          <h1 className="text-4xl sm:text-5xl font-bold text-primary [text-shadow:0_0_5px_hsl(var(--primary)),0_0_10px_hsl(var(--primary)),0_0_20px_hsl(var(--primary))] mb-8">
            Quantum Gaming Hub
          </h1>
          <p className="text-lg text-muted-foreground">
            A community-driven platform that empowers players with resources, guides, and stories that make the gaming experience richer and more meaningful.
          </p>
        </section>

        <section>
           <h2 className="text-3xl font-bold text-primary [text-shadow:0_0_5px_hsl(var(--primary))] border-b-2 border-primary/50 pb-2 mb-8 max-w-fit">
            Games & Experiences
          </h2>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {games.map((game) => (
              <Card key={game.title} className="flex flex-col overflow-hidden bg-secondary/50">
                <CardHeader className="p-0">
                  <div className="relative aspect-video">
                      <Image 
                          src={game.imageUrl}
                          alt={game.title}
                          fill
                          className="object-cover"
                          data-ai-hint={game.imageHint}
                      />
                  </div>
                </CardHeader>
                <div className="p-6 flex flex-col flex-grow">
                    <CardTitle className="text-lg mb-2">{game.title}</CardTitle>
                    <CardDescription className="text-sm flex-grow">{game.description}</CardDescription>
                </div>
                <CardFooter className="p-6 pt-0 mt-auto">
                  <Button asChild className="w-full">
                    <Link href={game.href}>Engage <ArrowRight className="ml-2"/></Link>
                  </Button>
                </CardFooter>
              </Card>
            ))}
             <Card className="flex flex-col items-center justify-center p-6 border-dashed">
                <p className="text-muted-foreground">More games coming soon...</p>
            </Card>
          </div>
        </section>
      </main>
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/pirates-cove/page.tsx
======================================================================
'use client';

import React, { useEffect, useRef, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { motion, AnimatePresence } from 'framer-motion';

// --- Game Components from other games ---

function AlienCharacter() {
  const mouthRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const mouth = mouthRef.current;
    if (!mouth) return;
    let talking = false;
    const interval = setInterval(() => {
      talking = !talking;
      mouth.style.height = talking ? '35px' : '12px';
      mouth.style.width = talking ? '120px' : '80px';
    }, 500);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="absolute top-1/2 left-1/4 -translate-x-1/2 -translate-y-1/2 scale-50">
      <div className="face relative w-[200px] h-[280px] bg-[radial-gradient(ellipse_at_40%_30%,rgba(0,255,150,0.4),rgba(100,255,200,0.2),transparent_80%)] rounded-[100px/140px] shadow-[0_0_40px_15px_rgba(0,255,150,0.6),inset_0_0_50px_20px_rgba(100,255,200,0.4)]" style={{ animation: 'pulseFace 5s ease-in-out infinite' }}>
        <div className="eye absolute top-[70px] w-[70px] h-[80px] bg-[radial-gradient(ellipse_at_center,#ffffff,#00ffaa_60%,#004455_90%)] rounded-[60%_60%_50%_50%] shadow-[0_0_25px_10px_rgba(0,255,170,0.8),inset_0_0_15px_5px_rgba(255,255,255,0.3)] overflow-hidden left-[20px]">
          <div className="pupil absolute top-[20px] left-[25px] w-[20px] h-[40px] bg-gradient-to-b from-[#000033] to-[#001166] rounded-[50%_50%_50%_50%]"></div>
        </div>
        <div className="eye absolute top-[70px] w-[70px] h-[80px] bg-[radial-gradient(ellipse_at_center,#ffffff,#00ffaa_60%,#004455_90%)] rounded-[60%_60%_50%_50%] shadow-[0_0_25px_10px_rgba(0,255,170,0.8),inset_0_0_15px_5px_rgba(255,255,255,0.3)] overflow-hidden right-[20px]">
          <div className="pupil absolute top-[20px] left-[25px] w-[20px] h-[40px] bg-gradient-to-b from-[#000033] to-[#001166] rounded-[50%_50%_50%_50%]"></div>
        </div>
        <div ref={mouthRef} className="mouth absolute bottom-[40px] left-1/2 -ml-[40px] h-[12px] w-[80px] bg-gradient-to-r from-transparent via-[rgba(0,255,100,0.8)] to-transparent border-2 border-[#00ff66] rounded-[40px] shadow-[0_0_20px_8px_rgba(0,255,100,0.6),inset_0_0_10px_3px_rgba(0,200,80,0.8)] transition-all duration-200"></div>
      </div>
    </div>
  );
}

function Fish({ playerNum }: { playerNum: 1 | 2 }) {
  const fishRef = useRef<HTMLDivElement>(null);
  const pupilRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const player = {
      fish: fishRef.current,
      pupil: pupilRef.current,
      position: { x: playerNum === 1 ? window.innerWidth * 0.25 : window.innerWidth * 0.75, y: window.innerHeight * 0.5 },
      velocity: { x: 0, y: 0 },
      maxSpeed: 4,
      acceleration: 0.3,
      friction: 0.9,
    };

    let animationFrameId: number;
    function gameLoop() {
      const gamepad = navigator.getGamepads()[playerNum - 1];
      if (gamepad) {
        const leftX = Math.abs(gamepad.axes[0]) > 0.1 ? gamepad.axes[0] : 0;
        const leftY = Math.abs(gamepad.axes[1]) > 0.1 ? gamepad.axes[1] : 0;

        player.velocity.x += leftX * player.acceleration;
        player.velocity.y += leftY * player.acceleration;

        const speed = Math.sqrt(player.velocity.x ** 2 + player.velocity.y ** 2);
        if (speed > player.maxSpeed) {
            player.velocity.x = (player.velocity.x / speed) * player.maxSpeed;
            player.velocity.y = (player.velocity.y / speed) * player.maxSpeed;
        }
      }
      
      player.velocity.x *= player.friction;
      player.velocity.y *= player.friction;
      player.position.x += player.velocity.x;
      player.position.y += player.velocity.y;

      // Boundary checks
      player.position.x = Math.max(0, Math.min(window.innerWidth - 80, player.position.x));
      player.position.y = Math.max(0, Math.min(window.innerHeight - 40, player.position.y));

      if (player.fish) {
        player.fish.style.transform = `translate(${player.position.x}px, ${player.position.y}px) ${player.velocity.x < -0.1 ? 'scaleX(-1)' : 'scaleX(1)'}`;
      }
      animationFrameId = requestAnimationFrame(gameLoop);
    }

    gameLoop();
    return () => cancelAnimationFrame(animationFrameId);
  }, [playerNum]);

  const fishClass = playerNum === 1 ? 'salmon' : 'blue-tang';

  return (
    <div ref={fishRef} className={`fish-container ${fishClass} fixed top-0 left-0`}>
      <div className="fish-body">
        <div className="fish-scales"></div><div className="fish-stripe"></div>
        <div className="fish-head">
          <div className="fish-eye"><div ref={pupilRef} className="fish-pupil"></div></div>
          <div className="fish-mouth"></div>
        </div>
        <div className="dorsal-fin"></div><div className="pectoral-fin"></div>
        <div className="tail-fin"></div><div className="anal-fin"></div>
      </div>
    </div>
  );
}

// --- Main Page Component ---

export default function PiratesCovePage() {
  const [points, setPoints] = useState(0);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  useEffect(() => {
    // Game logic, e.g., point accumulation
    const pointInterval = setInterval(() => {
      setPoints(prev => prev + 1);
    }, 1000);
    return () => clearInterval(pointInterval);
  }, []);

  return (
    <>
      <style jsx global>{`
        /* Base Styles */
        body { background: #0c1445; font-family: 'Orbitron', monospace; }
        
        /* Pirate's Cove Environment */
        .pirates-cove-bg {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to bottom, #1e3a8a 0%, #0c1445 70%);
            overflow: hidden;
        }
        .seabed {
            position: absolute; bottom: 0; width: 100%; height: 150px;
            background: linear-gradient(to top, #02041a, transparent);
        }
        .ruins { 
            position: absolute; bottom: 50px; left: 10%; width: 200px; height: 150px;
            background: url('https://picsum.photos/seed/ruins/200/150') no-repeat;
            filter: brightness(0.4);
        }
        .treasure-chest {
            position: absolute; bottom: 20px; right: 15%; width: 80px; height: 60px;
            background: url('https://picsum.photos/seed/chest/80/60') no-repeat;
            filter: brightness(0.6) sepia(0.3);
            animation: glowChest 5s infinite ease-in-out;
        }
        @keyframes glowChest { 
            50% { filter: brightness(0.8) sepia(0.5) drop-shadow(0 0 10px #ffdf00); } 
        }

        /* Fish Styles */
        .fish-container { z-index: 10; }
        .fish-body { position: relative; width: 80px; height: 40px; background: linear-gradient(90deg, var(--fish-color) 0%, var(--fish-color-light) 50%, var(--fish-color) 100%); border-radius: 0 40px 40px 0; box-shadow: 0 0 15px var(--fish-color-glow), inset 0 0 20px rgba(255,255,255,0.2); }
        .fish-head { position: absolute; left: -20px; top: 5px; width: 30px; height: 30px; background: radial-gradient(circle at 70% 40%, var(--fish-color-light), var(--fish-color)); border-radius: 50% 30% 30% 50%; z-index: 2; }
        .fish-eye { position: absolute; top: 8px; right: 5px; width: 12px; height: 14px; background: radial-gradient(circle at 30% 30%, #fff 40%, #000 45%); border-radius: 50%; }
        .fish-pupil { position: absolute; top: 4px; left: 3px; width: 6px; height: 6px; background: #000; border-radius: 50%; }
        .fish-mouth { position: absolute; top: 18px; right: -2px; width: 8px; height: 4px; background: #8B0000; border-radius: 0 4px 4px 0; animation: mouthBreathe 2s infinite; }
        @keyframes mouthBreathe { 50% { transform: scaleX(1.3); } }
        .tail-fin { position: absolute; top: 8px; right: -18px; width: 25px; height: 24px; background: linear-gradient(45deg, var(--fish-color), var(--fish-color-light)); clip-path: polygon(0% 30%, 40% 0%, 100% 40%, 80% 60%, 100% 90%, 40% 100%, 0% 70%); animation: tailSwim 0.8s infinite; transform-origin: left center; }
        @keyframes tailSwim { 25% { transform: rotate(-12deg) scaleX(1.1); } 75% { transform: rotate(12deg) scaleX(1.1); } }
        .salmon { --fish-color: #FA8072; --fish-color-light: #FFA07A; --fish-color-glow: #fa807266; }
        .blue-tang { --fish-color: #1E90FF; --fish-color-light: #87CEEB; --fish-color-glow: #1e90ff66; }

        /* Alien Character Styles */
        @keyframes pulseFace { 50% { transform: scale(1.02); box-shadow: 0 0 50px 20px rgba(0,255,180,0.8), inset 0 0 60px 25px rgba(150,255,220,0.6); } }

        /* HUD Styles */
        .hud { position: fixed; top: 20px; left: 20px; color: #00f0ff; text-shadow: 0 0 8px #00f0ff; z-index: 100; }
        .menu-button { position: fixed; top: 20px; right: 20px; z-index: 100; }
      `}</style>

      <div className="pirates-cove-bg">
        <div className="seabed"></div>
        <div className="ruins" data-ai-hint="underwater ruins"></div>
        <div className="treasure-chest" data-ai-hint="treasure chest underwater"></div>

        <AlienCharacter />
        <Fish playerNum={1} />
        <Fish playerNum={2} />

        <div className="hud">
          <Card className="bg-black/50 border-cyan-400/30">
            <CardHeader><CardTitle>Points: {points}</CardTitle></CardHeader>
          </Card>
        </div>

        <Button className="menu-button" onClick={() => setIsMenuOpen(true)}>Gear & Upgrades</Button>

        <AnimatePresence>
          {isMenuOpen && (
            <motion.div
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.9 }}
              className="fixed inset-0 bg-black/80 flex items-center justify-center z-200"
            >
              <Card className="w-full max-w-md">
                <CardHeader>
                  <CardTitle>Gear & Upgrades</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <h3 className="font-bold">Current Gear:</h3>
                    <p className="text-muted-foreground">Standard Gills | Basic Fins</p>
                  </div>
                  <div>
                    <h3 className="font-bold">Upgrades:</h3>
                    <p className="text-muted-foreground">Quantum Coins Required: {points * 10}</p>
                    <Button disabled>Upgrade Fins (1000 Coins)</Button>
                  </div>
                   <Button onClick={() => setIsMenuOpen(false)}>Close</Button>
                </CardContent>
              </Card>
            </motion.div>
          )}
        </AnimatePresence>

      </div>
    </>
  );
}


======================================================================
File: /src/app/gaming-hub/quantum-beast-combat/page.tsx
======================================================================

'use client';
import React, { useEffect, useRef, useState } from 'react';

// Character data
const CHARACTERS = [
  { 
    id: 'dean',
    name: 'DEAN', 
    title: 'Lion Warrior',
    color: '#ff6600', 
    abilities: { special: 'Quantum Roar', damage: 25, energyCost: 30, effect: 'orange' }
  },
  { 
    id: 'velda',
    name: 'VELDA', 
    title: 'Lioness Mystic',
    color: '#9900ff', 
    abilities: { special: 'Mystic Strike', damage: 20, energyCost: 25, effect: 'purple' }
  },
  {
    id: 'ryker',
    name: 'RYKER',
    title: 'Wolf Ronin',
    color: '#c0c0c0',
    abilities: { special: 'Lunar Slash', damage: 18, energyCost: 20, effect: '#e0e0e0' }
  },
  {
    id: 'seraphina',
    name: 'SERAPHINA',
    title: 'Eagle Shaman',
    color: '#ffd700',
    abilities: { special: 'Celestial Dive', damage: 22, energyCost: 28, effect: '#ffffcc' }
  },
];

export default function QuantumBeastCombatPage() {
    const canvasRef = useRef<HTMLCanvasElement>(null);
    const [gameState, setGameState] = useState<'mode-select' | 'char-select' | 'fighting' | 'round-over' | 'game-over'>('mode-select');
    
    // Game Mode State
    const [gameMode, setGameMode] = useState<1 | 2>(1);

    // Character selection state
    const [p1Selection, setP1Selection] = useState(0);
    const [p2Selection, setP2Selection] = useState(1);
    const [p1Ready, setP1Ready] = useState(false);
    const [p2Ready, setP2Ready] = useState(false);

    // In-game state
    const [round, setRound] = useState(1);
    const [p1Wins, setP1Wins] = useState(0);
    const [p2Wins, setP2Wins] = useState(0);
    const [roundWinner, setRoundWinner] = useState<string | null>(null);
    const [matchWinner, setMatchWinner] = useState<string | null>(null);

    const gameInstance = useRef<any>(null);

    useEffect(() => {
        if (gameState === 'fighting' && !gameInstance.current) {
            const canvas = canvasRef.current;
            if (!canvas) return;

            const player1Char = CHARACTERS[p1Selection];
            const player2Char = CHARACTERS[p2Selection];
            
            const isP2Ai = gameMode === 1;

            gameInstance.current = new Game(canvas, player1Char, player2Char, isP2Ai, (winnerName) => {
                setRoundWinner(winnerName);
                if (winnerName === player1Char.name) {
                    setP1Wins(w => w + 1);
                } else {
                    setP2Wins(w => w + 1);
                }
                setGameState('round-over');
                if (gameInstance.current) {
                    gameInstance.current.destroy();
                    gameInstance.current = null;
                }
            });

            return () => {
                if (gameInstance.current) {
                    gameInstance.current.destroy();
                    gameInstance.current = null;
                }
            };
        }
    }, [gameState, p1Selection, p2Selection, gameMode]);

    useEffect(() => {
        if (p1Wins >= 2) {
             setMatchWinner(CHARACTERS[p1Selection].name);
             setGameState('game-over');
        } else if (p2Wins >= 2) {
            setMatchWinner(CHARACTERS[p2Selection].name);
            setGameState('game-over');
        }
    }, [p1Wins, p2Wins, p1Selection, p2Selection]);

    useEffect(() => {
        let timeoutId: NodeJS.Timeout;
        if (gameState === 'round-over') {
            timeoutId = setTimeout(() => {
                setRound(r => r + 1);
                setGameState('fighting');
            }, 3000);
        }
        return () => clearTimeout(timeoutId);
    }, [gameState]);


    // Input Handling
    useEffect(() => {
        if (gameState !== 'mode-select' && gameState !== 'char-select') return;

        const handleInput = () => {
            const gp1 = navigator.getGamepads()[0];
            if (!gp1) return;

            if (gameState === 'mode-select') {
                if (gp1.axes[1] < -0.5) setGameMode(1);
                if (gp1.axes[1] > 0.5) setGameMode(2);
                if (gp1.buttons[0].pressed) setGameState('char-select');
            }
            else if (gameState === 'char-select') {
                const p1Axis = gp1.axes[0];
                if (p1Axis < -0.5) setP1Selection(s => Math.max(0, s - 1));
                if (p1Axis > 0.5) setP1Selection(s => Math.min(CHARACTERS.length - 1, s + 1));
                if (gp1.buttons[0].pressed) setP1Ready(true);
                if (gp1.buttons[1].pressed) setP1Ready(false);
                
                if (gameMode === 2) {
                    const gp2 = navigator.getGamepads()[1];
                    if (gp2) {
                        const p2Axis = gp2.axes[0];
                        if (p2Axis < -0.5) setP2Selection(s => Math.max(0, s - 1));
                        if (p2Axis > 0.5) setP2Selection(s => Math.min(CHARACTERS.length - 1, s + 1));
                        if (gp2.buttons[0].pressed) setP2Ready(true);
                        if (gp2.buttons[1].pressed) setP2Ready(false);
                    }
                } else {
                    // In 1P mode, AI is always ready
                    setP2Ready(true);
                }
            }
        };

        const intervalId = setInterval(handleInput, 150);
        return () => clearInterval(intervalId);
    }, [gameState, gameMode]);

    useEffect(() => {
        if (gameState === 'char-select' && p1Ready && p2Ready) {
            setGameState('fighting');
        }
    }, [p1Ready, p2Ready, gameState]);

     const restartGame = () => {
        setGameState('mode-select');
        setP1Selection(0);
        setP2Selection(1);
        setP1Ready(false);
        setP2Ready(false);
        setRound(1);
        setP1Wins(0);
        setP2Wins(0);
        setRoundWinner(null);
        setMatchWinner(null);
    };

    return (
        <div style={{ margin: 0, overflow: 'hidden', background: 'linear-gradient(45deg, #1a0033, #330066)', color: 'white', fontFamily: "'Arial Black', sans-serif", height: 'calc(100vh - 6rem)' }}>
             <style jsx global>{` body { margin: 0; overflow: hidden; } `}</style>

            {gameState === 'mode-select' && (
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
                     <h1 style={{fontSize: '4rem', color: '#00ffff', textShadow: '2px 2px 8px #00ffff'}}>SELECT GAME MODE</h1>
                     <div style={{marginTop: '40px', fontSize: '2rem'}}>
                        <div style={{padding: '20px', border: gameMode === 1 ? '4px solid lime' : '4px solid transparent'}}>{'1 PLAYER (VS CPU)'}</div>
                        <div style={{padding: '20px', border: gameMode === 2 ? '4px solid lime' : '4px solid transparent'}}>{'2 PLAYER (LOCAL)'}</div>
                     </div>
                     <p style={{marginTop: '30px', fontSize: '1rem'}}>Use Left Stick to select. Press A to confirm.</p>
                 </div>
            )}

            {gameState === 'char-select' && (
                <div id="char-select-screen" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
                    <h1 style={{fontSize: '4rem', color: '#00ffff', textShadow: '2px 2px 8px #00ffff'}}>CHOOSE YOUR FIGHTER</h1>
                    <div style={{ display: 'flex', gap: '50px', marginTop: '40px' }}>
                        {/* Player 1 Selection */}
                        <div style={{ border: `4px solid ${p1Ready ? 'lime' : '#ff6600'}`, padding: '20px', borderRadius: '15px', background: 'rgba(0,0,0,0.5)', textAlign: 'center' }}>
                            <h2 style={{color: '#ff6600'}}>PLAYER 1</h2>
                            <div style={{width: '200px', height: '200px', background: CHARACTERS[p1Selection].color, margin: '20px 0'}}></div>
                            <h3>{CHARACTERS[p1Selection].name}</h3>
                            <p>{CHARACTERS[p1Selection].title}</p>
                            <p style={{marginTop: '20px', color: p1Ready ? 'lime' : '#fff'}}>{p1Ready ? 'READY!' : 'Press A to Ready'}</p>
                        </div>
                        {/* Player 2 Selection */}
                        <div style={{ border: `4px solid ${p2Ready ? 'lime' : '#9900ff'}`, padding: '20px', borderRadius: '15px', background: 'rgba(0,0,0,0.5)', textAlign: 'center' }}>
                             <h2 style={{color: '#9900ff'}}>{gameMode === 1 ? 'CPU' : 'PLAYER 2'}</h2>
                            <div style={{width: '200px', height: '200px', background: CHARACTERS[p2Selection].color, margin: '20px 0'}}></div>
                            <h3>{CHARACTERS[p2Selection].name}</h3>
                            <p>{CHARACTERS[p2Selection].title}</p>
                            <p style={{marginTop: '20px', color: p2Ready ? 'lime' : '#fff'}}>{p2Ready ? 'READY!' : 'Press A to Ready'}</p>
                        </div>
                    </div>
                     <p style={{marginTop: '30px', fontSize: '1rem'}}>Use Left Stick to select character. Press B to un-ready.</p>
                </div>
            )}
            
            {(gameState === 'fighting' || gameState === 'round-over' || gameState === 'game-over') && (
                 <div style={{position: 'relative', height: '100%', width: '100%'}}>
                     <div id="ui" style={{ position: 'absolute', top: '10px', left: '50%', transform: 'translateX(-50%)', textAlign: 'center', fontSize: '18px', textShadow: '2px 2px 4px #000' }}>
                        <div>ROUND {round}</div>
                     </div>
                     <div id="healthBars" style={{ position: 'absolute', top: '20px', width: '100%', display: 'flex', justifyContent: 'space-between', padding: '0 50px', boxSizing: 'border-box' }}>
                         <div>
                            <div className="playerName" style={{ textAlign: 'left', marginBottom: '5px', fontWeight: 'bold', textShadow: '2px 2px 4px #000' }}>{CHARACTERS[p1Selection].name}</div>
                             <div className="healthBar" style={{ width: '300px', height: '30px', background: '#333', border: '2px solid #fff', borderRadius: '15px', overflow: 'hidden' }}>
                                 <div id="player1-health" className="healthFill" style={{ height: '100%', transition: 'width 0.3s ease', background: `linear-gradient(90deg, ${CHARACTERS[p1Selection].color}, ${CHARACTERS[p1Selection].abilities.effect})`, width: '100%', borderRadius: '13px' }}></div>
                             </div>
                             <div style={{display: 'flex', justifyContent: 'flex-start', marginTop: '5px'}}>
                                {[...Array(p1Wins)].map((_, i) => <div key={i} style={{width: '20px', height: '20px', background: 'gold', borderRadius: '50%', margin: '0 5px'}}></div>)}
                             </div>
                         </div>
                         <div>
                            <div className="playerName" style={{ textAlign: 'right', marginBottom: '5px', fontWeight: 'bold', textShadow: '2px 2px 4px #000' }}>{CHARACTERS[p2Selection].name}</div>
                             <div className="healthBar" style={{ width: '300px', height: '30px', background: '#333', border: '2px solid #fff', borderRadius: '15px', overflow: 'hidden', direction: 'rtl' }}>
                                <div id="player2-health" className="healthFill" style={{ height: '100%', transition: 'width 0.3s ease', background: `linear-gradient(90deg, ${CHARACTERS[p2Selection].abilities.effect}, ${CHARACTERS[p2Selection].color})`, width: '100%', borderRadius: '13px' }}></div>
                             </div>
                             <div style={{display: 'flex', justifyContent: 'flex-end', marginTop: '5px'}}>
                                {[...Array(p2Wins)].map((_, i) => <div key={i} style={{width: '20px', height: '20px', background: 'gold', borderRadius: '50%', margin: '0 5px'}}></div>)}
                            </div>
                         </div>
                     </div>
                     <canvas ref={canvasRef} id="gameCanvas" style={{display: 'block', background: 'linear-gradient(180deg, #001122, #003366)', border: '3px solid #00ffff', width: '100%', height: '100%'}}></canvas>

                     {gameState === 'round-over' && (
                        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
                            <h2 style={{fontSize: '5rem', color: '#00ffff'}}>{roundWinner} WINS ROUND {round}</h2>
                        </div>
                     )}
                     {gameState === 'game-over' && (
                         <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.7)', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
                            <h2 style={{fontSize: '6rem', color: 'gold', textShadow: '3px 3px 10px gold'}}>{matchWinner} WINS!</h2>
                            <button onClick={restartGame} style={{marginTop: '40px', padding: '20px 40px', fontSize: '2rem', background: '#00ffff', color: 'black', border: 'none', borderRadius: '10px', cursor: 'pointer'}}>Play Again</button>
                        </div>
                     )}
                 </div>
            )}
        </div>
    );
}


class Game {
    canvas: HTMLCanvasElement;
    ctx: CanvasRenderingContext2D;
    player1: Player;
    player2: Player;
    particles: Particle[] = [];
    combatEffects: CombatEffect[] = [];
    animationFrameId: number = 0;
    onRoundEnd: (winnerName: string) => void;

    constructor(canvas: HTMLCanvasElement, p1Char: any, p2Char: any, isP2Ai: boolean, onRoundEnd: (winnerName: string) => void) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d')!;
        this.canvas.width = this.canvas.clientWidth;
        this.canvas.height = this.canvas.clientHeight;
        this.onRoundEnd = onRoundEnd;

        this.player1 = new Player(p1Char, this.canvas.width / 4, this.canvas.height - 180, { gamepadIndex: 0 });
        this.player2 = new Player(p2Char, this.canvas.width * 3 / 4 - 60, this.canvas.height - 180, { gamepadIndex: 1, isAi: isP2Ai });
        
        window.addEventListener('resize', this.handleResize);
        this.gameLoop();
    }

    handleResize = () => {
        this.canvas.width = this.canvas.clientWidth;
        this.canvas.height = this.canvas.clientHeight;
    };

    update = () => {
        this.player1.update(this.player2, this.particles, this.combatEffects);
        this.player2.update(this.player1, this.particles, this.combatEffects);

        this.particles = this.particles.filter(p => p.life > 0);
        this.particles.forEach(p => p.update());
        
        this.combatEffects = this.combatEffects.filter(e => e.life > 0);
        this.combatEffects.forEach(e => e.update());

        if (this.player1.health <= 0) {
            this.onRoundEnd(this.player2.name);
        } else if (this.player2.health <= 0) {
            this.onRoundEnd(this.player1.name);
        }
    }

    draw = () => {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.player1.draw(this.ctx);
        this.player2.draw(this.ctx);
        this.particles.forEach(p => p.draw(this.ctx));
        this.combatEffects.forEach(e => e.draw(this.ctx));
    }

    gameLoop = () => {
        this.update();
        this.draw();
        this.animationFrameId = requestAnimationFrame(this.gameLoop);
    }
    
    destroy() {
        cancelAnimationFrame(this.animationFrameId);
        window.removeEventListener('resize', this.handleResize);
    }
}

class Particle {
    x: number; y: number; color: string; velocity: { x: number; y: number; }; life: number; decay: number; size: number;
    constructor(x: number, y: number, color: string, velocity: { x: number; y: number; }) {
        this.x = x; this.y = y; this.color = color; this.velocity = velocity; this.life = 1.0; this.decay = 0.02; this.size = Math.random() * 4 + 2;
    }
    update() { this.x += this.velocity.x; this.y += this.velocity.y; this.life -= this.decay; this.size *= 0.98; }
    draw(ctx: CanvasRenderingContext2D) {
        ctx.save(); ctx.globalAlpha = this.life; ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.restore();
    }
}

class CombatEffect {
    x: number; y: number; type: string; color: string; life: number; size: number; maxSize: number;
    constructor(x: number, y: number, type: string, color: string) {
        this.x = x; this.y = y; this.type = type; this.color = color; this.life = 1.0; this.size = 0; this.maxSize = type === 'hit' ? 30 : 50;
    }
    update() { this.life -= 0.05; this.size = this.maxSize * (1 - this.life); }
    draw(ctx: CanvasRenderingContext2D) {
        ctx.save(); ctx.globalAlpha = this.life; ctx.strokeStyle = this.color; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.stroke(); ctx.restore();
    }
}

class Player {
    name: string; color: string; x: number; y: number; width: number; height: number; health: number; maxHealth: number; energy: number; maxEnergy: number; controls: { gamepadIndex: number; isAi?: boolean };
    state: string; animFrame: number; animTimer: number; facing: number; isAttacking: boolean; isBlocking: boolean; attackCooldown: number; specialCooldown: number; velocity: { x: number; y: number; }; onGround: boolean;
    abilities: { special: string; damage: number; energyCost: number; effect: string; };
    characterId: string;
    aiState: string;
    aiTimer: number;

    constructor(character: any, x: number, y: number, controls: { gamepadIndex: number; isAi?: boolean }) {
        this.name = character.name;
        this.color = character.color;
        this.characterId = character.id;
        this.x = x; this.y = y; this.width = 60; this.height = 120; this.health = 100; this.maxHealth = 100; this.energy = 100; this.maxEnergy = 100;
        this.controls = controls; this.state = 'idle'; this.animFrame = 0; this.animTimer = 0; this.facing = this.name === 'DEAN' ? 1 : -1; this.isAttacking = false; this.isBlocking = false;
        this.attackCooldown = 0; this.specialCooldown = 0; this.velocity = { x: 0, y: 0 }; this.onGround = true; this.abilities = character.abilities;
        
        this.aiState = 'idle';
        this.aiTimer = 0;
    }

    update(opponent: Player, particles: Particle[], combatEffects: CombatEffect[]) {
        this.animTimer++;
        if (this.controls.isAi) {
            this.aiController(opponent);
        } else {
            this.handleInput(opponent, particles, combatEffects);
        }
        this.updatePhysics();
        this.updateCooldowns();
        this.updateAnimation();
        this.regenerateEnergy();
    }
    
    aiController(opponent: Player) {
        this.aiTimer--;
        const distance = Math.abs(this.x - opponent.x);

        if (this.aiTimer <= 0) {
            const action = Math.random();
            if (distance > 150) { // Far away
                this.aiState = 'approaching';
                this.aiTimer = 60; // approach for 1 second
            } else if (distance < 70) { // Close range
                 if (action < 0.6) {
                    this.aiState = 'attacking';
                } else if (action < 0.8) {
                    this.aiState = 'blocking';
                    this.aiTimer = 30; // block for 0.5s
                } else {
                    this.aiState = 'retreating';
                    this.aiTimer = 40;
                }
            } else { // Mid range
                if (action < 0.4) {
                    this.aiState = 'approaching';
                    this.aiTimer = 30;
                } else if (action < 0.7 && this.energy >= this.abilities.energyCost) {
                    this.aiState = 'special';
                } else {
                    this.aiState = 'idle';
                    this.aiTimer = 20;
                }
            }
        }
        
        // Execute state
        this.isBlocking = false;
        switch(this.aiState) {
            case 'approaching':
                this.velocity.x = (opponent.x > this.x ? 1 : -1) * 3;
                this.facing = Math.sign(this.velocity.x);
                this.state = 'walking';
                break;
            case 'retreating':
                this.velocity.x = (opponent.x > this.x ? -1 : 1) * 2;
                 this.facing = Math.sign(this.velocity.x);
                this.state = 'walking';
                break;
            case 'attacking':
                if (this.attackCooldown <= 0) {
                   this.attack(opponent, [], []); // AI attack doesn't create particles directly
                }
                this.aiState = 'idle';
                break;
            case 'special':
                 if (this.specialCooldown <= 0 && this.energy >= this.abilities.energyCost) {
                    this.specialAttack(opponent, [], []);
                 }
                 this.aiState = 'idle';
                 break;
            case 'blocking':
                this.isBlocking = true;
                this.velocity.x = 0;
                this.state = 'idle';
                break;
            case 'idle':
            default:
                this.velocity.x *= 0.8;
                this.state = 'idle';
                break;
        }
    }


    handleInput(opponent: Player, particles: Particle[], combatEffects: CombatEffect[]) {
        const gp = navigator.getGamepads()[this.controls.gamepadIndex];
        if (!gp) return;
        const moveX = gp.axes[0];
        if (Math.abs(moveX) > 0.2) { this.velocity.x = moveX * 4; this.facing = moveX > 0 ? 1 : -1; this.state = 'walking'; } 
        else { this.velocity.x *= 0.8; if (Math.abs(this.velocity.x) < 0.1) { this.velocity.x = 0; if (this.state === 'walking') this.state = 'idle'; }}
        if (gp.buttons[0].pressed && this.attackCooldown <= 0) this.attack(opponent, particles, combatEffects);
        if (gp.buttons[2].pressed && this.specialCooldown <= 0 && this.energy >= this.abilities.energyCost) this.specialAttack(opponent, particles, combatEffects);
        this.isBlocking = gp.buttons[3].pressed;
    }

    updatePhysics() { this.x += this.velocity.x; if (this.x < 0) this.x = 0; const canvas = document.getElementById('gameCanvas') as HTMLCanvasElement; if(canvas && this.x > canvas.width - this.width) this.x = canvas.width - this.width; }
    updateCooldowns() { if (this.attackCooldown > 0) this.attackCooldown--; if (this.specialCooldown > 0) this.specialCooldown--; }
    updateAnimation() { if (this.animTimer % 8 === 0) this.animFrame = (this.animFrame + 1) % 4; }
    regenerateEnergy() { if (this.energy < this.maxEnergy) this.energy += 0.2; }

    attack(opponent: Player, particles: Particle[], combatEffects: CombatEffect[]) {
        this.isAttacking = true; this.attackCooldown = 20; this.state = 'attacking';
        const distance = Math.abs(this.x - opponent.x);
        if (distance < 80) {
            const damage = opponent.isBlocking ? 5 : 15;
            opponent.takeDamage(damage);
            combatEffects.push(new CombatEffect(opponent.x + opponent.width / 2, opponent.y + opponent.height / 2, 'hit', this.color));
            this.createHitParticles(opponent.x + opponent.width / 2, opponent.y + opponent.height / 2, particles);
        }
        setTimeout(() => { this.isAttacking = false; if (this.state === 'attacking') this.state = 'idle'; }, 300);
    }

    specialAttack(opponent: Player, particles: Particle[], combatEffects: CombatEffect[]) {
        this.energy -= this.abilities.energyCost; this.specialCooldown = 60; this.state = 'special';
        const distance = Math.abs(this.x - opponent.x);
        if (distance < 120) {
            const damage = opponent.isBlocking ? 10 : this.abilities.damage;
            opponent.takeDamage(damage);
            combatEffects.push(new CombatEffect(opponent.x + opponent.width / 2, opponent.y + opponent.height / 2, 'special', this.abilities.effect));
            this.createSpecialParticles(particles);
        }
        setTimeout(() => { if (this.state === 'special') this.state = 'idle'; }, 500);
    }

    takeDamage(amount: number) {
        this.health -= amount; if (this.health < 0) this.health = 0;
        const healthBarId = this.controls.gamepadIndex === 0 ? 'player1-health' : 'player2-health';
        const healthBar = document.getElementById(healthBarId);
        if (healthBar) healthBar.style.width = (this.health / this.maxHealth * 100) + '%';
    }

    createHitParticles(x: number, y: number, particles: Particle[]) {
        for (let i = 0; i < 8; i++) particles.push(new Particle(x, y, this.color, { x: (Math.random() - 0.5) * 8, y: (Math.random() - 0.5) * 8 }));
    }
    createSpecialParticles(particles: Particle[]) {
        for (let i = 0; i < 15; i++) particles.push(new Particle(this.x + this.width / 2, this.y + this.height / 2, this.abilities.effect, { x: (Math.random() - 0.5) * 12, y: (Math.random() - 0.5) * 12 }));
    }

    draw(ctx: CanvasRenderingContext2D) {
        ctx.save();
        if (this.facing < 0) { ctx.scale(-1, 1); ctx.translate(-this.x - this.width, 0); } else { ctx.translate(this.x, 0); }
        this.drawCharacter(ctx);
        ctx.restore();
        if (this.isBlocking) { ctx.save(); ctx.globalAlpha = 0.3; ctx.fillStyle = '#00ffff'; ctx.fillRect(this.x - 5, this.y - 5, this.width + 10, this.height + 10); ctx.restore(); }
        this.drawEnergyBar(ctx);
    }

    drawCharacter(ctx: CanvasRenderingContext2D) {
        ctx.fillStyle = this.color;
        // A more detailed "realistic" character sprite
        switch(this.characterId) {
            case 'dean': // Lion
                // Body
                ctx.fillRect(10, this.y + 20, this.width - 20, this.height - 40);
                // Head
                ctx.fillStyle = '#D4A26A';
                ctx.beginPath();
                ctx.arc(this.width / 2, this.y + 20, 25, 0, Math.PI * 2);
                ctx.fill();
                // Mane
                ctx.fillStyle = this.color;
                for(let i = 0; i < 8; i++) {
                    const angle = (i/8) * Math.PI*2;
                    ctx.beginPath();
                    ctx.arc(this.width/2 + Math.cos(angle) * 25, this.y + 20 + Math.sin(angle) * 25, 10, 0, Math.PI * 2);
                    ctx.fill();
                }
                break;
            case 'velda': // Lioness
                 // Body
                ctx.fillStyle = this.color;
                ctx.fillRect(15, this.y + 20, this.width - 30, this.height - 30);
                // Head
                ctx.fillStyle = '#E6CBA8';
                 ctx.beginPath();
                ctx.arc(this.width / 2, this.y + 20, 20, 0, Math.PI * 2);
                ctx.fill();
                 // Ears
                ctx.beginPath();
                ctx.arc(this.width / 2 - 15, this.y, 8, 0, Math.PI * 2);
                ctx.arc(this.width / 2 + 15, this.y, 8, 0, Math.PI * 2);
                ctx.fill();
                break;
            case 'ryker': // Wolf
                // Body
                ctx.fillStyle = '#A9A9A9';
                ctx.fillRect(20, this.y + 10, this.width - 40, this.height - 10);
                // Head
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.moveTo(this.width / 2 - 20, this.y + 20);
                ctx.lineTo(this.width / 2 + 20, this.y + 20);
                ctx.lineTo(this.width / 2, this.y - 10);
                ctx.closePath();
                ctx.fill();
                break;
            case 'seraphina': // Eagle
                 // Body
                ctx.fillStyle = '#A0522D';
                ctx.fillRect(10, this.y + 30, this.width - 20, this.height - 60);
                // Wings (simple representation)
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.moveTo(0, this.y + 30);
                ctx.lineTo(this.width, this.y + 30);
                ctx.lineTo(this.width / 2, this.y + 80);
                ctx.closePath();
                ctx.fill();
                 // Head
                ctx.fillStyle = '#FFFFFF';
                ctx.beginPath();
                ctx.arc(this.width/2, this.y + 15, 15, 0, Math.PI*2);
                ctx.fill();
                break;
            default:
                ctx.fillRect(0, this.y, this.width, this.height);
        }
        
        // Eyes (common for all)
        ctx.fillStyle = 'white';
        ctx.beginPath();
        ctx.arc(this.width/2 - 8, this.y + 15, 4, 0, Math.PI * 2);
        ctx.arc(this.width/2 + 8, this.y + 15, 4, 0, Math.PI * 2);
        ctx.fill();
        ctx.fillStyle = 'black';
        ctx.beginPath();
        ctx.arc(this.width/2 - 8, this.y + 15, 2, 0, Math.PI * 2);
        ctx.arc(this.width/2 + 8, this.y + 15, 2, 0, Math.PI * 2);
        ctx.fill();
    }

    drawEnergyBar(ctx: CanvasRenderingContext2D) {
        const barWidth = 60; const barHeight = 6; const x = this.x + (this.width - barWidth) / 2; const y = this.y + this.height + 10;
        ctx.fillStyle = '#333'; ctx.fillRect(x, y, barWidth, barHeight);
        ctx.fillStyle = this.abilities.effect; ctx.fillRect(x, y, (this.energy / this.maxEnergy) * barWidth, barHeight);
        ctx.strokeStyle = '#fff'; ctx.lineWidth = 1; ctx.strokeRect(x, y, barWidth, barHeight);
    }
}

    

======================================================================
File: /src/app/gaming-hub/quantum-cannon-showdown/page.tsx
======================================================================
'use client';

import React, { useEffect, useRef, useState } from 'react';
import * as THREE from 'three';
import { Button } from '@/components/ui/button';

export default function QuantumCannonShowdownPage() {
  const mountRef = useRef<HTMLDivElement>(null);
  const [score, setScore] = useState(0);
  const [health, setHealth] = useState(100);
  const [isGameOver, setIsGameOver] = useState(false);

  const gameInstance = useRef<any>({
    ship: null,
    stars: null,
    bullets: [],
    enemies: [],
    keys: {},
    isGameOver: false,
    score: 0,
    health: 100,
    animationId: 0,
    enemyInterval: null,
  });

  const resetGame = () => {
    const game = gameInstance.current;
    if (game.ship) {
      game.ship.position.set(0, 0, 0);
      game.ship.rotation.set(Math.PI / 2, 0, 0);
    }
    
    game.enemies.forEach((e: THREE.Mesh) => game.scene?.remove(e));
    game.bullets.forEach((b: THREE.Mesh) => game.scene?.remove(b));
    game.enemies = [];
    game.bullets = [];
    
    setScore(0);
    game.score = 0;
    setHealth(100);
    game.health = 100;
    setIsGameOver(false);
    game.isGameOver = false;

    if (game.enemyInterval) clearInterval(game.enemyInterval);
    game.enemyInterval = setInterval(createEnemy, 2000);

    if (game.animationId) cancelAnimationFrame(game.animationId);
    animate();
  };

  const createEnemy = () => {
    const game = gameInstance.current;
    if (!game.scene || game.isGameOver) return;
    const enemyGeometry = new THREE.SphereGeometry(0.5, 8, 8);
    const enemyMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
    const enemy = new THREE.Mesh(enemyGeometry, enemyMaterial);
    enemy.position.set(
      (Math.random() - 0.5) * 20,
      (Math.random() - 0.5) * 10,
      -Math.random() * 40 - 10
    );
    game.enemies.push(enemy);
    game.scene.add(enemy);
  };
  
  const shoot = () => {
      const game = gameInstance.current;
      if (!game.ship || game.isGameOver) return;
      const bulletGeometry = new THREE.SphereGeometry(0.1, 8, 8);
      const bulletMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0xff0000 });
      const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
      
      bullet.position.copy(game.ship.position);
      
      const direction = new THREE.Vector3();
      game.ship.getWorldDirection(direction);
      bullet.userData.velocity = direction.multiplyScalar(-1.5);
      
      game.bullets.push(bullet);
      game.scene.add(bullet);
  };

  const animate = () => {
    const game = gameInstance.current;
    if (game.isGameOver) return;

    // Controls
    const { ship, keys, speed, rotationSpeed } = game;
    if (ship) {
      if (keys.w) ship.position.z -= speed;
      if (keys.s) ship.position.z += speed;
      if (keys.a) ship.position.x -= speed;
      if (keys.d) ship.position.x += speed;
      if (keys.q) ship.position.y += speed;
      if (keys.e) ship.position.y -= speed;

      if (keys.arrowup) ship.rotation.x -= rotationSpeed;
      if (keys.arrowdown) ship.rotation.x += rotationSpeed;
      if (keys.arrowleft) ship.rotation.y += rotationSpeed;
      if (keys.arrowright) ship.rotation.y -= rotationSpeed;
    }

    // Bullets
    game.bullets.forEach((bullet: THREE.Mesh, index: number) => {
      bullet.position.add(bullet.userData.velocity);
      if (bullet.position.z < -50 || bullet.position.length() > 100) {
        game.scene.remove(bullet);
        game.bullets.splice(index, 1);
      }
    });

    // Enemies
    game.enemies.forEach((enemy: THREE.Mesh, enemyIndex: number) => {
      enemy.position.z += 0.1;
      if (enemy.position.z > 10) {
        game.scene.remove(enemy);
        game.enemies.splice(enemyIndex, 1);
        game.health -= 10;
        setHealth(h => h - 10);
      }

      // Collision
      game.bullets.forEach((bullet: THREE.Mesh, bulletIndex: number) => {
        if (bullet.position.distanceTo(enemy.position) < 1) {
          game.scene.remove(bullet);
          game.bullets.splice(bulletIndex, 1);
          game.scene.remove(enemy);
          game.enemies.splice(enemyIndex, 1);
          game.score += 10;
          setScore(s => s + 10);
        }
      });
      
       if (ship && enemy.position.distanceTo(ship.position) < 1.5) {
          game.scene.remove(enemy);
          game.enemies.splice(enemyIndex, 1);
          game.health -= 25;
          setHealth(h => h - 25);
       }
    });

    // Stars
    if (game.stars) {
        const positions = game.stars.geometry.attributes.position.array;
        for (let i = 0; i < positions.length; i += 3) {
            positions[i + 2] += 0.5;
            if (positions[i + 2] > 100) {
                positions[i + 2] = -1000;
            }
        }
        game.stars.geometry.attributes.position.needsUpdate = true;
    }
    
    if (game.health <= 0) {
        game.isGameOver = true;
        setIsGameOver(true);
        if (game.enemyInterval) clearInterval(game.enemyInterval);
    }

    game.renderer.render(game.scene, game.camera);
    game.animationId = requestAnimationFrame(animate);
  };
  

  useEffect(() => {
    if (!mountRef.current || typeof window === 'undefined') return;
    
    const game = gameInstance.current;
    
    game.scene = new THREE.Scene();
    game.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    game.renderer = new THREE.WebGLRenderer({ antialias: true });
    game.renderer.setSize(window.innerWidth, window.innerHeight);
    mountRef.current.appendChild(game.renderer.domElement);

    const starsGeometry = new THREE.BufferGeometry();
    const starPositions = [];
    for(let i=0; i<10000; i++) {
        starPositions.push((Math.random() - 0.5) * 2000, (Math.random() - 0.5) * 2000, -Math.random() * 2000);
    }
    starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starPositions, 3));
    const starsMaterial = new THREE.PointsMaterial({ color: 0x00ffff, size: 0.7 });
    game.stars = new THREE.Points(starsGeometry, starsMaterial);
    game.scene.add(game.stars);

    const shipGeometry = new THREE.ConeGeometry(1, 4, 8);
    const shipMaterial = new THREE.MeshStandardMaterial({ color: 0x00ffff, emissive: 0x00ffff, flatShading:true });
    game.ship = new THREE.Mesh(shipGeometry, shipMaterial);
    game.ship.rotation.x = Math.PI / 2;
    game.scene.add(game.ship);

    const light = new THREE.PointLight(0x00ffff, 2, 100);
    light.position.set(0, 5, 15);
    game.scene.add(light);
    const ambientLight = new THREE.AmbientLight(0x404040, 2);
    scene.add(ambientLight);
    
    game.camera.position.z = 12;
    game.camera.position.y = 3;
    game.camera.lookAt(game.ship.position);

    game.speed = 0.2;
    game.rotationSpeed = 0.04;
    
    const handleKeyDown = (e: KeyboardEvent) => { 
        game.keys[e.key.toLowerCase()] = true; 
        if (e.code === 'Space') shoot();
    };
    const handleKeyUp = (e: KeyboardEvent) => { game.keys[e.key.toLowerCase()] = false; };
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);
    
    const handleResize = () => {
        if (!game.camera || !game.renderer) return;
        game.camera.aspect = window.innerWidth / window.innerHeight;
        game.camera.updateProjectionMatrix();
        game.renderer.setSize(window.innerWidth, window.innerHeight);
    };
    window.addEventListener('resize', handleResize);
    
    resetGame();

    return () => {
        window.removeEventListener('keydown', handleKeyDown);
        window.removeEventListener('keyup', handleKeyUp);
        window.removeEventListener('resize', handleResize);
        if (game.animationId) cancelAnimationFrame(game.animationId);
        if (game.enemyInterval) clearInterval(game.enemyInterval);
        if (game.renderer && mountRef.current?.contains(game.renderer.domElement)) {
            mountRef.current.removeChild(game.renderer.domElement);
        }
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="w-full h-[calc(100vh-6rem)] relative bg-black">
      <div ref={mountRef} className="w-full h-full" />
      <div className="absolute top-4 left-4 text-xl font-bold bg-black/50 p-3 rounded-lg text-cyan-300 font-code space-y-2">
        <div>Score: {score}</div>
        <div>Health: {health}</div>
      </div>
      {isGameOver && (
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center bg-black/70 p-8 rounded-xl backdrop-blur-sm border border-red-500">
          <h2 className="text-5xl font-bold text-red-500 [text-shadow:0_0_10px_theme(colors.red.500)]">GAME OVER</h2>
          <p className="text-white text-2xl mt-4">Final Score: {score}</p>
          <Button onClick={resetGame} className="mt-6" size="lg">
            Restart
          </Button>
        </div>
      )}
       <div className="absolute bottom-4 left-4 bg-black/50 p-3 rounded-lg text-cyan-300 font-code text-xs max-w-sm">
        <h3 className="font-bold text-sm mb-2">Controls</h3>
        <p><b>WASD:</b> Move Left/Right/Forward/Back</p>
        <p><b>Q/E:</b> Move Up/Down</p>
        <p><b>Arrows:</b> Pitch/Yaw</p>
        <p><b>Spacebar:</b> Shoot</p>
      </div>
       {health <= 20 && !isGameOver && (
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-4xl font-bold text-red-500 animate-pulse">
            WARNING: LOW HEALTH
         </div>
       )}
    </div>
  );
}


======================================================================
File: /src/app/gaming-hub/quantum-gaming-system/page.tsx
======================================================================

'use client';

import { useEffect } from 'react';

export default function QuantumGamingSystemPage() {
  useEffect(() => {
    // Highlight keys on physical keyboard press
    const handleKeyDown = (e: KeyboardEvent) => {
      const keyDiv = document.querySelector(`.keyboard .key[data-key="${e.code}"]`);
      if (keyDiv) {
        keyDiv.classList.add('pressed');
      }
    };

    const handleKeyUp = (e: KeyboardEvent) => {
      const keyDiv = document.querySelector(`.keyboard .key[data-key="${e.code}"]`);
      if (keyDiv) {
        keyDiv.classList.remove('pressed');
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);

    // Simulate dynamic readout updates
    function randomRange(min: number, max: number) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    const coreStatuses = ['Stable', 'Fluct', 'Optmz', 'Idle'];

    function updateReadouts() {
      const cpu = document.getElementById('cpu');
      if (cpu) cpu.textContent = randomRange(15, 60) + '%';
      
      const gpu = document.getElementById('gpu');
      if(gpu) gpu.textContent = randomRange(20, 75) + '%';

      const temp = document.getElementById('temp');
      if(temp) temp.textContent = randomRange(45, 65) + '°C';

      // Pick a random core status abbreviation
      const coreStatus = coreStatuses[Math.floor(Math.random() * coreStatuses.length)];
      const coreElem = document.getElementById('core');
      if (coreElem) {
        coreElem.textContent = coreStatus;
        // Update aria-label for accessibility
        coreElem.setAttribute('aria-label', `Quantum Core Status: ${coreStatus}`);
      }
    }

    // Update readouts every 3 seconds
    const interval = setInterval(updateReadouts, 3000);
    updateReadouts(); // initial call

    // Power button toggle
    const powerBtn = document.getElementById('powerBtn');
    let powerOn = true;

    const handlePowerClick = () => {
      powerOn = !powerOn;
      if (powerOn) {
        powerBtn?.classList.remove('off');
        powerBtn?.classList.add('on');
        powerBtn?.setAttribute('aria-pressed', 'true');
        powerBtn?.setAttribute('aria-label', 'Power button, currently on');
        powerBtn?.setAttribute('title', 'Power On/Off');
      } else {
        powerBtn?.classList.remove('on');
        powerBtn?.classList.add('off');
        powerBtn?.setAttribute('aria-pressed', 'false');
        powerBtn?.setAttribute('aria-label', 'Power button, currently off');
        powerBtn?.setAttribute('title', 'Power On/Off');
      }
    };

    powerBtn?.addEventListener('click', handlePowerClick);

    return () => {
        window.removeEventListener('keydown', handleKeyDown);
        window.removeEventListener('keyup', handleKeyUp);
        clearInterval(interval);
        powerBtn?.removeEventListener('click', handlePowerClick);
    }
  }, []);

  return (
    <>
      <style jsx global>{`
        @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

        /* Reset and base */
        * {
          box-sizing: border-box;
        }
        .qgs-body {
          margin: 0;
          background: linear-gradient(135deg, #0a0a0a, #121212);
          font-family: 'Orbitron', monospace;
          color: #00f0ff;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          min-height: 100vh;
          padding: 20px;
          user-select: none;
          flex-wrap: wrap;
          gap: 40px;
        }

        .quantum-computer {
          background: linear-gradient(145deg, #1a1f24, #0d1117);
          border-radius: 24px;
          width: 700px;
          max-width: 100%;
          padding: 40px 50px 50px;
          box-shadow:
            inset 0 0 20px #00ffff44,
            0 0 40px #00ffffaa;
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          outline: none;
          flex-shrink: 0;
        }

        .qgs-body h1 {
          margin: 0 0 30px;
          font-size: 2.4rem;
          color: #00ffff;
          text-shadow: 0 0 15px #00ffffaa;
          user-select: text;
        }

        /* Readouts container with grid */
        .readouts {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 30px 40px;
          width: 100%;
          margin-bottom: 50px;
        }

        .readout {
          background: #0f141a;
          border-radius: 16px;
          padding: 20px 15px;
          box-shadow: inset 0 0 15px #00ffff88;
          display: flex;
          flex-direction: column;
          align-items: center;
          transition: box-shadow 0.3s ease;
          cursor: default;
          position: relative;
          min-height: 110px;
          user-select: text;
        }
        .readout:hover,
        .readout:focus-within {
          box-shadow: inset 0 0 25px #00ffffcc;
          outline: none;
        }

        .readout h3 {
          margin: 0 0 12px;
          font-size: 1.3rem;
          color: #00f0ff;
          text-align: center;
          user-select: text;
        }

        .value {
          font-size: 2.4rem;
          letter-spacing: 2px;
          color: #00ffff;
          text-shadow: 0 0 8px #00ffffcc;
          min-height: 2.8rem;
          width: 100px;
          text-align: center;
          user-select: text;
        }

        /* Tooltip for core status */
        .tooltip {
          position: relative;
          display: inline-block;
          cursor: help;
        }
        .tooltip .tooltiptext {
          visibility: hidden;
          width: max-content;
          max-width: 180px;
          background-color: #00ffffcc;
          color: #001f1f;
          text-align: center;
          border-radius: 8px;
          padding: 6px 10px;
          position: absolute;
          z-index: 10;
          bottom: 125%;
          left: 50%;
          transform: translateX(-50%);
          opacity: 0;
          transition: opacity 0.3s;
          font-size: 0.9rem;
          user-select: none;
          pointer-events: none;
          box-shadow: 0 0 10px #00ffffaa;
          white-space: nowrap;
        }
        .tooltip:hover .tooltiptext,
        .tooltip:focus-within .tooltiptext {
          visibility: visible;
          opacity: 1;
          pointer-events: auto;
        }

        /* Quantum chip glowing */
        .quantum-chip {
          width: 120px;
          height: 120px;
          background: linear-gradient(145deg, #004c4c, #00ffff);
          border-radius: 24px;
          box-shadow: 0 0 25px #00ffff, inset 0 0 30px #0ff;
          margin-bottom: 50px;
          animation: pulseGlow 3s ease-in-out infinite;
          user-select: none;
        }

        @keyframes pulseGlow {
          0%, 100% { box-shadow: 0 0 25px #00ffff, inset 0 0 30px #0ff; }
          50% { box-shadow: 0 0 60px #00ffff, inset 0 0 90px #0ff; }
        }

        /* Oil cooling fan */
        .fan {
          position: absolute;
          bottom: 30px;
          right: 40px;
          width: 140px;
          height: 140px;
          border-radius: 50%;
          background: radial-gradient(circle, #1c1f22, #090b0d);
          box-shadow: inset 0 0 20px #00ffffaa;
          overflow: hidden;
          user-select: none;
        }

        .fan-blade {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 16px;
          height: 80px;
          background: linear-gradient(135deg, #00ffff, #004c4c);
          border-radius: 8px;
          transform-origin: 50% 90%;
          box-shadow: 0 0 10px #00ffffcc;
          animation: spin 4s linear infinite;
        }

        .blade1 { transform: translate(-50%, -50%) rotate(0deg); animation-delay: 0s; }
        .blade2 { transform: translate(-50%, -50%) rotate(90deg); animation-delay: -1s; }
        .blade3 { transform: translate(-50%, -50%) rotate(180deg); animation-delay: -2s; }
        .blade4 { transform: translate(-50%, -50%) rotate(270deg); animation-delay: -3s; }

        @keyframes spin {
          0% { transform: translate(-50%, -50%) rotate(0deg); }
          100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* Controls container */
        .controls {
          display: flex;
          gap: 25px;
          justify-content: center;
          width: 100%;
          max-width: 600px;
          margin-bottom: 20px;
        }

        /* Buttons */
        .qgs-body button {
          background-color: #00ffff;
          border: none;
          border-radius: 14px;
          padding: 14px 28px;
          font-size: 1.1rem;
          font-weight: 700;
          color: #001f1f;
          cursor: pointer;
          box-shadow: 0 0 20px #00ffffaa;
          transition: background-color 0.3s ease, box-shadow 0.3s ease;
          user-select: none;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          min-width: 130px;
          position: relative;
        }
        .qgs-body button:hover,
        .qgs-body button:focus {
          background-color: #00ccaa;
          box-shadow: 0 0 30px #00ccaaee;
          outline: none;
        }
        .qgs-body button:active {
          background-color: #009977;
          box-shadow: 0 0 15px #009977cc;
        }

        /* Power button special styles */
        #powerBtn {
          border-radius: 50%;
          width: 60px;
          height: 60px;
          padding: 0;
          font-size: 1.5rem;
          font-weight: 900;
          color: #001f1f;
          box-shadow: 0 0 25px #00ffffaa;
          transition: background-color 0.4s ease, box-shadow 0.4s ease;
          position: relative;
        }
        #powerBtn.on {
          background-color: #00ff99;
          box-shadow: 0 0 40px #00ff99ee;
          color: #003300;
        }
        #powerBtn.off {
          background-color: #ff0033;
          box-shadow: 0 0 40px #ff0033cc;
          color: #330000;
        }
        #powerBtn:focus-visible {
          outline: 3px solid #00ffcc;
          outline-offset: 3px;
        }

        /* Footer */
        .qgs-body footer {
          font-size: 0.9rem;
          color: #008080cc;
          text-align: center;
          user-select: none;
          margin-top: 10px;
          font-style: italic;
          width: 100%;
        }

        /* Quantum USB Flash Drive */
        .usb-drive {
          width: 120px;
          height: 60px;
          background: linear-gradient(135deg, #004c4c, #00ffff);
          border-radius: 16px 16px 8px 8px;
          box-shadow: 0 0 25px #00ffff, inset 0 0 30px #0ff;
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          user-select: none;
          cursor: pointer;
          transition: box-shadow 0.3s ease;
          margin-top: 20px;
        }
        .usb-drive:hover {
          box-shadow: 0 0 50px #00ffffee, inset 0 0 60px #0ff;
        }
        .usb-top {
          width: 60px;
          height: 20px;
          background: #001f1f;
          border-radius: 8px 8px 0 0;
          box-shadow: inset 0 0 8px #00ffffaa;
          margin-bottom: 6px;
          position: relative;
        }
        .usb-led {
          position: absolute;
          top: 6px;
          right: 8px;
          width: 8px;
          height: 8px;
          background: #00ff00;
          border-radius: 50%;
          box-shadow: 0 0 8px #00ff00;
          animation: blinkLed 1.5s infinite alternate;
        }
        @keyframes blinkLed {
          0%, 40% { opacity: 1; }
          60%, 100% { opacity: 0.3; }
        }
        .usb-body {
          width: 100px;
          height: 30px;
          background: linear-gradient(135deg, #003333, #006666);
          border-radius: 0 0 8px 8px;
          box-shadow: inset 0 0 15px #00ffff88;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #00ffff;
          font-weight: 700;
          font-size: 0.9rem;
          letter-spacing: 1.5px;
          user-select: text;
        }

        /* Computer Screen */
        .computer-screen {
          width: 700px;
          max-width: 100%;
          height: 320px;
          background: #001f1f;
          border-radius: 24px;
          box-shadow:
            0 0 40px #00ffffaa,
            inset 0 0 30px #00ffffcc;
          padding: 20px 30px;
          color: #00ffff;
          font-family: 'Courier New', Courier, monospace;
          font-size: 1rem;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          user-select: text;
        }

        .screen-header {
          font-weight: 700;
          font-size: 1.3rem;
          margin-bottom: 15px;
          text-shadow: 0 0 10px #00ffffaa;
          user-select: text;
        }

        .screen-content {
          flex-grow: 1;
          background: #002a2a;
          border-radius: 12px;
          padding: 15px 20px;
          box-shadow: inset 0 0 15px #00ffff88;
          overflow-y: auto;
          line-height: 1.4;
          white-space: pre-wrap;
          font-family: 'Courier New', Courier, monospace;
          user-select: text;
          position: relative;
        }

        /* Animated blinking cursor */
        .cursor {
          display: inline-block;
          width: 10px;
          background-color: #00ffff;
          margin-left: 2px;
          animation: blinkCursor 1s steps(2, start) infinite;
          vertical-align: bottom;
          border-radius: 2px;
        }
        @keyframes blinkCursor {
          0%, 50% { opacity: 1; }
          51%, 100% { opacity: 0; }
        }

        /* Makeshift Computer Screen */
        .makeshift-screen {
          margin-top: 30px;
          max-width: 100%;
          border: 3px solid #00ffff;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 0 30px #00ffffaa;
          width: 700px;
          height: 320px;
          display: flex;
          align-items: center;
          flex-direction: column;
          background: #001f1f;
        }

        /* Keyboard mockup */
        .keyboard {
          color: #00ffff;
          user-select: none;
          margin-top: 20px;
          max-width: 100%;
          width: 700px;
        }

        .keyboard-row {
          display: flex;
          justify-content: center;
          gap: 6px;
          margin-bottom: 8px;
        }

        .keyboard .key {
          background: #003333;
          border-radius: 6px;
          box-shadow: inset 0 0 8px #00ffff88;
          color: #00ffff;
          font-weight: 700;
          font-size: 0.9rem;
          text-align: center;
          line-height: 2.4rem;
          user-select: none;
          cursor: default;
          transition: background-color 0.2s ease, box-shadow 0.2s ease;
          flex: 1;
          padding: 0 5px;
        }
        .keyboard .key.pressed {
          background-color: #00ffff;
          color: #003333;
          box-shadow: 0 0 15px #00ffffcc;
        }

        /* Responsive */
        @media (max-width: 720px) {
          .qgs-body {
            flex-direction: column;
            align-items: center;
          }
          .readouts {
            grid-template-columns: repeat(2, 1fr);
            gap: 25px 30px;
          }
          .controls {
            flex-wrap: wrap;
            gap: 15px;
          }
          button {
            min-width: 100%;
            justify-content: center;
          }
          #powerBtn {
            margin: 0 auto;
          }
          .computer-screen, .quantum-computer {
            width: 100%;
            max-width: 700px;
          }
          .usb-drive {
            margin: 20px auto 0;
          }
        }
      `}</style>
        <div className="qgs-body w-full">
            <div className="makeshift-screen" aria-label="Makeshift Computer Screen" tabIndex={0}>
              <iframe src="about:blank" title="Makeshift Computer Screen" style={{ width: '100%', height: '100%', border: 'none', background: '#001f1f' }}></iframe>
            </div>

            <div className="keyboard" aria-label="Visual Keyboard" role="application" tabIndex={0}>
              <div className="keyboard-row">
                <div className="key" data-key="Escape" tabIndex={0}>Esc</div>
                <div className="key" data-key="F1" tabIndex={0}>F1</div>
                <div className="key" data-key="F2" tabIndex={0}>F2</div>
                <div className="key" data-key="F3" tabIndex={0}>F3</div>
                <div className="key" data-key="F4" tabIndex={0}>F4</div>
                <div className="key" data-key="F5" tabIndex={0}>F5</div>
                <div className="key" data-key="F6" tabIndex={0}>F6</div>
                <div className="key" data-key="F7" tabIndex={0}>F7</div>
                <div className="key" data-key="F8" tabIndex={0}>F8</div>
                <div className="key" data-key="F9" tabIndex={0}>F9</div>
                <div className="key" data-key="F10" tabIndex={0}>F10</div>
                <div className="key" data-key="F11" tabIndex={0}>F11</div>
                <div className="key" data-key="F12" tabIndex={0}>F12</div>
              </div>
              <div className="keyboard-row">
                <div className="key" data-key="Backquote" tabIndex={0}>~</div>
                <div className="key" data-key="Digit1" tabIndex={0}>1</div>
                <div className="key" data-key="Digit2" tabIndex={0}>2</div>
                <div className="key" data-key="Digit3" tabIndex={0}>3</div>
                <div className="key" data-key="Digit4" tabIndex={0}>4</div>
                <div className="key" data-key="Digit5" tabIndex={0}>5</div>
                <div className="key" data-key="Digit6" tabIndex={0}>6</div>
                <div className="key" data-key="Digit7" tabIndex={0}>7</div>
                <div className="key" data-key="Digit8" tabIndex={0}>8</div>
                <div className="key" data-key="Digit9" tabIndex={0}>9</div>
                <div className="key" data-key="Digit0" tabIndex={0}>0</div>
                <div className="key" data-key="Minus" tabIndex={0}>-</div>
                <div className="key" data-key="Equal" tabIndex={0}>=</div>
                <div className="key" data-key="Backspace" style={{ flex: 1.5 }} tabIndex={0}>Backspace</div>
              </div>
              <div className="keyboard-row">
                <div className="key" data-key="Tab" style={{ flex: 1 }} tabIndex={0}>Tab</div>
                <div className="key" data-key="KeyQ" tabIndex={0}>Q</div>
                <div className="key" data-key="KeyW" tabIndex={0}>W</div>
                <div className="key" data-key="KeyE" tabIndex={0}>E</div>
                <div className="key" data-key="KeyR" tabIndex={0}>R</div>
                <div className="key" data-key="KeyT" tabIndex={0}>T</div>
                <div className="key" data-key="KeyY" tabIndex={0}>Y</div>
                <div className="key" data-key="KeyU" tabIndex={0}>U</div>
                <div className="key" data-key="KeyI" tabIndex={0}>I</div>
                <div className="key" data-key="KeyO" tabIndex={0}>O</div>
                <div className="key" data-key="KeyP" tabIndex={0}>P</div>
                <div className="key" data-key="BracketLeft" tabIndex={0}>[</div>
                <div className="key" data-key="BracketRight" tabIndex={0}>]</div>
                <div className="key" data-key="Backslash" tabIndex={0}>\</div>
              </div>
              <div className="keyboard-row">
                <div className="key" data-key="CapsLock" style={{ flex: 1.5 }} tabIndex={0}>CapsLock</div>
                <div className="key" data-key="KeyA" tabIndex={0}>A</div>
                <div className="key" data-key="KeyS" tabIndex={0}>S</div>
                <div className="key" data-key="KeyD" tabIndex={0}>D</div>
                <div className="key" data-key="KeyF" tabIndex={0}>F</div>
                <div className="key" data-key="KeyG" tabIndex={0}>G</div>
                <div className="key" data-key="KeyH" tabIndex={0}>H</div>
                <div className="key" data-key="KeyJ" tabIndex={0}>J</div>
                <div className="key" data-key="KeyK" tabIndex={0}>K</div>
                <div className="key" data-key="KeyL" tabIndex={0}>L</div>
                <div className="key" data-key="Semicolon" tabIndex={0}>;</div>
                <div className="key" data-key="Quote" tabIndex={0}>'</div>
                <div className="key" data-key="Enter" style={{ flex: 1.5 }} tabIndex={0}>Enter</div>
              </div>
              <div className="keyboard-row">
                <div className="key" data-key="ShiftLeft" style={{ flex: 2 }} tabIndex={0}>Shift</div>
                <div className="key" data-key="KeyZ" tabIndex={0}>Z</div>
                <div className="key" data-key="KeyX" tabIndex={0}>X</div>
                <div className="key" data-key="KeyC" tabIndex={0}>C</div>
                <div className="key" data-key="KeyV" tabIndex={0}>V</div>
                <div className="key" data-key="KeyB" tabIndex={0}>B</div>
                <div className="key" data-key="KeyN" tabIndex={0}>N</div>
                <div className="key" data-key="KeyM" tabIndex={0}>M</div>
                <div className="key" data-key="Comma" tabIndex={0}>,</div>
                <div className="key" data-key="Period" tabIndex={0}>.</div>
                <div className="key" data-key="Slash" tabIndex={0}>/</div>
                <div className="key" data-key="ShiftRight" style={{ flex: 2 }} tabIndex={0}>Shift</div>
              </div>
              <div className="keyboard-row">
                <div className="key" data-key="ControlLeft" style={{ flex: 1.5 }} tabIndex={0}>Ctrl</div>
                <div className="key" data-key="MetaLeft" style={{ flex: 1.5 }} tabIndex={0}>Win</div>
                <div className="key" data-key="AltLeft" style={{ flex: 1.5 }} tabIndex={0}>Alt</div>
                <div style={{ flex: 7 }}></div>
                <div className="key" data-key="AltRight" style={{ flex: 1.5 }} tabIndex={0}>Alt</div>
                <div className="key" data-key="MetaRight" style={{ flex: 1.5 }} tabIndex={0}>Win</div>
                <div className="key" data-key="ContextMenu" style={{ flex: 1.5 }} tabIndex={0}>Menu</div>
                <div className="key" data-key="ControlRight" style={{ flex: 1.5 }} tabIndex={0}>Ctrl</div>
              </div>
            </div>

            <div className="quantum-computer" role="main" aria-label="Quantum Gaming System Dashboard" tabIndex={0}>
              <h1>Quantum Gaming System</h1>

              <div className="readouts" aria-live="polite" aria-atomic="true">
                <div className="readout" aria-label="CPU Usage">
                  <h3>CPU Usage</h3>
                  <div className="value" id="cpu">32%</div>
                </div>
                <div className="readout" aria-label="GPU Usage">
                  <h3>GPU Usage</h3>
                  <div className="value" id="gpu">45%</div>
                </div>
                <div className="readout" aria-label="Oil Temperature">
                  <h3>Oil Temp</h3>
                  <div className="value" id="temp">48°C</div>
                </div>
                <div className="readout" aria-label="Quantum Core Status">
                  <h3>Quantum Core</h3>
                  <div className="value tooltip" id="core" tabIndex={0} aria-describedby="coreTooltip">
                    Stable
                    <span className="tooltiptext" role="tooltip" id="coreTooltip">
                      Stable: Operating normally<br />
                      Fluct.: Minor fluctuations<br />
                      Optmz.: Optimizing performance<br />
                      Idle: Standby mode
                    </span>
                  </div>
                </div>
              </div>

              <div className="quantum-chip" role="img" aria-label="Quantum processor chip with pulsing glow"></div>

              <div className="controls" role="group" aria-label="System controls">
                <button id="powerBtn" aria-pressed="true" aria-label="Power button, currently on" title="Power On/Off">⏻</button>
                <button id="resetBtn" title="Reset system">Reset</button>
                <button id="overclockBtn" title="Toggle overclock mode">Overclock</button>
                <button id="diagnosticsBtn" title="Run diagnostics">Diagnostics</button>
              </div>

              <div className="fan" aria-hidden="true">
                <div className="fan-blade blade1"></div>
                <div className="fan-blade blade2"></div>
                <div className="fan-blade blade3"></div>
                <div className="fan-blade blade4"></div>
              </div>

              <footer>Quantum Gaming System v1.0 &mdash; All systems nominal</footer>

              <div className="usb-drive" role="img" aria-label="Quantum USB Flash Drive" tabIndex={0} title="Quantum USB Flash Drive">
                <div className="usb-top">
                  <div className="usb-led" aria-hidden="true"></div>
                </div>
                <div className="usb-body">Q-USB</div>
              </div>
            </div>

            <div className="computer-screen" role="region" aria-label="Quantum Operating System Screen" tabIndex={0}>
              <div className="screen-header">Quantum OS v3.14</div>
              <div className="screen-content" id="screenContent" aria-live="polite" aria-atomic="false" tabIndex={0}>
                <pre id="terminalLines"></pre><span className="cursor" aria-hidden="true"></span>
              </div>
            </div>
      </div>
    </>
  );
}
```