{{include "header.html"}}
{{include "nav.html"}}

<main class="max-w-6xl mx-auto px-4 py-8">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <div class="lg:col-span-2">
      <div class="rounded-2xl border border-ink-200 bg-white p-8 shadow-soft">
        <div class="text-xs uppercase tracking-widest text-teal2-700/80">Shop Basic</div>
        <h1 class="mt-2 text-3xl md:text-4xl font-semibold tracking-tight">基础商城页面壳</h1>
        <div class="mt-3 text-sm text-ink-600">无购物车/订单/支付。商品详情页的“购买”统一引导到咨询。</div>
        <div class="mt-6 flex flex-wrap gap-3">
          <a href="/products" class="px-5 py-2.5 rounded-full bg-teal2-600 text-white hover:bg-teal2-700">浏览商品</a>
          <a href="/service" class="px-5 py-2.5 rounded-full bg-white border border-ink-200 hover:border-teal2-500/30 hover:bg-teal2-50">咨询下单</a>
        </div>
      </div>

      {{$slides := HomeSlides}}
      {{if $slides}}
      <div class="mt-6 rounded-2xl border border-ink-200 bg-white overflow-hidden shadow-soft" id="shop-slides">
        <div class="relative">
          {{range $i, $s := $slides}}
            <a href="{{$s.URL}}" class="shopSlide block {{if ne $i 0}}hidden{{end}}">
              <div class="relative">
                <img class="w-full h-56 md:h-64 object-cover" src="{{$s.Img}}" alt="{{$s.Title}}" />
                <div class="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent"></div>
                <div class="absolute left-0 right-0 bottom-0 p-6">
                  <div class="text-white text-lg font-semibold">{{$s.Title}}</div>
                  {{if $s.SubTitle}}<div class="mt-1 text-white/90 text-sm">{{$s.SubTitle}}</div>{{end}}
                </div>
              </div>
            </a>
          {{end}}
          <button type="button" class="shopPrev absolute left-3 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-white/90 hover:bg-white shadow flex items-center justify-center text-ink-800">‹</button>
          <button type="button" class="shopNext absolute right-3 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-white/90 hover:bg-white shadow flex items-center justify-center text-ink-800">›</button>
        </div>
      </div>
      {{end}}

      <div class="mt-8 flex items-end justify-between">
        <div>
          <div class="text-xs uppercase tracking-widest text-teal2-700/80">Products</div>
          <div class="mt-1 text-xl font-semibold">精选商品</div>
        </div>
        <a class="text-sm text-ink-600 hover:text-teal2-700" href="/products">更多</a>
      </div>

      <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
        {{range ColumnContents "products" 4}}
          <a href="{{.URL}}" class="block rounded-2xl border border-ink-200 bg-white overflow-hidden shadow-soft hover:border-teal2-500/30">
            <div class="aspect-[16/10] bg-ink-100">
              <img class="w-full h-full object-cover" src="{{default .Img "https://picsum.photos/seed/shop-home-product/1200/800"}}" alt="{{.Title}}" />
            </div>
            <div class="p-6">
              <div class="text-lg font-semibold">{{.Title}}</div>
              <div class="mt-2 text-sm text-ink-600">{{.Description}}</div>
              <div class="mt-4 flex items-center justify-between text-xs text-ink-500">
                <span>{{ParseTime .CreatedAt "2006-01-02"}}</span>
                <span class="text-teal2-700">去咨询</span>
              </div>
            </div>
          </a>
        {{end}}
      </div>

      <script>
        (function(){
          var root = document.getElementById('shop-slides');
          if(!root) return;
          var slides = root.querySelectorAll('.shopSlide');
          if(!slides || slides.length <= 1) return;
          var i = 0;
          function show(n){
            slides[i].classList.add('hidden');
            i = (n + slides.length) % slides.length;
            slides[i].classList.remove('hidden');
          }
          var prev = root.querySelector('.shopPrev');
          var next = root.querySelector('.shopNext');
          if(prev) prev.addEventListener('click', function(){ show(i - 1); });
          if(next) next.addEventListener('click', function(){ show(i + 1); });
          setInterval(function(){ show(i + 1); }, 5000);
        })();
      </script>

    </div>

    <div>
      {{include "sidebar.html"}}
    </div>
  </div>
</main>

{{include "footer.html"}}
{{include "js.html"}}