---
import "../scss/style.scss";
import MosaicBackground from "../component/MosaicBackground.astro";
import VideoAuto from "../component/VideoAuto.astro";
import Base from "../layout/Base.astro";
---

<Base>
  <header>
    <h1>Arnaud Hergès</h1>
    <div class="tags">
      <p class="tag">batteur</p>
      <p class="tag">-</p>
      <p class="tag">compositeur</p>
      <p class="tag">-</p>
      <p class="tag">producteur</p>
      <p class="tag">-</p>
      <p class="tag">références</p>
      <p class="tag">-</p>
      <p class="tag">contact</p>
    </div>
  </header>
  </body>
  <main>
    <section class="batteur">
      <MosaicBackground height="500">
        <img src="/batteur/old2.jpg" />
        <img src="/batteur/old3.jpg" />
        <VideoAuto src="/batteur/video/bb.webm" />
        <img src="/batteur/dark_scene.jpg" />
        <img src="/batteur/mid_rock.jpg" />
        <img src="/batteur/black_and_white.jpg" />
        <img src="/batteur/old.jpg" />
        <img src="/batteur/mid_outdoor.jpg" />
        <VideoAuto src="/batteur/video/solo.webm" />
        <VideoAuto src="/batteur/video/balance.webm" />
        <img src="/batteur/mid_rock2.jpg" />
        <img src="/batteur/recent.jpg" />
      </MosaicBackground>
      <div class="content">
        <div class="content__header">
          <h2>Batteur</h2>
          <h3>Studio & Live</h3>
        </div>
        <p>
          À tous les âges, sur tous les kits et avec toutes les coupes de cheveux, cela fait 40 ans
          que la batterie m’accompagne et qu’elle me suit pour agrémenter vos concerts et vos
          séances des meilleures «&thinsp;rythmiques&thinsp;» possibles.
        </p>
        <p>
          Quelque soit le style, sur partition ou sur séquence, sur acoustique, électronique ou de
          mon spd-sx, au clic ou au feeling, ce sont plus de 800 concerts en salles, événements et
          festivals et des dizaines de titres déjà enregistrés en studio.
        </p>
        <p>
          Jamais rassasié, je suis toujours dispo pour de futurs projets, qu’ils soient scéniques ou
          enregistrés. Contactez-moi pour en parler&thinsp;!
        </p>
      </div>
    </section>
  </main>
</Base>

<script is:inline defer>
  const sections = document.querySelectorAll("section");
  document.addEventListener("scroll", () => {
    sections.forEach((section) => {
      const rect = section.getBoundingClientRect();
      if (rect.top > window.scrollY || rect.bottom * 2 < window.scrollY) return;
      const content = section.querySelector(".content");
      if (content == null || !(content instanceof HTMLElement))
        throw new Error(`Invalid section ${section}`);
      const ratio = (window.scrollY - rect.top) / (rect.bottom - rect.top);
      content.style.top = `${65 - ratio * 20}%`;
    });
  });
</script>