export default function GrampsWebsite() {
  const links = {
    xCommunity: "https://twitter.com/i/communities/1924584826247540761",
    knowYourMeme: "https://wojakland.com/gmedia/grandpa_wojak-png/",
    pumpfun: "#",
  };

  const desktopIcons = [
    { label: "About Gramps", emoji: "📁", target: "about" },
    { label: "$GRAMPS", emoji: "💾", target: "token" },
    { label: "Buy Gramps", emoji: "💿", target: "buy" },
    { label: "Join Us", emoji: "🌐", target: "links" },
  ];

  const scrollToSection = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const Window = ({ title, children, className = "" }) => (
    <div
      className={`border-2 border-black bg-[#c0c0c0] shadow-[4px_4px_0_0_#000] ${className}`}
      style={{ imageRendering: "pixelated" }}
    >
      <div className="flex items-center justify-between border-b-2 border-black bg-[#000080] px-2 py-1 text-[12px] font-bold text-white">
        <span>{title}</span>
        <div className="flex gap-1">
          <span className="flex h-4 w-4 items-center justify-center border border-black bg-[#c0c0c0] text-[10px] leading-none text-black">_</span>
          <span className="flex h-4 w-4 items-center justify-center border border-black bg-[#c0c0c0] text-[10px] leading-none text-black">□</span>
          <span className="flex h-4 w-4 items-center justify-center border border-black bg-[#c0c0c0] text-[10px] leading-none text-black">✕</span>
        </div>
      </div>
      <div className="p-3 sm:p-4">{children}</div>
    </div>
  );

  const Button98 = ({ href, children, onClick }) => {
    const className =
      "inline-flex min-h-[44px] items-center justify-center border-2 border-black bg-[#d4d0c8] px-4 py-2 text-center text-[13px] font-bold text-black shadow-[2px_2px_0_0_#000] active:translate-x-[1px] active:translate-y-[1px] active:shadow-none";

    if (href) {
      return (
        <a href={href} target="_blank" rel="noreferrer" className={className}>
          {children}
        </a>
      );
    }

    return (
      <button onClick={onClick} className={className}>
        {children}
      </button>
    );
  };

  return (
    <div className="min-h-screen bg-[#008080] text-black" style={{ fontFamily: '"Courier New", monospace' }}>
      <div className="mx-auto max-w-7xl px-3 py-3 sm:px-4 sm:py-4">
        <div className="mb-4 border-2 border-black bg-[#c0c0c0] shadow-[4px_4px_0_0_#000]">
          <div className="flex flex-col gap-2 border-b-2 border-black bg-[#000080] px-3 py-2 text-white sm:flex-row sm:items-center sm:justify-between">
            <div>
              <div className="text-lg font-bold tracking-tight sm:text-xl">GRAMPS.EXE</div>
              <div className="text-[11px] sm:text-xs">Internet explorer has discovered $GRAMPS</div>
            </div>
            <div className="text-[11px] sm:text-xs">Status: old - online - bullish</div>
          </div>
          <div className="flex flex-wrap gap-2 px-3 py-2 text-[12px] sm:text-[13px]">
            <Button98 onClick={() => scrollToSection("about")}>About</Button98>
            <Button98 onClick={() => scrollToSection("token")}>Token</Button98>
            <Button98 onClick={() => scrollToSection("links")}>Links</Button98>
          </div>
        </div>

        <div className="grid gap-4 lg:grid-cols-[140px_minmax(0,1fr)] xl:grid-cols-[160px_minmax(0,1fr)]">
          <aside className="order-2 lg:order-1">
            <Window title="Desktop Icons" className="hidden lg:block">
              <div className="space-y-4">
                {desktopIcons.map((icon) => (
                  <button
                    key={icon.label}
                    onClick={() => scrollToSection(icon.target)}
                    className="flex w-full flex-col items-center gap-1 text-center text-[12px] hover:bg-white/40"
                  >
                    <div className="text-3xl">{icon.emoji}</div>
                    <div>{icon.label}</div>
                  </button>
                ))}
              </div>
            </Window>
          </aside>

          <main className="order-1 space-y-4 lg:order-2">
            <Window title="welcome.txt">
              <div className="grid gap-4 md:grid-cols-[280px_minmax(0,1fr)] md:items-start">
                <div className="border-2 border-black bg-[#e9e9e9] p-2 shadow-[inset_2px_2px_0_0_#fff,inset_-2px_-2px_0_0_#777]">
                  <img
                    src="https://i.ibb.co/nskB9gSx/grandpa-wojak.png"
                    alt="Gramps"
                    className="mx-auto w-full max-w-[260px] object-contain"
                    style={{ imageRendering: "pixelated" }}
                  />
                </div>

                <div className="space-y-3 text-[13px] leading-relaxed sm:text-[14px]">
                  <p>
                    <span className="font-bold">GRANDPA WOJAK HAS LOGGED ON.</span>
                  </p>
                  <p>
                    He has seen every cycle, forgotten every password, and still somehow arrived
                    early to the next one.
                  </p>
                  <p>
                    <span className="font-bold">Ticker:</span> $GRAMPS
                    <br />
                    <span className="font-bold">Mood:</span> suspiciously calm
                    <br />
                    <span className="font-bold">Operating system:</span> spiritually Windows 98
                  </p>
                  <div className="flex flex-wrap gap-2 pt-1">
                    <Button98 href={links.xCommunity}>X Community</Button98>
                    <Button98 href={links.knowYourMeme}>Wojak Land</Button98>
                    <Button98 href={links.pumpfun}>pump.fun</Button98>
                  </div>
                </div>
              </div>
            </Window>

            <div className="grid gap-4 xl:grid-cols-2">
              <Window title="about_gramps.txt" className="h-full" >
                <section id="about" className="space-y-3 text-[13px] leading-relaxed sm:text-[14px]">
                  <p>
                    <span className="font-bold">About Gramps</span>
                  </p>
                  <p>
                    Gramps is the elder of the timeline. He does not chase trends - he stares at
                    them through bifocals until they panic.
                  </p>
                  <p>
                    The whole vibe is simple: old internet, old man energy, and one coin that looks
                    like it has been sitting on a family computer desk since 1999.
                  </p>
                  <p>
                    He is not here to impress anyone. He is here to exist loudly, complain a little,
                    and somehow still outlast everybody else.
                  </p>
                </section>
              </Window>

              <Window title="token_info.ini" className="h-full">
                <section id="token" className="space-y-3 text-[13px] sm:text-[14px]">
                  <p className="font-bold">$GRAMPS basics</p>
                  <div className="grid gap-2">
                    {[
                      ["Ticker", "$GRAMPS"],
                      ["Theme", "Grandpa Wojak"],
                      ["Energy", "dated but dangerous"],
                      ["Aesthetic", "old PC / retro web / boomer doom"],
                    ].map(([k, v]) => (
                      <div key={k} className="grid grid-cols-[110px_1fr] gap-2 border border-black bg-[#e8e8e8] px-2 py-2">
                        <span className="font-bold">{k}</span>
                        <span>{v}</span>
                      </div>
                    ))}
                  </div>
                  <p className="pt-1 leading-relaxed">
                    Built for people who like their memes dusty, their websites old, and their coins
                    with a little cigarette-smoke-in-the-monitor energy.
                  </p>
                </section>
              </Window>
            </div>

            <Window title="community_links.html">
              <section id="links" className="space-y-4">
                <p className="text-[13px] font-bold sm:text-[14px]">Find Gramps around the internet</p>
                <div className="grid gap-3 sm:grid-cols-3">
                  <a
                    href={links.xCommunity}
                    target="_blank"
                    rel="noreferrer"
                    className="border-2 border-black bg-[#efefef] p-3 shadow-[3px_3px_0_0_#000]"
                  >
                    <div className="mb-1 text-sm font-bold">X Community</div>
                    <div className="text-[12px] leading-relaxed">Talk to the timeline. Post. Lurk. Complain.</div>
                  </a>
                  <a
                    href={links.knowYourMeme}
                    target="_blank"
                    rel="noreferrer"
                    className="border-2 border-black bg-[#efefef] p-3 shadow-[3px_3px_0_0_#000]"
                  >
                    <div className="mb-1 text-sm font-bold">Wojak Land</div>
                    <div className="text-[12px] leading-relaxed">For the lore, the receipts, and the internet archaeology.</div>
                  </a>
                  <a
                    href={links.pumpfun}
                    target="_blank"
                    rel="noreferrer"
                    className="border-2 border-black bg-[#efefef] p-3 shadow-[3px_3px_0_0_#000]"
                  >
                    <div className="mb-1 text-sm font-bold">pump.fun</div>
                    <div className="text-[12px] leading-relaxed">The buy button Gramps definitely does not understand.</div>
                  </a>
                </div>
              </section>
            </Window>

            <Window title="gramps_notes.txt">
              <div className="space-y-2 text-[12px] leading-relaxed sm:text-[13px]">
                <p>&gt; i dont trust new websites. this one loads fine.</p>
                <p>&gt; if something breaks try turning the computer off and back on</p>
                <p>&gt; those links up there... you can click them. i think.</p>
                <p>&gt; someone told me to update this site. i said no</p>
                <p>&gt; everything worked better in 1998 and i stand by that</p>
                <p>&gt; if you bought $GRAMPS already... good. if not... sit down first</p>
                <p>&gt; dont touch anything important. i labeled nothing</p>
                <p>&gt; gramps is still here. computer is making a noise but its fine</p>
              </div>
            </Window>
          </main>
        </div>
      </div>
    </div>
  );
}