/* Faderhead – Signal Home page (refactored from HomepageSignal to use router) */
/* global React, useNav, BroadcastBar, NewsletterSignal, FooterSignal, CountdownBlock */

/* Streaming/download targets shown when the release bar is expanded.
   In production these would be auto-resolved from a single Spotify URL via a
   smart-link API (e.g. Odesli / song.link – the same approach Linktree uses):
   you store the Spotify track URL, the service returns the matching URLs for
   every platform, and they populate `url` below. */
const RELEASE_PLATFORMS = [
  { name: "Spotify",       abbr: "SP", url: "#" },
  { name: "Apple Music",   abbr: "AM", url: "#" },
  { name: "YouTube Music", abbr: "YT", url: "#" },
  { name: "Amazon Music",  abbr: "AZ", url: "#" },
  { name: "Pandora",       abbr: "PA", url: "#" },
  { name: "Bandcamp",      abbr: "BC", url: "#" },
];

function ChannelRow({ ch, route, label, status, blurb, external, href, hot }) {
  const { go } = useNav();
  const onClick = () => {
    if (external) { if (href) window.open(href, "_blank", "noopener"); return; }
    if (route) go(route);
  };
  return (
    <button className={`sig-ch${hot ? " hot" : ""}`} onClick={onClick}>
      <div className="sig-ch-bar" />
      <div className="sig-ch-body">
        <div className="sig-ch-label">
          {label}
          {external && <span className="sig-ch-ext"> ↗</span>}
        </div>
        <div className="sig-ch-blurb">{blurb}</div>
      </div>
      <div className="sig-ch-status">
        <span className={`sig-led ${status.toLowerCase()}`} />
        {status}
      </div>
    </button>
  );
}

function SigHomeContent({ compact, tickerOn = true }) {
  const { go } = useNav();
  const [relOpen, setRelOpen] = React.useState(false);
  return (
    <>
      <BroadcastBar compact={compact} />

      <div className="sig-shell">
        {/* Identity */}
        <header className="sig-home-id">
          {compact ? (
            /* Mobile: original layout unchanged */
            <>
              <div className="sig-eyebrow">// faderhead.com · root index</div>
              <h1 className="sig-wordmark">FADERHEAD<span className="fh-caret" /></h1>
              <div className="sig-id-meta">EBM · INDUSTRIAL · SYNTHWAVE</div>
            </>
          ) : (
            /* Desktop: nav at top, wordmark, genre line below */
            <>
              <nav className="sig-home-nav" style={{ marginTop: 0, marginBottom: 10 }}>
                <button className="sig-home-nav-link" onClick={() => go({ name: "music" })}>Music</button>
                <span className="sig-home-nav-sep">·</span>
                <button className="sig-home-nav-link" onClick={() => go({ name: "shows" })}>Shows</button>
                <span className="sig-home-nav-sep">·</span>
                <a className="sig-home-nav-link" href="http://faderhead.myshopify.com" target="_blank" rel="noopener noreferrer">Merch ↗</a>
                <span className="sig-home-nav-sep">·</span>
                <button className="sig-home-nav-link" onClick={() => go({ name: "blog" })}>Blog &amp; Podcast</button>
                <span className="sig-home-nav-sep">·</span>
                <button className="sig-home-nav-link" onClick={() => go({ name: "deep-dive" })}>About</button>
                <span className="sig-home-nav-sep">·</span>
                <button className="sig-home-nav-link" onClick={() => go({ name: "contact" })}>Contact</button>
                <span className="sig-home-nav-sep">·</span>
                <a className="sig-home-nav-link" href="http://patreon.com/faderhead" target="_blank" rel="noopener noreferrer">Patreon ↗</a>
              </nav>
              <h1 className="sig-wordmark">FADERHEAD<span className="fh-caret" /></h1>
              <div className="sig-id-meta" style={{ marginTop: 10 }}>
                <span>EBM &middot; Industrial &middot; Synthwave</span>
                <span className="sig-sep">×</span>
                <span>HAMBURG / GERMANY</span>
                <span className="sig-sep">×</span>
                <span>EST. 2006</span>
              </div>
            </>
          )}
        </header>

        {/* Ticker – Legacy Code countdown */}
        {tickerOn && (
        <button
          onClick={() => go({ name: "album", id: "legacy-code" })}
          className={`sig-ticker${compact ? " mobile" : ""}`}
          style={{ width: "100%", textAlign: "left", font: "inherit", color: "inherit", cursor: "pointer" }}
        >
          <div className="sig-ticker-l">▌ {compact ? "NEW" : "NEW ALBUM"}</div>
          <div className="sig-ticker-c">
            <span className="sig-ticker-title">LEGACY CODE</span>
            <span className="sig-ticker-meta">// COMING NOV 2026 ON NOT A ROBOT RECORDS</span>
          </div>
          <div className="sig-ticker-r">
            <CountdownBlock days={165} hours={9} mins={42} compact={compact} />
            {!compact && <div className="sig-ticker-date">→ 11.06.2026</div>}
          </div>
        </button>
        )}

        {/* Newest release – out now, streaming + download */}
        <div className={`sig-release-wrap${relOpen ? " open" : ""}`} style={{ marginTop: 12 }}>
          <div className={`sig-ticker release${compact ? " mobile" : ""}`}>
            <div className="sig-ticker-l">▌ {compact ? "OUT NOW" : "NEWEST RELEASE"}</div>
            <div className="sig-ticker-c">
              <button className="sig-ticker-title" style={{ background: "none", border: 0, color: "var(--accent-bright)", font: "inherit", cursor: "pointer", padding: 0, textAlign: "left" }} onClick={() => go({ name: "album", id: "hungry-or-a-liar" })}>HUNGRY OR A LIAR<br />(CYBERPUNK REWORK)</button>
              <span className="sig-ticker-meta">// NEW SINGLE – AVAILABLE EVERYWHERE</span>
            </div>
            <div className="sig-release-links mono">
              <button type="button" className="sig-release-link"
                      aria-expanded={relOpen}
                      onClick={() => setRelOpen(o => !o)}>
                ALL STREAMING / DOWNLOAD PLATFORMS {relOpen ? "▲" : "▼"}
              </button>
            </div>
          </div>

          {relOpen && (
            <div className={`sig-release-panel mono${compact ? " mobile" : ""}`}>
              {RELEASE_PLATFORMS.map(p => (
                <a key={p.name} href={p.url} className="sig-release-btn"
                   onClick={(e) => e.preventDefault()}>
                  <span className="sig-release-btn-icon">{p.abbr}</span>
                  <span className="sig-release-btn-name">{p.name}</span>
                  <span className="sig-release-btn-arrow">↗</span>
                </a>
              ))}
            </div>
          )}
        </div>

        {/* Channels */}
        <section className="sig-channels" style={{ marginTop: compact ? 28 : 56 }}>
          <div className="sig-channels-head">
            <span>// MENU</span>
            <span>status</span>
          </div>
          <ChannelRow ch="01" route={{ name: "music" }}     label="MUSIC"           blurb="discography · album commentary" status="LIVE" hot />
          <ChannelRow ch="02" route={{ name: "shows" }}     label="SHOWS"           blurb="upcoming dates" status="LIVE" />
          <ChannelRow ch="03" external href="http://faderhead.myshopify.com"  label="MERCH"           blurb="official faderhead store" status="EXT" />
          <ChannelRow ch="04" route={{ name: "blog" }}      label="BLOG · PODCAST"  blurb="newsletter · archive" status="LIVE" />
          <ChannelRow ch="05" route={{ name: "deep-dive" }} label="ABOUT · FAQ"       blurb="faq · everything you didn't know" status="OPEN" />
          <ChannelRow ch="06" external href="http://patreon.com/faderhead"  label="THE INNER CIRCLE"         blurb="patreon" status="EXT" />
          <ChannelRow ch="07" external href="sync.html"   label="SYNC &amp; LICENSING"     blurb="music supervisors · catalog licensing" status="EXT" />
        </section>

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

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

window.SigHomeContent = SigHomeContent;