---
export const prerender = false;
import Base from '../layouts/Base.astro';
---

<Base title="Начало" titleEn="Home" isHome={true}>
  <main>
    <section class="hero">
      <div class="hero-bg" style="background-image: url('/images/hero-bg.jpg'); background-size: cover; background-position: center;"></div>
      <div class="container hero-content">
        <h1 class="hero-title" data-i18n="heroTitle">Здраве от планината</h1>
        <p class="hero-subtitle" data-i18n="heroSubtitle">Вкусът на истинския чай, съхранен през поколенията.</p>
        <a href="/shop" class="btn btn-hero" data-i18n="shopNow">Разгледайте продуктите</a>
      </div>
    </section>

    <section class="featured-panel">
      <div class="featured-panel-image" style="background-image: url('/images/products/parallax-1.jpg')"></div>
      <div class="featured-panel-text" style="background-image: url('/images/products/home-2background-img-6.jpg')">
        <div class="featured-panel-body">
          <h3 data-i18n="panelTitle">Диворастящи билки</h3>
          <p data-i18n="panelText1">Нашите билки растат в естествената си среда,</p>
          <p data-i18n="panelText2">сред чистата природа на югозападна България.</p>
          <p data-i18n="panelText3">Всички растения са ръчно набрани,</p>
          <p data-i18n="panelText4">внимателно почистени и естествено изсушени.</p>
          <a href="/about" class="btn" data-i18n="panelCta">Научете повече</a>
        </div>
      </div>
    </section>

  </main>
</Base>

<script>
  // parallax hero: background scrolls at ~0.5x speed
  const heroBg = document.querySelector('.hero-bg');
  if (heroBg) {
    const factor = 0.5;
    function parallax() {
      heroBg.style.transform = `translateY(${window.scrollY * factor}px)`;
    }
    window.addEventListener('scroll', parallax, { passive: true });
    parallax();
  }
</script>