export default function Windows98ComicSite() { const comics = [ { title: 'Bug Report #404', issue: 'Issue #12', desc: 'A developer battles the ultimate enemy: Internet Explorer cache.', }, { title: 'Dial-Up Doom', issue: 'Issue #7', desc: 'Uploading one image takes an entire afternoon and three emotional breakdowns.', }, { title: 'Clippy Returns', issue: 'Issue #2', desc: 'He just wants to help. Nobody asked for it.', }, { title: 'Ctrl + Alt + Defeat', issue: 'Issue #21', desc: 'The office LAN party becomes a battlefield.', }, ];

return ( <div className="min-h-screen bg-[#008080] text-black font-mono overflow-hidden"> {/* Desktop /} <div className="p-4 grid grid-cols-1 lg:grid-cols-[260px_1fr] gap-4"> {/ Sidebar */} <div className="space-y-4"> <Win98Window title="Comic Navigator"> <div className="space-y-2 text-sm"> <button className="win98-button w-full text-left">📁 Latest Comics</button> <button className="win98-button w-full text-left">💾 Downloads</button> <button className="win98-button w-full text-left">📼 Retro Archive</button> <button className="win98-button w-full text-left">📧 Contact SYSOP</button> </div> </Win98Window>

<Win98Window title="System Status">
        <div className="space-y-3 text-sm">
          <div>
            <p className="font-bold">Comic Engine</p>
            <div className="border border-black bg-white h-5 relative overflow-hidden">
              <div className="absolute inset-y-0 left-0 w-4/5 bg-[#000080]" />
            </div>
          </div>

          <div>
            <p className="font-bold">Dial-Up Connection</p>
            <div className="border border-black bg-white h-5 relative overflow-hidden">
              <div className="absolute inset-y-0 left-0 w-1/2 bg-[#000080]" />
            </div>
          </div>
        </div>
      </Win98Window>
    </div>

    {/* Main */}
    <div className="space-y-4">
      <Win98Window title="ComicBook.EXE">
        <div className="bg-white border-2 border-black p-4">
          <div className="flex flex-col md:flex-row gap-4 items-center">
            <div className="w-48 h-56 border-2 border-black bg-gradient-to-b from-yellow-200 to-pink-300 flex items-center justify-center text-center p-4 shadow-inner">
              <div>
                <p className="text-3xl">💥</p>
                <h2 className="font-black text-xl">PIXEL PANIC</h2>
                <p className="text-sm mt-2">Retro comics for digital survivors.</p>
              </div>
            </div>

            <div className="flex-1">
              <h1 className="text-4xl font-black mb-2 tracking-tight">
                WELCOME TO THE COMIC ZONE
              </h1>
              <p className="text-sm leading-relaxed mb-4">
                Experience internet-era chaos, floppy disk disasters, and low-resolution heroics.
                Built with maximum nostalgia and minimal RAM usage.
              </p>

              <div className="flex flex-wrap gap-2">
                <button className="win98-button">▶ Read Latest</button>
                <button className="win98-button">⬇ Download ZIP</button>
                <button className="win98-button">🖨 Print Comic</button>
              </div>
            </div>
          </div>
        </div>
      </Win98Window>

      <Win98Window title="Comic Directory">
        <div className="grid md:grid-cols-2 gap-4">
          {comics.map((comic, idx) => (
            <div
              key={idx}
              className="bg-[#c0c0c0] border-t-2 border-l-2 border-white border-r-2 border-b-2 border-r-black border-b-black p-3"
            >
              <div className="bg-[#000080] text-white px-2 py-1 text-sm font-bold mb-2 flex justify-between">
                <span>{comic.issue}</span>
                <span>COMIC</span>
              </div>

              <div className="bg-white border border-black p-3 h-full flex flex-col justify-between min-h-[180px]">
                <div>
                  <div className="h-24 bg-gradient-to-br from-cyan-200 to-fuchsia-300 border border-black mb-3 flex items-center justify-center text-5xl">
                    🖥️
                  </div>

                  <h3 className="font-black text-lg">{comic.title}</h3>
                  <p className="text-sm mt-2">{comic.desc}</p>
                </div>

                <button className="win98-button mt-4 w-full">Open Comic</button>
              </div>
            </div>
          ))}
        </div>
      </Win98Window>

      <Win98Window title="Guestbook.txt">
        <div className="bg-white border border-black p-4 text-sm space-y-3">
          <p>
            <span className="font-bold">NeoByte99:</span> This site loads faster than my old Pentium.
          </p>
          <p>
            <span className="font-bold">PixelWizard:</span> Needs more exploding monitors.
          </p>
          <p>
            <span className="font-bold">CRTQueen:</span> I can hear the modem noises just by looking at this.
          </p>

          <div className="pt-2 border-t border-dashed border-black">
            <input
              placeholder="Leave a guestbook message..."
              className="w-full border-2 border-black px-2 py-1 bg-white"
            />
          </div>
        </div>
      </Win98Window>
    </div>
  </div>

  {/* Taskbar */}
  <div className="fixed bottom-0 left-0 right-0 h-12 bg-[#c0c0c0] border-t-2 border-white flex items-center px-2 gap-2 z-50">
    <button className="win98-button px-4 font-bold flex items-center gap-2">
      <span>🪟</span>
      Start
    </button>

    <div className="flex-1 h-8 bg-[#808080] border border-black flex items-center px-3 text-white text-sm">
      ComicBook.EXE - Running
    </div>

    <div className="win98-button px-3 text-sm">12:00 PM</div>
  </div>

  <style>{`
    .win98-button {
      background: #c0c0c0;
      border-top: 2px solid white;
      border-left: 2px solid white;
      border-right: 2px solid black;
      border-bottom: 2px solid black;
      padding: 6px 10px;
      font-size: 14px;
      transition: all 0.05s ease;
    }

    .win98-button:active {
      border-top: 2px solid black;
      border-left: 2px solid black;
      border-right: 2px solid white;
      border-bottom: 2px solid white;
      transform: translateY(1px);
    }
  `}</style>
</div>

); }

function Win98Window({ title, children }) { return ( <div className="bg-[#c0c0c0] border-t-2 border-l-2 border-white border-r-2 border-b-2 border-r-black border-b-black shadow-2xl"> <div className="bg-[#000080] text-white px-3 py-1 flex justify-between items-center text-sm font-bold"> <span>{title}</span> <div className="flex gap-1"> <div className="w-4 h-4 bg-[#c0c0c0] border border-black text-black flex items-center justify-center text-[10px]"> _ </div> <div className="w-4 h-4 bg-[#c0c0c0] border border-black text-black flex items-center justify-center text-[10px]"> □ </div> <div className="w-4 h-4 bg-[#c0c0c0] border border-black text-black flex items-center justify-center text-[10px]"> × </div> </div> </div>

<div className="p-3">{children}</div>
</div>

); }