{{ define "main" }}
{{ $brand := .Site.Data.brand }}

{{/* Hero */}}
<section class="hero-gradient text-white">
  <div class="site-container grid items-center gap-10 py-16 lg:grid-cols-2 lg:py-24">
    <div>
      <p class="eyebrow text-white/80">{{ $brand.name }}</p>
      <h1 class="mt-2 text-4xl font-extrabold leading-tight tracking-tight sm:text-5xl">{{ .Params.h1 | default .Title }}</h1>
      <p class="mt-4 max-w-xl text-lg text-white/90">{{ .Params.description | default $brand.tagline }}</p>
      <div class="mt-8 flex flex-wrap gap-3">
        {{ partial "cta-button.html" (dict "page" . "text" "Play Now" "size" "lg") }}
        {{ with site.GetPage "bonuses" }}<a href="{{ .RelPermalink }}" class="btn border-2 border-white/80 text-white hover:bg-white hover:text-secondary">See bonuses</a>{{ end }}
      </div>
      <p class="mt-5 text-sm text-white/70"><span data-age-value>{{ $brand.ageRestrictionDefault }}</span>+ only &bull; T&amp;Cs apply &bull; Please gamble responsibly</p>
    </div>
    <div class="relative">
      {{ $hero := resources.Get "images/hero.png" }}
      <div class="overflow-hidden rounded-2xl shadow-2xl ring-1 ring-white/20">
        {{ partial "responsive-image.html" (dict
            "resource" $hero
            "alt" (printf "%s highlights" $brand.name)
            "loading" "eager"
            "class" "w-full"
            "widths" (slice 600 900 1200)
            "sizes" "(min-width:1024px) 50vw, 100vw") }}
      </div>
    </div>
  </div>
</section>

{{/* USP blocks */}}
{{ with .Params.usps }}
<section class="site-container section">
  <div class="grid gap-6 md:grid-cols-3">
    {{- range . -}}
      <div class="card card-hover">
        <div class="mb-3 grid h-11 w-11 place-items-center rounded-lg bg-primary/10 text-primary">
          {{- if .icon -}}
            <span class="text-xl" aria-hidden="true">{{ .icon }}</span>
          {{- else -}}
            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          {{- end -}}
        </div>
        <h2 class="text-lg font-bold">{{ .title }}</h2>
        <p class="mt-2 text-secondary/70">{{ .text }}</p>
      </div>
    {{- end -}}
  </div>
</section>
{{ end }}

{{/* Editorial intro (from _index.md body) */}}
{{ with .Content }}
<section class="site-container section pt-0">
  <div class="prose-content max-w-3xl">{{ . }}</div>
</section>
{{ end }}

{{/* Quick shortcuts */}}
<section class="site-container section pt-0">
  <h2 class="mb-6 text-2xl font-bold">Start here</h2>
  <div class="grid gap-4 sm:grid-cols-3">
    {{- range slice "registration" "slots" "bonuses" -}}
      {{ with site.GetPage . }}
        <a href="{{ .RelPermalink }}" class="card card-hover block no-underline">
          <span class="badge-primary">{{ .LinkTitle }}</span>
          <p class="mt-2 text-secondary/70">{{ .Params.description | truncate 90 }}</p>
          <span class="mt-3 inline-block font-semibold text-primary">Explore &rarr;</span>
        </a>
      {{ end }}
    {{- end -}}
  </div>
</section>

{{/* Featured games */}}
{{ $featured := where (where .Site.RegularPages "Section" "slots") "Params.featured" true }}
{{ with $featured }}
<section class="site-container section pt-0">
  <div class="mb-6 flex items-end justify-between">
    <h2 class="text-2xl font-bold">Featured games</h2>
    {{ with site.GetPage "slots" }}<a href="{{ .RelPermalink }}" class="font-semibold text-primary">All games &rarr;</a>{{ end }}
  </div>
  <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
    {{- range first 4 . -}}
      {{ $img := .Resources.GetMatch "thumb.*" }}
      <article class="card card-hover overflow-hidden p-0">
        <div class="aspect-[3/2] overflow-hidden bg-secondary/10">
          {{ partial "responsive-image.html" (dict "resource" $img "alt" .Title "class" "h-full w-full object-cover" "widths" (slice 300 600)) }}
        </div>
        <div class="p-4">
          <span class="badge-primary">{{ .Params.provider }}</span>
          <h3 class="mt-2 font-bold"><a href="{{ .RelPermalink }}" class="no-underline hover:underline">{{ .Title }}</a></h3>
        </div>
      </article>
    {{- end -}}
  </div>
</section>
{{ end }}

{{ partial "related-pages.html" . }}
{{ end }}