{{/* Hugo Blox: Research Areas Block */}}
{{/* Documentation: https://hugoblox.com/blocks/ */}}
{{/* License: https://github.com/HugoBlox/kit/blob/main/LICENSE.md */}}

{{/* Initialise */}}
{{ $page := .wcPage }}
{{ $block := .wcBlock }}
{{ $content := $block.content }}
{{ if not (reflect.IsMap $content) }}{{ $content = dict }}{{ end }}
{{ $design := $block.design }}
{{ if not (reflect.IsMap $design) }}{{ $design = dict }}{{ end }}

{{ $layout := "cards" }}
{{ $layout_raw := index $design "layout" }}
{{ if eq (printf "%T" $layout_raw) "string" }}
  {{ $layout_candidate := lower (strings.TrimSpace $layout_raw) }}
  {{ if in (slice "cards" "hexagon" "timeline") $layout_candidate }}
    {{ $layout = $layout_candidate }}
  {{ end }}
{{ end }}

{{ $title := "" }}
{{ $title_raw := index $content "title" }}
{{ if $title_raw }}
  {{ $title = strings.TrimSpace (printf "%v" $title_raw) }}
{{ end }}
{{ if $title }}{{ $title = $title | emojify | $page.RenderString }}{{ end }}

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

{{ $text := "" }}
{{ $text_raw := index $content "text" }}
{{ if $text_raw }}
  {{ $text = strings.TrimSpace (printf "%v" $text_raw) }}
{{ end }}
{{ if $text }}{{ $text = $text | emojify | $page.RenderString }}{{ end }}

{{ $items_raw := index $content "items" }}
{{ $items_iter := slice }}
{{ if reflect.IsSlice $items_raw }}
  {{ $items_iter = $items_raw }}
{{ else if and $items_raw (reflect.IsMap $items_raw) }}
  {{ $items_iter = slice $items_raw }}
{{ end }}

{{ $items := slice }}
{{ if gt (len $items_iter) 0 }}
  {{ range $items_iter }}
    {{ if reflect.IsMap . }}
      {{ $name := "" }}
      {{ $description := "" }}
      {{ $icon := "" }}
      {{ $image := "" }}
      {{ $gradient := "" }}
      {{ $url := "" }}
      {{ $status := "" }}
      {{ $topics := slice }}
      {{ $team_size := "" }}
      {{ $publications := "" }}
      {{ $funding := "" }}
      {{ $cta_url := "" }}
      {{ $cta_text := "" }}
      {{ $cta_icon := "" }}

      {{ with index . "name" }}{{ $name = strings.TrimSpace (printf "%v" .) }}{{ end }}
      {{ with index . "description" }}{{ $description = strings.TrimSpace (printf "%v" .) }}{{ end }}
      {{ with index . "icon" }}{{ $icon = printf "%v" . }}{{ end }}
      {{ with index . "image" }}{{ $image = strings.TrimSpace (printf "%v" .) }}{{ end }}
      {{ with index . "gradient" }}{{ $gradient = strings.TrimSpace (printf "%v" .) }}{{ end }}
      {{ with index . "url" }}{{ $url = strings.TrimSpace (printf "%v" .) }}{{ end }}
      {{ with index . "status" }}{{ $status = lower (strings.TrimSpace (printf "%v" .)) }}{{ end }}

      {{ $topics_raw := index . "topics" }}
      {{ if reflect.IsSlice $topics_raw }}
        {{ range $topics_raw }}
          {{ $topic := strings.TrimSpace (printf "%v" .) }}
          {{ if $topic }}{{ $topics = $topics | append $topic }}{{ end }}
        {{ end }}
      {{ else if eq (printf "%T" $topics_raw) "string" }}
        {{ $topic_string := strings.TrimSpace $topics_raw }}
        {{ if $topic_string }}
          {{ if strings.Contains $topic_string "," }}
            {{ range (split $topic_string ",") }}
              {{ $topic := strings.TrimSpace . }}
              {{ if $topic }}{{ $topics = $topics | append $topic }}{{ end }}
            {{ end }}
          {{ else }}
            {{ $topics = slice $topic_string }}
          {{ end }}
        {{ end }}
      {{ end }}

      {{ with index . "team_size" }}{{ $team_size = strings.TrimSpace (printf "%v" .) }}{{ end }}
      {{ with index . "publications" }}{{ $publications = strings.TrimSpace (printf "%v" .) }}{{ end }}
      {{ with index . "funding" }}{{ $funding = strings.TrimSpace (printf "%v" .) }}{{ end }}

      {{/* Generic metrics array: [{ icon, value, label }, ...] — first 3 rendered */}}
      {{ $metrics := slice }}
      {{ $metrics_raw := index . "metrics" }}
      {{ if reflect.IsSlice $metrics_raw }}
        {{ range $metrics_raw }}
          {{ if reflect.IsMap . }}
            {{ $m_icon := "" }}
            {{ $m_value := "" }}
            {{ $m_label := "" }}
            {{ with index . "icon" }}{{ $m_icon = printf "%v" . }}{{ end }}
            {{ with index . "value" }}{{ $m_value = strings.TrimSpace (printf "%v" .) }}{{ end }}
            {{ with index . "label" }}{{ $m_label = strings.TrimSpace (printf "%v" .) }}{{ end }}
            {{ if or $m_value $m_label }}
              {{ $metrics = $metrics | append (dict "icon" $m_icon "value" $m_value "label" $m_label) }}
            {{ end }}
          {{ end }}
        {{ end }}
      {{ end }}
      {{/* Backcompat: synthesise from legacy team_size / publications / funding when `metrics` not provided */}}
      {{ if not $metrics }}
        {{ if $team_size }}
          {{ $metrics = $metrics | append (dict "icon" "hero/user-group" "value" (replaceRE " researchers" "" $team_size) "label" "team") }}
        {{ end }}
        {{ if $publications }}
          {{ $metrics = $metrics | append (dict "icon" "hero/document-text" "value" (replaceRE " papers" "" $publications) "label" "papers") }}
        {{ end }}
        {{ if $funding }}
          {{ $metrics = $metrics | append (dict "icon" "hero/currency-dollar" "value" $funding "label" "funding") }}
        {{ end }}
      {{ end }}

      {{ $cta_raw := index . "cta" }}
      {{ if reflect.IsMap $cta_raw }}
        {{ with index $cta_raw "url" }}{{ $cta_url = strings.TrimSpace (printf "%v" .) }}{{ end }}
        {{ with index $cta_raw "text" }}{{ $cta_text = strings.TrimSpace (printf "%v" .) }}{{ end }}
        {{ with index $cta_raw "icon" }}{{ $cta_icon = printf "%v" . }}{{ end }}
      {{ end }}

      {{ if or $name $description }}
        {{ $items = $items | append (dict "name" $name "description" $description "icon" $icon "image" $image "gradient" $gradient "url" $url "status" $status "topics" $topics "metrics" $metrics "team_size" $team_size "publications" $publications "funding" $funding "cta" (dict "url" $cta_url "text" $cta_text "icon" $cta_icon)) }}
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

{{ $cta := index $content "cta" }}
{{ if not (reflect.IsMap $cta) }}{{ $cta = dict }}{{ end }}
{{ $cta_text := "" }}
{{ $cta_link := "" }}
{{ $cta_icon := "" }}
{{ with index $cta "text" }}{{ $cta_text = strings.TrimSpace (printf "%v" .) }}{{ end }}
{{ with index $cta "url" }}{{ $cta_link = strings.TrimSpace (printf "%v" .) }}{{ end }}
{{ with index $cta "icon" }}{{ $cta_icon = printf "%v" . }}{{ end }}

<div class="py-16 sm:py-20 lg:py-24 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    
    {{/* Section Header */}}
    <div class="text-center max-w-3xl mx-auto mb-12 lg:mb-16">
      {{ with $title }}
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white tracking-tight mb-4">
        {{ . }}
      </h2>
      {{ end }}
      
      {{ with $subtitle }}
      <p class="text-xl text-primary-600 dark:text-primary-400 font-medium mb-3">
        {{ . }}
      </p>
      {{ end }}
      
      {{ with $text }}
      <p class="text-lg text-gray-600 dark:text-gray-400">
        {{ . }}
      </p>
      {{ end }}
    </div>

    {{/* Cards Layout */}}
    {{ if eq $layout "cards" }}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
      {{ range $idx, $item := $items }}
      {{ $name := index $item "name" }}
      {{ $description := index $item "description" }}
      {{ $icon := index $item "icon" }}
      {{ $image := index $item "image" }}
      {{ $gradient := index $item "gradient" | default "from-primary-400 to-secondary-400" }}
      {{ $item_url := index $item "url" }}
      {{ $status := index $item "status" }}
      {{ $topics := index $item "topics" }}
      {{ $metrics := index $item "metrics" }}
      {{ $item_cta := index $item "cta" }}
      {{ $item_cta_url := "" }}
      {{ $item_cta_text := "" }}
      {{ $item_cta_icon := "" }}
      {{ if reflect.IsMap $item_cta }}
        {{ with index $item_cta "url" }}{{ $item_cta_url = strings.TrimSpace (printf "%v" .) }}{{ end }}
        {{ with index $item_cta "text" }}{{ $item_cta_text = strings.TrimSpace (printf "%v" .) }}{{ end }}
        {{ with index $item_cta "icon" }}{{ $item_cta_icon = printf "%v" . }}{{ end }}
      {{ end }}
      <div class="group relative">
        <div class="h-full bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden flex flex-col">
          
          {{/* Card Image/Icon Header */}}
          {{ $header_content := "" }}
          {{ if $image }}
            {{/* Resolve image from page bundle, site assets, remote, or static URLs */}}
            {{ $image_resource := false }}
            {{ $image_url := "" }}
            {{ $image_path := strings.TrimSpace (printf "%v" $image) }}
            {{ $is_remote := or (strings.HasPrefix $image_path "http://") (strings.HasPrefix $image_path "https://") }}

            {{ if $is_remote }}
              {{ $remote := try (resources.GetRemote $image_path) }}
              {{ if and $remote (not $remote.Err) }}
                {{ $image_resource = $remote.Value }}
              {{ else }}
                {{ $image_url = $image_path }}
              {{ end }}
            {{ else }}
              {{ $image_path = strings.TrimPrefix "/" $image_path }}
              {{ $image_path = strings.TrimPrefix "./" $image_path }}
              {{ $image_path = strings.TrimPrefix "assets/" $image_path }}
              {{ $image_path = strings.TrimPrefix "media/" $image_path }}
              {{ $normalized := path.Clean $image_path }}

              {{ if and $normalized (ne $normalized ".") }}
                {{ with $page }}
                  {{ $image_resource = (.Resources.ByType "image").GetMatch $normalized }}
                {{ end }}
                {{ if not $image_resource }}
                  {{ $image_resource = resources.Get (path.Join "media" $normalized) }}
                {{ end }}
                {{ if not $image_resource }}
                  {{ $image_url = printf "/media/%s" $normalized }}
                {{ end }}
              {{ end }}
            {{ end }}

            {{ $img := $image_resource }}
            {{ if $img }}
              {{ if reflect.IsImageResourceProcessable $img }}
                {{ $img = $img.Fill "600x400 Center webp" }}
              {{ end }}
              {{ $alt := $name | plainify }}
              {{ $header_content = printf "<img src=\"%s\" alt=\"%s\" class=\"w-full h-full object-cover opacity-80 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500\">" $img.RelPermalink $alt }}
            {{ else if $image_url }}
              {{ $alt := $name | plainify }}
              {{ $is_external := or (strings.HasPrefix $image_url "http://") (strings.HasPrefix $image_url "https://") }}
              {{ $src := cond $is_external $image_url ($image_url | relURL) }}
              {{ $header_content = printf "<img src=\"%s\" alt=\"%s\" class=\"w-full h-full object-cover opacity-80 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500\">" $src $alt }}
            {{ end }}
          {{ else if $icon }}
            {{ $icon_html := partial "functions/get_icon" (dict "name" $icon "attributes" "class=\"w-24 h-24 text-white/80 group-hover:scale-110 transition-transform duration-300\"") }}
            {{ $header_content = printf "<div class=\"absolute inset-0 flex items-center justify-center\">%s</div>" $icon_html }}
          {{ end }}

          {{ $item_cta_link := "" }}
          {{ $item_cta_target := "" }}
          {{ if $item_cta_url }}
            {{ $item_cta_link = $item_cta_url }}
            {{ $item_cta_scheme := (urls.Parse $item_cta_link).Scheme }}
            {{ if not $item_cta_scheme }}
              {{ if not (hasPrefix $item_cta_link "#") }}
                {{ $item_cta_link = $item_cta_link | relLangURL }}
              {{ end }}
            {{ else if in (slice "http" "https") $item_cta_scheme }}
              {{ $item_cta_target = "target=\"_blank\" rel=\"noopener\"" }}
            {{ end }}
          {{ end }}

          {{ if and $item_cta_link $header_content }}
            <a href="{{ $item_cta_link | safeURL }}" {{ $item_cta_target | safeHTMLAttr }} class="block relative h-48 bg-gradient-to-br {{ $gradient }} overflow-hidden">
              {{ $header_content | safeHTML }}
            </a>
          {{ else }}
            <div class="relative h-48 bg-gradient-to-br {{ $gradient }} overflow-hidden">
              {{ $header_content | safeHTML }}
            </div>
          {{ end }}
            
          
          {{/* Status Badge */}}
          {{ with $status }}
          <div class="absolute top-4 right-4 z-10">
            <span class="px-3 py-1 bg-white/90 dark:bg-gray-900/90 backdrop-blur text-xs font-semibold rounded-full
              {{ if eq . "active" }}text-green-600 dark:text-green-400
              {{ else if eq . "emerging" }}text-yellow-600 dark:text-yellow-400
              {{ else if eq . "planning" }}text-blue-600 dark:text-blue-400
              {{ end }}">
              {{ . | title }}
            </span>
          </div>
          {{ end }}

          {{/* Card Content - Flexible layout */}}
          <div class="flex flex-col flex-1 p-6">
            {{/* Main Content */}}
            <div class="flex-1">
              <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">
                {{ if $item_url }}
                {{ $item_link := $item_url }}
                {{ $item_target := "" }}
                {{ $item_scheme := (urls.Parse $item_link).Scheme }}
                {{ if not $item_scheme }}
                  {{ if not (hasPrefix $item_link "#") }}
                    {{ $item_link = $item_link | relLangURL }}
                  {{ end }}
                {{ else if in (slice "http" "https") $item_scheme }}
                  {{ $item_target = "target=\"_blank\" rel=\"noopener\"" }}
                {{ end }}
                <a href="{{ $item_link | safeURL }}" {{ $item_target | safeHTMLAttr }} class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
                  {{ $name }}
                  {{ partial "functions/get_icon" (dict "name" "hero/arrow-top-right-on-square" "attributes" "class=\"inline-block w-4 h-4 ml-1\"") }}
                </a>
                {{ else }}
                  {{ $name }}
                {{ end }}
              </h3>
              
              <p class="text-gray-600 dark:text-gray-400 mb-4">
                {{ $description | $page.RenderString }}
              </p>
              
              {{/* Key Topics/Keywords */}}
              {{ with $topics }}
              <div class="flex flex-wrap gap-2 mb-6">
                {{ range first 3 . }}
                <span class="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs rounded">
                  {{ . }}
                </span>
                {{ end }}
                {{ if gt (len .) 3 }}
                <span class="inline-block px-2 py-1 text-gray-500 dark:text-gray-400 text-xs">
                  +{{ sub (len .) 3 }} more
                </span>
                {{ end }}
              </div>
              {{ end }}
            </div>
            
            {{/* Footer Section - Always at bottom */}}
            <div class="mt-auto">
              {{/* Stats/Metrics — generic icon/value/label, max 3 */}}
              {{ with $metrics }}
              <div class="grid grid-cols-3 gap-3 pt-4 border-t border-gray-200 dark:border-gray-700 mb-4">
                {{ range first 3 . }}
                <div class="flex flex-col items-center text-center text-gray-500 dark:text-gray-400">
                  {{ with index . "icon" }}
                  {{ partial "functions/get_icon" (dict "name" . "attributes" "class=\"w-4 h-4 mx-auto mb-1\"") }}
                  {{ end }}
                  {{ with index . "value" }}<span class="text-xs leading-tight">{{ . }}</span>{{ end }}
                  {{ with index . "label" }}<span class="text-xs text-gray-400">{{ . }}</span>{{ end }}
                </div>
                {{ end }}
              </div>
              {{ end }}
              
              {{/* Call to Action */}}
              {{ if and $item_cta_link $item_cta_text }}
              <a href="{{ $item_cta_link | safeURL }}" {{ $item_cta_target | safeHTMLAttr }}
                 class="inline-flex items-center w-full justify-center px-4 py-2 bg-primary-50 dark:bg-primary-900/20 text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 font-medium text-sm rounded-lg hover:bg-primary-100 dark:hover:bg-primary-900/30 transition-all duration-300">
                {{ $item_cta_text }}
                {{ partial "functions/get_icon" (dict "name" "hero/arrow-right" "attributes" "class=\"ml-1 w-4 h-4\"") }}
              </a>
              {{ end }}
            </div>
          </div>
        </div>
      </div>
      {{ end }}
    </div>
    
    {{/* Hexagon Layout */}}
    {{ else if eq $layout "hexagon" }}
    <div class="flex flex-wrap justify-center gap-8 lg:gap-4">
      {{ range $idx, $item := $items }}
      {{ $name := index $item "name" }}
      {{ $description := index $item "description" }}
      {{ $icon := index $item "icon" }}
      {{ $gradient := index $item "gradient" | default "from-primary-400 to-secondary-400" }}
      <div class="hexagon-container group">
        <div class="hexagon bg-gradient-to-br {{ $gradient }} shadow-xl hover:shadow-2xl transition-all duration-300">
          <div class="hexagon-content">
            {{ if $icon }}
              {{ partial "functions/get_icon" (dict "name" $icon "attributes" "class=\"w-12 h-12 text-white mb-3\"") }}
            {{ end }}
            <h3 class="text-lg font-bold text-white mb-2">{{ $name }}</h3>
            <p class="text-white/90 text-sm">{{ $description | truncate 60 }}</p>
          </div>
        </div>
      </div>
      {{ end }}
    </div>
    
    {{/* Timeline Layout */}}
    {{ else if eq $layout "timeline" }}
    <div class="relative">
      {{/* Vertical Line */}}
      <div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-primary-400 to-secondary-400"></div>
      
      <div class="space-y-12">
        {{ range $idx, $item := $items }}
        {{ $name := index $item "name" }}
        {{ $description := index $item "description" }}
        {{ $icon := index $item "icon" }}
        <div class="relative flex items-center {{ if eq (mod $idx 2) 0 }}justify-start{{ else }}justify-end{{ end }}">
          {{/* Timeline dot */}}
          <div class="absolute left-1/2 transform -translate-x-1/2 w-8 h-8 bg-white dark:bg-gray-800 border-4 border-primary-500 rounded-full z-10"></div>
          
          <div class="w-5/12 {{ if eq (mod $idx 2) 1 }}mr-auto{{ end }}">
            <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
              <div class="flex items-center gap-3 mb-3">
                {{ if $icon }}
                  <div class="w-10 h-10 bg-primary-100 dark:bg-primary-900/50 rounded-full flex items-center justify-center">
                    {{ partial "functions/get_icon" (dict "name" $icon "attributes" "class=\"w-5 h-5 text-primary-600 dark:text-primary-400\"") }}
                  </div>
                {{ end }}
                <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ $name }}</h3>
              </div>
              <p class="text-gray-600 dark:text-gray-400">{{ $description | $page.RenderString }}</p>
            </div>
          </div>
        </div>
        {{ end }}
      </div>
    </div>
    {{ end }}
    
    {{/* Global Call to Action */}}
    {{ if and $cta_link $cta_text }}
    {{ $cta_target := "" }}
    {{ $cta_scheme := (urls.Parse $cta_link).Scheme }}
    {{ if not $cta_scheme }}
      {{ if not (hasPrefix $cta_link "#") }}
        {{ $cta_link = $cta_link | relLangURL }}
      {{ end }}
    {{ else if in (slice "http" "https") $cta_scheme }}
      {{ $cta_target = "target=\"_blank\" rel=\"noopener\"" }}
    {{ end }}
    <div class="mt-12 text-center">
      <a href="{{ $cta_link | safeURL }}" {{ $cta_target | safeHTMLAttr }}
         class="inline-flex items-center px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg shadow hover:shadow-lg transition-all duration-300">
        {{ $cta_text }}
        {{ with $cta_icon }}
        {{ partial "functions/get_icon" (dict "name" . "attributes" "class=\"ml-2 w-5 h-5\"") }}
        {{ end }}
      </a>
    </div>
    {{ end }}
  </div>
</div>

{{/* Custom CSS for Hexagon Layout */}}
{{ if eq $layout "hexagon" }}
<style>
.hexagon-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 30px;
}

.hexagon {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.hexagon:hover {
  transform: scale(1.05);
}

.hexagon-content {
  text-align: center;
  padding: 20px;
}

@media (max-width: 768px) {
  .hexagon-container {
    width: 150px;
    height: 150px;
  }
}
</style>
{{ end }}