---
import Base from '../../layouts/Base.astro';
import { getProducts, getProductBySlug, formatPrice } from '../../lib/products';

const { slug } = Astro.params;
const product = await getProductBySlug(slug);
if (!product) return Astro.redirect('/shop');
const all = await getProducts();
const related = all.filter((r) => r.slug !== product.slug).slice(0, 3);

const gallery = product.freigestellt
  ? [product.freigestellt, ...product.images.filter((i) => i !== product.freigestellt)]
  : product.images;
const mainImg = gallery[0];

const singleSize = product.sizes.length === 1;
const preSize = singleSize ? product.sizes[0] : '';

const lowStock = product.stock != null && product.stock <= 25;
---

<Base
  title={`${product.name} — PMPNZNG`}
  description={product.desc}
  page="product"
  ogImage={product.cardImage}
>
  <div class="pdp-layout">
    <div class="pdp-gallery" aria-label="Produktbilder">
      <div class="gallery-main-wrap">
        <img
          id="gallery-main"
          src={mainImg}
          alt={product.name}
          width="600"
          height="750"
          loading="eager"
        />
      </div>
      {
        gallery.length > 1 && (
          <div class="gallery-thumbs">
            {gallery.map((img, i) => (
              <button class:list={['gallery-thumb', { active: i === 0 }]} data-src={img} aria-label={`Bild ${i + 1}`}>
                <img src={img} alt="" width="120" height="120" loading="lazy" />
              </button>
            ))}
          </div>
        )
      }
    </div>

    <div class="pdp-info">
      <nav class="pdp-breadcrumb" aria-label="Brotkrümelpfad">
        <a href="/">Start</a><span aria-hidden="true">›</span>
        <a href="/shop">Shop</a><span aria-hidden="true">›</span>
        <span aria-current="page">{product.shortName}</span>
      </nav>

      {product.badge && <span class="pdp-badge">{product.badge}</span>}

      <h1 class="pdp-name">{product.name}</h1>

      <div class="pdp-price-row">
        <span class="pdp-price">{formatPrice(product.priceCents)}</span>
        <span class="pdp-price-note">inkl. MwSt. · zzgl. Versand</span>
      </div>

      <div class="pdp-divider"></div>
      <p class="pdp-desc">{product.desc}</p>

      {
        product.stock != null && (
          <div class="stock-indicator">
            <span class="stock-dot" aria-hidden="true"></span>
            <span>
              {lowStock ? <>Nur noch <strong>{product.stock} Stück</strong> verfügbar</> : <>Auf Lager</>}
            </span>
          </div>
        )
      }

      <div class="pdp-divider"></div>

      <form class="atc-form" id="product-form" data-product-id={product.slug} novalidate>
        <input type="hidden" id="selected-size" name="size" value={preSize} />
        <div>
          <div class="size-label-row">
            <span class="size-label">{singleSize ? 'Größe' : 'Größe wählen'}</span>
            <a href="/faq#groessen" class="size-guide-link">Größentabelle</a>
          </div>
          <div class="size-btns" role="group" aria-label="Verfügbare Größen">
            {
              product.sizes.map((size, i) => (
                <button type="button" class:list={['size-btn', { active: singleSize && i === 0 }]} data-size={size}>
                  {size}
                </button>
              ))
            }
          </div>
        </div>

        {
          lowStock && (
            <div class="scarcity-note" aria-label="Hinweis zur Verfügbarkeit">
              Achtung: Nur noch <strong>{product.stock} Stück</strong> auf Lager. Bestell jetzt, bevor er weg ist.
            </div>
          )
        }

        <button
          type="submit"
          class="btn btn-primary btn-full btn-lg"
          id="add-to-cart-btn"
          disabled={!singleSize}
        >
          <span aria-hidden="true">+</span> {singleSize ? 'In den Warenkorb' : 'Größe wählen'}
        </button>

        <div class="atc-secondary">
          {product.features.map((f) => <span class="atc-trust">{f}</span>)}
          <span class="atc-trust">30 Tage Rückgabe</span>
        </div>
      </form>

      <div class="pdp-divider"></div>
      <div class="pdp-specs">
        <h3>Produktdetails</h3>
        <ul class="spec-list">
          <li class="spec-item">{product.material}</li>
          {product.features.map((f) => <li class="spec-item">{f}</li>)}
        </ul>
      </div>
    </div>
  </div>

  <section class="related-section">
    <div class="related-inner">
      <h2 class="related-heading">Passt auch dazu</h2>
      <div class="related-grid">
        {
          related.map((r) => (
            <a class="rel-card" href={`/produkt/${r.slug}`}>
              <div class="rel-card-img">
                <img src={r.freigestellt ?? r.cardImage} alt={r.name} width="400" height="500" loading="lazy" />
              </div>
              <div class="rel-card-info">
                <div class="rel-card-name" set:html={r.name} />
                <div class="rel-card-price">{formatPrice(r.priceCents)}</div>
              </div>
            </a>
          ))
        }
      </div>
    </div>
  </section>
</Base>

<style is:global>
  .pdp-layout { max-width: var(--max-w); margin: 0 auto; padding: var(--sp-lg) var(--gutter) var(--sp-2xl); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
  .pdp-gallery { position: sticky; top: calc(var(--header-h) + 24px); }
  .gallery-main-wrap { background: var(--c-card); aspect-ratio: 4/5; overflow: hidden; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; }
  #gallery-main { width: 100%; height: 100%; object-fit: contain; padding: 24px; transition: opacity 0.2s; }
  .gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .gallery-thumb { aspect-ratio: 1; background: var(--c-card); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color 0.15s; }
  .gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
  .gallery-thumb.active { border-color: var(--c-red); }
  .pdp-badge { display: inline-block; background: var(--c-red); color: #fff; font-size: 8px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; padding: 4px 12px; align-self: flex-start; }
  .pdp-info { display: flex; flex-direction: column; gap: var(--sp-sm); }
  .pdp-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.14em; color: var(--c-text-muted); text-transform: uppercase; font-weight: 600; }
  .pdp-breadcrumb a { color: var(--c-text-muted); }
  .pdp-breadcrumb a:hover { color: var(--c-text); }
  .pdp-breadcrumb span { color: var(--c-text-dim); }
  .pdp-name { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 40px); font-weight: 900; line-height: 1.05; text-transform: uppercase; }
  .pdp-price-row { display: flex; align-items: baseline; gap: 16px; }
  .pdp-price { font-family: var(--font-display); font-size: 32px; font-weight: 900; }
  .pdp-price-note { font-size: 11px; color: var(--c-text-muted); }
  .pdp-divider { height: 1px; background: var(--c-border); margin: 4px 0; }
  .pdp-desc { font-size: 14px; color: var(--c-text-muted); line-height: 1.75; }
  .stock-indicator { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; }
  .stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; }
  .stock-indicator span { color: var(--c-text-muted); }
  .size-label-row { display: flex; align-items: center; justify-content: space-between; }
  .size-label { font-size: 10px; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase; color: var(--c-text-muted); }
  .size-guide-link { font-size: 10px; color: var(--c-red-bright); text-decoration: underline; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
  .size-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .size-btn { min-width: 52px; padding: 10px 14px; border: 1px solid var(--c-border-mid); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); background: var(--c-surface-1); transition: all var(--dur-fast) var(--ease-out); text-align: center; }
  .size-btn:hover { border-color: var(--c-text-muted); color: var(--c-text); }
  .size-btn.active { background: var(--c-red); border-color: var(--c-red); color: #fff; }
  .atc-form { display: flex; flex-direction: column; gap: var(--sp-sm); }
  #add-to-cart-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 20px; font-size: 12px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; font-family: var(--font-display); background: var(--c-red); color: #fff; border: none; cursor: pointer; transition: background var(--dur-fast); }
  #add-to-cart-btn:hover { background: var(--c-red-bright); }
  #add-to-cart-btn:disabled { background: var(--c-surface-3); color: var(--c-text-dim); cursor: not-allowed; }
  .atc-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .atc-trust { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--c-text-muted); }
  .atc-trust::before { content: '✓'; color: var(--c-red-bright); font-weight: 900; }
  .scarcity-note { background: var(--c-surface-1); border-left: 3px solid var(--c-red); padding: 12px 16px; font-size: 12px; color: var(--c-text-muted); }
  .scarcity-note strong { color: var(--c-red-bright); }
  .pdp-specs { border-top: 1px solid var(--c-border); padding-top: var(--sp-sm); }
  .pdp-specs h3 { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--c-text-muted); margin-bottom: 12px; }
  .spec-list { display: flex; flex-direction: column; gap: 8px; }
  .spec-item { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--c-text-muted); }
  .spec-item::before { content: '—'; color: var(--c-red-bright); flex-shrink: 0; }
  .related-section { border-top: 1px solid var(--c-border); padding: var(--sp-xl) var(--gutter); }
  .related-inner { max-width: var(--max-w); margin: 0 auto; }
  .related-heading { font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 28px); font-weight: 900; text-transform: uppercase; margin-bottom: var(--sp-md); }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .rel-card { background: var(--c-card); color: var(--c-card-text); text-decoration: none; display: block; }
  .rel-card-img { aspect-ratio: 4/5; overflow: hidden; background: var(--c-card); }
  .rel-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px 16px 0; transition: transform 0.4s var(--ease-out); }
  .rel-card:hover .rel-card-img img { transform: scale(1.04); }
  .rel-card-info { padding: 14px 16px; }
  .rel-card-name { font-family: var(--font-display); font-size: 13px; font-weight: 900; text-transform: uppercase; margin-bottom: 4px; }
  .rel-card-price { font-size: 13px; font-weight: 700; color: #333; }
  @media (max-width: 1024px) { .pdp-layout { grid-template-columns: 1fr; } .pdp-gallery { position: static; } }
  @media (max-width: 600px) { .related-grid { grid-template-columns: repeat(2, 1fr); } .atc-secondary { grid-template-columns: 1fr; } }
</style>
