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

{{/* Initialise */}}
{{ $page := .wcPage }}
{{ $block := .wcBlock }}
{{ $layout := $block.design.layout | default "cards" }}

{{ $title := $block.content.title | emojify | $page.RenderString }}
{{ $subtitle := $block.content.subtitle | emojify | $page.RenderString }}
{{ $text := $block.content.text | emojify | $page.RenderString }}

<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 := $block.content.items }}
      <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 $item.image }}
            {{ $img := resources.Get (printf "media/%s" $item.image) }}
            {{ if $img }}
              {{ $img = $img.Fill "600x400 Center webp" }}
              {{ $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 $item.name }}
            {{ end }}
          {{ else if $item.icon }}
            {{ $icon_html := partial "functions/get_icon" (dict "name" $item.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 }}

          {{ if and $item.cta.url $header_content }}
            <a href="{{ $item.cta.url }}" class="block relative h-48 bg-gradient-to-br {{ $item.gradient | default "from-primary-400 to-secondary-400" }} overflow-hidden">
              {{ $header_content | safeHTML }}
            </a>
          {{ else }}
            <div class="relative h-48 bg-gradient-to-br {{ $item.gradient | default "from-primary-400 to-secondary-400" }} overflow-hidden">
              {{ $header_content | safeHTML }}
            </div>
          {{ end }}
            
          
          {{/* Status Badge */}}
          {{ with $item.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 }}
                <a href="{{ $item.url }}" class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
                  {{ $item.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 }}
                  {{ $item.name }}
                {{ end }}
              </h3>
              
              <p class="text-gray-600 dark:text-gray-400 mb-4">
                {{ $item.description }}
              </p>
              
              {{/* Key Topics/Keywords */}}
              {{ with $item.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 */}}
              {{ if or $item.team_size $item.publications $item.funding }}
              <div class="grid grid-cols-3 gap-3 pt-4 border-t border-gray-200 dark:border-gray-700 mb-4">
                {{ with $item.team_size }}
                <div class="flex flex-col items-center text-center text-gray-500 dark:text-gray-400">
                  {{ partial "functions/get_icon" (dict "name" "hero/user-group" "attributes" "class=\"w-4 h-4 mx-auto mb-1\"") }}
                  <span class="text-xs leading-tight">{{ . | replaceRE " researchers" "" }}</span>
                  <span class="text-xs text-gray-400">team</span>
                </div>
                {{ end }}
                {{ with $item.publications }}
                <div class="flex flex-col items-center text-center text-gray-500 dark:text-gray-400">
                  {{ partial "functions/get_icon" (dict "name" "hero/document-text" "attributes" "class=\"w-4 h-4 mx-auto mb-1\"") }}
                  <span class="text-xs leading-tight">{{ . | replaceRE " papers" "" }}</span>
                  <span class="text-xs text-gray-400">papers</span>
                </div>
                {{ end }}
                {{ with $item.funding }}
                <div class="flex flex-col items-center text-center text-gray-500 dark:text-gray-400">
                  {{ partial "functions/get_icon" (dict "name" "hero/currency-dollar" "attributes" "class=\"w-4 h-4 mx-auto mb-1\"") }}
                  <span class="text-xs leading-tight">{{ . }}</span>
                  <span class="text-xs text-gray-400">funding</span>
                </div>
                {{ end }}
              </div>
              {{ end }}
              
              {{/* Call to Action */}}
              {{ with $item.cta }}
              <a href="{{ .url }}" 
                 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">
                {{ .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 := $block.content.items }}
      <div class="hexagon-container group">
        <div class="hexagon bg-gradient-to-br {{ $item.gradient | default "from-primary-400 to-secondary-400" }} shadow-xl hover:shadow-2xl transition-all duration-300">
          <div class="hexagon-content">
            {{ if $item.icon }}
              {{ partial "functions/get_icon" (dict "name" $item.icon "attributes" "class=\"w-12 h-12 text-white mb-3\"") }}
            {{ end }}
            <h3 class="text-lg font-bold text-white mb-2">{{ $item.name }}</h3>
            <p class="text-white/90 text-sm">{{ $item.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 := $block.content.items }}
        <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 $item.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" $item.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">{{ $item.name }}</h3>
              </div>
              <p class="text-gray-600 dark:text-gray-400">{{ $item.description }}</p>
            </div>
          </div>
        </div>
        {{ end }}
      </div>
    </div>
    {{ end }}
    
    {{/* Global Call to Action */}}
    {{ with $block.content.cta }}
    <div class="mt-12 text-center">
      <a href="{{ .url }}" 
         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">
        {{ .text }}
        {{ with .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 }}