import Image from "next/image";
import SiteLayout from "@/pages/components/SiteLayout";

const s = {
  page: {
    maxWidth: "1100px",
    margin: "0 auto",
    padding: "64px 32px 96px",
  } as React.CSSProperties,
  hero: {
    marginBottom: "56px",
    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,
  grid: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
    gap: "24px",
    marginBottom: "40px",
  } as React.CSSProperties,
  card: {
    background: "rgba(15, 8, 24, 0.82)",
    border: "1px solid rgba(180,140,255,0.18)",
    borderRadius: "6px",
    overflow: "hidden" as const,
    transition: "border-color 0.2s, transform 0.2s",
  } as React.CSSProperties,
  cardImage: {
    position: "relative" as const,
    aspectRatio: "2/3",
    width: "100%",
    background: "#06030f",
    overflow: "hidden" as const,
  } as React.CSSProperties,
  cardImagePlaceholder: {
    position: "absolute" as const,
    inset: 0,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "4rem",
    opacity: 0.12,
  } as React.CSSProperties,
  cardBody: {
    padding: "20px 22px 24px",
  } as React.CSSProperties,
  cardName: {
    fontFamily: "'Georgia', 'Times New Roman', serif",
    fontSize: "1.2rem",
    fontWeight: 700,
    color: "#e8dcc8",
    marginBottom: "4px",
  } as React.CSSProperties,
  cardRole: {
    fontSize: "0.72rem",
    fontWeight: 700,
    letterSpacing: "0.14em",
    textTransform: "uppercase" as const,
    color: "#c0392b",
    marginBottom: "12px",
  } as React.CSSProperties,
  cardDesc: {
    fontSize: "0.88rem",
    color: "#9e9080",
    lineHeight: 1.7,
  } as React.CSSProperties,
  credit: {
    textAlign: "center" as const,
    fontSize: "0.8rem",
    color: "#9e9080",
    opacity: 0.55,
    marginTop: "8px",
    letterSpacing: "0.04em",
  } as React.CSSProperties,
};

const CHARACTERS = [
  {
    image: null,
    emoji: "🦴",
    name: "Bone Lord Bob",
    role: "The Protagonist",
    desc: "A man cursed to walk between worlds — carrying the weight of the dead and the rage of the living. He answers to no one.",
  },
  {
    image: "/character-cat.jpg",
    imageAlt: "Character — ???",
    emoji: "🐾",
    name: "???",
    role: "Coming Soon",
    desc: "A creature that shouldn't exist — and yet here it is, collar and all. Whatever side it's on, it has teeth.",
  },
  {
    image: "/character-bookie.jpg",
    imageAlt: "Character — ???",
    emoji: "📖",
    name: "???",
    role: "Coming Soon",
    desc: "Knowledge is power in the Bone Kingdom. This one has both — and charges accordingly. The ledger is always open.",
  },
  {
    image: null,
    emoji: "🔥",
    name: "???",
    role: "Coming Soon",
    desc: "A figure from the oldest part of the war. Their allegiance changes everything.",
  },
  {
    image: null,
    emoji: "⚔️",
    name: "???",
    role: "Coming Soon",
    desc: "Every legend needs its foil. Every bone lord needs someone willing to break them.",
  },
  {
    image: null,
    emoji: "🌑",
    name: "???",
    role: "Coming Soon",
    desc: "Some figures are felt before they are seen. This one you feel first.",
  },
];

export default function Characters() {
  return (
    <SiteLayout
      title="Characters"
      description="Meet the cast of Bone Lord Bob — a dark American Anime. Warriors, ghosts, and things that defy naming."
      keywords="Bone Lord Bob, characters, cast, dark fantasy, American Anime, character art, Aaron Pressey"
    >
      <div style={s.page}>
        {/* Hero */}
        <div style={s.hero}>
          <span style={s.eyebrow}>Characters</span>
          <h1 style={s.h1}>The Cast</h1>
          <p style={s.heroSub}>
            Every soul in this world has a price. Meet the ones who pay it.
          </p>
        </div>

        {/* Grid */}
        <div style={s.grid}>
          {CHARACTERS.map((c, i) => (
            <div key={i} style={s.card}>
              {/* Art panel */}
              <div style={s.cardImage}>
                {c.image ? (
                  <Image
                    src={c.image}
                    alt={c.imageAlt || c.name}
                    fill
                    style={{ objectFit: "cover", objectPosition: "top" }}
                    sizes="(max-width: 768px) 100vw, 33vw"
                  />
                ) : (
                  <div style={s.cardImagePlaceholder}>{c.emoji}</div>
                )}
              </div>

              {/* Info */}
              <div style={s.cardBody}>
                <div style={s.cardName}>{c.name}</div>
                <div style={s.cardRole}>{c.role}</div>
                <p style={s.cardDesc}>{c.desc}</p>
              </div>
            </div>
          ))}
        </div>

        <p style={s.credit}>Character art by Aaron Pressey</p>
      </div>
    </SiteLayout>
  );
}