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

{{$slides := HomeSlides}}
<section class="relative overflow-hidden bg-slate-50">
  <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?auto=format&fit=crop&w=1800&q=80')] bg-cover bg-center opacity-35"></div>
  <div class="absolute inset-0 bg-gradient-to-b from-white/78 via-white/72 to-slate-50/90"></div>
  <div class="absolute inset-0 bg-slate-950/12"></div>
  <div class="absolute -left-20 top-10 h-72 w-72 rounded-full bg-emerald-100/35 blur-3xl"></div>
  <div class="absolute right-0 top-24 h-80 w-80 rounded-full bg-slate-300/35 blur-3xl"></div>
  <div class="relative mx-auto flex min-h-[70vh] max-w-5xl items-center justify-center px-4 py-16 sm:px-6 lg:px-8">
    <div class="w-full max-w-3xl rounded-[2rem] border border-white/70 bg-white/80 px-6 py-10 text-center text-slate-900 shadow-[0_20px_80px_rgba(15,23,42,0.16)] backdrop-blur-md sm:px-10 sm:py-14">
      <p class="mb-4 inline-flex rounded-full border border-emerald-200 bg-emerald-50 px-4 py-1 text-sm text-emerald-700">租房 · 新房 · 二手房</p>
      <h1 class="text-4xl font-semibold tracking-tight text-slate-900 sm:text-5xl lg:text-6xl">找房，更快一步</h1>
      <p class="mt-5 text-base leading-8 text-slate-600 sm:text-lg">一站查看租房、新房和二手房，快速筛选合适房源。</p>

      <form action="/search" method="get" class="mt-10">
        <div class="rounded-3xl bg-white p-3 shadow-2xl shadow-slate-200/70 ring-1 ring-slate-200/80">
          <div class="grid gap-3 lg:grid-cols-[1fr_auto]">
            <input name="key" type="text" placeholder="请输入小区、地铁、户型、预算、学区等关键词" class="h-14 rounded-2xl border-0 bg-slate-50 px-5 text-slate-900 outline-none ring-1 ring-slate-200 placeholder:text-slate-400 focus:ring-2 focus:ring-primary">
            <button type="submit" class="h-14 rounded-2xl bg-primary px-8 text-base font-semibold text-white transition hover:bg-teal-700">开始找房</button>
          </div>
          <div class="mt-3 text-sm text-slate-500">输入小区、地铁、户型、预算等关键词</div>
        </div>
      </form>
    </div>
  </div>
</section>

{{if index .ThemesExt "stats_cards"}}
{{$stats := index .ThemesExt "stats_cards"}}
<section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
    {{range $stats}}
    <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
      <div class="text-3xl font-semibold text-primary">{{index . "value"}}</div>
      <div class="mt-2 text-sm text-slate-500">{{index . "label"}}</div>
    </div>
    {{end}}
  </div>
</section>
{{end}}

{{if index .ThemesExt "service_cards"}}
{{$services := index .ThemesExt "service_cards"}}
<section class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
  <div class="mb-6 flex items-end justify-between">
    <div>
      <h2 class="text-2xl font-semibold">服务能力</h2>
      <p class="mt-2 text-sm text-slate-500">围绕找房、带看和成交的完整服务链条。</p>
    </div>
  </div>
  <div class="grid gap-4 md:grid-cols-3">
    {{range $services}}
    <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
      <h3 class="text-lg font-semibold">{{index . "title"}}</h3>
      <p class="mt-2 text-sm leading-7 text-slate-600">{{index . "desc"}}</p>
    </div>
    {{end}}
  </div>
</section>
{{end}}

{{$rent := ColumnContents "rent" 4}}
{{$newHouse := ColumnContents "new-house" 4}}
{{$second := ColumnContents "second-hand" 4}}
<section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <div class="grid gap-10">
    <div>
      <div class="mb-5 flex items-end justify-between">
        <div>
          <h2 class="text-2xl font-semibold">精选租房</h2>
          <p class="mt-2 text-sm text-slate-500">适合租住、过渡和合租的热门房源。</p>
        </div>
        {{with Column "rent"}}<a href="{{.URL}}" class="text-sm font-medium text-primary">更多租房</a>{{end}}
      </div>
      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {{range $rent}}
        <a href="{{.URL}}" class="overflow-hidden rounded-xl 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-48 w-full object-cover">
          <div class="p-5">
            <div class="text-xs text-slate-500">{{.ColumnName}}</div>
            <h3 class="mt-2 text-lg font-semibold">{{.Title}}</h3>
            <p class="mt-2 text-sm text-slate-600">{{StrLimit .Description 64 "…"}}</p>
            <div class="mt-4 flex items-center justify-between text-sm">
              <span class="font-semibold text-primary">{{default (index .Ext "price_range") (printf "¥%.0f/月" .Price)}}</span>
              <span class="text-slate-500">{{default (index .Ext "badge") "房源"}}</span>
            </div>
          </div>
        </a>
        {{end}}
      </div>
    </div>

    <div>
      <div class="mb-5 flex items-end justify-between">
        <div>
          <h2 class="text-2xl font-semibold">买房（新房）</h2>
          <p class="mt-2 text-sm text-slate-500">新盘、现房和改善型楼盘推荐。</p>
        </div>
        {{with Column "new-house"}}<a href="{{.URL}}" class="text-sm font-medium text-primary">更多新房</a>{{end}}
      </div>
      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {{range $newHouse}}
        <a href="{{.URL}}" class="overflow-hidden rounded-xl 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-48 w-full object-cover">
          <div class="p-5">
            <div class="text-xs text-slate-500">{{default (index .Ext "developer") .ColumnName}}</div>
            <h3 class="mt-2 text-lg font-semibold">{{.Title}}</h3>
            <p class="mt-2 text-sm text-slate-600">{{StrLimit .Description 64 "…"}}</p>
            <div class="mt-4 flex items-center justify-between text-sm">
              <span class="font-semibold text-primary">{{default (index .Ext "price_range") (printf "¥%.0f" .Price)}}</span>
              <span class="text-slate-500">{{default (index .Ext "delivery") "在售"}}</span>
            </div>
          </div>
        </a>
        {{end}}
      </div>
    </div>

    <div>
      <div class="mb-5 flex items-end justify-between">
        <div>
          <h2 class="text-2xl font-semibold">二手房优选</h2>
          <p class="mt-2 text-sm text-slate-500">学区、地铁和改善型二手房源。</p>
        </div>
        {{with Column "second-hand"}}<a href="{{.URL}}" class="text-sm font-medium text-primary">更多二手房</a>{{end}}
      </div>
      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {{range $second}}
        <a href="{{.URL}}" class="overflow-hidden rounded-xl 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-48 w-full object-cover">
          <div class="p-5">
            <div class="text-xs text-slate-500">{{.ColumnName}}</div>
            <h3 class="mt-2 text-lg font-semibold">{{.Title}}</h3>
            <p class="mt-2 text-sm text-slate-600">{{StrLimit .Description 64 "…"}}</p>
            <div class="mt-4 flex items-center justify-between text-sm">
              <span class="font-semibold text-primary">{{default (index .Ext "price_range") (printf "¥%.0f" .Price)}}</span>
              <span class="text-slate-500">{{default (index .Ext "badge") "精选"}}</span>
            </div>
          </div>
        </a>
        {{end}}
      </div>
    </div>
  </div>
</section>

{{$news := ColumnContents "news" 6}}
<section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <div class="mb-5 flex items-end justify-between">
    <div>
      <h2 class="text-2xl font-semibold">房产资讯</h2>
      <p class="mt-2 text-sm text-slate-500">政策、行情和交易流程解读。</p>
    </div>
    {{with Column "news"}}<a href="{{.URL}}" class="text-sm font-medium text-primary">更多资讯</a>{{end}}
  </div>
  <div class="grid gap-4 md:grid-cols-2">
    {{range $news}}
    <a href="{{.URL}}" class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-0.5 hover:shadow-md">
      <div class="flex items-start justify-between gap-4">
        <h3 class="min-w-0 flex-1 text-lg font-semibold leading-7">{{.Title}}</h3>
        <span class="shrink-0 text-sm text-slate-500">{{ParseTime .CreatedAt "2006-01-02"}}</span>
      </div>
      <p class="mt-3 text-sm leading-7 text-slate-600">{{StrLimit .Description 92 "…"}}</p>
    </a>
    {{end}}
  </div>
</section>

{{if index .ThemesExt "partners"}}
{{$partners := index .ThemesExt "partners"}}
<section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <h2 class="text-2xl font-semibold">合作资源</h2>
  <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
    {{range $partners}}
    <div class="overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-slate-200">
      <div class="aspect-[16/9] w-full">
        <img src="{{index . "logo"}}" alt="{{index . "name"}}" class="h-full w-full object-cover">
      </div>
    </div>
    {{end}}
  </div>
</section>
{{end}}

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