// minimal.jsx — Dan Barrett, blog-shaped redesign.
// Single narrow column, list-based, type-driven.

const { useEffect, useState } = React;

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

/* ---------- Identity ---------- */
function Head({ accentDot }) {
  return (
    <section className="head" id="top">
      <figure className="head__portrait" aria-label="Portrait of Dan Barrett">
        <img src="assets/hero/dan-barrett-portrait.jpg" alt="Dan Barrett" />
      </figure>
      <h1 className="head__name">
        Dan Barrett <em className="head__name-tail">is doomed</em>{accentDot && <span className="dot">.</span>}
      </h1>
      <div className="head__sub">
        Have a Nice Life &nbsp;·&nbsp; Giles Corey &nbsp;·&nbsp; Black Wing
      </div>
      <div className="head__bio">
        <p>
          I&apos;m a musician based in Connecticut. I record as <em>Have a Nice Life</em> with
          Tim Macuga, and alone as <em>Giles Corey</em> and <em>Black Wing</em>. I also
          run <span className="ilink">Enemies List Home Recordings</span>, a small pseudo
          label I started in 2007.
        </p>
      </div>
    </section>
  );
}

/* ---------- Now ---------- */
function Now() {
  return (
    <section className="sect" id="now">
      <div className="sect__head">
        <span>Now</span>
        <span className="arrow">›</span>
      </div>
      <div className="now">
        <span className="stamp">Updated 26 May 2026 · West Hartford, CT</span>
        Currently working on new Have a Nice Life material, as well as developing
        a solo Giles Corey set. Enjoying the process of experimenting a bit more
        with pedals than I ever have. Currently reading: <em>Fanged Noumena</em> by
        Nick Land.
      </div>
    </section>
  );
}

/* ---------- Releases ---------- */
function Releases({ showThumbs, limit }) {
  const all = window.SITE_DATA.discography
    .slice()
    .sort((a, b) => Number(b.year) - Number(a.year));
  const items = limit ? all.slice(0, limit) : all;

  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>
        <a href="work.html#releases" className="more">All catalog →</a>
      </div>
      <ul className="list">
        {items.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}
              </div>
            </div>
            <div className="release__year">{r.year}</div>
          </li>
        ))}
      </ul>
    </section>
  );
}

/* ---------- Shows ---------- */
function Shows({ limit }) {
  const all = window.SITE_DATA.shows;
  const items = limit ? all.slice(0, limit) : all;

  return (
    <section className="sect" id="shows">
      <div className="sect__head">
        <span>Shows</span>
        <span className="arrow">›</span>
      </div>
      <ul className="list">
        {items.map((s, i) => {
          const project = s.project
            .replace("Have a Nice Life", "HANL")
            .replace("Giles Corey", "Giles Corey")
            .replace("Black Wing", "Black Wing");
          return (
            <li key={i} className="show">
              <div className="show__date">{s.date}</div>
              <div className="show__body">
                <div className="show__city">{s.city}</div>
                <div className="show__venue">{s.venue} &nbsp;·&nbsp; {s.support}</div>
              </div>
              <a className="show__tag" href={s.tickets} target="_blank" rel="noreferrer">{project}</a>
            </li>
          );
        })}
      </ul>
    </section>
  );
}

/* ---------- Notes / Writing ---------- */
function NotesList({ limit }) {
  const all = window.NOTES_DATA?.posts || [];
  const items = limit ? all.slice(0, limit) : all;
  return (
    <section className="sect" id="notes">
      <div className="sect__head">
        <span>Writing</span>
        <span className="arrow">›</span>
        <a href="writing.html" className="more">All notes →</a>
      </div>
      <ul className="list">
        {items.map((n) => (
          <li key={n.slug} className="note">
            <div className="note__date">{n.date}</div>
            <div className="note__title">
              <a href={`note.html#${n.slug}`}>{n.title}</a>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

/* ---------- Projects (one-liners) ---------- */
function ProjectsBlock() {
  const items = window.SITE_DATA.projects;
  return (
    <section className="sect" id="projects">
      <div className="sect__head">
        <span>Projects</span>
        <span className="arrow">›</span>
      </div>
      <ul className="list">
        {items.map((p) => (
          <li key={p.key} className="proj">
            <div className="proj__name">
              {p.name}
              <span style={{
                fontFamily: "var(--mono)",
                fontSize: "11px",
                color: "var(--fg-mute)",
                marginLeft: "8px",
                letterSpacing: "0.02em",
              }}>
                {p.years.replace("present", "now")}
              </span>
            </div>
            <div className="proj__essence">{p.essence}</div>
          </li>
        ))}
      </ul>
    </section>
  );
}

/* ---------- Footer ---------- */
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 MINIMAL_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "ink",
  "showThumbs": true,
  "accentDot": true,
  "ornaments": false,
  "columnWidth": 620
}/*EDITMODE-END*/;

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

  // Apply theme + column width to <html> so CSS vars cascade everywhere
  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 />
        <Head accentDot={t.accentDot} />

        {t.ornaments && <hr className="ornament" />}

        <Now />

        {t.ornaments && <hr className="ornament" />}

        <Shows />

        <NotesList />

        <Foot />
      </div>

      {showTweaks && <TweaksPanel title="Tweaks">
        <TweakSection label="Mood" />
        <TweakRadio  label="Theme"
                     value={t.theme}
                     options={["ink", "paper"]}
                     onChange={(v) => setTweak("theme", v)} />
        <TweakToggle label="Accent dot in name"
                     value={t.accentDot}
                     onChange={(v) => setTweak("accentDot", v)} />
        <TweakToggle label="Section ornaments"
                     value={t.ornaments}
                     onChange={(v) => setTweak("ornaments", 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, Head, Now, Releases, Shows, NotesList, ProjectsBlock, Foot, App,
});