<section>
    <p><span>I</span>deas go on pages,<br />not in bins.</p>
</section>

<style>
    section {
        max-width: var(--prose-width);
        margin: 0 auto;
        padding: 2rem 0.75rem 0 0.75rem;
    }

    p {
        --font-hero-logo: clamp(1.56rem, 1.122rem + 2.19vw, 3.75rem);
        font: var(--font-hero-logo) aclonica;
        text-align: center;
    }

    span {
        /* dunno what to put here */

        &::before {
            content: "💡";
        }
    }
</style>

<section>
    <p><span>I</span>deas go on pages,<br />not in bins.</p>
</section>

<style>
    section {
        max-width: var(--prose-width);
        margin: 0 auto;
        padding: 2rem 0.75rem 0 0.75rem;
    }

    p {
        --font-hero-logo: clamp(1.56rem, 1.122rem + 2.19vw, 3.75rem);
        font: var(--font-hero-logo) aclonica;
        text-align: center;
    }

    span {
        /* dunno what to put here */

        &::before {
            content: "💡";
        }
    }
</style>

interface Params {
  query: string;
  initial: (matches: boolean) => void;
  listener: (list: MediaQueryListEvent) => void;
}

export class MediaQuery {
  #queryList: MediaQueryList | undefined;
  #params: Params;

  constructor(params: Params) {
    this.#params = params;
  }

  mountMediaQuery = () => {
    this.#queryList = window.matchMedia(this.#params.query);
    this.#params.initial(this.#queryList.matches);

    const instance = this.#params.listener.bind(this);
    this.#queryList.addEventListener("change", instance);
    return () => this.#queryList?.removeEventListener("change", instance);
  }
}

interface Params {
  query: string;
  initial: (matches: boolean) => void;
  listener: (list: MediaQueryListEvent) => void;
}

export class MediaQuery {
  #queryList: MediaQueryList | undefined;
  #params: Params;

  constructor(params: Params) {
    this.#params = params;
  }

  mountMediaQuery = () => {
    this.#queryList = window.matchMedia(this.#params.query);
    this.#params.initial(this.#queryList.matches);

    const instance = this.#params.listener.bind(this);
    this.#queryList.addEventListener("change", instance);
    return () => this.#queryList?.removeEventListener("change", instance);
  }
}

let ticking: number | boolean = false;
const onScrollListener = () => {
  ticking ||= requestAnimationFrame(() => {
    burger = window.scrollY === 0;
    ticking = false;
  });
};

const mediaQuery = new MediaQuery({
  query: "(width >= 768px)",
  initial(matches: boolean) {
    if (matches) document.addEventListener("scroll", onScrollListener);
    burger = matches;
  },
  listener(list: MediaQueryListEvent) {
    burger = list.matches;
    if (list.matches) document.addEventListener("scroll", onScrollListener);
    else document.removeEventListener("scroll", onScrollListener);
  },
});

onMount(mediaQuery.mountMediaQuery);

let ticking: number | boolean = false;
const onScrollListener = () => {
  ticking ||= requestAnimationFrame(() => {
    burger = window.scrollY === 0;
    ticking = false;
  });
};

const mediaQuery = new MediaQuery({
  query: "(width >= 768px)",
  initial(matches: boolean) {
    if (matches) document.addEventListener("scroll", onScrollListener);
    burger = matches;
  },
  listener(list: MediaQueryListEvent) {
    burger = list.matches;
    if (list.matches) document.addEventListener("scroll", onScrollListener);
    else document.removeEventListener("scroll", onScrollListener);
  },
});

onMount(mediaQuery.mountMediaQuery);