import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "/components/ui/card";
import { Button } from "/components/ui/button";

export default function MoruteArchive() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-400 to-blue-700 p-4 font-sans">
      {/* Neocities-style visitor counter */}
      <div className="absolute top-4 right-4 bg-yellow-200 border-2 border-yellow-400 px-3 py-1 rounded text-sm font-mono">
        Visitors: 1337
      </div>
      
      {/* Animated under construction GIF */}
      <div className="text-center mb-4">
        <img 
          src="https://placeholder-image-service.onrender.com/image/88x31?prompt=Vintage+under+construction+animated+GIF+with+spooky+eyes&id=6f7g8009-fab1-4252-811d-187e93c8689a" 
          alt="Under construction animated GIF with spooky floating eyes" 
          className="inline-block"
        />
      </div>
      {/* Title with Neocities style */}
      <div className="mb-8 text-center">
        <h1 className="text-4xl font-bold text-white drop-shadow-md mb-2" style={{ fontFamily: "'Trebuchet MS', sans-serif", textShadow: '2px 2px 4px rgba(0,0,0,0.5)' }}>
          Welcome to the Archive
        </h1>
        <div className="bg-black bg-opacity-50 p-2 rounded inline-block">
          <span className="text-yellow-300 text-sm font-mono">~*~ Morute's Spooky Corner ~*~</span>
        </div>
      </div>

      {/* Navigation buttons like old webrings */}
      <div className="flex justify-center space-x-4 mb-6">
        <Button variant="outline" className="bg-purple-200 border-purple-400 text-purple-800 text-xs">
          [HOME]
        </Button>
        <Button variant="outline" className="bg-purple-200 border-purple-400 text-purple-800 text-xs">
          [GUESTBOOK]
        </Button>
        <Button variant="outline" className="bg-purple-200 border-purple-400 text-purple-800 text-xs">
          [LINKS]
        </Button>
      </div>

      {/* Windows XP Style Boxes Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-16">
        {/* My Computer Window */}
        <Card className="bg-beige border-2 border-gray-300 shadow-lg">
          <CardHeader className="bg-blue-600 text-white p-2">
            <CardTitle className="text-sm">My Computer</CardTitle>
          </CardHeader>
          <CardContent className="p-4">
            <div className="space-y-2">
              <img 
                src="https://placeholder-image-service.onrender.com/image/64x64?prompt=Vintage+computer+icon+with+spooky+eyes+and+smile&id=0e7c3004-fab1-4252-811d-187e93c8689b" 
                alt="Vintage computer icon with spooky eyes and cute smile" 
                className="mx-auto"
              />
              <p className="text-sm text-gray-700">Local Disk (C:)</p>
              <p className="text-sm text-gray-700">CD Drive (D:)</p>
              <p className="text-sm text-red-600 font-medium">3.5" Floppy (A:)</p>
            </div>
          </CardContent>
        </Card>

        {/* My Documents Window */}
        <Card className="bg-beige border-2 border-gray-300 shadow-lg">
          <CardHeader className="bg-blue-600 text-white p-2">
            <CardTitle className="text-sm">My Documents</CardTitle>
          </CardHeader>
          <CardContent className="p-4">
            <div className="space-y-2">
              <img 
                src="https://placeholder-image-service.onrender.com/image/64x64?prompt=Cute+ghost+with+blush+holding+a+document&id=1a2b3004-fab1-4252-811d-187e93c8689b" 
                alt="Cute ghost with blush holding a document" 
                className="mx-auto"
              />
              <p className="text-sm text-gray-700">Diary_Entries</p>
              <p className="text-sm text-gray-700">Old_Photos</p>
              <p className="text-sm text-red-600 font-medium">SECRETS.txt</p>
            </div>
          </CardContent>
        </Card>

        {/* Recycle Bin Window */}
        <Card className="bg-beige border-2 border-gray-300 shadow-lg">
          <CardHeader className="bg-blue-600 text-white p-2">
            <CardTitle className="text-sm">Recycle Bin</CardTitle>
          </CardHeader>
          <CardContent className="p-4">
            <div className="space-y-2">
              <img 
                src="https://placeholder-image-service.onrender.com/image/64x64?prompt=Spooky+recycle+bin+with+eyes+and+teeth&id=2b3c4005-fab1-4252-811d-187e93c8689c" 
                alt="Spooky recycle bin with eyes and sharp teeth" 
                className="mx-auto"
              />
              <p className="text-sm text-gray-700">Empty</p>
              <p className="text-sm text-gray-700">(0 items)</p>
              <Button variant="outline" className="w-full bg-gray-200 text-xs">
                Empty Recycle Bin
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Internet Explorer Window */}
        <Card className="bg-beige border-2 border-gray-300 shadow-lg">
          <CardHeader className="bg-blue-600 text-white p-2">
            <CardTitle className="text-sm">Internet Explorer</CardTitle>
          </CardHeader>
          <CardContent className="p-4">
            <div className="space-y-2">
              <img 
                src="https://placeholder-image-service.onrender.com/image/64x64?prompt=Vintage+Internet+Explorer+logo+with+spider+web&id=3c4d5006-fab1-4252-811d-187e93c8689d" 
                alt="Vintage Internet Explorer logo with spider web decoration" 
                className="mx-auto"
              />
              <p className="text-sm text-gray-700">Connecting...</p>
              <p className="text-sm text-red-600 font-medium">Page Cannot Be Displayed</p>
              <Button variant="outline" className="w-full bg-gray-200 text-xs">
                Try Again
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* My Pictures Window */}
        <Card className="bg-beige border-2 border-gray-300 shadow-lg">
          <CardHeader className="bg-blue-600 text-white p-2">
            <CardTitle className="text-sm">My Pictures</CardTitle>
          </CardHeader>
          <CardContent className="p-4">
            <div className="space-y-2">
              <img 
                src="https://placeholder-image-service.onrender.com/image/64x64?prompt=Photo+album+with+spooky+eyes+peeking+out&id=4d5e6007-fab1-4252-811d-187e93c8689e" 
                alt="Photo album with spooky eyes peeking out from between pages" 
                className="mx-auto"
              />
              <p className="text-sm text-gray-700">Family_Photos</p>
              <p className="text-sm text-gray-700">Vacation_2003</p>
              <p className="text-sm text-red-600 font-medium">DO_NOT_OPEN</p>
            </div>
          </CardContent>
        </Card>

        {/* Games Window */}
        <Card className="bg-beige border-2 border-gray-300 shadow-lg">
          <CardHeader className="bg-blue-600 text-white p-2">
            <CardTitle className="text-sm">Games</CardTitle>
          </CardHeader>
          <CardContent className="p-4">
            <div className="space-y-2">
              <img 
                src="https://placeholder-image-service.onrender.com/image/64x64?prompt=Cute+ghost+playing+solitaire+on+computer&id=5e6f7008-fab1-4252-811d-187e93c8689f" 
                alt="Cute ghost playing solitaire on a vintage computer" 
                className="mx-auto"
              />
              <p className="text-sm text-gray-700">Solitaire</p>
              <p className="text-sm text-gray-700">Minesweeper</p>
              <p className="text-sm text-red-600 font-medium">Pinball.exe</p>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Webring and footer links */}
      <div className="fixed bottom-0 left-0 right-0 bg-gray-800 border-t-2 border-gray-600 p-3 flex justify-between items-center text-xs">
        <div className="flex space-x-4">
          <span className="text-green-400">© 2003 Morute's Archive</span>
          <span className="text-yellow-300">Last Updated: 10/31/2003</span>
        </div>
        <div className="flex space-x-3">
          <img 
            src="https://placeholder-image-service.onrender.com/image/88x31?prompt=Vintage+webring+button+with+spider+web+design&id=7g8h9010-fab1-4252-811d-187e93c8689b" 
            alt="Spooky Webring button with animated spider" 
            className="h-6"
          />
          <img 
            src="https://placeholder-image-service.onrender.com/image/88x31?prompt=Best+viewed+with+Internet+Explorer+button+with+ghost&id=8h9i0111-fab1-4252-811d-187e93c8689c" 
            alt="Best viewed with Internet Explorer ghost button" 
            className="h-6"
          />
          <Button className="bg-green-600 text-white text-xs px-3 py-1 rounded-none border-2 border-green-700 hover:bg-green-700">
            Start
          </Button>
        </div>
      </div>

      {/* Blinking cursor for retro feel */}
      <div className="fixed bottom-16 left-4 bg-black text-green-400 font-mono text-sm px-2 py-1 rounded">
        morute@archive:~$ <span className="animate-pulse">_</span>
      </div>
    </div>
  );
}