import { useState, useEffect, useRef } from "react";

/* ── Win98 panel helpers ─────────────────────────────── */
const win98Panel = {
  background: "#c0c0c0",
  boxShadow:
    "inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf",
};
const win98Sunken = {
  background: "#fff",
  boxShadow:
    "inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf",
};
const win98Button = {
  background: "#c0c0c0",
  boxShadow:
    "inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf",
  border: "none",
  padding: "2px 8px",
  cursor: "pointer",
  fontFamily: '"Comic Neue", "Comic Sans MS", cursive',
  fontSize: "11px",
};

/* ── Title bar ───────────────────────────────────────── */
function TitleBar({ title, icon }: { title: string; icon?: string }) {
  return (
    <div
      style={{
        background: "linear-gradient(to right, #000080, #1084d0)",
        color: "#fff",
        fontFamily: '"Comic Neue", "Comic Sans MS", cursive',
        fontWeight: "bold",
        fontSize: "11px",
        padding: "3px 4px",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        userSelect: "none",
      }}
    >
      <span>
        {icon && <span style={{ marginRight: 4 }}>{icon}</span>}
        {title}
      </span>
      <div style={{ display: "flex", gap: 2 }}>
        {["_", "□", "✕"].map((c, i) => (
          <button
            key={i}
            style={{
              ...win98Button,
              padding: "0 4px",
              fontSize: "9px",
              lineHeight: "14px",
              minWidth: 16,
              color: "#000",
            }}
          >
            {c}
          </button>
        ))}
      </div>
    </div>
  );
}

/* ── Window wrapper ──────────────────────────────────── */
function Win98Window({
  title,
  icon,
  children,
  style,
}: {
  title: string;
  icon?: string;
  children: React.ReactNode;
  style?: React.CSSProperties;
}) {
  return (
    <div style={{ ...win98Panel, ...style, padding: 2 }}>
      <TitleBar title={title} icon={icon} />
      <div style={{ padding: 6 }}>{children}</div>
    </div>
  );
}

/* ── Hit counter ─────────────────────────────────────── */
function HitCounter({ count }: { count: number }) {
  const digits = String(count).padStart(7, "0").split("");
  return (
    <div style={{ display: "flex", gap: 1 }}>
      {digits.map((d, i) => (
        <span
          key={i}
          style={{
            background: "#000",
            color: "#00ff00",
            fontFamily: '"VT323", monospace',
            fontSize: "22px",
            padding: "0 3px",
            border: "1px inset #333",
          }}
        >
          {d}
        </span>
      ))}
    </div>
  );
}

/* ── Blinking text ───────────────────────────────────── */
function Blink({ children, color = "#ff00ff" }: { children: React.ReactNode; color?: string }) {
  const [vis, setVis] = useState(true);
  useEffect(() => {
    const id = setInterval(() => setVis((v) => !v), 600);
    return () => clearInterval(id);
  }, []);
  return (
    <span style={{ color, visibility: vis ? "visible" : "hidden", fontWeight: "bold" }}>
      {children}
    </span>
  );
}

/* ── Marquee ─────────────────────────────────────────── */
function Marquee({ text, color = "#ffff00" }: { text: string; color?: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const innerRef = useRef<HTMLSpanElement>(null);
  const [offset, setOffset] = useState(0);

  useEffect(() => {
    let raf: number;
    let pos = 0;
    const tick = () => {
      if (ref.current && innerRef.current) {
        const containerW = ref.current.offsetWidth;
        const textW = innerRef.current.offsetWidth;
        pos -= 1.2;
        if (pos < -textW) pos = containerW;
        setOffset(pos);
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <div
      ref={ref}
      style={{
        overflow: "hidden",
        whiteSpace: "nowrap",
        background: "#000",
        padding: "2px 0",
        borderTop: "1px solid #444",
        borderBottom: "1px solid #444",
      }}
    >
      <span
        ref={innerRef}
        style={{
          display: "inline-block",
          transform: `translateX(${offset}px)`,
          color,
          fontFamily: '"VT323", monospace',
          fontSize: "16px",
          letterSpacing: "1px",
        }}
      >
        {text}
      </span>
    </div>
  );
}

/* ── Music player ────────────────────────────────────── */
function MusicPlayer() {
  const [playing, setPlaying] = useState(false);
  const [track, setTrack] = useState(0);
  const tracks = [
    { title: "Numa Numa - O-Zone", dur: "3:28" },
    { title: "All Star - Smash Mouth", dur: "3:15" },
    { title: "Never Gonna Give You Up", dur: "3:33" },
    { title: "Dragostea Din Tei", dur: "3:39" },
  ];

  return (
    <Win98Window title="🎵 WINAMP 2.95 - Lite Edition" icon="♪">
      <div style={{ background: "#000", padding: 6, color: "#00ff00", fontFamily: '"VT323", monospace', fontSize: "13px" }}>
        <div style={{ color: "#00ff00", fontSize: "11px", marginBottom: 4, borderBottom: "1px solid #333", paddingBottom: 2 }}>
          ♪ NOW PLAYING ♪
        </div>
        <div style={{ color: "#ffff00", fontSize: "15px", marginBottom: 2 }}>
          {tracks[track].title}
        </div>
        <div style={{ color: "#888", fontSize: "11px" }}>
          {playing ? "▶ PLAYING" : "⏸ PAUSED"} — {tracks[track].dur}
        </div>
        <div
          style={{
            height: 6,
            background: "#111",
            margin: "6px 0",
            position: "relative",
            border: "1px solid #333",
          }}
        >
          <div
            style={{
              height: "100%",
              width: playing ? "45%" : "20%",
              background: "linear-gradient(to right, #006600, #00ff00)",
              transition: "none",
            }}
          />
        </div>
        <div style={{ display: "flex", gap: 4, marginTop: 4, flexWrap: "wrap" }}>
          {[
            { lbl: "⏮", act: () => setTrack((t) => (t - 1 + tracks.length) % tracks.length) },
            { lbl: playing ? "⏸" : "▶", act: () => setPlaying((p) => !p) },
            { lbl: "⏹", act: () => { setPlaying(false); } },
            { lbl: "⏭", act: () => setTrack((t) => (t + 1) % tracks.length) },
          ].map(({ lbl, act }, i) => (
            <button key={i} onClick={act} style={{ ...win98Button, fontSize: "14px", padding: "0 6px", background: "#1a1a1a", color: "#00ff00", boxShadow: "inset -1px -1px #005500, inset 1px 1px #003300" }}>
              {lbl}
            </button>
          ))}
        </div>
        <div style={{ marginTop: 6, fontSize: "11px", color: "#555" }}>
          {tracks.map((t, i) => (
            <div
              key={i}
              onClick={() => { setTrack(i); setPlaying(true); }}
              style={{
                cursor: "pointer",
                color: i === track ? "#00ff00" : "#555",
                padding: "1px 0",
              }}
            >
              {i === track ? "▶" : " "} {i + 1}. {t.title}
            </div>
          ))}
        </div>
      </div>
    </Win98Window>
  );
}

/* ── Guestbook ───────────────────────────────────────── */
const initialEntries = [
  { name: "xXdarkangel99Xx", msg: "OMG ur site is so kewl!!!! add me on MSN!!! ^_^", date: "2003-08-14" },
  { name: "StarlightDreamer", msg: "I luv ur backgrounds!! Where did u get them??", date: "2003-08-12" },
  { name: "TechnoWizard2000", msg: "FIRST!!! great site lol ur the best", date: "2003-08-11" },
  { name: "pinkbutterfli", msg: "added ur button 2 my site!! link me back plz :3", date: "2003-08-09" },
];

function Guestbook() {
  const [entries, setEntries] = useState(initialEntries);
  const [name, setName] = useState("");
  const [msg, setMsg] = useState("");
  const [signed, setSigned] = useState(false);

  const submit = () => {
    if (!name.trim() || !msg.trim()) return;
    setEntries([{ name, msg, date: "2003-08-15" }, ...entries]);
    setName("");
    setMsg("");
    setSigned(true);
  };

  return (
    <Win98Window title="📖 Sign My Guestbook!" icon="📖">
      <div style={{ fontFamily: '"Comic Neue", "Comic Sans MS", cursive', fontSize: "12px" }}>
        {signed && (
          <div style={{ background: "#00ff00", color: "#000", padding: 4, marginBottom: 6, textAlign: "center", fontWeight: "bold" }}>
            ✓ ENTRY ADDED!! TY 4 SIGNING!!!
          </div>
        )}
        <div style={{ marginBottom: 6 }}>
          <input
            placeholder="ur name/alias"
            value={name}
            onChange={(e) => setName(e.target.value)}
            style={{ ...win98Sunken, width: "100%", padding: "2px 4px", fontFamily: '"Comic Neue", cursive', fontSize: "11px", boxSizing: "border-box", marginBottom: 3 }}
          />
          <textarea
            placeholder="leave a message!! :D"
            value={msg}
            onChange={(e) => setMsg(e.target.value)}
            rows={3}
            style={{ ...win98Sunken, width: "100%", padding: "2px 4px", fontFamily: '"Comic Neue", cursive', fontSize: "11px", resize: "none", boxSizing: "border-box" }}
          />
          <button onClick={submit} style={{ ...win98Button, marginTop: 3, display: "block" }}>
            Sign! ✍️
          </button>
        </div>
        <div
          style={{
            maxHeight: 180,
            overflowY: "auto",
            ...win98Sunken,
            padding: 4,
          }}
        >
          {entries.map((e, i) => (
            <div key={i} style={{ borderBottom: "1px dashed #999", paddingBottom: 4, marginBottom: 4 }}>
              <div style={{ color: "#000080", fontWeight: "bold" }}>{e.name}</div>
              <div style={{ color: "#333" }}>{e.msg}</div>
              <div style={{ color: "#999", fontSize: "10px" }}>{e.date}</div>
            </div>
          ))}
        </div>
      </div>
    </Win98Window>
  );
}

/* ── Badge ───────────────────────────────────────────── */
function Badge({ text, bg, fg }: { text: string; bg: string; fg: string }) {
  return (
    <div
      style={{
        background: bg,
        color: fg,
        fontFamily: '"Press Start 2P", monospace',
        fontSize: "7px",
        padding: "3px 6px",
        border: "1px solid #000",
        display: "inline-block",
        imageRendering: "pixelated",
        lineHeight: 1.4,
        cursor: "default",
        userSelect: "none",
      }}
    >
      {text}
    </div>
  );
}

/* ── Blog post ───────────────────────────────────────── */
function BlogPost({
  date,
  title,
  mood,
  music,
  children,
  imgUrl,
  imgAlt,
}: {
  date: string;
  title: string;
  mood: string;
  music: string;
  children: React.ReactNode;
  imgUrl?: string;
  imgAlt?: string;
}) {
  return (
    <Win98Window title={`📝 ${date} — ${title}`} icon="📝">
      <div style={{ fontFamily: '"Comic Neue", "Comic Sans MS", cursive', fontSize: "13px", color: "#000" }}>
        <div style={{ display: "flex", gap: 4, marginBottom: 6, flexWrap: "wrap" }}>
          <span style={{ background: "#ffff00", padding: "1px 5px", border: "1px solid #999", fontSize: "11px" }}>
            🌡 Mood: {mood}
          </span>
          <span style={{ background: "#e0f0ff", padding: "1px 5px", border: "1px solid #999", fontSize: "11px" }}>
            🎵 Listening: {music}
          </span>
        </div>
        {imgUrl && (
          <div style={{ float: "right", marginLeft: 8, marginBottom: 4, border: "2px solid #000080" }}>
            <img
              src={imgUrl}
              alt={imgAlt}
              style={{ display: "block", maxWidth: 160, maxHeight: 120, objectFit: "cover" }}
            />
            <div style={{ background: "#000080", color: "#fff", textAlign: "center", fontSize: "9px", padding: "1px 0", fontFamily: '"Press Start 2P", monospace' }}>
              {imgAlt}
            </div>
          </div>
        )}
        <div style={{ lineHeight: 1.6 }}>{children}</div>
        <div style={{ clear: "both" }} />
      </div>
    </Win98Window>
  );
}

/* ── Meme card ───────────────────────────────────────── */
function MemeCard({ topText, bottomText, imgUrl, alt }: { topText: string; bottomText: string; imgUrl: string; alt: string }) {
  return (
    <div
      style={{
        ...win98Panel,
        padding: 4,
        textAlign: "center",
        minWidth: 180,
        flex: "0 0 auto",
      }}
    >
      <div
        style={{
          position: "relative",
          background: "#000",
          display: "inline-block",
          lineHeight: 0,
        }}
      >
        <img src={imgUrl} alt={alt} style={{ display: "block", width: 180, height: 140, objectFit: "cover" }} />
        <div
          style={{
            position: "absolute",
            top: 4,
            left: 0,
            right: 0,
            textAlign: "center",
            fontFamily: '"Press Start 2P", monospace',
            fontSize: "10px",
            color: "#fff",
            textShadow: "1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000",
            lineHeight: 1.3,
            padding: "0 4px",
          }}
        >
          {topText}
        </div>
        <div
          style={{
            position: "absolute",
            bottom: 4,
            left: 0,
            right: 0,
            textAlign: "center",
            fontFamily: '"Press Start 2P", monospace',
            fontSize: "10px",
            color: "#fff",
            textShadow: "1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000",
            lineHeight: 1.3,
            padding: "0 4px",
          }}
        >
          {bottomText}
        </div>
      </div>
    </div>
  );
}

/* ── Photo gallery ───────────────────────────────────── */
function PhotoGallery() {
  const [selected, setSelected] = useState<null | { url: string; cap: string }>(null);
  const photos = [
    { url: "https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=200&h=150&fit=crop&auto=format", cap: "my kitteh Mr. Whiskers!!" },
    { url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=200&h=150&fit=crop&auto=format", cap: "mountains r so pretty" },
    { url: "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=200&h=150&fit=crop&auto=format", cap: "morning coffee b4 school" },
    { url: "https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07?w=200&h=150&fit=crop&auto=format", cap: "yellow flowers = happiness" },
    { url: "https://images.unsplash.com/photo-1501854140801-50d01698950b?w=200&h=150&fit=crop&auto=format", cap: "camping last summer!!" },
    { url: "https://images.unsplash.com/photo-1518791841217-8f162f1912da?w=200&h=150&fit=crop&auto=format", cap: "another cat lol ^_^" },
  ];

  return (
    <Win98Window title="📸 my photo album (updated aug 2003)" icon="📷">
      <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
        {photos.map((p, i) => (
          <div
            key={i}
            onClick={() => setSelected(p)}
            style={{
              cursor: "pointer",
              border: "2px solid #808080",
              padding: 2,
              background: "#fff",
              transition: "border-color 0.1s",
            }}
            onMouseEnter={(e) => (e.currentTarget.style.borderColor = "#ff00ff")}
            onMouseLeave={(e) => (e.currentTarget.style.borderColor = "#808080")}
          >
            <img
              src={p.url}
              alt={p.cap}
              style={{ display: "block", width: 80, height: 60, objectFit: "cover" }}
            />
            <div style={{ fontSize: "8px", fontFamily: '"Comic Neue", cursive', color: "#000080", maxWidth: 80, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {p.cap}
            </div>
          </div>
        ))}
      </div>

      {selected && (
        <div
          onClick={() => setSelected(null)}
          style={{
            position: "fixed",
            inset: 0,
            background: "rgba(0,0,0,0.85)",
            zIndex: 9999,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            cursor: "pointer",
          }}
        >
          <div style={{ ...win98Panel, padding: 4, maxWidth: 360 }}>
            <TitleBar title={selected.cap} icon="📷" />
            <div style={{ padding: 8, textAlign: "center" }}>
              <img
                src={selected.url.replace("w=200&h=150", "w=340&h=260")}
                alt={selected.cap}
                style={{ display: "block", maxWidth: "100%", border: "2px solid #000080" }}
              />
              <div style={{ fontFamily: '"Comic Neue", cursive', fontSize: "12px", marginTop: 4, color: "#000080" }}>
                {selected.cap}
              </div>
              <div style={{ marginTop: 4, fontSize: "10px", color: "#888" }}>[click anywhere to close]</div>
            </div>
          </div>
        </div>
      )}
    </Win98Window>
  );
}

/* ── About Me sidebar ────────────────────────────────── */
function AboutMe() {
  return (
    <Win98Window title="✨ about me!!" icon="★">
      <div style={{ fontFamily: '"Comic Neue", "Comic Sans MS", cursive', fontSize: "12px", color: "#000" }}>
        <div style={{ textAlign: "center", marginBottom: 6 }}>
          <img
            src="https://images.unsplash.com/photo-1529665253569-6d01c0eaf7b6?w=80&h=80&fit=crop&auto=format"
            alt="my avatar"
            style={{ border: "3px solid #ff00ff", borderRadius: 0, display: "inline-block" }}
          />
          <div style={{ color: "#ff00ff", fontWeight: "bold", fontSize: "14px", marginTop: 3 }}>
            ~*~ aetherbiome ~*~
          </div>
          <div style={{ color: "#000080", fontSize: "11px" }}>aka: cosmic_cat_gurl</div>
        </div>

        {[
          ["age", "17 (VIRGO!!)"],
          ["location", "somewhere, USA"],
          ["status", "single *hint hint*"],
          ["aim", "cosmiccat2003"],
          ["fav band", "Linkin Park ♥"],
          ["fav movie", "The Matrix"],
          ["fav food", "pizza + ramen"],
          ["pets", "2 cats 1 frog"],
        ].map(([k, v]) => (
          <div key={k} style={{ display: "flex", gap: 4, borderBottom: "1px dotted #ccc", padding: "2px 0" }}>
            <span style={{ color: "#000080", fontWeight: "bold", minWidth: 64, fontSize: "11px" }}>{k}:</span>
            <span style={{ fontSize: "11px" }}>{v}</span>
          </div>
        ))}

        <div style={{ marginTop: 6, textAlign: "center" }}>
          <Blink color="#ff0000">♥ UNDER CONSTRUCTION ♥</Blink>
        </div>
      </div>
    </Win98Window>
  );
}

/* ── Links / web ring ────────────────────────────────── */
function FriendLinks() {
  const links = [
    "xXshadowkingXx",
    "glitterberry99",
    "techno_witch",
    "pikachu_forever",
    "darkrose_dreams",
    "neon_butterfly",
  ];
  return (
    <Win98Window title="🌐 friends + links" icon="🌐">
      <div style={{ fontFamily: '"Comic Neue", cursive', fontSize: "12px" }}>
        {links.map((l) => (
          <div key={l} style={{ padding: "1px 0" }}>
            <span style={{ color: "#0000ee", textDecoration: "underline", cursor: "pointer" }}>
              ➤ {l}.geocities.com
            </span>
          </div>
        ))}
        <div style={{ marginTop: 6, borderTop: "1px dashed #999", paddingTop: 4 }}>
          <div style={{ color: "#ff00ff", fontWeight: "bold", fontSize: "11px", textAlign: "center" }}>
            ♦ WEB RING ♦
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 3 }}>
            <button style={win98Button}>◄ Prev</button>
            <button style={win98Button}>Random</button>
            <button style={win98Button}>Next ►</button>
          </div>
        </div>
      </div>
    </Win98Window>
  );
}

/* ── Main App ────────────────────────────────────────── */
export default function App() {
  const [hitCount] = useState(1337842);
  const [activeTab, setActiveTab] = useState<"blog" | "photos" | "memes">("blog");

  /* tiled star background */
  const starBg: React.CSSProperties = {
    minHeight: "100vh",
    background: `
      radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.9) 0%, transparent 100%),
      radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.7) 0%, transparent 100%),
      radial-gradient(1px 1px at 50% 15%, rgba(255,255,255,0.8) 0%, transparent 100%),
      radial-gradient(1px 1px at 70% 45%, rgba(255,255,255,0.6) 0%, transparent 100%),
      radial-gradient(1px 1px at 85% 80%, rgba(255,255,255,0.9) 0%, transparent 100%),
      radial-gradient(2px 2px at 20% 85%, rgba(255,200,255,0.8) 0%, transparent 100%),
      radial-gradient(2px 2px at 60% 35%, rgba(200,200,255,0.7) 0%, transparent 100%),
      radial-gradient(2px 2px at 90% 10%, rgba(255,255,200,0.8) 0%, transparent 100%),
      #000033
    `,
    fontFamily: '"Comic Neue", "Comic Sans MS", cursive',
    padding: "8px",
    boxSizing: "border-box",
  };

  const tabStyle = (tab: typeof activeTab): React.CSSProperties => ({
    ...win98Button,
    padding: "3px 10px",
    fontSize: "12px",
    fontWeight: tab === activeTab ? "bold" : "normal",
    background: tab === activeTab ? "#fff" : "#c0c0c0",
    boxShadow:
      tab === activeTab
        ? "inset 1px 1px #0a0a0a, inset -1px -1px #fff"
        : win98Button.boxShadow as string,
  });

  return (
    <div style={starBg}>
      {/* ── Marquee ── */}
      <Marquee
        text="✨ WELCOME TO AETHERBIOME'S TOTALLY AWESOME SITE!! ✨ ♥ YOU ARE VISITOR #1,337,842 ♥ ✨ BEST VIEWED IN INTERNET EXPLORER 6 AT 800x600 ✨ ♥ NO HOTLINKING MY IMAGES!! ♥ ✨ SIGN MY GUESTBOOK!!! ✨ "
        color="#ffff00"
      />

      {/* ── Header disclaimer window ── */}
      <div style={{ ...win98Panel, padding: 2, marginBottom: 6, marginTop: 4 }}>
        <TitleBar title="$DISCLAIMER.info" icon="⚠" />
        <div style={{ padding: "4px 6px", display: "flex", gap: 16, flexWrap: "wrap" }}>
          {["OPTIMISED FOR DESKTOP USE", "MAY CONTAIN FLASHING IMAGES", "ACCESSIBILITY NOT GUARANTEED"].map((s) => (
            <span
              key={s}
              style={{
                fontFamily: '"VT323", monospace',
                fontSize: "14px",
                color: "#000",
                background: "#c0c0c0",
                border: "1px solid #808080",
                padding: "1px 6px",
              }}
            >
              {s}
            </span>
          ))}
        </div>
      </div>

      {/* ── Site title banner ── */}
      <div
        style={{
          background: "linear-gradient(135deg, #000080 0%, #800080 50%, #000080 100%)",
          border: "3px solid #ffff00",
          padding: "12px",
          textAlign: "center",
          marginBottom: 6,
          position: "relative",
          overflow: "hidden",
        }}
      >
        <div
          style={{
            fontFamily: '"Press Start 2P", monospace',
            fontSize: "clamp(12px, 3vw, 22px)",
            color: "#ffff00",
            textShadow: "2px 2px #ff00ff, 4px 4px #000",
            marginBottom: 4,
          }}
        >
          ★ AETHERBIOME ★
        </div>
        <div style={{ fontFamily: '"Comic Neue", cursive', color: "#00ffff", fontSize: "13px" }}>
          <Blink color="#00ffff">~ a place 4 my thots + vibes + stuff ~</Blink>
        </div>
        <div style={{ position: "absolute", top: 4, left: 8, fontSize: "20px" }}>✨</div>
        <div style={{ position: "absolute", top: 4, right: 8, fontSize: "20px" }}>✨</div>
        <div style={{ position: "absolute", bottom: 4, left: 16, fontSize: "16px" }}>⭐</div>
        <div style={{ position: "absolute", bottom: 4, right: 16, fontSize: "16px" }}>⭐</div>
      </div>

      {/* ── Main layout ── */}
      <div style={{ display: "flex", gap: 6, alignItems: "flex-start", flexWrap: "wrap" }}>

        {/* ── Left sidebar ── */}
        <div style={{ display: "flex", flexDirection: "column", gap: 6, flex: "0 0 200px", minWidth: 180 }}>
          <AboutMe />

          <Win98Window title="👁 visitors" icon="👁">
            <div style={{ textAlign: "center", fontFamily: '"Comic Neue", cursive', fontSize: "11px" }}>
              <div style={{ marginBottom: 4, color: "#000080", fontWeight: "bold" }}>
                u r visitor #:
              </div>
              <HitCounter count={hitCount} />
              <div style={{ marginTop: 4, color: "#ff0000", fontSize: "10px" }}>
                <Blink color="#ff0000">since jan 1 2003!!</Blink>
              </div>
            </div>
          </Win98Window>

          <MusicPlayer />

          <Win98Window title="🏷 my badges" icon="🏷">
            <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
              <Badge text="NETSCAPE 4" bg="#00aa00" fg="#fff" />
              <Badge text="IE6 USER" bg="#0066cc" fg="#fff" />
              <Badge text="MADE WITH NOTEPAD" bg="#ff6600" fg="#fff" />
              <Badge text="ANTI POP-UP" bg="#cc0000" fg="#fff" />
              <Badge text="NO FRAMES" bg="#660099" fg="#fff" />
              <Badge text="WEEB 1.0" bg="#ff00ff" fg="#000" />
            </div>
          </Win98Window>

          <FriendLinks />
        </div>

        {/* ── Main content ── */}
        <div style={{ flex: "1 1 400px", minWidth: 300 }}>

          {/* Tab bar */}
          <div style={{ display: "flex", gap: 2, marginBottom: -1, position: "relative", zIndex: 1 }}>
            {(["blog", "photos", "memes"] as const).map((tab) => (
              <button key={tab} style={tabStyle(tab)} onClick={() => setActiveTab(tab)}>
                {tab === "blog" ? "📝 BLOG" : tab === "photos" ? "📸 PHOTOS" : "😂 MEMES"}
              </button>
            ))}
          </div>

          <div style={{ ...win98Panel, padding: 4 }}>

            {/* Blog tab */}
            {activeTab === "blog" && (
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <BlogPost
                  date="august 14, 2003"
                  title="omg today was INSANE"
                  mood="excited / nervous / ^_^"
                  music="In The End - Linkin Park"
                  imgUrl="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=200&h=150&fit=crop&auto=format"
                  imgAlt="my coffee this morning"
                >
                  ok so u guys wont BELIEVE what happened at school today!!! so basically i was sitting in math class (ugh mr. henderson is THE WORST btw) and my friend ashley passes me this note and its like "josh likes u!!" and i literally almost DIED lmaoooo 😭😭
                  <br /><br />
                  anyway afterwards we went to the mall and i got this SUPER cute hoodie from hot topic it has a <b>Invader Zim</b> design on it and its black w/ purple stars so basically its perfect lol
                  <br /><br />
                  also i updated my layout!! new background = stars because space is so mysterious and deep like my soul lol jk jk. comment if u like it!!
                  <br /><br />
                  <span style={{ color: "#800080" }}>
                    p.s. if ur reading this josh please stop its creepy thx 😤
                  </span>
                </BlogPost>

                <BlogPost
                  date="august 12, 2003"
                  title="quiz results + boring tuesday"
                  mood="blah / sleepy 😴"
                  music="Sk8er Boi - Avril Lavigne"
                  imgUrl="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=200&h=150&fit=crop&auto=format"
                  imgAlt="mr whiskers helping me study"
                >
                  took this quiz called "what kind of anime character r u" and got <b>mysterious lone wolf</b> which is SO accurate its kinda scary lol
                  <br /><br />
                  mr whiskers sat on my homework AGAIN while i was trying to study for the history test. honestly he is the most chaotic creature alive and i love him
                  <br /><br />
                  current obsessions: <span style={{ color: "#ff0000" }}>FLCL</span> | <span style={{ color: "#0000ff" }}>Ghost in the Shell</span> | <span style={{ color: "#008000" }}>DDR (got an A on Butterfly finally!!)</span>
                </BlogPost>

                <BlogPost
                  date="august 9, 2003"
                  title="my matrix theory (long post srry)"
                  mood="philosophical 🤔"
                  music="One Step Closer - Linkin Park"
                  imgUrl="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=200&h=150&fit=crop&auto=format"
                  imgAlt="the matrix is REAL"
                >
                  ok so ive been thinking about this a LOT. what if we are literally living in a simulation right now?? like the Matrix but real?? because think about it — deja vu is literally a glitch in the matrix (they say this in the movie!!) and i have deja vu ALL THE TIME
                  <br /><br />
                  also my friend told me about this book called simulacra and simulation by baudrillard and neo literally has it in the movie so im gonna try to read it even tho it sounds hard lol
                  <br /><br />
                  anyway if ur a robot reading this: <Blink color="#ff0000">HELLO ROBOT</Blink>
                </BlogPost>
              </div>
            )}

            {/* Photos tab */}
            {activeTab === "photos" && (
              <PhotoGallery />
            )}

            {/* Memes tab */}
            {activeTab === "memes" && (
              <Win98Window title="😂 dank memes 4 my fellow intellectuals" icon="😂">
                <div style={{ fontFamily: '"Comic Neue", cursive', fontSize: "12px", color: "#000", marginBottom: 6 }}>
                  <Blink color="#ff0000">WARNING: EXTREMELY DANK CONTENT AHEAD</Blink>
                  {" "}— not 4 the faint of heart!!
                </div>
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                  <MemeCard
                    topText="WHEN U FINALLY"
                    bottomText="GET DIAL-UP 56K"
                    imgUrl="https://images.unsplash.com/photo-1529665253569-6d01c0eaf7b6?w=200&h=150&fit=crop&auto=format"
                    alt="happy meme"
                  />
                  <MemeCard
                    topText="MOM: THE INTERNET"
                    bottomText="IS NOT REAL LIFE"
                    imgUrl="https://images.unsplash.com/photo-1518791841217-8f162f1912da?w=200&h=150&fit=crop&auto=format"
                    alt="cat meme"
                  />
                  <MemeCard
                    topText="ME @ 2AM:"
                    bottomText="JUST ONE MORE PAGE"
                    imgUrl="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=200&h=150&fit=crop&auto=format"
                    alt="coffee meme"
                  />
                  <MemeCard
                    topText="LINKIN PARK"
                    bottomText="IN THE END IT DOESNT EVEN MATTER"
                    imgUrl="https://images.unsplash.com/photo-1516981879613-9f5da904015f?w=200&h=150&fit=crop&auto=format"
                    alt="dramatic meme"
                  />
                </div>
                <div style={{ marginTop: 8, ...win98Sunken, padding: 6, fontFamily: '"VT323", monospace', fontSize: "13px", color: "#000080" }}>
                  ► MEME OF THE WEEK: "All your base are belong to us" — still funny. will always be funny. if u dont know this meme we cant be friends.
                </div>
              </Win98Window>
            )}
          </div>
        </div>

        {/* ── Right sidebar ── */}
        <div style={{ display: "flex", flexDirection: "column", gap: 6, flex: "0 0 200px", minWidth: 180 }}>
          <Guestbook />

          <Win98Window title="💬 quote of the day" icon="💬">
            <div
              style={{
                fontFamily: '"Comic Neue", cursive',
                fontSize: "12px",
                fontStyle: "italic",
                color: "#000080",
                ...win98Sunken,
                padding: 6,
              }}
            >
              "We are the music makers, and we are the dreamers of dreams."
              <div style={{ fontStyle: "normal", fontWeight: "bold", marginTop: 4, color: "#800080" }}>
                — Willy Wonka
              </div>
            </div>
          </Win98Window>

          <Win98Window title="📡 current status" icon="📡">
            <div style={{ fontFamily: '"VT323", monospace', fontSize: "14px" }}>
              {[
                ["eating", "ramen + pocky"],
                ["reading", "sandman vol 3"],
                ["watching", "FLCL (rewatch)"],
                ["playing", "Kingdom Hearts"],
                ["mood", "chaotic neutral"],
                ["aim status", "away (brb)"],
              ].map(([k, v]) => (
                <div key={k} style={{ display: "flex", gap: 4, borderBottom: "1px dotted #aaa", padding: "2px 0" }}>
                  <span style={{ color: "#000080", minWidth: 60 }}>{k}:</span>
                  <span style={{ color: "#333" }}>{v}</span>
                </div>
              ))}
            </div>
          </Win98Window>

          <Win98Window title="🎮 poll" icon="🎮">
            <Poll />
          </Win98Window>

          <Win98Window title="🌈 my fav colors" icon="🌈">
            <div style={{ display: "flex", gap: 3, flexWrap: "wrap" }}>
              {[
                "#ff00ff", "#00ffff", "#ffff00", "#ff6600",
                "#00ff00", "#800080", "#000080", "#008080",
              ].map((c) => (
                <div
                  key={c}
                  title={c}
                  style={{
                    width: 24,
                    height: 24,
                    background: c,
                    border: "2px solid #000",
                    cursor: "default",
                  }}
                />
              ))}
            </div>
          </Win98Window>
        </div>
      </div>

      {/* ── Footer ── */}
      <div
        style={{
          marginTop: 10,
          ...win98Panel,
          padding: 6,
          textAlign: "center",
          fontFamily: '"VT323", monospace',
          fontSize: "13px",
          color: "#000",
        }}
      >
        <div>
          © 2003 aetherbiome — all wrongs reserved | no hotlinking!! | best viewed 800×600
        </div>
        <div style={{ marginTop: 3, display: "flex", justifyContent: "center", gap: 8, flexWrap: "wrap" }}>
          <Badge text="HTML 4.01" bg="#e34c26" fg="#fff" />
          <Badge text="CSS2" bg="#264de4" fg="#fff" />
          <Badge text="NO AI" bg="#ff0000" fg="#fff" />
          <Badge text="GEOCITIES" bg="#ff8800" fg="#000" />
          <Badge text="NETSCAPE NOW" bg="#008000" fg="#fff" />
        </div>
        <div style={{ marginTop: 4 }}>
          <Blink color="#ff00ff">✨ thx 4 visiting!! ✨</Blink>
        </div>
      </div>
    </div>
  );
}

/* ── Poll widget ─────────────────────────────────────── */
function Poll() {
  const options = [
    { label: "Linkin Park", votes: 42 },
    { label: "Avril Lavigne", votes: 28 },
    { label: "Evanescence", votes: 35 },
    { label: "Good Charlotte", votes: 19 },
  ];
  const [voted, setVoted] = useState<number | null>(null);
  const [counts, setCounts] = useState(options.map((o) => o.votes));
  const total = counts.reduce((a, b) => a + b, 0);

  const vote = (i: number) => {
    if (voted !== null) return;
    setVoted(i);
    setCounts((c) => c.map((v, idx) => (idx === i ? v + 1 : v)));
  };

  return (
    <div style={{ fontFamily: '"Comic Neue", cursive', fontSize: "11px", color: "#000" }}>
      <div style={{ fontWeight: "bold", marginBottom: 4, color: "#000080" }}>
        fav early 2000s artist??
      </div>
      {options.map((o, i) => (
        <div key={i} style={{ marginBottom: 4 }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 1 }}>
            <span
              onClick={() => vote(i)}
              style={{
                cursor: voted === null ? "pointer" : "default",
                color: voted === i ? "#800080" : "#000",
                fontWeight: voted === i ? "bold" : "normal",
                textDecoration: voted === null ? "underline" : "none",
              }}
            >
              {o.label}
            </span>
            {voted !== null && (
              <span style={{ color: "#808080" }}>
                {Math.round((counts[i] / (total + (voted === i ? 1 : 0))) * 100)}%
              </span>
            )}
          </div>
          {voted !== null && (
            <div style={{ height: 6, background: "#ddd", border: "1px solid #999" }}>
              <div
                style={{
                  height: "100%",
                  width: `${(counts[i] / counts.reduce((a, b) => a + b, 0)) * 100}%`,
                  background: i === voted ? "#800080" : "#000080",
                }}
              />
            </div>
          )}
        </div>
      ))}
      {voted === null && (
        <div style={{ color: "#808080", fontSize: "10px" }}>click to vote!!</div>
      )}
      {voted !== null && (
        <div style={{ color: "#800080", fontSize: "10px", fontWeight: "bold" }}>
          voted!! ty!! ✓
        </div>
      )}
    </div>
  );
}