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

import { useState } from "react";
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 style={s.card}>
            <span style={s.cardIcon}>⚔️</span>
            <div style={s.cardTitle}>Official Art</div>
            <p style={s.cardDesc}>
              Official artwork coming soon.
              <br />
              Art by Aaron Pressey.
            </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>
  );
}