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

import SiteLayout from "@/pages/components/SiteLayout";

const s = {
  page: {
    maxWidth: "1000px",
    margin: "0 auto",
    padding: "64px 32px 96px",
  } as React.CSSProperties,
  hero: {
    marginBottom: "64px",
    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: "520px",
    margin: "0 auto",
    lineHeight: 1.7,
  } as React.CSSProperties,
  sectionLabel: {
    display: "block",
    fontSize: "0.72rem",
    fontWeight: 700,
    letterSpacing: "0.14em",
    textTransform: "uppercase" as const,
    color: "#c0392b",
    marginBottom: "12px",
    textAlign: "center" as const,
  } as React.CSSProperties,
  grid: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
    gap: "20px",
    marginTop: "32px",
    marginBottom: "48px",
  } as React.CSSProperties,
  card: {
    background: "#1a1510",
    border: "1px solid rgba(232,220,200,0.12)",
    borderRadius: "8px",
    padding: "32px 28px",
    transition: "border-color 0.2s",
  } as React.CSSProperties,
  cardIcon: {
    fontSize: "2rem",
    marginBottom: "16px",
    display: "block",
  } as React.CSSProperties,
  cardName: {
    fontFamily: "'Georgia', 'Times New Roman', serif",
    fontSize: "1.25rem",
    fontWeight: 700,
    color: "#e8dcc8",
    marginBottom: "12px",
  } as React.CSSProperties,
  cardDesc: {
    fontSize: "0.92rem",
    color: "#9e9080",
    lineHeight: 1.65,
  } as React.CSSProperties,
  more: {
    textAlign: "center" as const,
    padding: "32px",
    background: "#120f0a",
    border: "1px solid rgba(232,220,200,0.08)",
    borderRadius: "8px",
    fontSize: "0.9rem",
    color: "#9e9080",
    fontStyle: "italic",
    letterSpacing: "0.04em",
  } as React.CSSProperties,
};

const REGIONS = [
  {
    icon: "🏴",
    name: "The Bone Kingdom",
    desc: "Where the dead outnumber the living. The seat of the Bone Lord's power — a realm that does not distinguish between conqueror and conquered. All serve, eventually.",
  },
  {
    icon: "🌑",
    name: "The Bonefield",
    desc: "An endless plain of ash and silence. Nothing grows. Nothing dies. Those who wander into the Bonefield are neither living nor dead — just lost.",
  },
  {
    icon: "🔥",
    name: "The Pyre Gates",
    desc: "The boundary between worlds. Cross it once. You won't cross back. The Gates do not open for the living — but they have been known to open for the desperate.",
  },
];

export default function WorldPage() {
  return (
    <SiteLayout
      title="The World"
      description="Explore the world of Bone Lord Bob — the Bone Kingdom, the Bonefield, the Pyre Gates, and beyond."
      keywords="Bone Lord Bob, world, bone kingdom, bonefield, pyre gates, dark fantasy, geography, factions, American Anime"
    >
      <div style={s.page}>
        {/* Hero */}
        <div style={s.hero}>
          <span style={s.eyebrow}>Geography &amp; Factions</span>
          <h1 style={s.h1}>The World</h1>
          <p style={s.heroSub}>
            Every territory has a cost. Every border is written in bone. Know
            where you are before it&apos;s too late.
          </p>
        </div>

        {/* Region cards */}
        <span style={s.sectionLabel}>Regions</span>
        <div style={s.grid}>
          {REGIONS.map((r) => (
            <div key={r.name} style={s.card}>
              <span style={s.cardIcon}>{r.icon}</span>
              <div style={s.cardName}>{r.name}</div>
              <p style={s.cardDesc}>{r.desc}</p>
            </div>
          ))}
        </div>

        {/* Placeholder */}
        <div style={s.more}>
          More regions revealed as the story unfolds...
        </div>
      </div>
    </SiteLayout>
  );
}