---
import Layout from "../../layouts/Layout.astro";
import ProductCard from "../../components/ProductCard.astro";
import HeartRating from "../../components/HeartRating.astro";
import { categories } from "../../data/categories";
import { products, alleBewertungen, gesamtDurchschnitt } from "../../data/products";
import { useTranslations } from "../../i18n/ui";
import type { Locale } from "../../i18n/config";

const lang: Locale = "fr";
const t = useTranslations(lang);

const neuheiten = products.filter((p) => p.badges.includes("neu")).slice(0, 4);
const bestseller = products.filter((p) => p.badges.includes("bestseller")).slice(0, 4);
const sale = products.filter((p) => p.badges.includes("sale") || p.preisAlt).slice(0, 4);
const topBewertungen = alleBewertungen().slice(0, 3);
const bewertungSchnittGesamt = gesamtDurchschnitt();
const produkteBasis = products.map((p) => ({
  slug: p.slug,
  name: p.name[lang],
  bewertungen: (p.bewertungen ?? []).map((r) => ({ name: r.name, bewertung: r.bewertung, text: r.text?.[lang] ?? "", datum: r.datum ?? "" })),
}));
---
<Layout title="Accueil" lang={lang} path="/">
  <section class="hero">
    <img src="/logo.png" alt="" aria-hidden="true" class="hero-watermark" />
    <div class="container hero-content">
      <div class="hero-gallery">
        <div class="hero-photo hero-photo-1"><img src="/img/hero-plushie-bunny.webp" alt="Peluche lapin au crochet en salopette bleue, dans l'herbe" loading="eager" width="900" height="1200" /></div>
        <div class="hero-photo hero-photo-2"><img src="/img/hero-plushie-turtle.webp" alt="Peluche tortue au crochet en bleu clair et jaune" loading="eager" width="900" height="1200" /></div>
        <div class="hero-photo hero-photo-3"><img src="/img/hero-plushie-octopus.webp" alt="Peluche poulpe au crochet en rose" loading="eager" width="900" height="1200" /></div>
        <div class="hero-photo hero-photo-4"><img src="/img/hero-plushie-penguin.webp" alt="Peluche pingouin au crochet en bleu clair et blanc" loading="eager" width="900" height="1200" /></div>
      </div>
      <div class="hero-inner">
        <span class="eyebrow">🩵 Van's DIY & Bastelbedarf</span>
        <h1>Fait main avec amour – <br />de la créativité à offrir<br />ou à garder.</h1>
        <p class="lead">Crochet, peluches, bijoux et fournitures créatives – chaque pièce façonnée à la main, avec cœur et patience.</p>
        <div class="btn-row">
          <a class="btn btn-primary" href="/fr/shop/">Découvrir la boutique</a>
          <a class="btn btn-outline" href="/fr/ueber-die-kreative/">À propos de la créatrice</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section-tight">
    <div class="container">
      <h2 class="text-center">Découvrir les catégories</h2>
      <div class="grid grid-3" style="margin-top:1.5rem;">
        {categories.map((c) => (
          <a class="card category-card" href={`/fr/shop/${c.slug}/`}>
            <span class="cat-icon" aria-hidden="true">{c.icon}</span>
            <h3>{c.name[lang]}</h3>
            <p class="small">{c.description[lang]}</p>
          </a>
        ))}
      </div>
    </div>
  </section>

  {neuheiten.length > 0 && (
    <section class="section-tight">
      <div class="container">
        <div class="section-head">
          <h2>Nouveautés</h2>
          <a class="small" href="/fr/shop/">Tout voir →</a>
        </div>
        <div class="grid grid-4">{neuheiten.map((p) => <ProductCard product={p} lang={lang} />)}</div>
      </div>
    </section>
  )}

  {bestseller.length > 0 && (
    <section class="section-tight">
      <div class="container">
        <div class="section-head">
          <h2>Best-sellers</h2>
          <a class="small" href="/fr/shop/">Tout voir →</a>
        </div>
        <div class="grid grid-4">{bestseller.map((p) => <ProductCard product={p} lang={lang} />)}</div>
      </div>
    </section>
  )}

  {sale.length > 0 && (
    <section class="section-tight">
      <div class="container">
        <div class="section-head">
          <h2>Soldes %</h2>
          <a class="small" href="/fr/sale/">Toutes les offres →</a>
        </div>
        <div class="grid grid-4">{sale.map((p) => <ProductCard product={p} lang={lang} />)}</div>
      </div>
    </section>
  )}

  <section class="section-tight" id="kundenstimmen-section" style={topBewertungen.length > 0 ? undefined : "display:none;"}>
    <div class="container">
      <span class="eyebrow">🩵 {t.reviews.heading}</span>
      <h2>{t.reviews.heading}</h2>
      <p class="lead">{t.reviews.lead}</p>
      <div class="review-summary-row" id="kundenstimmen-summary">
        {bewertungSchnittGesamt !== null && (
          <HeartRating bewertung={bewertungSchnittGesamt} size={24} showValue={true} anzahlLabel={t.reviews.basedOn(alleBewertungen().length)} />
        )}
      </div>
      <div class="grid grid-3" id="kundenstimmen-cards">
        {topBewertungen.map((r) => (
          <div class="card review-card">
            <div class="review-card-head">
              <span class="review-name">{r.name}</span>
              <HeartRating bewertung={r.bewertung} size={14} />
            </div>
            {r.text && <p class="small">{r.text[lang]}</p>}
            <a class="small" href={`/fr/produkt/${r.produktSlug}/`}>{t.reviews.toProduct} {r.produktName[lang]}</a>
          </div>
        ))}
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container grid grid-2 creator-section">
      <div class="portrait-frame creator-photo">
        <img src="/img/vanvan-portrait.png" alt="Photo de VanVan" width="640" height="800" loading="lazy" />
        <span class="portrait-badge">🩵 Fait main</span>
      </div>
      <div>
        <span class="eyebrow">La créatrice derrière la boutique</span>
        <h2>Bonjour, je suis VanVan 🩵</h2>
        <blockquote class="pull-quote">« Chaque maille raconte sa propre histoire – car le véritable artisanat ne se crée pas seulement avec de la laine, mais surtout avec beaucoup de cœur. »</blockquote>
        <a class="btn btn-outline" href="/fr/ueber-die-kreative/">En savoir plus sur moi →</a>
      </div>
    </div>
  </section>
</Layout>

<script
  define:vars={{
    produkteBasis,
    localePrefix: "/fr",
    basedOnOne: t.reviews.basedOn(1),
    basedOnOther: t.reviews.basedOn(2),
    toProductText: t.reviews.toProduct,
  }}
>
  window.__reviewsHomeVars = { produkteBasis, localePrefix, basedOnOne, basedOnOther, toProductText };
</script>
<script>
  import { heartsHtml } from "../../scripts/hearts";
  import { lokaleBewertungenFuer } from "../../scripts/reviews";

  const { produkteBasis, localePrefix, basedOnOne, basedOnOther, toProductText } = (window as any).__reviewsHomeVars;

  function basedOnLabel(n: number): string {
    return n === 1 ? basedOnOne : basedOnOther.replace(/\d+/, String(n));
  }

  const alle: any[] = [];
  for (const p of produkteBasis) {
    for (const r of p.bewertungen) alle.push({ ...r, produktSlug: p.slug, produktName: p.name });
    for (const r of lokaleBewertungenFuer(p.slug)) alle.push({ ...r, produktSlug: p.slug, produktName: p.name });
  }
  alle.sort((a, b) => (b.datum || "").localeCompare(a.datum || ""));

  if (alle.length > 0) {
    const schnitt = alle.reduce((s, r) => s + r.bewertung, 0) / alle.length;
    const summary = document.getElementById("kundenstimmen-summary")!;
    summary.innerHTML = heartsHtml(schnitt, 24, { showValue: true, anzahlLabel: basedOnLabel(alle.length) });

    const cards = document.getElementById("kundenstimmen-cards")!;
    cards.innerHTML = alle
      .slice(0, 3)
      .map((r) => {
        const text = r.text ? `<p class="small">${String(r.text).replace(/</g, "&lt;")}</p>` : "";
        return `<div class="card review-card"><div class="review-card-head"><span class="review-name">${String(r.name).replace(/</g, "&lt;")}</span>${heartsHtml(r.bewertung, 14)}</div>${text}<a class="small" href="${localePrefix}/produkt/${r.produktSlug}/">${toProductText} ${r.produktName}</a></div>`;
      })
      .join("");

    document.getElementById("kundenstimmen-section")!.style.display = "";
  }
</script>
