/* Faderhead – Signal Music section: Music landing, Discography, Album page */
/* global React, useNav, TopNav, BroadcastBar, NewsletterSignal, FooterSignal, CountdownBlock */

/* Real catalog. `label` = releasing label (short). `tracks` only where known.
   Legacy Code (2026) is the upcoming, not-yet-written 12th album (placeholder
   tracklist + deep dive). Everything else is the actual discography. */
const ALBUMS = [
{ id: "legacy-code", title: "Legacy Code", year: 2026, label: "Not A Robot Records", tracks: 14, kind: "album", hot: true },
{ id: "years-of-the-serpent", title: "Years Of The Serpent", year: 2021, label: "Not A Robot Records", kind: "album" },
{ id: "asteria", title: "Asteria", year: 2019, label: "Not A Robot Records", kind: "album" },
{ id: "night-physics", title: "Night Physics", year: 2017, label: "Not A Robot Records", kind: "album" },
{ id: "fh-x", title: "FH-X", year: 2016, label: "Not A Robot Records", kind: "album" },
{ id: "atoms-and-emptiness", title: "Atoms & Emptiness", year: 2014, label: "L-Tracks", kind: "album" },
{ id: "fh4", title: "FH4", year: 2013, label: "L-Tracks", kind: "album" },
{ id: "world-of-faderhead", title: "The World Of Faderhead", year: 2012, label: "L-Tracks", kind: "album" },
{ id: "black-friday", title: "Black Friday", year: 2010, label: "L-Tracks", kind: "album" },
{ id: "fh3", title: "FH3", year: 2008, label: "L-Tracks", kind: "album" },
{ id: "fh2", title: "FH2", year: 2007, label: "Accession", kind: "album" },
{ id: "fh1", title: "FH1", year: 2006, label: "Accession", kind: "album" }];

// Compilations — shown in the Albums tab, badged "Compilation", not part of the studio "of 12" count.
const COMPILATIONS = [
{ id: "two-sides", title: "Two Sides To Every Story", year: 2012, label: "L-Tracks", kind: "compilation", sub: "Compilation" },
{ id: "trilogy", title: "Trilogy (Best Of FH1–FH3)", year: 2010, label: "L-Tracks", kind: "compilation", sub: "Compilation" }];

// Albums tab view = studio albums + compilations, newest first.
const ALBUMS_VIEW = [...ALBUMS, ...COMPILATIONS].sort((a, b) => b.year - a.year);

const EPS = [
{ id: "into-the-metadrome", title: "Into The Metadrome", year: 2025, label: "Not A Robot Records", kind: "ep" },
{ id: "the-ascender", title: "The Ascender", year: 2023, label: "Not A Robot Records", kind: "ep" },
{ id: "therapy-for-one", title: "Therapy For One", year: 2022, label: "Not A Robot Records", kind: "ep" },
{ id: "katabasis", title: "Katabasis", year: 2021, label: "Not A Robot Records", kind: "ep" },
{ id: "ep-2077", title: "2077", year: 2020, label: "Not A Robot Records", kind: "ep" },
{ id: "starchaser", title: "Starchaser", year: 2019, label: "Not A Robot Records", kind: "ep" },
{ id: "time-physics", title: "Time Physics", year: 2018, label: "Not A Robot Records", kind: "ep" },
{ id: "no-signal", title: "No Signal", year: 2017, label: "Not A Robot Records", kind: "ep" },
{ id: "universe-has-spoken", title: "The Universe Has Spoken", year: 2016, label: "Not A Robot Records", kind: "ep" },
{ id: "anima-in-machina", title: "Anima In Machina", year: 2016, label: "Not A Robot Records", kind: "ep" },
{ id: "tokyo-tapes", title: "The Tokyo Tapes", year: 2015, label: "Bandcamp", kind: "ep" },
{ id: "empires-northern-lights", title: "Empires Of The Northern Lights v2.42", year: 2013, label: "Bandcamp", kind: "ep" },
{ id: "way-to-fk-clubs", title: "The Way To Fuck Clubs", year: 2011, label: "L-Tracks", kind: "ep" },
{ id: "horizon-born", title: "Horizon Born", year: 2009, label: "L-Tracks", kind: "ep" }];

const SINGLES = [
{ id: "hungry-or-a-liar", title: "Hungry Or A Liar (Cyberpunk Rework)", feat: "Paul Woida", year: 2026, kind: "single", hot: true },
{ id: "we-are-black-again", title: "We Are Black Again", year: 2026, kind: "single" },
{ id: "not-the-end-cyberpunk", title: "This Is Not The End (Cyberpunk Version)", year: 2025, kind: "single" },
{ id: "not-the-end", title: "This Is Not The End", year: 2025, kind: "single" },
{ id: "angry-enough", title: "Angry Enough", year: 2025, kind: "single" },
{ id: "goth-rave", title: "Goth Rave", year: 2024, kind: "single" },
{ id: "everythings-fucked-up", title: "Everything's Fucked Up", feat: "Chrome Dawg", year: 2024, kind: "single" },
{ id: "summer-rain", title: "Summer Rain", year: 2024, kind: "single" },
{ id: "endless-descent", title: "The Endless Descent", year: 2024, kind: "single" },
{ id: "emotional-baggage", title: "Emotional Baggage", year: 2024, kind: "single" },
{ id: "souls-burned-black", title: "Souls Burned Black", year: 2024, kind: "single" },
{ id: "die-for-this", title: "Die For This", feat: "Neuroticfish", year: 2024, kind: "single" },
{ id: "breathe-again", title: "Breathe Again", year: 2024, kind: "single" },
{ id: "bring-the-pain", title: "Bring The Pain", year: 2024, kind: "single" },
{ id: "the-hell-we-need", title: "The Hell We Need", year: 2024, kind: "single" },
{ id: "burn-all-night", title: "Burn All Night", feat: "Electra Black", year: 2024, kind: "single" },
{ id: "noise-night", title: "Noise Night", year: 2023, kind: "single" },
{ id: "halloween-2022", title: "Halloween Spooky Queens v2022", year: 2022, kind: "single" },
{ id: "dark-water", title: "Dark Water", year: 2022, kind: "single" },
{ id: "halloween-2021", title: "Halloween Spooky Queens v2021", year: 2021, kind: "single" },
{ id: "better", title: "Better", feat: "Chris Harms", year: 2021, kind: "single" },
{ id: "halloween-2020", title: "Halloween Spooky Queens", year: 2020, kind: "single" },
{ id: "i-did-not-know", title: "I Did Not Know", feat: "Solar Fake", year: 2020, kind: "single" },
{ id: "know-your-darkness", title: "Know Your Darkness", year: 2017, kind: "single" },
{ id: "artificial-bullshit", title: "Artificial Bullshit (Demo)", year: 2013, kind: "single" },
{ id: "freaks-per-minute", title: "69 Freaks Per Minute", year: 2010, kind: "single" },
{ id: "exit-ghost", title: "Exit Ghost", year: 2008, kind: "single" },
{ id: "bassgod", title: "Bassgod", year: 2006, kind: "single" },
{ id: "oh-scavenger", title: "OH Scavenger vs. The Protagonist", year: 2006, kind: "single" },
{ id: "the-protagonist", title: "The Protagonist", year: 2004, kind: "single" }];

// Patreon-exclusive bootleg remixes (link out to Patreon).
const PATREON_EXCLUSIVES = [
{ id: "px-and-one", title: "And One – Military Fashion Show", year: 2025, sub: "Faderhead Bootleg Remix", kind: "patreon" },
{ id: "px-covenant-bullet", title: "Covenant – Bullet", year: 2025, sub: "Faderhead Bootleg Remix", kind: "patreon" },
{ id: "px-project-pitchfork", title: "Project Pitchfork – Timekiller", year: 2024, sub: "Faderhead Bootleg Remix", kind: "patreon" },
{ id: "px-apoptygma", title: "Apoptygma Berzerk – Eclipse", year: 2024, sub: "Faderhead Bootleg Remix", kind: "patreon" }];

// Remixes Faderhead made for other artists. `sub` shows the remix credit.
const REMIXES = [
{ id: "rmx-pixelgrinder", title: "pixelgrinder – Lure Me In", year: 2026, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-aesthetic-perfection", title: "Aesthetic Perfection – The Siren", year: 2024, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-schattenmann", title: "Schattenmann – Día de Muertos", year: 2024, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-chemical-sweet-kid", title: "Chemical Sweet Kid – Live Fast Die Last", year: 2024, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-jdead", title: "j:dead – Surrendering", year: 2023, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-lotl", title: "Lord Of The Lost – Blood & Glitter", year: 2023, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-stars-crusaders", title: "Stars Crusaders – Ishtar", year: 2023, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-stars-crusaders-inst", title: "Stars Crusaders – Ishtar", year: 2023, sub: "Faderhead Remix (Instrumental)", kind: "remix" },
{ id: "rmx-mental-discipline", title: "Mental Discipline – Remain In History", year: 2023, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-suendenrausch", title: "Sündenrausch – Necromancy", year: 2022, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-neuroticfish", title: "Neuroticfish – Velocity", year: 2022, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-diorama", title: "Diorama – Iisland", year: 2022, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-corporate-christ", title: "Corporate Christ – The Holy Shows", year: 2020, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-in-balance", title: "In Balance – Love", year: 2020, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-heartlay", title: "Heartlay – To The Floor", year: 2020, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-die-kreatur", title: "Die Kreatur – DIE KREATUR", year: 2020, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-dv8r", title: "DV8R – Protocol", year: 2018, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-covenant", title: "Covenant – Sound Mirrors", year: 2016, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-technolorgy", title: "Technolorgy – Light In Darkness", year: 2015, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-funker-vogt", title: "Funker Vogt – Arising Hero", year: 2010, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-nachtmahr", title: "Nachtmahr – Mädchen In Uniform", year: 2010, sub: "Faderhead Remix", kind: "remix" },
{ id: "rmx-xp8", title: "XP8 – Out For Blood", year: 2010, sub: "Faderhead Remix", kind: "remix" }];

// Combined lookup so album/EP/single pages all resolve.
const RELEASES = [...ALBUMS, ...COMPILATIONS, ...EPS, ...SINGLES];

/* ── Eras ─────────────────────────────────────────────── */
const ERAS = [
  { name: "The Prototype Years", years: "2006–2009",
    ids: ["fh1", "fh2", "exit-ghost", "fh3", "horizon-born"] },
  { name: "Neon & Needles", years: "2010–2012",
    ids: ["black-friday", "way-to-fk-clubs", "world-of-faderhead", "fh4"] },
  { name: "Black Mirror Rituals", years: "2013–2016",
    ids: ["atoms-and-emptiness", "tokyo-tapes", "fh-x", "anima-in-machina"] },
  { name: "The Cold Reboot", years: "2017–2019",
    ids: ["no-signal", "night-physics", "time-physics", "starchaser", "asteria"] },
  { name: "Ghost City Lockdown", years: "2020–2022",
    ids: ["i-did-not-know", "halloween-2020", "ep-2077", "better", "halloween-2021",
          "years-of-the-serpent", "katabasis", "dark-water", "halloween-2022", "therapy-for-one"] },
  { name: "Analog Awakening", years: "2023–2025",
    ids: ["noise-night", "the-ascender",
          "burn-all-night", "the-hell-we-need", "bring-the-pain", "breathe-again",
          "die-for-this", "souls-burned-black", "emotional-baggage", "endless-descent",
          "summer-rain", "everythings-fucked-up", "goth-rave",
          "angry-enough", "not-the-end", "not-the-end-cyberpunk", "into-the-metadrome"] },
  { name: "Legacy Code", years: "2026",
    ids: ["we-are-black-again", "hungry-or-a-liar", "legacy-code"] },
];

function SigErasView({ compact }) {
  const { go } = useNav();
  return (
    <div className="sig-eras">
      {ERAS.map((era, i) => {
        const releases = era.ids
          .map(id => RELEASES.find(r => r.id === id))
          .filter(Boolean);
        return (
          <div key={i} className="sig-era-block">
            <div className="sig-era-head">
              <span className="sig-era-head-name">{era.name}</span>
              <span className="sig-era-head-years">{era.years}</span>
            </div>
            <div className="sig-era-covers">
              {releases.map(r => {
                const cover = (window.COVERS || {})[r.id];
                return (
                  <button key={r.id} className="sig-era-card"
                    onClick={() => { sessionStorage.setItem("fh-music-scroll", window.scrollY); go({ name: "album", id: r.id, from: "eras" }); }}>
                    <div className="sig-era-thumb"
                      style={cover ? { backgroundImage: `url(${cover})` } : {}}>
                      {!cover && <span className="sig-era-card-year">{r.year}</span>}
                    </div>
                    <div className="sig-era-card-title">{r.title}</div>
                  </button>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}




function Platform({ name, abbr, handle, url }) {
  const icon = abbr || name.slice(0, 2).toUpperCase();
  const displayHandle = handle || (url ? (() => { try { return new URL(url).hostname.replace(/^www\./, ""); } catch(e) { return url; } })() : null);
  if (!url && !handle) return null;
  return (
    <button
      className={"sig-plat" + (url ? "" : " sig-plat-unavail")}
      onClick={url ? () => window.open(url, "_blank", "noopener") : undefined}
      disabled={!url}
      aria-label={name + (url ? " ↗" : " – not available")}
    >
      <div className="sig-plat-icon">{icon}</div>
      <div>
        <div className="sig-plat-name">{name}</div>
        {displayHandle && <div className="sig-plat-handle">{displayHandle}</div>}
      </div>
      <div className="sig-plat-arrow">{url ? "↗" : "–"}</div>
    </button>
  );
}

/* ============ Music landing ============ */
function SigMusicLanding({ compact }) {
  const { route, go } = useNav();
  const [filter, setFilter] = React.useState(route.tab || "albums");

  // Restore scroll position when returning from an album page
  React.useEffect(() => {
    const saved = sessionStorage.getItem("fh-music-scroll");
    if (saved) {
      sessionStorage.removeItem("fh-music-scroll");
      const pos = parseInt(saved, 10);
      requestAnimationFrame(() => requestAnimationFrame(() => window.scrollTo(0, pos)));
    }
  }, []);

  const TABS = [
  { id: "eras", label: "Eras" },
  { id: "albums", label: "Albums" },
  { id: "eps", label: "EPs" },
  { id: "singles", label: "Singles" },
  { id: "remixes", label: "Remixes" },
  { id: "patreon", label: "Patreon-Exclusives" }];

  const LISTS = { albums: ALBUMS_VIEW, eps: EPS, singles: SINGLES, remixes: REMIXES, patreon: PATREON_EXCLUSIVES };
  // Flip to true to feature the new LP marquee (turn on closer to release, ~Nov 2026).
  const SHOW_LATEST = false;
  const releases = filter === "eras" ? [] : (LISTS[filter] || []);
  const discoHead =
  filter === "eras" ? "Faderhead Eras" :
  filter === "albums" ? "Full discography" :
  filter === "eps" ? "EPs" :
  filter === "singles" ? "Singles" :
  filter === "remixes" ? "Remixes" : "Patreon exclusives";
  const nounMap = { albums: "LPs", eps: "EPs", singles: "singles", remixes: "remixes", patreon: "drops" };
  const years = releases.map((r) => r.year);
  const discoMeta =
  filter === "eras" ? `${ERAS.length} chapters · 2006–2026` :
  releases.length === 0 ? "coming soon" :
  filter === "albums" ? `${ALBUMS.length} albums · ${COMPILATIONS.length} compilations` :
  filter === "patreon" ? `${releases.length} exclusive drops` :
  `${releases.length} ${nounMap[filter]} · ${Math.min(...years)}–${Math.max(...years)}`;

  return (
    <>
      <BroadcastBar compact={compact} />
      <TopNav compact={compact} crumb={!compact && "/ MUSIC"} />

      <div className="sig-shell">
        <header className="sig-hero">
          <div className="sig-eyebrow accent">// MUSIC</div>
          <h1 className="sig-hero-h">Music.</h1>
          <p className="sig-hero-sub">Twelve albums, countless EPs and even more singles. Each release page links to every platform. For full albums there is a track-by-track commentary / deep dive.</p>
          <div className="sig-segm mono" role="tablist">
            {TABS.map((tab) =>
            <button key={tab.id} role="tab" aria-selected={filter === tab.id}
            className={filter === tab.id ? "active" : ""}
            onClick={() => setFilter(tab.id)}>{tab.label}</button>
            )}
          </div>
        </header>

        {/* Latest release */}
        {SHOW_LATEST && filter === "albums" &&
        <section className="sig-section">
          <div className="sig-section-head">
            <div>
              <div className="sig-eyebrow accent" style={{ marginBottom: 6 }}>// LATEST · NEW LP</div>
              <h2 className="sig-section-h">Legacy Code</h2>
            </div>
            <div className="sig-section-meta">2026 · 14 tracks · 58:51 · 11.06.26</div>
          </div>

          <div className="sig-rel-hero">
            <div>
              <div className="sig-tags">
                <span className="fh-tag fh-tag-accent">NEW LP</span>
                <span className="fh-tag">12 TRACKS</span>
                <span className="fh-tag">NOT A ROBOT</span>
              </div>
              <p style={{ fontSize: compact ? 14 : 17, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 540, margin: "0 0 22px 0", textWrap: "pretty" }}>
                Legacy Code is the 12th full Faderhead album and it represents 20 years of Faderhead from 2006-2026.
              </p>

              <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 8 }}>
                <button className="sig-btn" onClick={() => go({ name: "album", id: "legacy-code", from: "albums" })}>
                  Open deep dive →
                </button>
                <button className="sig-btn outline">
                  ▶ Watch trailer
                </button>
              </div>

              <div className="sig-platforms">
                <Platform name="Spotify" handle="open.spotify.com/album/…" />
                <Platform name="YouTube Music" handle="music.youtube.com/…" />
                <Platform name="Amazon" handle="music.amazon.de/…" />
                <Platform name="Bandcamp" handle="faderhead.bandcamp.com" />
              </div>
            </div>

            <div>
              <div className="sig-cover sig-ph">
                <div>
                  Album cover · 1500 × 1500
                  <small>legacy code · 2026</small>
                </div>
              </div>
              <div className="sig-cover-meta">
                <span>RELEASE · 06.11.2026</span>
                <span>CAT · LT-128</span>
              </div>
            </div>
          </div>
        </section>
        }

        {/* Discography (filtered by selector) */}
        <section className="sig-section">
          <div className="sig-section-head">
            <h2 className="sig-section-h">{discoHead}</h2>
            <div className="sig-section-meta">{discoMeta}</div>
          </div>
          {filter === "eras" ? (
            <SigErasView compact={compact} />
          ) : releases.length === 0 ?
          <div className="sig-more">
              // {filter === "remixes" ? "remix discography coming – send the list and these populate." : "nothing here yet."}
            </div> :

          <div className={`sig-disco${compact ? " compact" : ""}`}>
            {releases.filter(a => filter === "remixes" || !!(window.COVERS || {})[a.id]).map((a) => {
              const isStatic = filter === "remixes";
              const sub = filter === "patreon" ?
              a.sub ? `${a.sub} ↗` : "Patreon ↗" :
              a.feat ? `feat. ${a.feat}` : a.sub || null;
              return (
                <button key={a.id} className={`sig-disco-card${a.hot ? " hot" : ""}${isStatic ? " static" : ""}`}
                onClick={isStatic ? undefined : () => filter === "patreon" ?
                window.open("http://patreon.com/faderhead", "_blank", "noopener") :
                (() => { sessionStorage.setItem("fh-music-scroll", window.scrollY); go({ name: "album", id: a.id, from: filter }); })()}>
                  {(() => {
                    const cover = (window.COVERS || {})[a.id];
                    const isRemix = a.kind === "remix";
                    if (!cover && isRemix) {
                      const parts = a.title.split(/\s+[–—]\s+/);
                      const artist = parts[0] || a.title;
                      const song = parts[1] || '';
                      return (
                        <div className="sig-disco-cover">
                          <div className="sig-disco-remix-ph">
                            <span className="sig-disco-remix-artist">{artist}</span>
                            {song && <span className="sig-disco-remix-song">{song}</span>}
                            <span className="sig-disco-remix-year">{a.year}</span>
                          </div>
                        </div>
                      );
                    }
                    return (
                      <div className={`sig-disco-cover${a.hot ? " hot" : ""}${cover ? " has-img" : ""}`}
                        style={cover ? { backgroundImage: `url(${cover})`, backgroundSize: "cover", backgroundPosition: "center top" } : {}}>
                        <span className="sig-disco-year" style={cover ? { textShadow: "0 1px 6px rgba(0,0,0,0.9)", background: "rgba(0,0,0,0.45)", padding: "1px 5px" } : {}}>{a.year}</span>
                        {a.label && !cover && <span className="sig-disco-cat">{a.label}</span>}
                      </div>
                    );
                  })()}
                  <div className="sig-disco-meta">
                    <span className="sig-disco-title">{a.title}</span>
                    {sub && <span className="sig-disco-sub">{sub}</span>}
                  </div>
                </button>);

            })}
          </div>
          }
        </section>

        {/* Sync licensing callout */}
        <section className="sig-section sig-sync-callout">
          <div className="sig-sync-inner">
            <div>
              <div className="sig-eyebrow accent" style={{ marginBottom: 6 }}>// SYNC &amp; LICENSING</div>
              <p className="mono" style={{ margin: 0, fontSize: 13, color: "var(--ink-2)", lineHeight: 1.6 }}>
                Most of the catalog is cleared on both sides. Instrumentals available on request.
              </p>
            </div>
            <a className="sig-btn outline" href="https://sync.faderhead.com" target="_blank" rel="noopener noreferrer">
              sync.faderhead.com ↗
            </a>
          </div>
        </section>

        <div style={{ marginTop: compact ? 32 : 56 }}>
          <NewsletterSignal compact={compact} />
        </div>
        <div style={{ marginTop: compact ? 32 : 56 }}>
          <FooterSignal compact={compact} />
        </div>
      </div>
    </>);

}

window.SigMusicLanding = SigMusicLanding;
window.ALBUMS = ALBUMS;
window.RELEASES = RELEASES;
window.ERAS = ERAS;
window.Platform = Platform;
window.CURRENT_RELEASE_TITLE = (SINGLES.find((s) => s.hot) || SINGLES[0]).title;
window.CURRENT_RELEASE_ID    = (SINGLES.find((s) => s.hot) || SINGLES[0]).id;