silma-bone-lord-bob/pages/world/gallery.tsx

import { useState } from "react";
import Image from "next/image";
import SiteLayout from "@/pages/components/SiteLayout";

type Tab = "official" | "fan";

const s = {
  page: {
    maxWidth: "960px",
    margin: "0 auto",
    padding: "64px 32px 96px",
  } as React.CSSProperties,
  hero: {
    marginBottom: "48px",
    textAlign: "center" as const,
  } as React.CSSProperties,
  eyebrow: {
    display: "block",
    fontSize: "0.75rem",
    fontWeight: 700,
    letterSpacing: "0.18em",
    textTransform: "uppercase" as const,
    color: "#c0392b",
    marginBottom: "16px",
  } as React.CSSProperties,
  h1: {
    fontFamily: "'Georgia', 'Times New Roman', serif",
    fontSize: "clamp(2.4rem, 6vw, 4rem)",
    fontWeight: 700,
    color: "#e8dcc8",
    lineHeight: 1.1,
    marginBottom: "20px",
  } as React.CSSProperties,
  heroSub: {
    fontSize: "1.05rem",
    color: "#9e9080",
    maxWidth: "480px",
    margin: "0 auto",
    lineHeight: 1.7,
  } as React.CSSProperties,
  tabs: {
    display: "flex",
    gap: "0",
    borderBottom: "1px solid rgba(232,220,200,0.12)",
    marginBottom: "40px",
  } as React.CSSProperties,
  tab: {
    padding: "12px 28px",
    fontSize: "0.9rem",
    fontWeight: 600,
    letterSpacing: "0.06em",
    textTransform: "uppercase" as const,
    background: "none",
    border: "none",
    cursor: "pointer",
    color: "#9e9080",
    borderBottom: "2px solid transparent",
    marginBottom: "-1px",
    transition: "color 0.2s, border-color 0.2s",
    fontFamily: "inherit",
  } as React.CSSProperties,
  tabActive: {
    color: "#e8dcc8",
    borderBottom: "2px solid #c0392b",
  } as React.CSSProperties,
  card: {
    background: "#1a1510",
    border: "1px solid rgba(232,220,200,0.1)",
    borderRadius: "8px",
    padding: "60px 40px",
    textAlign: "center" as const,
  } as React.CSSProperties,
  cardIcon: {
    fontSize: "3rem",
    display: "block",
    marginBottom: "20px",
    opacity: 0.5,
  } as React.CSSProperties,
  cardTitle: {
    fontFamily: "'Georgia', 'Times New Roman', serif",
    fontSize: "1.4rem",
    fontWeight: 700,
    color: "#e8dcc8",
    marginBottom: "12px",
  } as React.CSSProperties,
  cardDesc: {
    fontSize: "0.92rem",
    color: "#9e9080",
    lineHeight: 1.65,
    maxWidth: "400px",
    margin: "0 auto",
  } as React.CSSProperties,
};

export default function Gallery() {
  const [activeTab, setActiveTab] = useState<Tab>("official");

  return (
    <SiteLayout
      title="Gallery"
      description="Official art and fan art for Bone Lord Bob — American Anime. Art by Aaron Pressey."
      keywords="Bone Lord Bob, gallery, official art, fan art, American Anime, Aaron Pressey, character art"
    >
      <div style={s.page}>
        {/* Hero */}
        <div style={s.hero}>
          <span style={s.eyebrow}>Art &amp; Gallery</span>
          <h1 style={s.h1}>Gallery</h1>
          <p style={s.heroSub}>
            The world made visible. Official art and fan submissions.
          </p>
        </div>

        {/* Tabs */}
        <div style={s.tabs}>
          <button
            style={{
              ...s.tab,
              ...(activeTab === "official" ? s.tabActive : {}),
            }}
            onClick={() => setActiveTab("official")}
            aria-selected={activeTab === "official"}
          >
            Official Art
          </button>
          <button
            style={{
              ...s.tab,
              ...(activeTab === "fan" ? s.tabActive : {}),
            }}
            onClick={() => setActiveTab("fan")}
            aria-selected={activeTab === "fan"}
          >
            Fan Art
          </button>
        </div>

        {/* Tab content */}
        {activeTab === "official" && (
          <div>
            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
              gap: "16px",
              marginBottom: "24px",
            }}>
              {[
                { src: "/char-blb-throne.png", alt: "Bone Lord Bob on his throne — art by Aaron Pressey" },
                { src: "/art-bone-squad.png", alt: "The Bone Squad — four skeletal figures — art by Aaron Pressey" },
                { src: "/char-unknown-1.jpg", alt: "Unknown character — art by Aaron Pressey" },
                { src: "/char-unknown-2.jpg", alt: "Unknown robed scholar — art by Aaron Pressey" },
                { src: "/char-unknown-3.jpg", alt: "Unknown horned warrior — art by Aaron Pressey" },
                { src: "/char-unknown-4.jpg", alt: "Unknown skull knight — art by Aaron Pressey" },
              ].map((img, i) => (
                <div key={i} style={{
                  position: "relative",
                  aspectRatio: img.src.includes("bone-squad") ? "16/9" : "2/3",
                  borderRadius: "8px",
                  overflow: "hidden",
                  border: "1px solid rgba(160, 100, 255, 0.2)",
                  background: "rgba(15, 5, 28, 0.6)",
                }}>
                  <Image
                    src={img.src}
                    alt={img.alt}
                    fill
                    style={{ objectFit: "cover", objectPosition: "top" }}
                    sizes="(max-width: 768px) 100vw, 33vw"
                  />
                </div>
              ))}
            </div>
            <p style={{ textAlign: "center", fontSize: "0.82rem", color: "#9e9080", marginTop: "8px" }}>
              Art by Aaron Pressey · More coming soon
            </p>
          </div>
        )}

        {activeTab === "fan" && (
          <div style={s.card}>
            <span style={s.cardIcon}>🎨</span>
            <div style={s.cardTitle}>Fan Art</div>
            <p style={s.cardDesc}>
              Fan art gallery coming soon.
              <br />
              Tag us <strong>@BoneLordBob</strong> to be featured.
            </p>
          </div>
        )}
      </div>
    </SiteLayout>
  );
}