Mock Windows Interface Version 4

import React, { useState, useEffect } from 'react';
import { X, Minus, Square, Settings, Power, FileText, Grid, Disc } from 'lucide-react';

const Notepad = () => {
  const [text, setText] = useState('');
  return (
    <textarea
      className="w-full h-full p-2 resize-none"
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  );
};

const Minesweeper = () => {
  const [grid, setGrid] = useState([]);
  const [gameOver, setGameOver] = useState(false);

  useEffect(() => {
    initializeGrid();
  }, []);

  const initializeGrid = () => {
    const newGrid = Array(8).fill().map(() => Array(8).fill({ isMine: false, isRevealed: false, neighborMines: 0 }));
    // Place mines and calculate neighbor mines (implementation omitted for brevity)
    setGrid(newGrid);
  };

  const revealCell = (row, col) => {
    if (gameOver || grid[row][col].isRevealed) return;
    const newGrid = [...grid];
    newGrid[row][col].isRevealed = true;
    if (newGrid[row][col].isMine) {
      setGameOver(true);
    }
    setGrid(newGrid);
  };

  return (
    <div className="h-full flex flex-col items-center justify-center">
      {grid.map((row, rowIndex) => (
        <div key={rowIndex} className="flex">
          {row.map((cell, colIndex) => (
            <button
              key={colIndex}
              className={`w-6 h-6 border border-gray-400 ${cell.isRevealed ? 'bg-gray-200' : 'bg-gray-300'}`}
              onClick={() => revealCell(rowIndex, colIndex)}
            >
              {cell.isRevealed && (cell.isMine ? '💣' : cell.neighborMines > 0 ? cell.neighborMines : '')}
            </button>
          ))}
        </div>
      ))}
      {gameOver && <div className="mt-4">Game Over!</div>}
    </div>
  );
};

const Reversi = () => {
  const [board, setBoard] = useState(Array(8).fill().map(() => Array(8).fill(null)));
  const [currentPlayer, setCurrentPlayer] = useState('black');

  useEffect(() => {
    const newBoard = [...board];
    newBoard[3][3] = newBoard[4][4] = 'white';
    newBoard[3][4] = newBoard[4][3] = 'black';
    setBoard(newBoard);
  }, []);

  const makeMove = (row, col) => {
    // Implementation of move logic omitted for brevity
    const newBoard = [...board];
    newBoard[row][col] = currentPlayer;
    setBoard(newBoard);
    setCurrentPlayer(currentPlayer === 'black' ? 'white' : 'black');
  };

  return (
    <div className="h-full flex flex-col items-center justify-center">
      {board.map((row, rowIndex) => (
        <div key={rowIndex} className="flex">
          {row.map((cell, colIndex) => (
            <button
              key={colIndex}
              className="w-8 h-8 border border-gray-400 bg-green-600 flex items-center justify-center"
              onClick={() => makeMove(rowIndex, colIndex)}
            >
              {cell && (
                <div className={`w-6 h-6 rounded-full ${cell === 'black' ? 'bg-black' : 'bg-white'}`} />
              )}
            </button>
          ))}
        </div>
      ))}
      <div className="mt-4">Current Player: {currentPlayer}</div>
    </div>
  );
};

const Windows95Interface = () => {
  const [windows, setWindows] = useState([]);
  const [activeWindow, setActiveWindow] = useState(null);
  const [startMenuOpen, setStartMenuOpen] = useState(false);
  const [backgroundColor, setBackgroundColor] = useState('#008080');

  const openWindow = (title, content) => {
    const newWindow = {
      id: Date.now(),
      title,
      content,
      x: 50 + Math.random() * 100,
      y: 50 + Math.random() * 100,
      width: 400,
      height: 300,
      minimized: false
    };
    setWindows([...windows, newWindow]);
    setStartMenuOpen(false);
  };

  const closeWindow = (id) => {
    setWindows(windows.filter(w => w.id !== id));
  };

  return (
    <div
      className="w-full h-screen relative overflow-hidden"
      style={{ backgroundColor }}
    >
      {windows.map(window => (
        <div
          key={window.id}
          className="absolute bg-gray-200 border-2 border-gray-400 shadow-lg"
          style={{
            left: `${window.x}px`,
            top: `${window.y}px`,
            width: `${window.width}px`,
            height: `${window.height}px`,
            zIndex: activeWindow === window.id ? 10 : 1
          }}
        >
          <div className="bg-blue-900 text-white px-2 py-1 flex justify-between items-center">
            <span>{window.title}</span>
            <button onClick={() => closeWindow(window.id)} className="focus:outline-none">
              <X size={16} />
            </button>
          </div>
          <div className="p-2 h-[calc(100%-2rem)] overflow-auto">
            {window.content}
          </div>
        </div>
      ))}

      <div className="absolute bottom-0 left-0 right-0 bg-gray-300 h-10 flex items-center px-2">
        <button onClick={() => setStartMenuOpen(!startMenuOpen)} className="bg-green-600 text-white px-4 py-1 rounded">Start</button>
        {startMenuOpen && (
          <div className="absolute bottom-10 left-0 w-56 bg-gray-200 border-2 border-gray-400 shadow-lg">
            <button onClick={() => openWindow('Notepad', <Notepad />)} className="w-full text-left px-4 py-2 hover:bg-blue-600 hover:text-white flex items-center">
              <FileText size={16} className="mr-2" />
              Notepad
            </button>
            <button onClick={() => openWindow('Minesweeper', <Minesweeper />)} className="w-full text-left px-4 py-2 hover:bg-blue-600 hover:text-white flex items-center">
              <Grid size={16} className="mr-2" />
              Minesweeper
            </button>
            <button onClick={() => openWindow('Reversi', <Reversi />)} className="w-full text-left px-4 py-2 hover:bg-blue-600 hover:text-white flex items-center">
              <Disc size={16} className="mr-2" />
              Reversi
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Windows95Interface;