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

const s = {
  page: {
    maxWidth: "860px",
    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: "540px",
    margin: "0 auto",
    lineHeight: 1.7,
  } as React.CSSProperties,
  introPara: {
    fontSize: "1rem",
    color: "#c8bfae",
    lineHeight: 1.8,
    marginBottom: "40px",
    textAlign: "center" as const,
  } as React.CSSProperties,
  embedWrapper: {
    marginBottom: "48px",
    borderRadius: "12px",
    overflow: "hidden",
    border: "1px solid rgba(232,220,200,0.12)",
  } as React.CSSProperties,
  sectionLabel: {
    display: "block",
    fontSize: "0.72rem",
    fontWeight: 700,
    letterSpacing: "0.14em",
    textTransform: "uppercase" as const,
    color: "#c0392b",
    marginBottom: "16px",
  } as React.CSSProperties,
  comingSoon: {
    background: "#1a1510",
    border: "1px solid rgba(232,220,200,0.1)",
    borderRadius: "8px",
    padding: "40px 32px",
    textAlign: "center" as const,
    marginBottom: "48px",
  } as React.CSSProperties,
  comingSoonIcon: {
    fontSize: "2rem",
    marginBottom: "12px",
    display: "block",
    opacity: 0.4,
  } as React.CSSProperties,
  comingSoonText: {
    fontSize: "0.88rem",
    color: "#9e9080",
    letterSpacing: "0.08em",
    textTransform: "uppercase" as const,
    fontWeight: 600,
  } as React.CSSProperties,
  ytLink: {
    display: "inline-flex",
    alignItems: "center",
    gap: "8px",
    padding: "12px 24px",
    background: "rgba(255, 0, 0, 0.08)",
    border: "1px solid rgba(255,0,0,0.25)",
    borderRadius: "6px",
    color: "#e8dcc8",
    textDecoration: "none",
    fontSize: "0.9rem",
    fontWeight: 600,
    transition: "background 0.2s, border-color 0.2s",
  } as React.CSSProperties,
  ytSection: {
    textAlign: "center" as const,
    marginTop: "24px",
  } as React.CSSProperties,
};

export default function Music() {
  return (
    <SiteLayout
      title="Music"
      description="The official soundtrack of Bone Lord Bob — dark, original, American Anime music."
      keywords="Bone Lord Bob, music, soundtrack, American Anime, dark fantasy music, Spotify, original soundtrack"
    >
      <div style={s.page}>
        {/* Hero */}
        <div style={s.hero}>
          <span style={s.eyebrow}>Official Soundtrack</span>
          <h1 style={s.h1}>The Music</h1>
          <p style={s.heroSub}>
            The world of Bone Lord Bob has a sound. Dark, brutal, and alive.
          </p>
        </div>

        <p style={s.introPara}>
          These are the tracks that define it. From the Bone Kingdom to the
          Pyre Gates — every territory has its own score. This is what it sounds
          like when death has a melody.
        </p>

        {/* Spotify embed */}
        <div style={s.embedWrapper}>
          <iframe
            src="https://open.spotify.com/embed/album/6yfZ5Hu7YQMxZRonCpROtv?utm_source=generator&theme=0"
            width="100%"
            height="352"
            frameBorder="0"
            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
            loading="lazy"
            title="Bone Lord Bob — Official Soundtrack on Spotify"
            style={{ display: "block" }}
          />
        </div>

        {/* Tracklist */}
        <span style={s.sectionLabel}>Tracklist</span>
        <div style={s.comingSoon}>
          <span style={s.comingSoonIcon}>🎵</span>
          <p style={s.comingSoonText}>Tracklist coming soon</p>
        </div>

        {/* YouTube */}
        <div style={s.ytSection}>
          <a
            href="https://www.youtube.com/@bonelordbob"
            target="_blank"
            rel="noopener noreferrer"
            style={s.ytLink}
          >
            <span>▶</span> Watch on YouTube
          </a>
        </div>
      </div>
    </SiteLayout>
  );
}