import SiteLayout from "./components/SiteLayout";
import layoutStyles from "@/styles/Layout.module.css";
import styles from "@/styles/World.module.css";

// Placeholder — tracks will be added when official BLB soundtrack assets are available
const TRACKS: { title: string; vibe: string; file?: string }[] = [
  // { title: "Bone Kingdom Theme", vibe: "Dark orchestral", file: "/music/bone-kingdom-theme.mp3" },
];

export default function Music() {
  return (
    <SiteLayout
      title="Music"
      description="The official soundtrack of Bone Lord Bob — dark, atmospheric, and alive with the energy of the Bone Kingdom."
      keywords="Bone Lord Bob music, BLB soundtrack, dark fantasy music, anime music, original soundtrack"
      canonical="/music"
    >
      {/* Hero */}
      <div className={layoutStyles.pageHero}>
        <span className={layoutStyles.pageEyebrow}>The Soundtrack</span>
        <h1 className={layoutStyles.pageTitle}>Music</h1>
        <p className={layoutStyles.pageSub}>
          The Bone Kingdom has a sound. Dark. Relentless. Yours.
        </p>
      </div>

      <div className={layoutStyles.pageContent}>
        {TRACKS.length > 0 ? (
          <div className={styles.tracklist}>
            {TRACKS.map((t, i) => (
              <div key={i} className={styles.track}>
                <span className={styles.trackNum}>{String(i + 1).padStart(2, "0")}</span>
                <div className={styles.trackInfo}>
                  <span className={styles.trackTitle}>{t.title}</span>
                  <span className={styles.trackVibe}>{t.vibe}</span>
                </div>
                {t.file && (
                  <a href={t.file} className={styles.trackPlay} download>
                    ▶
                  </a>
                )}
              </div>
            ))}
          </div>
        ) : null}

        {/* YouTube playlist embed placeholder */}
        <div className={styles.musicEmbed}>
          <div className={styles.musicEmbedPlaceholder}>
            <span className={styles.musicEmbedIcon}>🎵</span>
            <p className={styles.musicEmbedText}>Official soundtrack coming with Episode 1</p>
            <a
              href="https://www.youtube.com/@bonelordbob"
              target="_blank"
              rel="noopener noreferrer"
              className={styles.musicEmbedBtn}
            >
              Subscribe on YouTube for updates
            </a>
          </div>
        </div>

        {/* Patreon CTA */}
        <div className={styles.musicPatreon}>
          <h2 className={styles.musicPatreonTitle}>Support the Soundtrack</h2>
          <p className={styles.musicPatreonText}>
            Patrons get early access to music, behind-the-scenes production content, and
            the full score as it&apos;s composed.
          </p>
          <a
            href="https://www.patreon.com/BoneLordBob"
            target="_blank"
            rel="noopener noreferrer"
            className={styles.musicPatreonBtn}
          >
            Support on Patreon
          </a>
        </div>
      </div>
    </SiteLayout>
  );
}