export default function MiserableDollyStyleSite() {
  const navMain = ["sitemap", "home", "about", "art", "journal", "guides", "guestbook"];
  const fun = ["bottlecaps", "dolls", "beauty", "collectors", "opinions", "fanfiction", "manifesto"];
  const shrines = ["cyberpunk 2077", "björk", "serial experiments lain"];

  return (
    <main className="min-h-screen text-[#222] bg-[radial-gradient(#b8b8b8_1px,transparent_1px)] [background-size:12px_12px] font-[Verdana] text-[11px]">
      <div className="mx-auto w-[960px] pt-4">
        <header className="relative h-[135px] border border-[#777] bg-[#d6d6d6] overflow-hidden shadow-[4px_4px_0_#999]">
          <div className="absolute inset-0 bg-gradient-to-r from-[#bdbdbd] via-[#efefef] to-[#bdbdbd]" />
          <div className="absolute left-4 top-3 flex gap-4 opacity-80">
            {Array.from({ length: 7 }).map((_, i) => (
              <div key={i} className="w-24 h-20 bg-[#3f3f3f] border-4 border-[#bcbcbc] rotate-[-6deg] shadow-md">
                <div className="m-2 h-10 bg-[#111] border border-[#777]" />
                <div className="mx-auto h-3 w-14 bg-[#aaa]" />
              </div>
            ))}
          </div>
          <h1 className="absolute right-4 bottom-3 text-[52px] leading-none font-black tracking-[-4px] text-white drop-shadow-[3px_3px_0_#333] font-serif">
            miserabledolly
          </h1>
          <div className="absolute left-10 bottom-4 w-28 text-center text-[10px] bg-white/60 border border-[#777] p-1">
            Please be nice to me<br />I love you
          </div>
        </header>

        <div className="grid grid-cols-[120px_1fr_190px] gap-3 mt-3">
          <aside className="space-y-3">
            <Panel title="visitor count">
              <div className="bg-black text-white text-center tracking-[3px] py-1 font-mono">009684</div>
            </Panel>

            <Menu title="main" items={navMain} />
            <Menu title="fun" items={fun} />
            <Menu title="shrines" items={shrines} />
          </aside>

          <section className="space-y-3">
            <Panel>
              <div className="grid grid-cols-[120px_1fr] gap-3">
                <div className="bg-[#e7e7e7] border border-[#999] h-28 flex items-center justify-center text-5xl grayscale">🧸</div>
                <p className="leading-relaxed">
                  hello. i&apos;m karia, and welcome to my site! this is where i test my css,
                  html, and web design knowledge whenever i get random bursts of autism.
                  this site is still a work in progress so expect various changes and
                  missing links.
                </p>
              </div>
            </Panel>

            <div className="grid grid-cols-[170px_1fr] gap-3">
              <Panel>
                <p>this site contains mature themes (18+). obviously nothing explicit, but there may be body horror elements, adult talk, and discussions of used things.</p>
                <div className="mt-3 h-40 border border-[#aaa] bg-[#eee] flex items-center justify-center text-6xl grayscale">🪽</div>
              </Panel>

              <Panel>
                <p className="mb-2">pssst... you should click the menu buttons on the left. there&apos;s more to this site!</p>
                <div className="border border-[#888] bg-[#ddd] p-2">
                  <p><b>muwirham</b> 🌼 <span className="text-[#777]">179 days ago</span></p>
                  <p className="mt-2">join my new web ring! <u>https://omg.neocities.org/</u></p>
                </div>
                <div className="mt-3 flex items-end gap-3">
                  <div className="w-24 h-28 bg-[#eee] border border-[#aaa] flex items-center justify-center grayscale text-5xl">🗡️</div>
                  <p>if you&apos;d like to reach me i am on instagram @vampire or you could leave a comment on my profile and i&apos;ll get back to you as soon as i can!</p>
                </div>
                <div className="mt-3 flex gap-2 flex-wrap text-[10px]">
                  {['16+', 'PS', 'ACID', 'CYBER', 'DOLL'].map((b) => <Badge key={b}>{b}</Badge>)}
                </div>
              </Panel>
            </div>

            <div className="grid grid-cols-5 gap-1 bg-[#d1d1d1] border border-[#888] p-1 text-center text-[9px]">
              {['powered by sadism', 'monochrome', 'don\'t feed AI', 'AO3', 'BAN PORN'].map((x) => (
                <div key={x} className="border border-[#aaa] bg-[#eee] py-1">{x}</div>
              ))}
            </div>

            <Panel title="WEBDECK PLAYER">
              <div className="h-56 bg-black border-4 border-[#333] relative overflow-hidden">
                <div className="absolute left-4 top-6 w-52 h-32 bg-[#111] border border-[#777] flex items-center justify-center text-white text-4xl">▶</div>
                <div className="absolute right-5 top-10 w-48 bg-[#dcdcdc] border border-[#777] p-2">
                  <div className="h-4 bg-[#aaa] border border-[#555] mb-2" />
                  <div className="flex gap-1">
                    <button className="border border-[#777] px-2 bg-[#eee]">▐▐</button>
                    <button className="border border-[#777] px-2 bg-[#eee]">▶</button>
                    <button className="border border-[#777] px-2 bg-[#eee]">■</button>
                  </div>
                </div>
                <p className="absolute right-8 bottom-5 text-white text-4xl font-black italic">WEB DECK<br />player</p>
              </div>
            </Panel>
          </section>

          <aside className="space-y-3">
            <Panel>
              <div className="bg-[#242424] text-[#eee] p-3 h-40 text-[10px]">
                {['Hello', 'amari so cutee', 'nab hellooo', 'Tinydis This is so cool!'].map((m, i) => (
                  <p key={i} className="border-b border-[#555] py-2">{m}</p>
                ))}
              </div>
            </Panel>

            <Panel title="updates">
              <p>jan. 8: finished my collections page, thinking of making an entry page as my index and a separate .html file for the homepage</p>
            </Panel>

            <Panel>
              <div className="bg-[#191919] text-white p-3 h-48">
                <p className="text-[#ff8ba0] font-bold mb-2">last.fm Recently Played</p>
                {['Genesis — Grimes', 'Chillin — Modjo', 'Where Them Girls At'].map((song) => (
                  <div key={song} className="border-b border-[#444] py-2">{song}</div>
                ))}
              </div>
            </Panel>
          </aside>
        </div>
      </div>
    </main>
  );
}

function Panel({ title, children }) {
  return (
    <div className="border border-[#777] bg-[#cfcfcf] p-1 shadow-[3px_3px_0_#aaa]">
      {title && <h2 className="font-serif text-center text-[18px] font-black mb-1">✖ {title} ✖</h2>}
      <div className="border border-[#999] bg-[#efefef] p-2">{children}</div>
    </div>
  );
}

function Menu({ title, items }) {
  return (
    <Panel title={title}>
      <div className="space-y-1">
        {items.map((item) => (
          <button key={item} className="w-full border border-[#888] bg-[#d9d9d9] hover:bg-white py-1 lowercase shadow-[inset_1px_1px_0_white]">
            {item}
          </button>
        ))}
      </div>
    </Panel>
  );
}

function Badge({ children }) {
  return <span className="inline-flex items-center justify-center w-14 h-8 bg-[#ddd] border-2 border-[#777] font-black">{children}</span>;
}