<!doctype html>
<html lang="zh-cn">

<head>
  {{include "header.html"}}
</head>

<body class="bg-creative-50 text-creative-900">
  {{include "nav.html"}}

  <main>
    {{$slides := HomeSlides}}
    {{if $slides}}
    <section class="relative overflow-hidden bg-creative-900" id="home-slides">
      <div class="relative w-full overflow-hidden">
        {{range $index, $s := $slides}}
        <a href="{{$s.URL}}" class="block home-slide {{if ne $index 0}}hidden{{end}}">
          <div class="relative">
            {{if $s.Img}}
            <img src="{{$s.Img}}" alt="{{$s.Title}}" class="w-full h-[400px] sm:h-[500px] object-cover" />
            {{else}}
            <div class="w-full h-[400px] sm:h-[500px] bg-gradient-to-r from-creative-700 to-navy-700"></div>
            {{end}}
            <div class="absolute inset-0 bg-gradient-to-r from-creative-900/80 via-creative-900/40 to-transparent"></div>
            <div class="absolute left-0 top-1/2 -translate-y-1/2 p-8 sm:p-16 max-w-2xl">
              <div class="text-white text-2xl sm:text-4xl font-bold leading-tight">{{$s.Title}}</div>
              {{if $s.SubTitle}}
              <div class="text-white/80 text-base sm:text-lg mt-4">{{$s.SubTitle}}</div>
              {{end}}
              <div class="mt-6 inline-flex items-center gap-2 px-6 py-3 rounded-full bg-white/10 backdrop-blur text-white text-sm hover:bg-white/20 transition-colors">
                <span>了解更多</span>
                <i class="fa-solid fa-arrow-right"></i>
              </div>
            </div>
          </div>
        </a>
        {{end}}
      </div>

      <button type="button" class="home-slides-prev absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/10 backdrop-blur hover:bg-white/20 shadow flex items-center justify-center text-white"><span aria-hidden="true"><i class="fa-solid fa-chevron-left"></i></span></button>
      <button type="button" class="home-slides-next absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/10 backdrop-blur hover:bg-white/20 shadow flex items-center justify-center text-white"><span aria-hidden="true"><i class="fa-solid fa-chevron-right"></i></span></button>

      <div class="absolute left-0 right-0 bottom-6 flex justify-center gap-2 px-4">
        {{range $index, $_ := $slides}}
        <button type="button" class="home-slide-dot w-3 h-3 rounded-full {{if eq $index 0}}bg-white{{else}}bg-white/40{{end}}" data-index="{{$index}}"></button>
        {{end}}
      </div>

      <script>
        (function () {
          var root = document.getElementById('home-slides');
          if (!root) return;
          var slides = root.querySelectorAll('.home-slide');
          var dots = root.querySelectorAll('.home-slide-dot');
          var prev = root.querySelector('.home-slides-prev');
          var next = root.querySelector('.home-slides-next');
          if (!slides || slides.length === 0) return;
          var idx = 0;
          var show = function (i) {
            if (slides.length === 0) return;
            idx = (i + slides.length) % slides.length;
            for (var s = 0; s < slides.length; s++) {
              if (s === idx) slides[s].classList.remove('hidden');
              else slides[s].classList.add('hidden');
            }
            for (var d = 0; d < dots.length; d++) {
              if (d === idx) {
                dots[d].classList.remove('bg-white/40');
                dots[d].classList.add('bg-white');
              } else {
                dots[d].classList.remove('bg-white');
                dots[d].classList.add('bg-white/40');
              }
            }
          };
          if (prev) prev.addEventListener('click', function () { show(idx - 1); });
          if (next) next.addEventListener('click', function () { show(idx + 1); });
          for (var d = 0; d < dots.length; d++) {
            (function (btn) {
              btn.addEventListener('click', function () {
                var v = parseInt(btn.getAttribute('data-index') || '0', 10);
                show(v);
              });
            })(dots[d]);
          }
          var timer = null;
          var start = function () {
            if (slides.length <= 1) return;
            if (timer) clearInterval(timer);
            timer = setInterval(function () { show(idx + 1); }, 5000);
          };
          root.addEventListener('mouseenter', function () { if (timer) clearInterval(timer); });
          root.addEventListener('mouseleave', function () { start(); });
          start();
        })();
      </script>
    </section>
    {{end}}

    <section class="container mx-auto px-4 py-16">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <div>
          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-creative-100 text-creative-700 text-sm mb-6">
            <i class="fa-solid fa-palette"></i>
            <span>关于我们</span>
          </div>
          <h1 class="text-3xl sm:text-4xl font-bold text-creative-900 leading-tight">{{if .Site}}{{default .Site.Subtitle .Site.Title}}{{end}}</h1>
          <p class="mt-4 text-creative-600 leading-relaxed">{{if .Site}}{{.Site.Description}}{{end}}</p>
          <div class="mt-8 flex flex-wrap gap-4">
            <a href="/portfolio" class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-gradient-to-r from-creative-600 to-navy-600 text-white hover:shadow-creative transition-shadow">
              <i class="fa-solid fa-eye"></i>
              <span>查看作品</span>
            </a>
            <a href="/contact" class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-white border border-creative-200 text-creative-900 hover:bg-creative-50 transition-colors">
              <i class="fa-solid fa-paper-plane"></i>
              <span>咨询合作</span>
            </a>
          </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div class="bg-white rounded-2xl border border-creative-100 p-6 text-center shadow-card">
            <div class="text-3xl font-bold text-creative-600">{{default (index .ThemesExt "hero_stats_projects") "500+"}}</div>
            <div class="mt-2 text-sm text-creative-500">完成项目</div>
          </div>
          <div class="bg-white rounded-2xl border border-creative-100 p-6 text-center shadow-card">
            <div class="text-3xl font-bold text-creative-600">{{default (index .ThemesExt "hero_stats_clients") "200+"}}</div>
            <div class="mt-2 text-sm text-creative-500">合作客户</div>
          </div>
          <div class="bg-white rounded-2xl border border-creative-100 p-6 text-center shadow-card">
            <div class="text-3xl font-bold text-creative-600">{{default (index .ThemesExt "hero_stats_years") "10"}}年</div>
            <div class="mt-2 text-sm text-creative-500">行业经验</div>
          </div>
          <div class="bg-white rounded-2xl border border-creative-100 p-6 text-center shadow-card">
            <div class="text-3xl font-bold text-creative-600">{{default (index .ThemesExt "hero_stats_awards") "50+"}}</div>
            <div class="mt-2 text-sm text-creative-500">行业荣誉</div>
          </div>
        </div>
      </div>
    </section>

    {{$services := ColumnContents "service" 6}}
    {{if $services}}
    <section class="bg-white py-16">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <div class="text-sm text-creative-500 mb-2">我们的服务</div>
          <h2 class="text-2xl sm:text-3xl font-bold text-creative-900">专业创意服务</h2>
          <p class="mt-3 text-creative-600 max-w-xl mx-auto">从品牌策划到视觉设计，从数字营销到活动执行，一站式创意解决方案</p>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {{range $services}}
          <a href="{{.URL}}" class="group block p-6 rounded-2xl border border-creative-100 hover:border-creative-300 hover:shadow-creative transition-all">
            {{if .Img}}
            <div class="w-full h-40 rounded-xl overflow-hidden bg-creative-50 mb-4">
              <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
            </div>
            {{end}}
            <h3 class="text-lg font-semibold text-creative-900 group-hover:text-creative-600 transition-colors">{{.Title}}</h3>
            <p class="mt-2 text-sm text-creative-600 line-clamp-2">{{.Description}}</p>
            <div class="mt-4 text-sm text-creative-500 inline-flex items-center gap-1 group-hover:text-creative-600">
              <span>了解详情</span>
              <i class="fa-solid fa-arrow-right text-xs"></i>
            </div>
          </a>
          {{end}}
        </div>
      </div>
    </section>
    {{end}}

    {{$portfolios := ColumnContents "portfolio" 6}}
    {{if $portfolios}}
    <section class="py-16">
      <div class="container mx-auto px-4">
        <div class="flex items-end justify-between gap-4 mb-10">
          <div>
            <div class="text-sm text-creative-500 mb-2">精选作品</div>
            <h2 class="text-2xl sm:text-3xl font-bold text-creative-900">创意案例展示</h2>
          </div>
          <a href="/portfolio" class="text-sm text-creative-600 hover:text-creative-900 inline-flex items-center gap-1">
            <span>查看全部</span>
            <i class="fa-solid fa-arrow-right"></i>
          </a>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {{range $portfolios}}
          <a href="{{.URL}}" class="group block bg-white rounded-2xl border border-creative-100 overflow-hidden shadow-card hover:shadow-creative transition-all">
            <div class="relative overflow-hidden">
              {{if .Img}}
              <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-500" />
              {{else}}
              <div class="w-full h-56 bg-gradient-to-br from-creative-100 to-navy-100"></div>
              {{end}}
              <div class="absolute inset-0 bg-gradient-to-t from-creative-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
              <div class="absolute bottom-4 left-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
                <span class="inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-white/20 backdrop-blur text-white text-sm">查看详情 <i class="fa-solid fa-arrow-right text-xs"></i></span>
              </div>
            </div>
            <div class="p-5">
              <h3 class="font-semibold text-creative-900 group-hover:text-creative-600 transition-colors">{{.Title}}</h3>
              <p class="mt-2 text-sm text-creative-600 line-clamp-2">{{.Description}}</p>
              {{if .Ext}}
              <div class="mt-3 flex flex-wrap gap-2">
                {{$category := index .Ext "category"}}
                {{if $category}}<span class="px-2.5 py-1 rounded-full text-xs bg-creative-50 text-creative-700">{{$category}}</span>{{end}}
                {{$industry := index .Ext "industry"}}
                {{if $industry}}<span class="px-2.5 py-1 rounded-full text-xs bg-navy-50 text-navy-700">{{$industry}}</span>{{end}}
              </div>
              {{end}}
            </div>
          </a>
          {{end}}
        </div>
      </div>
    </section>
    {{end}}

    <section class="bg-gradient-to-r from-creative-600 to-navy-600 py-16">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center text-white">
          <div>
            <div class="w-16 h-16 rounded-2xl bg-white/10 flex items-center justify-center mx-auto mb-4">
              <i class="fa-solid fa-lightbulb text-2xl"></i>
            </div>
            <div class="font-semibold">创意策划</div>
            <div class="mt-2 text-sm text-white/70">深入洞察，精准定位</div>
          </div>
          <div>
            <div class="w-16 h-16 rounded-2xl bg-white/10 flex items-center justify-center mx-auto mb-4">
              <i class="fa-solid fa-pen-ruler text-2xl"></i>
            </div>
            <div class="font-semibold">视觉设计</div>
            <div class="mt-2 text-sm text-white/70">美学驱动，品牌赋能</div>
          </div>
          <div>
            <div class="w-16 h-16 rounded-2xl bg-white/10 flex items-center justify-center mx-auto mb-4">
              <i class="fa-solid fa-bullhorn text-2xl"></i>
            </div>
            <div class="font-semibold">营销推广</div>
            <div class="mt-2 text-sm text-white/70">数据驱动，精准触达</div>
          </div>
          <div>
            <div class="w-16 h-16 rounded-2xl bg-white/10 flex items-center justify-center mx-auto mb-4">
              <i class="fa-solid fa-video text-2xl"></i>
            </div>
            <div class="font-semibold">影视制作</div>
            <div class="mt-2 text-sm text-white/70">影像叙事，品牌传播</div>
          </div>
        </div>
      </div>
    </section>

    <div class="container mx-auto px-4 py-16">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="md:col-span-2">
          <div class="flex items-end justify-between gap-4 mb-8">
            <div>
              <div class="text-sm text-creative-500 mb-2">行业资讯</div>
              <h2 class="text-2xl font-bold text-creative-900">最新动态</h2>
            </div>
            <div class="text-sm text-creative-500">共 {{.Pager.TotalItems}} 条</div>
          </div>

          <div class="space-y-6">
            {{range .List}}
            <article class="bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden hover:shadow-creative transition-shadow">
              <div class="flex flex-col sm:flex-row">
                {{if .Img}}
                <a href="{{.URL}}" class="sm:w-56 block overflow-hidden bg-creative-50">
                  <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-48 sm:h-full object-cover" />
                </a>
                {{end}}
                <div class="flex-1 p-6">
                  <h3 class="text-lg font-semibold leading-snug"><a href="{{.URL}}" class="hover:text-creative-600 transition-colors">{{.Title}}</a></h3>
                  <p class="mt-2 text-sm text-creative-600 leading-relaxed line-clamp-2">{{.Description}}</p>
                  <div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-creative-500">
                    <span class="inline-flex items-center gap-1"><i class="fa-regular fa-calendar"></i>{{ParseTime .CreatedAt "2006-01-02"}}</span>
                    {{if .ColumnURL}}
                    <a href="{{.ColumnURL}}" class="inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-creative-50 text-creative-700 hover:bg-creative-100"><i class="fa-regular fa-folder"></i>{{.ColumnName}}</a>
                    {{end}}
                  </div>
                </div>
              </div>
            </article>
            {{end}}
          </div>

          {{if .Pager.Enabled}}
          <nav aria-label="Page navigation" class="mt-10">
            <ul class="flex flex-wrap justify-center gap-2">
              {{range .Pager.Items}}
              {{if eq .Kind "gap"}}
              <li class="px-4 py-2 text-creative-400">{{.Label}}</li>
              {{else}}
              <li>
                <a href="{{.URL}}" class="px-4 py-2 rounded-lg border border-creative-100 bg-white text-sm text-creative-700 hover:bg-creative-50 {{if .Active}}bg-creative-600 text-white border-creative-600 hover:bg-creative-600{{end}}">{{.Label}}</a>
              </li>
              {{end}}
              {{end}}
            </ul>
          </nav>
          {{end}}
        </div>

        <div class="md:col-span-1">
          {{include "sidebar.html"}}
        </div>
      </div>
    </div>

    <section class="bg-creative-900 py-16">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-2xl sm:text-3xl font-bold text-white mb-4">准备好开始您的项目了吗？</h2>
        <p class="text-creative-300 mb-8 max-w-xl mx-auto">无论是品牌升级还是新项目启动，我们都能为您提供专业的创意解决方案</p>
        <a href="/contact" class="inline-flex items-center gap-2 px-8 py-4 rounded-full bg-white text-creative-900 font-semibold hover:bg-creative-50 transition-colors">
          <i class="fa-solid fa-paper-plane"></i>
          <span>立即咨询</span>
        </a>
      </div>
    </section>
  </main>

  {{include "footer.html"}}
  {{include "js.html"}}
</body>

</html>
