/* Faderhead – Signal · Shows, Blog, Deep Dive, Contact */
/* global React, useNav, TopNav, BroadcastBar, NewsletterSignal, FooterSignal */

const POSTS = [
{ id: "ego-confirmation", d: "06.02.26", title: "Ego Confirmation", tags: ["essay"], read: "4 min",
  blurb: "People like things that confirm they are good people. Not challenged. Not questioned. Confirmed.",
  ff: 511, md: "/content/posts/ego-confirmation.md" },
{ id: "the-real-function-of-advice", d: "30.01.26", title: "The Real Function Of Advice", tags: ["essay"], read: "4 min",
  blurb: "How I found out that the advice I gave was not for the others I gave it to.",
  ff: 510, md: "/content/posts/the-real-function-of-advice.md" },
{ id: "a-sticker-on-a-phone", d: "09.01.26", title: "A Sticker On A Phone", tags: ["essay"], read: "4 min",
  blurb: "How a cute image made me (re-)consider my identity.",
  ff: 507, md: "/content/posts/a-sticker-on-a-phone.md" },
{ id: "we-measure-life-the-wrong-way", d: "21.11.25", title: "We Measure Life The Wrong Way", tags: ["essay"], read: "4 min",
  blurb: "How writing 500 weeks in a row changes everything.",
  ff: 500, md: "/content/posts/we-measure-life-the-wrong-way.md" },
{ id: "the-5-year-rule", d: "30.05.25", title: "The 5-Year Rule", tags: ["essay"], read: "4 min",
  blurb: "How everything worth doing takes a minimum of 5 years.",
  ff: 475, md: "/content/posts/the-5-year-rule.md" },
{ id: "your-new-life-will-cost-you-your-old", d: "18.04.25", title: "Your New Life Will Cost You Your Old", tags: ["essay"], read: "5 min",
  blurb: "Why it\u2019s not possible to constantly add more and more complexity to your life.",
  ff: 469, md: "/content/posts/your-new-life-will-cost-you-your-old.md" },
];


/* ============ Shows ============ */

/* ── Bandsintown API key ─────────────────────────────────────────────────
   Get yours: Bandsintown for Artists → Settings → General → Get API Key.
   Paste it below. Leave empty and the page falls back to a BIT tracker link. */
const BIT_APP_ID = "96ff53eb089d9e5b8b56440756c4cb6e";
const BIT_ARTIST = "faderhead";

function parseBitEvents(events) {
  const months = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];
  return events.map((e) => {
    const dt = new Date(e.datetime);
    const offer = e.offers && e.offers[0];
    let status = "open", ticket = "rsvp", ticketUrl = e.url + "&trigger=rsvp_going";
    if (offer) {
      if (offer.status === "available") { status = "live"; ticket = "available"; ticketUrl = offer.url; }
      else if (offer.status === "sold_out") { status = "off"; ticket = "sold out"; ticketUrl = null; }
      else { status = "open"; ticket = "presale"; ticketUrl = offer.url; }
    }
    return {
      d: dt.getDate(), m: months[dt.getMonth()], year: dt.getFullYear(),
      city: e.venue.city, country: e.venue.country,
      venue: e.venue.name, status, ticket, ticketUrl,
      bitUrl: e.url,
    };
  });
}

function SigShows({ compact }) {
  const [shows, setShows] = React.useState(null); // null = loading
  const [error, setError] = React.useState(false);

  React.useEffect(() => {
    if (!BIT_APP_ID) { setShows([]); return; }
    fetch(`https://rest.bandsintown.com/artists/${encodeURIComponent(BIT_ARTIST)}/events?app_id=${BIT_APP_ID}&date=upcoming`)
      .then((r) => r.ok ? r.json() : Promise.reject(r.status))
      .then((data) => setShows(Array.isArray(data) ? parseBitEvents(data) : []))
      .catch(() => { setError(true); setShows([]); });
  }, []);

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

      <div className="sig-shell">
        <header className="sig-hero">
          <div className="sig-eyebrow accent">// SHOWS</div>
          <h1 className="sig-hero-h">Shows.</h1>
          <p className="sig-hero-sub">
            Every confirmed date, in one place. If a show isn&rsquo;t listed here, it isn&rsquo;t happening yet.
          </p>
        </header>

        <section className="sig-section">
          <div className="sig-section-head">
            <h2 className="sig-section-h">Upcoming</h2>
            {shows && shows.length > 0 && (
              <div className="sig-section-meta mono" style={{ fontSize: 10 }}>
                via bandsintown
              </div>
            )}
          </div>

          {/* Loading */}
          {shows === null && (
            <div className="sig-more mono">// loading shows&hellip;</div>
          )}

          {/* No API key configured */}
          {shows !== null && !BIT_APP_ID && (
            <div className="sig-more">
              <p style={{ marginBottom: 16 }}>// show data not yet connected – add your Bandsintown API key to <code style={{ color: "var(--accent-bright)" }}>sig-other.jsx</code>.</p>
              <a className="sig-btn outline" href={`https://www.bandsintown.com/a/${BIT_ARTIST}?came_from=267`} target="_blank" rel="noopener noreferrer">
                Follow on Bandsintown ↗
              </a>
            </div>
          )}

          {/* Error */}
          {error && BIT_APP_ID && (
            <div className="sig-more">// couldn&rsquo;t load shows right now – <a className="link" href={`https://www.bandsintown.com/a/${BIT_ARTIST}`} target="_blank" rel="noopener noreferrer">check Bandsintown directly ↗</a></div>
          )}

          {/* Shows */}
          {shows && shows.length > 0 && (
            <div className="sig-shows">
              {shows.map((s, i) => (
                <div key={i} className="sig-show">
                  <div className="sig-show-date">
                    <div className="sig-show-d">{String(s.d).padStart(2, "0")}</div>
                    <div className="sig-show-m">{s.m} &middot; &rsquo;{String(s.year).slice(2)}</div>
                  </div>
                  <div className="sig-show-info">
                    <div className="sig-show-city">{s.city}, {s.country}</div>
                    <div className="sig-show-venue">{s.venue}</div>
                  </div>
                  <div className="sig-show-actions">
                    <button
                      className={`sig-btn ${s.status === "off" ? "muted" : "outline"}`}
                      style={{ pointerEvents: s.ticketUrl ? "auto" : "none", opacity: s.status === "off" ? 0.5 : 1 }}
                      onClick={s.ticketUrl ? () => window.open(s.ticketUrl, "_blank", "noopener") : undefined}
                    >
                      {s.status === "off" ? "Sold out" : s.ticket === "rsvp" ? "RSVP ↗" : s.ticket === "presale" ? "Presale ↗" : "Tickets ↗"}
                    </button>
                    {s.status !== "off" && (
                      <button
                        className="sig-btn outline"
                        onClick={() => window.open(s.bitUrl + "&trigger=notify_me", "_blank", "noopener")}
                      >Remind me ↗</button>
                    )}
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* No upcoming shows */}
          {shows && shows.length === 0 && BIT_APP_ID && !error && (
            <div className="sig-more">
              <p style={{ marginBottom: 16 }}>// no upcoming shows scheduled. follow on Bandsintown to be notified when new dates land.</p>
              <a className="sig-btn outline" href={`https://www.bandsintown.com/a/${BIT_ARTIST}?came_from=267&trigger=track`} target="_blank" rel="noopener noreferrer">
                Follow on Bandsintown ↗
              </a>
            </div>
          )}
        </section>

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

/* ============ Blog ============ */
function SigBlog({ compact }) {
  const { route, go } = useNav();

  React.useEffect(() => {
    if (route.scrollTo === 'essays') {
      const el = document.getElementById('blog-essays');
      if (!el) return;
      const scroller = el.closest('[data-fh-scroll]');
      const top = Math.max(0, el.getBoundingClientRect().top + (scroller ? scroller.scrollTop : window.pageYOffset) - 60);
      setTimeout(() => {
        if (scroller) scroller.scrollTop = top;
        else window.scrollTo({ top });
      }, 60);
    }
  }, []);
  return (
    <>
      <BroadcastBar compact={compact} />
      <TopNav compact={compact} crumb={!compact && "/ BLOG"} />

      <div className="sig-shell">
        <header className="sig-hero">
          <h1 className="sig-hero-h">Essays &amp; podcast.</h1>
          <p className="sig-hero-sub" style={{ maxWidth: 640 }}>Two decades in. Here’s what I actually think – about music, the business, and the forces underneath it. I wish someone had told me all this when I started.</p>
        </header>

        {/* Podcast – gateway to Mal Was Anderes (smaller footprint, goes first) */}
        <section className="sig-section">
          <div className="sig-eyebrow accent" style={{ marginBottom: 10 }}>// LISTEN</div>
          <div className="sig-section-head">
            <h2 className="sig-section-h">Podcast</h2>
            <div className="sig-section-meta">German · off-site</div>
          </div>
          <a className="sig-pod-gateway" href="http://malwasanderes-podcast.de" target="_blank" rel="noopener noreferrer">
            <div className="sig-pod-body">
              <div className="sig-eyebrow accent" style={{ marginBottom: 8 }}>// MY GERMAN-LANGUAGE PODCAST</div>
              <h3 className="sig-pod-title">Mal Was Anderes</h3>
              <div className="sig-pod-blurb">
                <p>Der intelligenteste Podcast für Musiker, Produzenten, Songwriter und Künstler.</p>
                <p>Danny/The Delta Mode und Sami/Faderhead reden philosophisch/hinterfragend über alles was in Podcasts &amp; YouTube Videos über Musikproduktion/-business und Kunst normalerweise sonst nicht erwähnt wird.</p>
                <p>Sami &amp; Danny waren in den letzten 20 Jahren u.a. für Eisbrecher (#1 Album DE), Netflix, Amazon Prime, Neelix, Mono Inc. (#1 Album DE), Nino De Angelo, Lord Of The Lost (#2 Album DE), Ingo ohne Flamingo, Schokkverliebt (Frenzy &amp; Mia Julia), Joachim Witt, u.v.a. tätig.</p>
              </div>
            </div>
            <div className="sig-pod-cta mono">malwasanderes-podcast.de ↗</div>
          </a>

          <blockquote className="sig-quote" style={{ marginTop: 18 }}>
            “Euer Podcast ist jedes Mal ein Seelenwärmer... Man diskutiert richtig im Kopf mit!”
            <footer>– DETRONICA · VIA SPOTIFY</footer>
          </blockquote>
        </section>

        {/* Blog */}
        <section className="sig-section">
          <div id="blog-essays" className="sig-eyebrow accent" style={{ marginBottom: 10 }}>// IN WRITING</div>
          <div className="sig-section-head">
            <h2 className="sig-section-h">Essays</h2>
            <div className="sig-section-meta">most recent first</div>
          </div>
          <p className="sig-hero-sub" style={{ maxWidth: 620, margin: "0 0 26px 0" }}>
            Process, production, business, and the occasional rant – what came in through the studio door this week.
          </p>

          <div className="sig-posts">
            {POSTS.map((p, i) => <div key={i} className="sig-post-row" style={{ cursor: "pointer" }} onClick={() => go({ name: "post", id: p.id })}>
                <div className="sig-post-date">{p.d}</div>
                <div>
                  <h3 className="sig-post-title">{p.title}</h3>
                  <div className="sig-post-blurb" dangerouslySetInnerHTML={{ __html: p.blurb }} />
                  <div className="sig-post-tags">
                    {p.tags.map((t) => <span key={t} className="sig-post-tag">{t}</span>)}
                  </div>
                </div>
                <div className="sig-post-read">{p.read} read →</div>
              </div>)}
          </div>
        </section>

        <div style={{ marginTop: compact ? 32 : 56 }}>
          <NewsletterSignal compact={compact} />
        </div>
        <div style={{ marginTop: compact ? 32 : 56 }}>
          <FooterSignal compact={compact} />
        </div>
      </div>
    </>);} /* ============ FAQ (loaded from content/faq.md) ============ */
function parseFaqMd(md) {
  const items = [];
  let cur = null;
  for (const raw of md.split(/\r?\n/)) {
    const line = raw.trim();
    if (line.startsWith("#") && !line.startsWith("##")) continue;
    const h = line.match(/^##\s+(.*)$/);
    if (h) { if (cur) items.push(cur); cur = { q: h[1].trim(), a: "" }; }
    else if (cur && line) cur.a += (cur.a ? " " : "") + line;
  }
  if (cur) items.push(cur);
  // Resolve template placeholders
  const rel = window.CURRENT_RELEASE_TITLE || "current release";
  const rid = window.CURRENT_RELEASE_ID;
  const relLink = rid ? `[${rel}](album/${rid})` : rel;
  return items.map((it) => ({ ...it, a: it.a.replace(/\{\{CURRENT_RELEASE\}\}/g, relLink) }));
}
function renderFaqInline(text, go) {
  const out = []; const re = /\[([^\]]+)\]\(([^)]+)\)/g;
  let last = 0, m, key = 0;
  while ((m = re.exec(text))) {
    if (m.index > last) out.push(text.slice(last, m.index));
    const label = m[1], target = m[2].trim();
    if (/^https?:\/\//.test(target))
      out.push(<a key={key++} href={target} target="_blank" rel="noopener noreferrer" className="link">{label}</a>);
    else if (target.startsWith("album/")) {
      const albumId = target.slice(6);
      out.push(<span key={key++} className="link" onClick={() => go({ name: "album", id: albumId })}>{label}</span>);
    } else
      out.push(<span key={key++} className="link" onClick={() => go({ name: target })}>{label}</span>);
    last = re.lastIndex;
  }
  if (last < text.length) out.push(text.slice(last));
  return out;
}
function FaqList({ go }) {
  const [items, setItems] = React.useState(null);
  React.useEffect(() => {
    let alive = true;
    fetch("/content/faq.md")
      .then(r => r.ok ? r.text() : Promise.reject(r.status))
      .then(t => { if (alive) setItems(parseFaqMd(t)); })
      .catch(() => { if (alive) setItems([]); });
    return () => { alive = false; };
  }, []);
  if (items === null) return <div className="sig-faq" />;
  return (
    <div className="sig-faq">
      {items.map((it, i) => (
        <details key={i} open={i === 0}>
          <summary><span className="sig-faq-q">{it.q}</span><span className="sig-faq-i">+</span></summary>
          <div className="sig-faq-a"><p>{renderFaqInline(it.a, go)}</p></div>
        </details>
      ))}
    </div>
  );
}

function SigDeepDive({ compact }) {const { go } = useNav();
  return (
    <>
      <BroadcastBar compact={compact} />
      <TopNav compact={compact} crumb={!compact && "/ ABOUT"} />

      <div className="sig-shell">
        <header className="sig-hero">
          <div className="sig-eyebrow accent">// ABOUT</div>
          <h1 className="sig-hero-h">About.</h1>
          <p className="sig-hero-sub">
            Who Faderhead is, and the questions that come up most. Short version up top, the rest in the FAQ.
          </p>
        </header>

        {/* Photo grid 1 — between subheading and The short version */}
        <div className={`sig-about-photos${compact ? " compact" : ""}`} style={{ marginBottom: compact ? 24 : 40 }}>
          <div style={{ aspectRatio: "1/1", width: "100%", overflow: "hidden" }}>
            <img src="images/about-photo-1.webp" alt="Faderhead" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
          <div style={{ aspectRatio: "1/1", width: "100%", overflow: "hidden" }}>
            <img src="images/about-photo-2.webp" alt="Faderhead press" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
        </div>

        {/* The short version + quick facts */}
        <section className="sig-section">
          <div className="sig-section-head">
            <h2 className="sig-section-h">The short version</h2>
          </div>
          <div className="sig-cols">
            <div>
              <p style={{ fontSize: compact ? 14 : 16, lineHeight: 1.6, color: "var(--ink-2)", margin: "0 0 16px", textWrap: "pretty" }}>
                Faderhead has always been a mix of workaholic and wunderkind. The charismatic German has produced more dark electro club hits than almost any other act over the past two decades &ndash; <em style={{ color: "var(--ink-1)", fontStyle: "normal" }}>TZDV</em>, <em style={{ color: "var(--ink-1)", fontStyle: "normal" }}>Dirtygrrrls/Dirtybois</em>, <em style={{ color: "var(--ink-1)", fontStyle: "normal" }}>Destroy Improve Rebuild</em>, <em style={{ color: "var(--ink-1)", fontStyle: "normal" }}>Fistful Of Fuck You</em>, <em style={{ color: "var(--ink-1)", fontStyle: "normal" }}>Dancers</em>, <em style={{ color: "var(--ink-1)", fontStyle: "normal" }}>When The Freaks Come Out</em>, <em style={{ color: "var(--ink-1)", fontStyle: "normal" }}>Know Your Darkness</em> and <em style={{ color: "var(--ink-1)", fontStyle: "normal" }}>All Black Everything</em> all filled dancefloors worldwide.
              </p>
              <p style={{ fontSize: compact ? 14 : 16, lineHeight: 1.6, color: "var(--ink-2)", margin: "0 0 16px", textWrap: "pretty" }}>
                Aside from his own music the Hamburg producer has shown his creative depth by writing tracks for acts like Eisbrecher (#1 German album charts), Lord Of The Lost (#2 German album charts), Joachim Witt and others. Faderhead live is probably the most energetic dark electro act in the scene today &ndash; don&rsquo;t miss it.
              </p>
              <p style={{ fontSize: compact ? 14 : 16, lineHeight: 1.6, color: "var(--ink-2)", margin: 0, textWrap: "pretty" }}>
                Around the music there&rsquo;s the writing and the German-language podcast <em style={{ color: "var(--ink-1)" }}>Mal Was Anderes</em> &ndash; long-form, opinionated takes on the craft, the business, and the things most artists won&rsquo;t say out loud.
              </p>
            </div>
            <ul className="sig-list">
              <li><span className="mono">since</span><span>2006</span></li>
              <li><span className="mono">based</span><span>Hamburg, Germany</span></li>
              <li><span className="mono">genre</span><span>EBM · Industrial · Synthwave · Cyberpunk</span></li>
              <li><span className="mono">sync</span><span><a className="link" href="https://sync.faderhead.com" target="_blank" rel="noopener noreferrer">sync.faderhead.com ↗</a></span></li>
            </ul>
          </div>
        </section>

        {/* Photo grid 2 — above FAQ */}
        <div className={`sig-about-photos${compact ? " compact" : ""}`} style={{ marginBottom: compact ? 24 : 32 }}>
          <div style={{ aspectRatio: "1/1", width: "100%", overflow: "hidden" }}>
            <img src="images/about-photo-3.webp" alt="Faderhead live" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
          <div style={{ aspectRatio: "1/1", width: "100%", overflow: "hidden" }}>
            <img src="images/about-photo-4.webp" alt="Faderhead studio" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
        </div>

        {/* FAQ */}
        <section className="sig-section">
          <div className="sig-section-head">
            <h2 className="sig-section-h">FAQ</h2>
            <div className="sig-section-meta">everything you didn&rsquo;t know</div>
          </div>
          <FaqList go={go} />
        </section>

        <div style={{ marginTop: compact ? 32 : 56 }}>
          <NewsletterSignal compact={compact} />
        </div>
        <div style={{ marginTop: compact ? 32 : 56 }}>
          <FooterSignal compact={compact} />
        </div>
      </div>
    </>);} /* ============ Contact ============ */
function SigContact({ compact }) {
  return (
    <>
      <BroadcastBar compact={compact} />
      <TopNav compact={compact} crumb={!compact && "/ CONTACT"} />

      <div className="sig-shell">
        <header className="sig-hero">
          <div className="sig-eyebrow accent">// CONTACT</div>
          <h1 className="sig-hero-h">Get in touch.</h1>
          <p className="sig-hero-sub">
            Different things go to different inboxes. Pick the right one and you&rsquo;ll hear back faster.
          </p>
        </header>

        <section className="sig-section sig-contact">
          <div className="sig-contact-card">
            <div className="sig-contact-k">EMAIL</div>
            <div className="sig-contact-v">
              <a className="link" href="mailto:contact@faderhead.com">contact@faderhead.com</a>
              <br />
              Reaches the studio inbox directly. Reply times vary depending on whether I&rsquo;m mixing.
            </div>
          </div>

          <div className="sig-contact-card">
            <div className="sig-contact-k">LICENSING / SYNC</div>
            <div className="sig-contact-v">
              <a className="link" href="https://sync.faderhead.com" target="_blank" rel="noopener noreferrer">sync.faderhead.com ↗</a>
              <br />
              <a className="link" href="mailto:sync@faderhead.com">sync@faderhead.com</a>
              <br />
              Most of the catalog is cleared on both sides for sync; instrumentals available on request.
            </div>
          </div>

          <div className="sig-contact-card">
            <div className="sig-contact-k">BOOKINGS</div>
            <div className="sig-contact-v">
              EU / UK: <a className="link" href="mailto:booking@faderhead.com">booking@faderhead.com</a>
              <br />
              Not currently interested in bookings outside of Europe.
            </div>
          </div>

          <div className="sig-contact-card">
            <div className="sig-contact-k">REMIX INFO</div>
            <div className="sig-contact-v">
              Everything you need to know when commissioning me for a remix.{" "}
              <a className="link" href="https://docs.google.com/document/d/1uwWhJlIHgjHGehI71Crcqu6PoOmmjRM4c_rEV6jZXio/edit?usp=sharing" target="_blank" rel="noopener noreferrer">Read the brief ↗</a>
            </div>
          </div>
        </section>

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

window.SigShows = SigShows;
window.SigBlog = SigBlog;

/* ============ Post read view ============ */

/* ── Markdown parser for FF posts ─────────────────────── */
function parseFfMd(text) {
  const lines = text.split('\n');
  // FF number + title from first line: # 💬 FF #511: Title
  let ff = null, title = '';
  const h1 = lines[0].match(/#\s*(?:💬\s*)?FF\s*#(\d+):\s*(.+)/i);
  if (h1) { ff = parseInt(h1[1]); title = h1[2].trim(); }
  // Date from **Date:** YYYY-MM-DD
  let date = '';
  const dateIdx = lines.findIndex(l => l.startsWith('**Date:**'));
  if (dateIdx >= 0) {
    const parts = lines[dateIdx].replace('**Date:**', '').trim().split('-');
    if (parts.length === 3) date = `${parts[2]}.${parts[1]}.${parts[0].slice(2)}`;
  }
  // Blurb = text between date line and first ---
  const hrIdx = lines.findIndex(l => l.trim() === '---');
  const blurbLines = (dateIdx >= 0 && hrIdx > dateIdx)
    ? lines.slice(dateIdx + 1, hrIdx).filter(l => l.trim())
    : [];
  const lede = blurbLines.join(' ').trim();
  // Body = everything after ---
  const body = hrIdx >= 0 ? lines.slice(hrIdx + 1) : lines;
  // Parse body into nodes
  const nodes = []; let para = []; let listItems = null;
  const flushP = () => { if (para.length) { nodes.push({ type: 'p', content: para.join(' ') }); para = []; } };
  const flushL = () => { if (listItems) { nodes.push({ type: 'ol', items: listItems }); listItems = null; } };
  for (const line of body) {
    const t = line.trim();
    if (!t) { flushP(); flushL(); }
    else if (t.startsWith('## ')) { flushP(); flushL(); nodes.push({ type: 'h2', content: t.slice(3) }); }
    else if (t.startsWith('### ')) { flushP(); flushL(); nodes.push({ type: 'h3', content: t.slice(4) }); }
    else if (/^\d+[).]\s/.test(t)) { flushP(); if (!listItems) listItems = []; listItems.push(t.replace(/^\d+[).]\s*/, '')); }
    else { if (listItems) flushL(); para.push(t); }
  }
  flushP(); flushL();
  return { ff, title, date, lede, nodes };
}
function applyInline(text) {
  return text.split(/(\*\*[^*]+\*\*)/).map((p, i) =>
    p.startsWith('**') && p.endsWith('**') ? <strong key={i}>{p.slice(2,-2)}</strong> : p
  );
}
function renderMdNodes(nodes) {
  return nodes.map((n, i) => {
    if (n.type === 'h2') return <h2 key={i}>{n.content}</h2>;
    if (n.type === 'h3') return <h3 key={i}>{n.content}</h3>;
    if (n.type === 'p')  return <p key={i}>{applyInline(n.content)}</p>;
    if (n.type === 'ol') return <ol key={i}>{n.items.map((item,j) => <li key={j}>{applyInline(item)}</li>)}</ol>;
    return null;
  });
}
function SigPost({ compact, postId }) {
  const { go } = useNav();
  const post = POSTS.find(p => p.id === postId) || POSTS[0];
  const [mdData, setMdData] = React.useState(null);

  React.useEffect(() => {
    setMdData(null);
    if (!post.md) return;
    fetch(post.md)
      .then(r => r.ok ? r.text() : Promise.reject())
      .then(text => setMdData(parseFfMd(text)))
      .catch(() => setMdData({ error: true }));
  }, [post.md]);

  const title = (mdData && mdData.title) || post.title || '';
  const date  = (mdData && mdData.date)  || post.d   || '';
  const lede  = (mdData && mdData.lede)  || post.blurb || '';
  const ffNum = (mdData && mdData.ff)    || post.ff   || null;

  return (
    <>
      <BroadcastBar compact={compact} />
      <TopNav compact={compact} crumb={!compact && "/ BLOG"} />
      <div className="sig-shell">

        <button className="sig-article-back-link" onClick={() => go({ name: 'blog', scrollTo: 'essays' })} style={{ marginBottom: 24, display: 'inline-block' }}>
          ← Essays &amp; Podcast
        </button>

        <div className="sig-article-meta">
          <span className="sig-article-date">{date}</span>
          <span className="sig-article-readtime">{post.read} read</span>
          {post.tags.map(t => <span key={t} className="sig-post-tag">{t}</span>)}
        </div>

        <h1 className="sig-article-title">{title}</h1>

        {lede && <p className="sig-article-lede">{lede}</p>}

        {ffNum && (
          <div className="sig-ff-attr">
            <span className="sig-ff-attr-label">// FF #{ffNum}</span>
            <span>
              This is taken from <strong>Faderhead Friday #{ffNum}</strong>, the weekly email for Patreon subscribers.{" "}
              <a href="http://patreon.com/faderhead" target="_blank" rel="noopener noreferrer" className="link">Join here ↗</a>
            </span>
          </div>
        )}

        {post.md && !mdData && (
          <div className="sig-more mono">// loading&hellip;</div>
        )}

        {mdData && !mdData.error && (
          <div className="sig-article-body">
            {renderMdNodes(mdData.nodes)}
          </div>
        )}

        {!post.md && (
          <div className="sig-article-body">
            {(post.body || []).map((para, i) => (
              <p key={i} style={para.startsWith('[Placeholder') ? { color: 'var(--ink-4)', fontStyle: 'italic', fontSize: 13 } : {}}>
                {para}
              </p>
            ))}
          </div>
        )}

        <div className="sig-article-footer">
          <button className="sig-article-back-link" onClick={() => go({ name: 'blog', scrollTo: 'essays' })}>
            ← Back to essays
          </button>
          <div className="sig-post-tags">
            {post.tags.map(t => <span key={t} className="sig-post-tag">{t}</span>)}
          </div>
        </div>

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

window.SigPost = SigPost;
window.POSTS = POSTS;
window.SigDeepDive = SigDeepDive;
window.SigContact = SigContact;

/* ============ Impressum ============ */
function SigImpressum({ compact }) {
  return (
    <>
      <BroadcastBar compact={compact} />
      <TopNav compact={compact} crumb={!compact && "/ IMPRESSUM"} />
      <div className="sig-shell">
        <header className="sig-hero">
          <div className="sig-eyebrow accent">// LEGAL</div>
          <h1 className="sig-hero-h">Impressum.</h1>
        </header>

        <section className="sig-section">
          <div className="sig-legal">

            <h2>Angaben gemäß § 5 DDG</h2>
            <p><strong>Faderhead</strong><br />
            Inhaber: Sami Mark Yahya<br />
            Wichernsweg 11<br />
            20537 Hamburg<br />
            Deutschland</p>

            <h3>Kontakt</h3>
            <p>E-Mail: <a className="link" href="mailto:contact@faderhead.com">contact@faderhead.com</a><br />
            Der Empfang von Dateianhängen ist unter dieser Adresse nicht möglich. Bei Bedarf bitte vorab Kontakt aufnehmen.</p>
            <p>Telefon: <a className="link" href="tel:+4915115281732">+49 151 15281732</a><br />
            Bitte Kunden- oder Bestellnummer bereithalten.</p>

            <h3>Umsatzsteuer-Identifikationsnummer gemäß § 27a UStG</h3>
            <p>DE232830625</p>

            <h3>Hinweis</h3>
            <p>Kein Ladengeschäft. Kein öffentlicher Publikumsverkehr.</p>

            <h3>Inhaltlich verantwortlich gemäß § 18 Abs. 2 MStV</h3>
            <p>Sami Mark Yahya<br />
            Anschrift wie oben.</p>

            <h2>Verbraucherstreitbeilegung</h2>
            <p>Wir sind nicht bereit und nicht verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>

            <hr className="sig-legal-div" />

            <h2>Legal Notice</h2>
            <h3>Mandatory disclosure pursuant to § 5 DDG</h3>
            <p><strong>Faderhead</strong><br />
            Owner: Sami Mark Yahya<br />
            Wichernsweg 11<br />
            20537 Hamburg<br />
            Germany</p>

            <h3>Contact</h3>
            <p>E-mail: <a className="link" href="mailto:contact@faderhead.com">contact@faderhead.com</a><br />
            Attachments cannot be received at this address. Please contact us in advance if you need to send files.</p>
            <p>Phone: <a className="link" href="tel:+4915115281732">+49 151 15281732</a><br />
            Please have your customer or order number ready.</p>

            <h3>VAT identification number pursuant to § 27a UStG</h3>
            <p>DE232830625</p>

            <h3>Notice</h3>
            <p>No retail premises. No walk-in service.</p>

            <h3>Person responsible for content pursuant to § 18(2) MStV</h3>
            <p>Sami Mark Yahya<br />
            Address as above.</p>

            <h2>Consumer dispute resolution</h2>
            <p>We are not willing or obliged to participate in dispute resolution proceedings before a consumer arbitration board.</p>

          </div>
        </section>

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

window.SigImpressum = SigImpressum;

/* ============ Datenschutz ============ */
function SigDatenschutz({ compact }) {
  return (
    <>
      <BroadcastBar compact={compact} />
      <TopNav compact={compact} crumb={!compact && "/ DATENSCHUTZ"} />
      <div className="sig-shell">
        <header className="sig-hero">
          <div className="sig-eyebrow accent">// LEGAL</div>
          <h1 className="sig-hero-h">Datenschutz.</h1>
        </header>

        <section className="sig-section">
          <div className="sig-legal">

            <h2>1. Verantwortlicher</h2>
            <p>Verantwortlich für die Datenverarbeitung auf dieser Website ist:</p>
            <p><strong>Sami Mark Yahya / Faderhead</strong><br />
            Wichernsweg 11<br />
            20537 Hamburg<br />
            Deutschland</p>
            <p>E-Mail: <a className="link" href="mailto:contact@faderhead.com">contact@faderhead.com</a><br />
            Telefon: +49 151 15281732</p>

            <h2>2. Allgemeines zur Datenverarbeitung</h2>
            <p>Wir verarbeiten personenbezogene Daten nur, soweit dies zur Bereitstellung dieser Website, zur Kommunikation, zur Analyse der Website-Nutzung oder zur Darstellung externer Inhalte erforderlich ist.</p>
            <p>Die rechtlichen Grundlagen ergeben sich insbesondere aus Art. 6 DSGVO und, soweit Cookies oder ähnliche Technologien eingesetzt werden, aus § 25 TDDDG.</p>

            <h2>3. Zugriffsdaten und Server-Logfiles</h2>
            <p>Beim Besuch dieser Website werden durch den Hosting-Anbieter automatisch technische Daten verarbeitet. Dazu können gehören:</p>
            <ul className="sig-legal-list">
              <li>IP-Adresse</li>
              <li>Datum und Uhrzeit des Zugriffs</li>
              <li>aufgerufene Seiten</li>
              <li>Browsertyp und Browserversion</li>
              <li>Betriebssystem</li>
              <li>Referrer-URL</li>
              <li>übertragene Datenmenge</li>
            </ul>
            <p>Diese Daten dienen der technischen Bereitstellung, Sicherheit und Stabilität der Website.</p>
            <p>Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO. Unser berechtigtes Interesse liegt im sicheren und stabilen Betrieb der Website.</p>

            <h2>4. Cookies und Einwilligung</h2>
            <p>Diese Website kann Cookies und ähnliche Technologien verwenden.</p>
            <p>Technisch notwendige Cookies werden eingesetzt, soweit sie für den Betrieb der Website erforderlich sind.</p>
            <p>Nicht notwendige Dienste, insbesondere Tracking- und Marketingdienste wie Meta Pixel oder eingebettete YouTube-Videos, werden nur nach Ihrer Einwilligung geladen.</p>
            <p>Rechtsgrundlage für einwilligungspflichtige Dienste ist Art. 6 Abs. 1 lit. a DSGVO sowie § 25 Abs. 1 TDDDG.</p>
            <p>Sie können Ihre Einwilligung jederzeit mit Wirkung für die Zukunft über die Cookie-Einstellungen widerrufen oder ändern.</p>

            <h2>5. Meta Pixel</h2>
            <p>Diese Website kann den Meta Pixel der Meta Platforms Ireland Limited, Merrion Road, Dublin 4, D04 X2K5, Irland, verwenden.</p>
            <p>Der Meta Pixel dient dazu, die Wirksamkeit von Werbung auf Meta-Plattformen wie Facebook und Instagram zu messen und Zielgruppen für Werbekampagnen zu bilden.</p>
            <p>Dabei können insbesondere folgende Daten verarbeitet werden:</p>
            <ul className="sig-legal-list">
              <li>IP-Adresse</li>
              <li>Geräte- und Browserinformationen</li>
              <li>besuchte Seiten</li>
              <li>Klickverhalten</li>
              <li>Zeitpunkt des Besuchs</li>
              <li>Referrer-Informationen</li>
            </ul>
            <p>Der Meta Pixel wird nur nach Ihrer Einwilligung geladen.</p>
            <p>Rechtsgrundlage ist Art. 6 Abs. 1 lit. a DSGVO sowie § 25 Abs. 1 TDDDG.</p>
            <p>Meta kann Daten auch in die USA und andere Drittländer übertragen. Weitere Informationen finden Sie in der Datenschutzerklärung von Meta.</p>

            <h2>6. YouTube-Einbettungen</h2>
            <p>Diese Website kann Videos von YouTube einbetten. Anbieter ist Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland.</p>
            <p>YouTube-Videos werden erst geladen, wenn Sie Ihre Einwilligung erteilt oder das Video aktiv gestartet haben.</p>
            <p>Beim Laden eines YouTube-Videos können personenbezogene Daten an Google übertragen werden. Dazu können insbesondere IP-Adresse, Geräteinformationen, Browserdaten und Informationen über die Nutzung des Videos gehören.</p>
            <p>Rechtsgrundlage ist Art. 6 Abs. 1 lit. a DSGVO sowie § 25 Abs. 1 TDDDG.</p>
            <p>Soweit möglich, verwenden wir den erweiterten Datenschutzmodus von YouTube.</p>

            <h2>7. Links zu externen Plattformen</h2>
            <p>Diese Website enthält Links zu externen Plattformen, insbesondere:</p>
            <ul className="sig-legal-list">
              <li>Shopify / Faderhead Online Shop</li>
              <li>Spotify</li>
              <li>Apple Music</li>
              <li>YouTube</li>
              <li>Instagram</li>
              <li>Facebook</li>
              <li>Bandcamp</li>
              <li>Patreon</li>
            </ul>
            <p>Wenn Sie einen externen Link anklicken, verlassen Sie faderhead.com. Für die Datenverarbeitung auf der jeweiligen externen Plattform ist der jeweilige Anbieter verantwortlich.</p>

            <h2>8. Shopify-Shop</h2>
            <p>Diese Website verlinkt auf den Faderhead Online Shop unter:</p>
            <p><a className="link" href="http://faderhead.myshopify.com" target="_blank" rel="noopener noreferrer">faderhead.myshopify.com ↗</a></p>
            <p>Der Kaufvertrag, die Zahlungsabwicklung, Versandabwicklung und die damit verbundene Datenverarbeitung erfolgen nicht auf faderhead.com, sondern im Shopify-Shop.</p>
            <p>Für die Datenverarbeitung im Shop gilt die dort bereitgestellte Datenschutzerklärung.</p>

            <h2>9. Kontaktaufnahme</h2>
            <p>Wenn Sie uns per E-Mail oder Telefon kontaktieren, verarbeiten wir die von Ihnen mitgeteilten Daten zur Bearbeitung Ihrer Anfrage.</p>
            <p>Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO, sofern Ihre Anfrage mit einem Vertrag oder vorvertraglichen Maßnahmen zusammenhängt. In allen anderen Fällen ist Rechtsgrundlage Art. 6 Abs. 1 lit. f DSGVO.</p>

            <h2>10. Newsletter</h2>
            <p>Falls Sie sich für einen Newsletter anmelden, verarbeiten wir Ihre E-Mail-Adresse zum Versand des Newsletters.</p>
            <p>Der Versand erfolgt nur mit Ihrer Einwilligung.</p>
            <p>Rechtsgrundlage ist Art. 6 Abs. 1 lit. a DSGVO.</p>
            <p>Sie können den Newsletter jederzeit über den Abmeldelink im Newsletter abbestellen.</p>
            <p style={{ color: "var(--ink-3)", fontStyle: "italic" }}>[Hier Anbieter ergänzen, z. B. MailerLite, falls Newsletter-Anmeldung auf faderhead.com eingebunden ist.]</p>

            <h2>11. Speicherdauer</h2>
            <p>Wir speichern personenbezogene Daten nur so lange, wie dies für den jeweiligen Zweck erforderlich ist oder gesetzliche Aufbewahrungspflichten bestehen.</p>
            <p>Daten, die auf Grundlage einer Einwilligung verarbeitet werden, werden gelöscht oder nicht mehr verarbeitet, wenn Sie Ihre Einwilligung widerrufen, soweit keine andere Rechtsgrundlage besteht.</p>

            <h2>12. Ihre Rechte</h2>
            <p>Sie haben nach der DSGVO insbesondere folgende Rechte:</p>
            <ul className="sig-legal-list">
              <li>Recht auf Auskunft</li>
              <li>Recht auf Berichtigung</li>
              <li>Recht auf Löschung</li>
              <li>Recht auf Einschränkung der Verarbeitung</li>
              <li>Recht auf Datenübertragbarkeit</li>
              <li>Recht auf Widerspruch</li>
              <li>Recht auf Widerruf erteilter Einwilligungen</li>
              <li>Recht auf Beschwerde bei einer Datenschutzaufsichtsbehörde</li>
            </ul>

            <h2>13. Zuständige Aufsichtsbehörde</h2>
            <p>Der Hamburgische Beauftragte für Datenschutz und Informationsfreiheit<br />
            Ludwig-Erhard-Straße 22<br />
            20459 Hamburg<br />
            Deutschland</p>

            <h2>14. Stand</h2>
            <p>Stand: Juni 2026</p>

            <hr className="sig-legal-div" />

            <h2>1. Controller</h2>
            <p>The controller responsible for data processing on this website is:</p>
            <p><strong>Sami Mark Yahya / Faderhead</strong><br />
            Wichernsweg 11<br />
            20537 Hamburg<br />
            Germany</p>
            <p>E-mail: <a className="link" href="mailto:contact@faderhead.com">contact@faderhead.com</a><br />
            Phone: +49 151 15281732</p>

            <h2>2. General information</h2>
            <p>This privacy policy explains which personal data is processed when you visit faderhead.com.</p>
            <p>Personal data means any data that can be used to identify you personally.</p>
            <p>We process personal data only to the extent necessary to operate this website, communicate with visitors, analyze website usage, run marketing activities or display external content.</p>
            <p>The legal bases are mainly Article 6 GDPR and, where cookies or similar technologies are used, § 25 TDDDG.</p>

            <h2>3. Hosting and server log files</h2>
            <p>When you visit this website, technical access data may be processed automatically by the hosting provider. This may include:</p>
            <ul className="sig-legal-list">
              <li>IP address</li>
              <li>date and time of access</li>
              <li>pages accessed</li>
              <li>browser type and version</li>
              <li>operating system</li>
              <li>referrer URL</li>
              <li>amount of data transferred</li>
            </ul>
            <p>This data is processed to ensure the technical operation, security and stability of the website.</p>
            <p>The legal basis is Article 6(1)(f) GDPR. Our legitimate interest is the secure and stable operation of the website.</p>

            <h2>4. Cookies and consent</h2>
            <p>This website may use cookies and similar technologies.</p>
            <p>Technically necessary cookies may be used where required for the operation of the website.</p>
            <p>Non-essential services, especially tracking and marketing services such as Meta Pixel or embedded YouTube videos, are only loaded after your consent.</p>
            <p>The legal basis for consent-based services is Article 6(1)(a) GDPR and § 25(1) TDDDG.</p>
            <p>You can withdraw or change your consent at any time through the cookie settings on this website.</p>

            <h2>5. Meta Pixel</h2>
            <p>This website may use Meta Pixel, provided by Meta Platforms Ireland Limited, Merrion Road, Dublin 4, D04 X2K5, Ireland.</p>
            <p>Meta Pixel is used to measure the effectiveness of advertising on Meta platforms such as Facebook and Instagram and to create audiences for advertising campaigns.</p>
            <p>The following data may be processed:</p>
            <ul className="sig-legal-list">
              <li>IP address</li>
              <li>device and browser information</li>
              <li>pages visited</li>
              <li>click behavior</li>
              <li>time of visit</li>
              <li>referrer information</li>
            </ul>
            <p>Meta Pixel is only loaded after your consent.</p>
            <p>The legal basis is Article 6(1)(a) GDPR and § 25(1) TDDDG.</p>
            <p>Meta may transfer data to the USA and other third countries. Further information can be found in Meta's privacy policy:<br />
            <a className="link" href="https://www.facebook.com/privacy/policy/" target="_blank" rel="noopener noreferrer">facebook.com/privacy/policy ↗</a></p>

            <h2>6. YouTube embeds</h2>
            <p>This website may embed videos from YouTube. The provider is Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Ireland.</p>
            <p>YouTube videos are only loaded after you have given your consent or actively started the video.</p>
            <p>When a YouTube video is loaded, personal data may be transferred to Google. This may include your IP address, device information, browser data and information about your interaction with the video.</p>
            <p>The legal basis is Article 6(1)(a) GDPR and § 25(1) TDDDG.</p>
            <p>Where possible, we use YouTube's privacy-enhanced mode.</p>
            <p>Further information can be found in Google's privacy policy:<br />
            <a className="link" href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">policies.google.com/privacy ↗</a></p>

            <h2>7. External links</h2>
            <p>This website contains links to external platforms, including:</p>
            <ul className="sig-legal-list">
              <li>Shopify / Faderhead Online Shop</li>
              <li>Spotify</li>
              <li>Apple Music</li>
              <li>YouTube</li>
              <li>Instagram</li>
              <li>Facebook</li>
              <li>Bandcamp</li>
              <li>Patreon</li>
            </ul>
            <p>When you click an external link, you leave faderhead.com. The respective provider is responsible for data processing on the external platform.</p>

            <h2>8. Shopify shop</h2>
            <p>This website links to the Faderhead Online Shop:</p>
            <p><a className="link" href="http://faderhead.myshopify.com" target="_blank" rel="noopener noreferrer">faderhead.myshopify.com ↗</a></p>
            <p>Purchases, payment processing, shipping, returns and related data processing do not take place on faderhead.com. They take place inside the Shopify-hosted Faderhead Online Shop.</p>
            <p>The legal documents provided in the shop apply there, especially:</p>
            <ul className="sig-legal-list">
              <li>Legal Notice / Impressum</li>
              <li>Privacy Policy / Datenschutz</li>
              <li>Terms and Conditions / AGB</li>
              <li>Right of Withdrawal / Widerruf</li>
              <li>Shipping and payment information</li>
            </ul>

            <h2>9. Contact</h2>
            <p>If you contact us by e-mail or phone, we process the data you provide in order to handle your request.</p>
            <p>The legal basis is Article 6(1)(b) GDPR if your request relates to a contract or pre-contractual measures.</p>
            <p>In all other cases, the legal basis is Article 6(1)(f) GDPR. Our legitimate interest is handling your request.</p>

            <h2>10. Newsletter</h2>
            <p>If you subscribe to a newsletter on this website, we process your e-mail address to send the newsletter.</p>
            <p>The newsletter is sent only with your consent.</p>
            <p>The legal basis is Article 6(1)(a) GDPR.</p>
            <p>You can unsubscribe at any time using the unsubscribe link included in each newsletter.</p>
            <p>If an external newsletter service provider is used, processing is additionally based on a data processing agreement.</p>

            <h2>11. Storage period</h2>
            <p>We store personal data only for as long as necessary for the respective purpose or as required by statutory retention obligations.</p>
            <p>Data processed on the basis of consent will no longer be processed if you withdraw your consent, unless another legal basis applies.</p>

            <h2>12. Your rights</h2>
            <p>Under the GDPR, you have the following rights:</p>
            <ul className="sig-legal-list">
              <li>right of access</li>
              <li>right to rectification</li>
              <li>right to erasure</li>
              <li>right to restriction of processing</li>
              <li>right to data portability</li>
              <li>right to object</li>
              <li>right to withdraw consent</li>
              <li>right to lodge a complaint with a supervisory authority</li>
            </ul>

            <h2>13. Supervisory authority</h2>
            <p>The competent supervisory authority is:</p>
            <p>The Hamburg Commissioner for Data Protection and Freedom of Information<br />
            Ludwig-Erhard-Straße 22<br />
            20459 Hamburg<br />
            Germany</p>

          </div>
        </section>

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

window.SigDatenschutz = SigDatenschutz;

/* ============ Shop legal ============ */
function SigShopLegal({ compact }) {
  return (
    <>
      <BroadcastBar compact={compact} />
      <TopNav compact={compact} crumb={!compact && "/ SHOP"} />
      <div className="sig-shell">
        <header className="sig-hero">
          <div className="sig-eyebrow accent">// SHOP</div>
          <h1 className="sig-hero-h">Shop.</h1>
        </header>

        <section className="sig-section">
          <div className="sig-legal">

            <h2>Deutsch</h2>
            <p>Der offizielle Faderhead-Shop wird extern über Shopify betrieben.</p>
            <p>Merchandise, Musik und weitere Faderhead-Produkte findest du hier:</p>
            <p><a className="link" href="https://faderhead.myshopify.com" target="_blank" rel="noopener noreferrer">Zum Faderhead Online Shop ↗</a></p>

            <h3>Rechtlicher Hinweis</h3>
            <p>Käufe werden nicht auf faderhead.com abgeschlossen.</p>
            <p>Wenn du den Shop-Link anklickst, verlässt du diese Website und wirst zum Faderhead Online Shop weitergeleitet, der über Shopify betrieben wird.</p>
            <p>Der Kaufprozess, die Zahlungsabwicklung, die Bestellabwicklung, der Versand, Rücksendungen und Kundenkonto-Funktionen finden im Shopify-Shop statt.</p>
            <p>Im Faderhead Online Shop gelten die dort bereitgestellten rechtlichen Dokumente:</p>
            <ul className="sig-legal-list">
              <li>Impressum</li>
              <li>Datenschutz</li>
              <li>AGB</li>
              <li>Widerruf</li>
              <li>Versand- und Zahlungsinformationen</li>
            </ul>
            <p>Bei Fragen zu bestehenden Bestellungen kontaktiere bitte:<br />
            <a className="link" href="mailto:contact@faderhead.com">contact@faderhead.com</a></p>
            <p>Bitte gib, falls vorhanden, deine Kunden- oder Bestellnummer an.</p>

            <hr className="sig-legal-div" />

            <h2>English</h2>
            <p>The official Faderhead shop is hosted externally on Shopify.</p>
            <p>You can find merchandise, music and other Faderhead products here:</p>
            <p><a className="link" href="https://faderhead.myshopify.com" target="_blank" rel="noopener noreferrer">Go to the Faderhead Online Shop ↗</a></p>

            <h3>Legal notice</h3>
            <p>Purchases are not completed on faderhead.com.</p>
            <p>When you click the shop link, you leave this website and are redirected to the Faderhead Online Shop hosted by Shopify.</p>
            <p>The purchase process, payment processing, order handling, shipping, returns and customer account functions take place inside the Shopify shop.</p>
            <p>The following legal documents apply inside the Faderhead Online Shop:</p>
            <ul className="sig-legal-list">
              <li>Legal Notice / Impressum</li>
              <li>Privacy Policy / Datenschutz</li>
              <li>Terms and Conditions / AGB</li>
              <li>Right of Withdrawal / Widerruf</li>
              <li>Shipping and payment information</li>
            </ul>
            <p>For questions about existing orders, please contact:<br />
            <a className="link" href="mailto:contact@faderhead.com">contact@faderhead.com</a></p>
            <p>Please include your customer or order number if available.</p>

          </div>
        </section>

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

window.SigShopLegal = SigShopLegal;