// work.jsx — Dan Barrett, Work subpage.
// Releases + Projects in the same minimal column system.

const { useEffect } = React;

function TopBar({ current }) {
  return (
    <header className="topbar">
      <a href="index.html" className="topbar__mark">danbarrettofficial.com</a>
      <ul className="topbar__nav">
        <li><a href="index.html#now">Now</a></li>
        <li><a href="work.html" className={current === "work" ? "is-current" : ""}>Work</a></li>
        <li><a href="index.html#shows">Shows</a></li>
        <li><a href="writing.html">Writing</a></li>
      </ul>
    </header>
  );
}

function PageHead() {
  return (
    <section className="head" id="top">
      <div className="page-kicker">Section · Work</div>
      <h1 className="head__name">
        No Fun, Not Ever,{" "}
        <em className="head__name-tail">music sometimes.</em>
      </h1>
      <div className="head__bio">
        <p>
          Selected major releases across Have A Nice Life, Giles Corey, and
          Black Wing, in reverse chronological order; followed by a short note
          on each of the musical identities I record under.
        </p>
        <p>
          Bandcamp is the primary place for digital stuff; vinyl can be picked
          up over at The Flenser. Streaming is a secondary channel.
        </p>
      </div>
    </section>
  );
}

/* ---------- Releases (full discography) ---------- */
function Releases({ showThumbs }) {
  const all = window.SITE_DATA.discography
    .slice()
    .sort((a, b) => Number(b.year) - Number(a.year));
  const years = all.map((r) => Number(r.year));
  const range = `${Math.min(...years)} — ${Math.max(...years)}`;

  const initials = (title) =>
    title
      .split(/\s+/)
      .filter(Boolean)
      .slice(0, 2)
      .map((w) => w[0])
      .join("")
      .toUpperCase();

  return (
    <section className="sect" id="releases">
      <div className="sect__head">
        <span>Releases</span>
        <span className="arrow">›</span>
        <span className="more">{all.length} releases · {range}</span>
      </div>
      <ul className="list">
        {all.map((r) => (
          <li key={r.cat} className={`release ${showThumbs ? "" : "no-thumbs"}`}>
            {showThumbs && (
              <a href={`release.html#${r.slug}`} className="release__thumb" aria-label={`${r.title} cover`}>
                <img src={`assets/covers/${r.slug}.jpg`} alt="" loading="lazy" />
                <span>{initials(r.title)}</span>
              </a>
            )}
            <div className="release__body">
              <a href={`release.html#${r.slug}`} className="release__title">{r.title}</a>
              <div className="release__meta">
                {r.artist} &nbsp;·&nbsp; {r.format} &nbsp;·&nbsp; {r.cat}
                {r.bandcampUrl && (
                  <React.Fragment>
                    {" "}
                    ·{" "}
                    <a href={r.bandcampUrl} target="_blank" rel="noreferrer" className="release__external">
                      Bandcamp
                    </a>
                  </React.Fragment>
                )}
              </div>
            </div>
            <div className="release__year">{r.year}</div>
          </li>
        ))}
      </ul>
    </section>
  );
}

/* ---------- Projects — fuller treatment than homepage one-liner ---------- */
function ProjectsLong() {
  const items = window.SITE_DATA.projects;
  return (
    <section className="sect" id="projects">
      <div className="sect__head">
        <span>Projects</span>
        <span className="arrow">›</span>
      </div>

      <div className="proj-long-list">
        {items.map((p) => (
          <article key={p.key} className="proj-long">
            <header className="proj-long__head">
              <h3 className="proj-long__name">
                {p.bandcampUrl ? (
                  <a href={p.bandcampUrl} target="_blank" rel="noreferrer">{p.name}</a>
                ) : p.name}
              </h3>
              <div className="proj-long__meta">
                <span>{p.type}</span>
                <span>·</span>
                <span>{p.years.replace("present", "now")}</span>
              </div>
            </header>
            <p className="proj-long__essence">{p.essence}</p>
            <p className="proj-long__blurb">{p.blurb}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer className="foot">
      <span>© Dan Barrett · 2005 — 2026</span>
      <ul className="foot__links">
        <li><a href="mailto:danielbarrett@gmail.com" className="ilink">Email</a></li>
        <li><a href="https://haveanicelife.bandcamp.com/" target="_blank" rel="noreferrer" className="ilink">HANL</a></li>
        <li><a href="https://gilescorey.bandcamp.com/" target="_blank" rel="noreferrer" className="ilink">Giles Corey</a></li>
        <li><a href="https://blackwingisdoomed.bandcamp.com/" target="_blank" rel="noreferrer" className="ilink">Black Wing</a></li>
        <li><span className="ilink">RSS</span></li>
      </ul>
    </footer>
  );
}

/* ---------- App ---------- */
const WORK_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "ink",
  "showThumbs": true,
  "columnWidth": 620
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(WORK_TWEAK_DEFAULTS);
  const showTweaks = new URLSearchParams(window.location.search).has("tweaks");

  useEffect(() => {
    document.documentElement.classList.toggle("theme-paper", t.theme === "paper");
    document.documentElement.style.setProperty("--col-w", `${t.columnWidth}px`);
  }, [t.theme, t.columnWidth]);

  return (
    <React.Fragment>
      <div className="page">
        <TopBar current="work" />
        <PageHead />
        <Subscribe />
        <Releases showThumbs={t.showThumbs} />
        <ProjectsLong />
        <Foot />
      </div>

      {showTweaks && <TweaksPanel title="Tweaks">
        <TweakSection label="Mood" />
        <TweakRadio  label="Theme"
                     value={t.theme}
                     options={["ink", "paper"]}
                     onChange={(v) => setTweak("theme", v)} />

        <TweakSection label="Releases" />
        <TweakToggle label="Show thumbnails"
                     value={t.showThumbs}
                     onChange={(v) => setTweak("showThumbs", v)} />

        <TweakSection label="Layout" />
        <TweakSlider label="Column width"
                     value={t.columnWidth}
                     min={520} max={760} step={10} unit="px"
                     onChange={(v) => setTweak("columnWidth", v)} />
      </TweaksPanel>}
    </React.Fragment>
  );
}

Object.assign(window, { TopBar, PageHead, Releases, ProjectsLong, Foot, App });