<!doctype html>
<html lang="en">
  <head>
    {{ partial "head.html" . }}
  </head>

  <body
    class="flex min-h-screen flex-col bg-gray-50 text-base dark:bg-gray-950 dark:text-white"
  >
    {{ partial "header.html" . }}
    {{ partial "gordon-chat.html" . }}
    <main class="flex-1">
      <!-- AI Hero Section -->
      <section class="relative overflow-hidden py-16 md:py-20">
        <!-- Wavy plus pattern background from Docker.com -->
        <div
          class="absolute inset-0 bg-[center_top] bg-no-repeat opacity-100 [mix-blend-mode:multiply] dark:opacity-60 dark:[mix-blend-mode:normal] dark:[filter:invert(1)_brightness(1.5)]"
          style="background-image: url('/assets/images/dot-pattern.svg');"
        ></div>
        <div class="relative z-10 container mx-auto max-w-4xl px-4 text-center">
          <h1
            class="mb-4 text-3xl font-semibold text-balance text-gray-900 md:text-4xl dark:text-white"
          >
            How can we help?
          </h1>
          <!-- AI Search Input -->
          <div class="py-6 mx-auto max-w-2xl" x-data="{ query: '' }">
            <div
              class="flex items-center gap-3 rounded-2xl border-2 border-gray-200 bg-white p-4 shadow-lg transition focus-within:scale-[1.02] focus-within:border-blue-500 hover:border-blue-500 dark:border-gray-700 dark:bg-gray-900"
            >
              <div class="shrink-0 rounded-xl bg-blue-500 p-2 text-white">
                <span class="icon-svg-stroke">
                  {{ partial "icon" "icons/sparkle.svg" }}
                </span>
              </div>
              <input
                x-model="query"
                type="text"
                placeholder="Ask anything about Docker and get instant answers…"
                @keydown.enter="if (query.trim()) { $store.gordon.open(query.trim(), true); query = ''; }"
                class="flex-1 bg-transparent text-lg text-gray-900 placeholder-gray-500 focus:outline-none dark:text-white dark:placeholder-gray-400"
              />
              <button
                @click="if (query.trim()) { $store.gordon.open(query.trim(), true); query = ''; }"
                :disabled="!query.trim()"
                class="shrink-0 rounded-xl bg-blue-500 p-2 text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700"
              >
                <span class="icon-svg">
                  {{ partialCached "icon" "arrow_forward" "arrow_forward" }}
                </span>
              </button>
            </div>
          </div>

          <!-- Suggestion Pills -->
          <div class="mt-6 flex flex-wrap justify-center gap-3" x-data>
            {{ range slice
              "How do I get started with Docker?"
			  "Can I run my AI agent in a sandbox?"
              "What is a container?"
              "What are Docker Hardened Images?"
              "Why should I use Docker Compose?"
            }}
              <button
                @click="$store.gordon.open($el.textContent.trim(), true);"
                class="ai-suggestion cursor-pointer rounded-full border border-gray-200 bg-white px-4 py-2 text-sm text-gray-600 transition hover:border-blue-400 hover:bg-blue-50 hover:text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-blue-500 dark:hover:bg-gray-700 dark:hover:text-white"
              >
                {{ . }}
              </button>
            {{ end }}
          </div>
        </div>
      </section>

      <!-- Quick Links Section -->
      <section class="py-8">
        <div class="container mx-auto px-4 xl:max-w-[1200px]">
          <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
            {{ range slice
              (dict "url" "/get-started/" "icon" "rocket" "title" "Get started" "description" "Learn Docker basics.")
              (dict "url" "/guides/" "icon" "menu_book" "title" "Guides" "description" "Optimize your development workflows with Docker.")
              (dict "url" "/manuals/" "icon" "description" "title" "Manuals" "description" "Install, set up, configure, and use Docker products.")
              (dict "url" "/reference/" "icon" "terminal" "title" "Reference" "description" "Browse the CLI and API documentation.")
            }}
              <a
                href="{{ .url }}"
                class="group block rounded-xl border border-gray-200 bg-white p-6 transition hover:scale-[1.02] hover:border-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-blue-500"
              >
                <div class="flex items-start gap-4">
                  <div
                    class="shrink-0 rounded-lg bg-blue-100 p-3 text-blue-500 dark:bg-gray-700 dark:text-blue-400"
                  >
                    <span class="icon-svg">
                      {{ partialCached "icon" .icon .icon }}
                    </span>
                  </div>
                  <div>
                    <h3
                      class="mb-1 text-lg font-semibold text-gray-900 transition group-hover:text-blue-500 dark:text-white dark:group-hover:text-blue-400"
                    >
                      {{ .title }}
                    </h3>
                    <p
                      class="text-sm leading-relaxed text-gray-600 dark:text-gray-300"
                    >
                      {{ .description }}
                    </p>
                  </div>
                </div>
              </a>
            {{ end }}
          </div>
        </div>
      </section>

      <!-- Popular Topics Section -->
      <section class="py-8">
        <div class="container mx-auto max-w-3xl px-4">
          <h2
            class="mb-8 text-center text-2xl font-semibold text-gray-900 dark:text-white"
          >
            Featured topics
          </h2>
          <div
            class="divide-y divide-gray-200 rounded-xl border border-gray-200 bg-white dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-900"
          >
            {{ range slice
              (dict "url" "/dhi/" "title" "Docker Hardened Images")
              (dict "url" "/ai/sandboxes/get-started/" "title" "Get started with Docker Sandboxes")
              (dict "url" "/desktop/" "title" "Docker Desktop overview")
              (dict "url" "/engine/install/" "title" "Install Docker Engine")
              (dict "url" "/reference/dockerfile/" "title" "Dockerfile reference")
              (dict "url" "/build/" "title" "Docker Build overview")
            }}
              <a
                href="{{ .url }}"
                class="group flex items-center justify-between px-4 py-3 transition hover:bg-blue-50 dark:hover:bg-gray-700"
              >
                <span
                  class="text-gray-900 transition group-hover:text-blue-500 dark:text-white dark:group-hover:text-blue-400"
                  >{{ .title }}</span
                >
                <span
                  class="icon-svg text-gray-400 transition group-hover:translate-x-1 dark:text-gray-500"
                >
                  {{ partialCached "icon" "arrow_forward" "arrow_forward" }}
                </span>
              </a>
            {{ end }}
          </div>
        </div>
      </section>
    </main>
    <footer>{{ partialCached "footer.html" . }}</footer>
  </body>
</html>
