---
import Layout from "../../layouts/Layout.astro";
import ProductCard from "../../components/ProductCard.astro";
import { categories } from "../../data/categories";
import { products } from "../../data/products";
import type { Locale } from "../../i18n/config";

const lang: Locale = "ch";

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);
---
<Layout title="Startsyte" 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="Ghäkleti Häsli-Plushie mit blauer Latzhose, im Gras" loading="eager" width="900" height="1200" /></div>
        <div class="hero-photo hero-photo-2"><img src="/img/hero-plushie-turtle.webp" alt="Ghäkleti Schildchröte-Plushie i Hellblau und Gäl" loading="eager" width="900" height="1200" /></div>
        <div class="hero-photo hero-photo-3"><img src="/img/hero-plushie-octopus.webp" alt="Ghäklets Oktopus-Plushie i Rosa" loading="eager" width="900" height="1200" /></div>
        <div class="hero-photo hero-photo-4"><img src="/img/hero-plushie-penguin.webp" alt="Ghäklets Pinguin-Plushie i Hellblau und Wiss" loading="eager" width="900" height="1200" /></div>
      </div>
      <div class="hero-inner">
        <span class="eyebrow">🩵 Van's DIY & Bastelbedarf</span>
        <h1>Vo Hang gmacht mit Härz – <br />Sächeli zum Verschänke<br />und Sälber Bhalte.</h1>
        <p class="lead">Häkelwerk, Plushies, Schmuck und Bastelzüg – jedes Sächeli vo Hang gmacht, mit Härz und Geduld.</p>
        <div class="btn-row">
          <a class="btn btn-primary" href="/ch/shop/">Jetzt use luege</a>
          <a class="btn btn-outline" href="/ch/ueber-die-kreative/">Über die Kreative</a>
        </div>
      </div>
    </div>
  </section>

  <section class="section-tight">
    <div class="container">
      <h2 class="text-center">Kategorie entdecke</h2>
      <div class="grid grid-3" style="margin-top:1.5rem;">
        {categories.map((c) => (
          <a class="card category-card" href={`/ch/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>Neui Sache</h2>
          <a class="small" href="/ch/shop/">Alles aluege →</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>Bestseller</h2>
          <a class="small" href="/ch/shop/">Alles aluege →</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>Aktion %</h2>
          <a class="small" href="/ch/sale/">Alle Angebote →</a>
        </div>
        <div class="grid grid-4">{sale.map((p) => <ProductCard product={p} lang={lang} />)}</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="Porträtfoto von VanVan" width="640" height="640" loading="lazy" />
        <span class="portrait-badge">🩵 Handgemacht</span>
      </div>
      <div>
        <span class="eyebrow">Die Kreative hinter em Shop</span>
        <h2>Hoi zäme, ich bin VanVan 🩵</h2>
        <blockquote class="pull-quote">«Jedi Masche verzellt ihri eigeti Gschicht – wil echti Handarbeit entsteit nid nur mit Wolle, sondern vor allem mit ganz viel Härz.»</blockquote>
        <a class="btn btn-outline" href="/ch/ueber-die-kreative/">Mehr über mich →</a>
      </div>
    </div>
  </section>
</Layout>
