---
import Layout from "../../../layouts/Layout.astro";
import type { Locale } from "../../../i18n/config";
import { useTranslations } from "../../../i18n/ui";

const lang: Locale = "fr";
const t = useTranslations(lang);
---
<Layout title="À propos de la créatrice" description="Découvrez VanVan – la personne derrière Van's DIY & Bastelbedarf." lang={lang} path="/ueber-die-kreative/">
  <section class="section-tight">
    <div class="container grid grid-2 intro">
      <div class="portrait-frame portrait">
        <img src="/img/vanvan-portrait-holding.webp" alt="VanVan dans son atelier avec ses peluches au crochet faites main" width="900" height="1353" loading="lazy" />
        <span class="portrait-badge">{t.common.handmadeBadge}</span>
      </div>
      <div>
        <span class="eyebrow">{t.about.eyebrow}</span>
        <h1>{t.about.title}</h1>
        <p class="lead">{t.about.lead}</p>
      </div>
    </div>
  </section>

  <section class="section-tight">
    <div class="container story">
      {t.about.story.map((s) => (
        <div class="story-section">
          <h2>{s.title}</h2>
          {s.paragraphs.map((p) => <p>{p}</p>)}
        </div>
      ))}
    </div>
  </section>

  <section class="section-tight">
    <div class="container">
      <h2 class="text-center">{t.about.valuesTitle}</h2>
      <div class="grid grid-3">
        {t.about.values.map((v) => (
          <div class="card text-center">
            <h3>{v.icon} {v.title}</h3>
            <p class="small">{v.text}</p>
          </div>
        ))}
      </div>
    </div>
  </section>

  <section class="section-tight">
    <div class="container">
      <blockquote class="pull-quote pull-quote-center">« {t.about.closing} »</blockquote>
    </div>
  </section>

  <section class="section-tight">
    <div class="container text-center">
      <a class="btn btn-primary" href="/fr/shop/">{t.common.toShop}</a>
    </div>
  </section>
</Layout>

<script>
  // Dezente Scroll-Animation für die Story-Abschnitte (Wunsch aus Dokument1.pdf: "sanfte
  // Scroll-Animationen sind willkommen"). Fällt sauber zurück, falls IntersectionObserver
  // fehlt oder der Nutzer reduzierte Bewegung bevorzugt (siehe CSS prefers-reduced-motion).
  const sections = document.querySelectorAll(".story-section");
  if ("IntersectionObserver" in window && sections.length) {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("is-visible");
            io.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.15 }
    );
    sections.forEach((el) => io.observe(el));
  } else {
    sections.forEach((el) => el.classList.add("is-visible"));
  }
</script>