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

{{$slides := HomeSlides}}
{{$news := ColumnContents "news" 6}}
{{$notice := ColumnContents "notice" 6}}
{{$admission := ColumnContents "admission" 3}}
{{$life := ColumnContents "campus-life" 4}}
{{$teachers := ColumnContents "teachers" 4}}
{{$newsColumn := Column "news"}}
{{$noticeColumn := Column "notice"}}
{{$aboutChildren := ChildrenColumns "about"}}
{{$newsChildren := ChildrenColumns "news"}}
{{$noticeChildren := ChildrenColumns "notice"}}
{{$admissionChildren := ChildrenColumns "admission"}}
{{$schoolChildren := ChildrenColumns "about"}}
{{$platforms := index .ThemesExt "platform_links"}}
{{$aboutColumn := Column "about"}}
{{$admissionColumn := Column "admission"}}
{{$heroImg := ""}}
{{if gt (len $slides) 0}}
{{$heroImg = (index $slides 0).Img}}
{{end}}
{{if not $heroImg}}
{{$heroImg = "https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?auto=format&fit=crop&w=1600&q=80"}}
{{end}}

<main>
  <section class="relative h-[62vh] min-h-[360px] max-h-[540px] overflow-hidden bg-slate-900">
    {{if $slides}}
    <div id="hero-carousel" class="absolute inset-0">
      {{range $i, $slide := $slides}}
      <div
        class="hero-slide absolute inset-0 transition-opacity duration-700 {{if eq $i 0}}opacity-100{{else}}pointer-events-none opacity-0{{end}}"
        data-slide="{{$i}}">
        <img src="{{.Img}}" alt="{{.Title}}" class="h-full w-full object-cover">
        <div class="absolute inset-0 bg-slate-950/20"></div>
      </div>
      {{end}}
      {{if gt (len $slides) 1}}
      <button id="hero-prev"
        class="absolute left-4 top-1/2 z-20 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white backdrop-blur hover:bg-white/20 lg:left-8"
        aria-label="上一张">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <button id="hero-next"
        class="absolute right-4 top-1/2 z-20 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white backdrop-blur hover:bg-white/20 lg:right-8"
        aria-label="下一张">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
      <div class="absolute bottom-8 left-1/2 z-20 flex -translate-x-1/2 gap-2">
        {{range $i, $slide := $slides}}
        <button
          class="hero-dot h-3 w-3 rounded-full border border-white/60 {{if eq $i 0}}bg-white{{else}}bg-white/30{{end}}"
          data-slide="{{$i}}" aria-label="切换轮播"></button>
        {{end}}
      </div>
      {{end}}
    </div>
    {{else}}
    <div class="absolute inset-0 bg-gradient-to-br from-slate-900 via-primary to-secondary"></div>
    <div class="absolute inset-0 flex items-center justify-center px-4 text-center text-white">
      <div>
        <h1 class="text-4xl font-semibold sm:text-6xl">微微中学</h1>
        <p class="mx-auto mt-5 max-w-2xl text-base leading-8 text-slate-100">以学生成长为中心，构建有温度、有秩序、有品质的校园学习共同体。</p>
      </div>
    </div>
    {{end}}
    <div class="absolute inset-0 -z-10 opacity-0"></div>
  </section>


  <section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
    <div class="grid gap-6 md:grid-cols-[1.05fr_0.95fr]">
      <div class="rounded-3xl bg-white p-8 shadow-sm ring-1 ring-slate-200">
        <p class="text-sm font-medium text-primary">学校简介</p>
        <h2 class="mt-2 text-3xl font-semibold text-slate-900">学校概况介绍</h2>
        <div class="mt-6 space-y-4 text-sm leading-8 text-slate-600">
          <p>微微中学坚持立德树人，围绕课堂教学、习惯养成、综合实践和身心健康协同推进教育工作，努力为学生提供稳定、温暖、有效的成长环境。</p>
          <p>学校拥有较完整的课程体系与师资配置，形成了务实、规范、开放的办学氛围。</p>
          <p>学校教学区、运动区、图书空间和实践空间布局完善，能够满足日常教学、阅读活动、体育锻炼和多样化课程开展的需要。</p>
        </div>
      </div>
      <div class="overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-slate-200">
        <img src="https://images.unsplash.com/photo-1497633762265-9d179a990aa6?auto=format&fit=crop&w=1400&q=80"
          alt="学校简介" class="h-full min-h-[320px] w-full object-cover">
      </div>
    </div>
  </section>


  <section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
    <div class="mb-5">
      <p class="text-sm font-medium text-primary">校园生活</p>
      <h2 class="mt-2 text-3xl font-semibold">丰富的校园日常</h2>
    </div>
    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
      {{range $life}}
      <a href="{{.URL}}"
        class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-0.5 hover:shadow-md">
        <img src="{{DefaultCover .Img}}" alt="{{.Title}}" class="h-44 w-full object-cover">
        <div class="p-5">
          <h3 class="text-lg font-semibold">{{.Title}}</h3>
          <p class="mt-2 text-sm leading-7 text-slate-600">{{StrLimit .Description 76 "…"}}</p>
        </div>
      </a>
      {{end}}
    </div>
  </section>

  <section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
    <div class="grid gap-6 lg:grid-cols-2">
      <div class="rounded-3xl bg-slate-900 p-8 text-white shadow-sm">
        <p class="text-sm font-medium text-slate-300">学校概览</p>
        <h2 class="mt-2 text-3xl font-semibold">办学信息一目了然</h2>
        <p class="mt-4 max-w-xl text-sm leading-8 text-slate-200">围绕学校概况、领导机构、校园文化和校历安排，帮助家长快速了解学校基础信息与教育节奏。</p>
        <div class="mt-6 grid gap-3 sm:grid-cols-2">
          {{if $aboutColumn}}<a href="{{$aboutColumn.URL}}" class="rounded-2xl bg-white/10 px-4 py-4 text-sm hover:bg-white/15">查看校园简介</a>{{end}}
          {{if $admissionColumn}}<a href="{{$admissionColumn.URL}}" class="rounded-2xl bg-white/10 px-4 py-4 text-sm hover:bg-white/15">查看招生信息</a>{{end}}
        </div>
      </div>
      <div class="rounded-3xl bg-white p-8 shadow-sm ring-1 ring-slate-200">
        <p class="text-sm font-medium text-primary">重点栏目</p>
        <h2 class="mt-2 text-3xl font-semibold">常用入口</h2>
        <div class="mt-6 grid gap-4 sm:grid-cols-2">
          {{if $aboutColumn}}<a href="{{$aboutColumn.URL}}" class="rounded-2xl border border-slate-200 p-4 transition hover:border-primary hover:bg-slate-50"><div class="font-semibold">校园简介</div><div class="mt-1 text-sm text-slate-600">学校历史、环境与育人特色</div></a>{{end}}
          {{if $admissionColumn}}<a href="{{$admissionColumn.URL}}" class="rounded-2xl border border-slate-200 p-4 transition hover:border-primary hover:bg-slate-50"><div class="font-semibold">招生信息</div><div class="mt-1 text-sm text-slate-600">招生政策、报名指南与咨询方式</div></a>{{end}}
          {{if $newsColumn}}<a href="{{$newsColumn.URL}}" class="rounded-2xl border border-slate-200 p-4 transition hover:border-primary hover:bg-slate-50"><div class="font-semibold">校园新闻</div><div class="mt-1 text-sm text-slate-600">学校动态、活动与成长故事</div></a>{{end}}
          {{if $noticeColumn}}<a href="{{$noticeColumn.URL}}" class="rounded-2xl border border-slate-200 p-4 transition hover:border-primary hover:bg-slate-50"><div class="font-semibold">通知公告</div><div class="mt-1 text-sm text-slate-600">校内通知、招生通知与校历提醒</div></a>{{end}}
        </div>
      </div>
    </div>
  </section>

  <section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
    <div class="rounded-3xl bg-white p-8 shadow-sm ring-1 ring-slate-200">
      <div class="mb-5 flex items-end justify-between gap-4">
        <div>
          <p class="text-sm font-medium text-primary">栏目导航</p>
          <h2 class="mt-2 text-3xl font-semibold">学校栏目入口</h2>
        </div>
      </div>
      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {{range $col := $schoolChildren}}
        <a href="{{$col.URL}}" class="rounded-2xl border border-slate-200 p-5 transition hover:border-primary hover:bg-slate-50">
          <h3 class="text-lg font-semibold text-slate-900">{{$col.Title}}</h3>
          {{if $col.Description}}<p class="mt-2 text-sm leading-7 text-slate-600">{{StrLimit $col.Description 70 "…"}}</p>{{end}}
        </a>
        {{end}}
        {{range $col := $noticeChildren}}
        <a href="{{$col.URL}}" class="rounded-2xl border border-slate-200 p-5 transition hover:border-primary hover:bg-slate-50">
          <h3 class="text-lg font-semibold text-slate-900">{{$col.Title}}</h3>
          {{if $col.Description}}<p class="mt-2 text-sm leading-7 text-slate-600">{{StrLimit $col.Description 70 "…"}}</p>{{end}}
        </a>
        {{end}}
      </div>
    </div>
  </section>

  <section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
    <div class="grid gap-6 lg:grid-cols-3">
      <div class="rounded-3xl bg-white p-8 shadow-sm ring-1 ring-slate-200 lg:col-span-2">
        <p class="text-sm font-medium text-primary">校园专题</p>
        <h2 class="mt-2 text-3xl font-semibold">学校发展与育人重点</h2>
        <div class="mt-6 grid gap-4 md:grid-cols-2">
          {{range $item := $news}}
          <a href="{{$item.URL}}" class="group flex gap-4 rounded-2xl border border-slate-200 p-4 transition hover:border-primary hover:shadow-sm">
            <img src="{{DefaultCover $item.Img}}" alt="{{$item.Title}}" class="h-20 w-20 shrink-0 rounded-xl object-cover">
            <div class="min-w-0">
              <h3 class="text-base font-semibold group-hover:text-primary">{{$item.Title}}</h3>
              <p class="mt-2 text-sm leading-6 text-slate-600">{{StrLimit $item.Description 68 "…"}}</p>
            </div>
          </a>
          {{end}}
        </div>
      </div>
      <div class="rounded-3xl bg-slate-50 p-8 ring-1 ring-slate-200">
        <p class="text-sm font-medium text-primary">重点提示</p>
        <h2 class="mt-2 text-2xl font-semibold">招生与校务信息</h2>
        <div class="mt-5 space-y-4 text-sm leading-7 text-slate-600">
          {{range $item := $notice}}
          <div class="rounded-2xl bg-white p-4 ring-1 ring-slate-200">
            <div class="font-medium text-slate-900">{{$item.Title}}</div>
            <div class="mt-1">{{StrLimit $item.Description 64 "…"}}</div>
          </div>
          {{end}}
        </div>
      </div>
    </div>
  </section>

  <section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
    <div class="mb-5">
      <p class="text-sm font-medium text-primary">师资队伍</p>
      <h2 class="mt-2 text-3xl font-semibold">教学力量展示</h2>
    </div>
    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
      {{range $teachers}}
      <a href="{{.URL}}"
        class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-0.5 hover:shadow-md">
        <img src="{{DefaultCover .Img}}" alt="{{.Title}}" class="h-52 w-full object-cover">
        <div class="p-5">
          <div class="text-xs text-slate-500">{{default (index .Ext "subject") .ColumnName}}</div>
          <h3 class="mt-2 text-lg font-semibold">{{.Title}}</h3>
          <p class="mt-2 text-sm leading-7 text-slate-600">{{default (index .Ext "intro") .Description}}</p>
        </div>
      </a>
      {{end}}
    </div>
  </section>

    <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
      <div class="rounded-3xl">
        <div class="grid gap-6 lg:grid-cols-2">
          <div class="rounded-2xl border border-slate-200 bg-white p-5">
          <div class="mb-4 flex items-center justify-between border-b border-slate-200 pb-3">
              <h2 class="text-lg font-semibold text-slate-900">校园快讯</h2>
              {{if $newsColumn}}<a href="{{$newsColumn.URL}}" class="text-sm text-slate-500 hover:text-primary">更多</a>{{end}}
            </div>
            {{if $news}}
            <div class="space-y-3">
              {{range $item := $news}}
              <a href="{{.URL}}"
                class="flex items-start justify-between gap-4 rounded-xl px-1 py-2 transition hover:bg-slate-50">
                <h3 class="min-w-0 flex-1 text-sm font-medium leading-7 text-slate-800 hover:text-primary">{{.Title}}</h3>
                <span class="shrink-0 text-xs text-slate-500">{{ParseTime .CreatedAt "2006-01-02"}}</span>
              </a>
              {{end}}
            </div>
            {{else}}
            <div class="flex min-h-[240px] items-center justify-center text-slate-500">暂无校园快讯</div>
            {{end}}
          </div>
    
          <div class="rounded-2xl border border-slate-200 bg-white p-5">
          <div class="mb-4 flex items-center justify-between border-b border-slate-200 pb-3">
              <h2 class="text-lg font-semibold text-slate-900">通知公告</h2>
              {{if $noticeColumn}}<a href="{{$noticeColumn.URL}}" class="text-sm text-slate-500 hover:text-primary">更多</a>{{end}}
            </div>
            {{if $notice}}
            <div class="space-y-3">
              {{range $item := $notice}}
              <a href="{{.URL}}"
                class="flex items-start justify-between gap-4 rounded-xl px-1 py-2 transition hover:bg-slate-50">
                <h3 class="min-w-0 flex-1 text-sm font-medium leading-7 text-slate-800 hover:text-primary">{{.Title}}</h3>
                <span class="shrink-0 text-xs text-slate-500">{{ParseTime .CreatedAt "2006-01-02"}}</span>
              </a>
              {{end}}
            </div>
            {{else}}
            <div class="flex min-h-[240px] items-center justify-center text-slate-500">暂无通知公告</div>
            {{end}}
          </div>
        </div>
      </div>
    </section>


  <section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
    <div class="rounded-3xl bg-white p-8 shadow-sm ring-1 ring-slate-200">
      <div class="mb-5">
        <p class="text-sm font-medium text-primary">校园平台</p>
        <h2 class="mt-2 text-3xl font-semibold">平台链接</h2>
      </div>
      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {{range $platforms}}
        <a href="{{index . "url"}}"
          class="rounded-2xl border border-slate-200 p-5 transition hover:border-primary hover:bg-slate-50">
          <h3 class="text-lg font-semibold">{{index . "name"}}</h3>
          {{if index . "desc"}}<p class="mt-2 text-sm leading-7 text-slate-600">{{index . "desc"}}</p>{{end}}
        </a>
        {{end}}
      </div>
    </div>
  </section>
</main>

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