{{ 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" (i18n "playNow") "size" "lg") }}
        {{ with site.GetPage "bonuses" }}<a href="{{ .RelPermalink }}" class="btn border-2 border-white/80 text-white hover:bg-white hover:text-secondary">{{ i18n "seeBonuses" }}</a>{{ end }}
      </div>
      <p class="mt-5 text-sm text-white/70"><span data-age-value>{{ $brand.ageRestrictionDefault }}</span>+ {{ i18n "termsResponsible" }}</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 }}

{{/* The homepage uses the same accessible FAQ source and accordion as /faq/. */}}
<section class="site-container section pt-0" aria-labelledby="home-faq-heading">
  <div class="mb-6 max-w-3xl">
    <p class="eyebrow">{{ i18n "playerHelp" }}</p>
    <h2 id="home-faq-heading" class="mt-2 text-2xl font-bold">{{ i18n "frequentlyAskedQuestions" }}</h2>
    <p class="mt-2 text-secondary/70">{{ i18n "faqIntro" }}</p>
  </div>
  {{ partial "faq-accordion.html" . }}
  {{ with site.GetPage "faq" }}<p class="mt-5 text-center"><a href="{{ .RelPermalink }}" class="font-semibold text-primary">{{ i18n "viewAllFaq" }} &rarr;</a></p>{{ end }}
</section>

{{/* Quick shortcuts */}}
<section class="site-container section pt-0">
  <h2 class="mb-6 text-2xl font-bold">{{ i18n "startHere" }}</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">{{ i18n "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">{{ i18n "featuredGames" }}</h2>
    {{ with site.GetPage "slots" }}<a href="{{ .RelPermalink }}" class="font-semibold text-primary">{{ i18n "allGames" }} &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 }}