{{- $wcPage := .wcPage -}}
{{- $wcBlock := .wcBlock -}}
{{- $wcIdentifier := .wcIdentifier -}}

{{/* Enable Alpine.js for interactivity */}}
{{ $wcPage.Page.Store.Set "has_alpine" true }}

{{ $content := $wcBlock.content }}
{{ if not (reflect.IsMap $content) }}{{ $content = dict }}{{ end }}

{{ $badge := index $content "badge" }}
{{ if not (reflect.IsMap $badge) }}{{ $badge = dict }}{{ end }}
{{ $badge_text := "" }}
{{ with index $badge "text" }}{{ $badge_text = strings.TrimSpace (printf "%v" .) }}{{ end }}
{{ $show_pulse := partial "functions/coerce_bool" (dict "value" (index $badge "show_pulse") "default" false) }}

{{ $title := "" }}
{{ $title_raw := index $content "title" }}
{{ if $title_raw }}{{ $title = strings.TrimSpace (printf "%v" $title_raw) }}{{ end }}
{{ if $title }}
  {{ $title = replaceRE "==([^=]+)==" "<span class=\"bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent\">$1</span>" $title }}
{{ end }}

{{ $subtitle := "" }}
{{ $subtitle_raw := index $content "subtitle" }}
{{ if $subtitle_raw }}{{ $subtitle = strings.TrimSpace (printf "%v" $subtitle_raw) }}{{ end }}

{{ $search_placeholder := "" }}
{{ $placeholder_raw := index $content "search_placeholder" }}
{{ if eq (printf "%T" $placeholder_raw) "string" }}
  {{ $search_placeholder = strings.TrimSpace $placeholder_raw }}
{{ end }}
{{ if not $search_placeholder }}{{ $search_placeholder = "Search for answers..." }}{{ end }}

{{ $suggestions_raw := index $content "suggestions" }}
{{ $suggestions := slice }}
{{ if reflect.IsSlice $suggestions_raw }}
  {{ range $suggestions_raw }}
    {{ $suggestion := strings.TrimSpace (printf "%v" .) }}
    {{ if $suggestion }}{{ $suggestions = $suggestions | append $suggestion }}{{ end }}
  {{ end }}
{{ else if eq (printf "%T" $suggestions_raw) "string" }}
  {{ $suggestion := strings.TrimSpace $suggestions_raw }}
  {{ if $suggestion }}{{ $suggestions = slice $suggestion }}{{ end }}
{{ end }}

{{ $stats_raw := index $content "stats" }}
{{ $stats_iter := slice }}
{{ if reflect.IsSlice $stats_raw }}
  {{ $stats_iter = $stats_raw }}
{{ else if and $stats_raw (reflect.IsMap $stats_raw) }}
  {{ $stats_iter = slice $stats_raw }}
{{ end }}

{{ $stats := slice }}
{{ if gt (len $stats_iter) 0 }}
  {{ range $stats_iter }}
    {{ if reflect.IsMap . }}
      {{ $value := "" }}
      {{ $label := "" }}
      {{ with index . "value" }}{{ $value = strings.TrimSpace (printf "%v" .) }}{{ end }}
      {{ with index . "label" }}{{ $label = strings.TrimSpace (printf "%v" .) }}{{ end }}
      {{ if or $value $label }}
        {{ $stats = $stats | append (dict "value" $value "label" $label) }}
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

{{/* Background is now handled by parse_block_v3.html gradient_mesh system */}}
{{/* Content only - wrapper and styling applied by framework */}}
<div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-3xl text-center">
      
      {{/* Badge */}}
      {{ if $badge_text }}
      <div class="mb-8 inline-flex items-center gap-2 rounded-full bg-primary-100 dark:bg-primary-900/30 px-4 py-2 text-sm font-medium text-primary-800 dark:text-primary-200">
        {{ if $show_pulse }}
        <span class="flex h-2 w-2 relative">
          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-400 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-2 w-2 bg-primary-500"></span>
        </span>
        {{ end }}
        {{ $badge_text | markdownify }}
      </div>
      {{ end }}
      
      {{/* Title - supports ==highlight== syntax for gradient text */}}
      <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl mb-6">
        {{ $title | markdownify | emojify | safeHTML }}
      </h1>
      
      {{/* Subtitle */}}
      {{ with $subtitle }}
      <p class="text-lg leading-8 text-gray-600 dark:text-gray-300 mb-12">
        {{ . | markdownify | emojify }}
      </p>
      {{ end }}
      
      {{/* Search Box - Integrates with Pagefind */}}
      <div class="relative" x-data="{ searchFocus: false }">
        <button 
          data-search-toggle
          type="button"
          class="w-full group cursor-pointer"
          aria-label="Open search">
          <div class="relative overflow-hidden rounded-2xl bg-white dark:bg-gray-800 shadow-xl ring-1 ring-gray-900/5 transition-all duration-300 hover:ring-2 hover:ring-primary-500 hover:scale-105" 
               :class="{ 'ring-2 ring-primary-500 scale-105': searchFocus }">
            <div class="w-full px-6 py-5 pl-14 pr-32 text-left">
              <span class="text-gray-400 dark:text-gray-500 text-lg">{{ $search_placeholder }}</span>
            </div>
            <div class="absolute inset-y-0 left-0 flex items-center pl-5 pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
              </svg>
            </div>
            <div class="absolute inset-y-2 right-2 flex items-center px-4 py-2 bg-primary-600 group-hover:bg-primary-700 text-white rounded-xl font-medium transition-colors pointer-events-none">
              Search
              <svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
              </svg>
            </div>
          </div>
        </button>
        
        {{/* Quick search suggestions - Now trigger Pagefind with pre-filled query */}}
        {{ if gt (len $suggestions) 0 }}
        <div class="mt-4 flex flex-wrap items-center justify-center gap-2 text-sm">
          <span class="text-gray-500 dark:text-gray-400">Popular:</span>
          {{ range $suggestions }}
          <button
            data-search-toggle
            data-search-query="{{ . | htmlEscape }}"
            type="button" 
            class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors cursor-pointer">
            {{ . }}
          </button>
          {{ end }}
        </div>
        {{ end }}
      </div>
      
      {{/* Stats */}}
      {{ if gt (len $stats) 0 }}
      <div class="mt-16 grid grid-cols-3 gap-8 text-center">
        {{ range $stats }}
        <div>
          <div class="text-3xl font-bold text-gray-900 dark:text-white">{{ index . "value" }}</div>
          <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ index . "label" }}</div>
        </div>
        {{ end }}
      </div>
      {{ end }}
      
    </div>
  </div>