Mock Windows Interface Version 3

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

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

// Minesweeper Component
const Minesweeper = ({ onClose }) => {
  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
    let minesToPlace = 10;
    while (minesToPlace > 0) {
      const row = Math.floor(Math.random() * 8);
      const col = Math.floor(Math.random() * 8);
      if (!newGrid[row][col].isMine) {
        newGrid[row][col].isMine = true;
        minesToPlace--;
      }
    }
    // Calculate neighbor mines
    for (let row = 0; row < 8; row++) {
      for (let col = 0; col < 8; col++) {
        if (!newGrid[row][col].isMine) {
          let count = 0;
          for (let r = -1; r <= 1; r++) {
            for (let c = -1; c <= 1; c++) {
              if (row + r >= 0 && row + r < 8 && col + c >= 0 && col + c < 8) {
                if (newGrid[row + r][col + c].isMine) count++;
              }
            }
          }
          newGrid[row][col].neighborMines = count;
        }
      }
    }
    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);
    } else if (newGrid[row][col].neighborMines === 0) {
      // Reveal neighboring cells
      for (let r = -1; r <= 1; r++) {
        for (let c = -1; c <= 1; c++) {
          if (row + r >= 0 && row + r < 8 && col + c >= 0 && col + c < 8) {
            revealCell(row + r, col + c);
          }
        }
      }
    }
    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>
  );
};

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

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

  const isValidMove = (row, col) => {
    if (board[row][col] !== null) return false;
    const directions = [[-1, -1], [-1, 0], [-1, 1], [0, -1], [0, 1], [1, -1], [1, 0], [1, 1]];
    for (let [dx, dy] of directions) {
      let x = row + dx;
      let y = col + dy;
      if (x < 0 || x >= 8 || y < 0 || y >= 8 || board[x][y] !== (currentPlayer === 'black' ? 'white' : 'black')) continue;
      x += dx;
      y += dy;
      while (x >= 0 && x < 8 && y >= 0 && y < 8) {
        if (board[x][y] === null) break;
        if (board[x][y] === currentPlayer) return true;
        x += dx;
        y += dy;
      }
    }
    return false;
  };

  const makeMove = (row, col) => {
    if (!isValidMove(row, col)) return;
    const newBoard = [...board];
    newBoard[row][col] = currentPlayer;
    const directions = [[-1, -1], [-1, 0], [-1, 1], [0, -1], [0, 1], [1, -1], [1, 0], [1, 1]];
    for (let [dx, dy] of directions) {
      let x = row + dx;
      let y = col + dy;
      let toFlip = [];
      while (x >= 0 && x < 8 && y >= 0 && y < 8) {
        if (board[x][y] === null) break;
        if (board[x][y] === currentPlayer) {
          for (let [fx, fy] of toFlip) {
            newBoard[fx][fy] = currentPlayer;
          }
          break;
        }
        toFlip.push([x, y]);
        x += dx;
        y += dy;
      }
    }
    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 [dragStart, setDragStart] = useState({ x: 0, y: 0 });
  const [startMenuOpen, setStartMenuOpen] = useState(false);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [backgroundColor, setBackgroundColor] = useState('#008080');
  const [shutdownPrompt, setShutdownPrompt] = useState(false);

  const handleMouseDown = (e, id) => {
    setActiveWindow(id);
    setDragStart({ x: e.clientX, y: e.clientY });
  };

  const handleMouseMove = (e) => {
    if (activeWindow !== null) {
      const dx = e.clientX - dragStart.x;
      const dy = e.clientY - dragStart.y;
      setWindows(windows.map(w =>
        w.id === activeWindow
          ? { ...w, x: w.x + dx, y: w.y + dy }
          : w
      ));
      setDragStart({ x: e.clientX, y: e.clientY });
    }
  };

  const handleMouseUp = () => {
    setActiveWindow(null);
  };

  const minimizeWindow = (id) => {
    setWindows(windows.map(w =>
      w.id === id ? { ...w, minimized: !w.minimized } : w
    ));
  };

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

  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 toggleStartMenu = () => {
    setStartMenuOpen(!startMenuOpen);
  };

  const openSettings = () => {
    setSettingsOpen(true);
    setStartMenuOpen(false);
  };

  const closeSettings = () => {
    setSettingsOpen(false);
  };

  const changeBackgroundColor = (color) => {
    setBackgroundColor(color);
  };

  const initiateShutdown = () => {
    setShutdownPrompt(true);
    setStartMenuOpen(false);
  };

  const cancelShutdown = () => {
    setShutdownPrompt(false);
  };

  const confirmShutdown = () => {
    setWindows([]);
    setShutdownPrompt(false);
    alert("Windows is shutting down. It's now safe to turn off your computer.");
  };

  return (
    <div
      className="w-full h-screen relative overflow-hidden"
      style={{ backgroundColor }}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
    >
      {windows.map(window => (
        <div
          key={window.id}
          className={`absolute bg-gray-200 border-2 border-gray-400 shadow-lg ${window.minimized ? 'hidden' : ''}`}
          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 cursor-move"
            onMouseDown={(e) => handleMouseDown(e, window.id)}
          >
            <span>{window.title}</span>
            <div className="flex space-x-1">
              <button onClick={() => minimizeWindow(window.id)} className="focus:outline-none">
                <Minus size={16} />
              </button>
              <button className="focus:outline-none">
                <Square size={16} />
              </button>
              <button onClick={() => closeWindow(window.id)} className="focus:outline-none">
                <X size={16} />
              </button>
            </div>
          </div>
          <div className="p-2 h-[calc(100%-2rem)] overflow-auto">
            {window.content}
          </div>
        </div>
      ))}

      {settingsOpen && (
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 border-2 border-gray-400 shadow-lg p-4 w-80">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-bold">Settings</h2>
            <button onClick={closeSettings} className="focus:outline-none">
              <X size={16} />
            </button>
          </div>
          <div className="mb-4">
            <label className="block mb-2">Background Color:</label>
            <div className="flex space-x-2">
              <button onClick={() => changeBackgroundColor('#008080')} className="w-6 h-6 bg-teal-600"></button>
              <button onClick={() => changeBackgroundColor('#000080')} className="w-6 h-6 bg-blue-900"></button>
              <button onClick={() => changeBackgroundColor('#008000')} className="w-6 h-6 bg-green-700"></button>
            </div>
          </div>
        </div>
      )}

      {shutdownPrompt && (
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-200 border-2 border-gray-400 shadow-lg p-4 w-80">
          <h2 className="text-lg font-bold mb-4">Shut Down Windows</h2>
          <p className="mb-4">Are you sure you want to shut down your computer?</p>
          <div className="flex justify-end space-x-2">
            <button onClick={cancelShutdown} className="px-4 py-2 bg-gray-300 hover:bg-gray-400">Cancel</button>
            <button onClick={confirmShutdown} className="px-4 py-2 bg-red-500 text-white hover:bg-red-600">OK</button>
          </div>
        </div>
      )}

      <div className="absolute bottom-0 left-0 right-0 bg-gray-300 h-10 flex items-center px-2">
        <button onClick={toggleStartMenu} 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', <Mineswe