@if (error()) { <div class="empty-state"><p>{{ error() }}</p></div> }
@else if (product()) {
  <article class="product-page">
    <img class="hero-image" [src]="image()" [alt]="name()" />
    @if (gallery().length > 1) { <div class="gallery-strip">@for (picture of gallery(); track picture) { <button type="button" [class.active]="picture === activeImage()" (click)="activeImage.set(picture)"><img [src]="image(picture)" [alt]="name()" /></button> }</div> }
    <section class="product-summary"><h1>{{ name() }}</h1><div class="price"><span>¥</span>{{ price() | number:'1.2-2' }}</div><p class="stock">库存：{{ stock() || '充足' }}</p>
      @if (specConfig(); as specs) {
        <div class="spec-groups">@for (group of specs.groups; track group.name; let groupIndex = $index) { <section><h2>{{ group.name }}</h2><div>@for (option of group.properties; track option.key) { <button type="button" [class.active]="specSelected(groupIndex, option.key)" (click)="selectSpec(groupIndex, option.key)">{{ option.name }}</button> }</div></section> }</div>
      }
      <div class="quantity"><span>购买数量</span><button type="button" aria-label="减少" title="减少" (click)="changeQuantity(-1)"><lucide-icon [img]="icons.Minus" [size]="17" /></button><input type="number" min="1" max="99" [(ngModel)]="quantity" aria-label="购买数量" /><button type="button" aria-label="增加" title="增加" (click)="changeQuantity(1)"><lucide-icon [img]="icons.Plus" [size]="17" /></button></div>
    </section>
    <section class="product-tools"><button type="button" (click)="toggleFavorite()"><lucide-icon [img]="icons.Heart" [size]="20" [class.filled]="favorite()" />{{ favorite() ? '已收藏' : '收藏' }}</button><button type="button" (click)="share()"><lucide-icon [img]="icons.Share2" [size]="20" />分享</button></section>
    <section class="product-content"><h2>商品详情</h2><div class="rich-content" [innerHTML]="content()"></div></section>
    <section class="comments"><h2>用户评价 <span>({{ comments().length }})</span></h2>@for (comment of comments(); track comment['ID'] ?? $index) { <article><strong>{{ comment['IsAnonymous'] ? '匿名用户' : comment['HoneyName'] || comment['UserName'] || '用户' }}</strong><div class="stars"><lucide-icon [img]="icons.Star" [size]="14" />{{ comment['Score'] || 5 }}</div><p>{{ comment['MsgContent'] || comment['Content'] || comment['Title'] }}</p></article> } @empty { <p class="muted">暂无评价</p> }</section>
    <footer class="purchase-bar"><button type="button" class="secondary-button" (click)="addToCart(false)"><lucide-icon [img]="icons.ShoppingCart" [size]="18" />加入购物车</button><button type="button" class="primary-button" (click)="addToCart(true)">立即购买</button></footer>
  </article>
}