<section id="projects">
  <div class="container">
    <div class="section-eyebrow reveal">{{ i18n "section_projects" }}</div>
    <h2 class="section-title reveal">{{ i18n "projects_title" }}</h2>

    {{ $lang := .Site.Language.Lang }}
    {{ $count := add (len hugo.Data.projects) 1 }}{{/* +1 for the collab card */}}
    {{ $wide := gt $count 3 }}

    <div class="carousel-wrap" data-carousel>
    <div class="projects-grid is-carousel{{ if $wide }} is-wide-carousel{{ end }}">
      {{ range hugo.Data.projects }}
      {{ $p := . }}
      <div class="project-card reveal">
        {{ with .image }}
        <div class="project-img-wrap">
          <img src="{{ . }}" alt="{{ $p.title }}" class="project-img">
        </div>
        {{ end }}

        <div class="project-body">
          <h3 class="project-title">{{ .title }}</h3>
          <p class="project-subtitle">{{ if eq $lang "it" }}{{ .subtitle_it }}{{ else }}{{ .subtitle_en }}{{ end }}</p>

          {{ with .tags }}
          <div class="project-tags">
            {{ range . }}<span class="project-tag">{{ . }}</span>{{ end }}
          </div>
          {{ end }}

          <p class="project-desc">{{ if eq $lang "it" }}{{ .desc_it }}{{ else }}{{ .desc_en }}{{ end }}</p>

          <div class="project-footer">
            {{ with .url }}
            <a href="{{ . }}" class="project-link" target="_blank" rel="noopener">
              <i class="fa-solid fa-arrow-up-right-from-square"></i>
              {{ i18n "project_visit" }}
            </a>
            {{ end }}

            <div class="project-share">
              {{ $title := .title }}
              {{ $url   := .url }}
              {{ with $url }}
              <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ $url | urlize }}"
                 class="share-btn" target="_blank" rel="noopener" aria-label="Share on LinkedIn">
                <i class="fa-brands fa-linkedin-in"></i>
              </a>
              <a href="https://x.com/intent/tweet?text={{ $title | urlize }}&url={{ $url | urlize }}"
                 class="share-btn" target="_blank" rel="noopener" aria-label="Share on X">
                <i class="fa-brands fa-x-twitter"></i>
              </a>
              <a href="mailto:?subject={{ $title | urlize }}&body={{ $url | urlize }}"
                 class="share-btn" aria-label="Share via Email">
                <i class="fa-solid fa-envelope"></i>
              </a>
              {{ end }}
            </div>
          </div>
        </div>
      </div>
      {{ end }}

      {{/* ── Collaboration placeholder card ── */}}
      <div class="project-card project-card--collab reveal">
        <div class="project-collab-icon">
          <i class="fa-solid fa-handshake-angle"></i>
        </div>
        <div class="project-body">
          <h3 class="project-title">{{ i18n "project_collab_title" }}</h3>
          <p class="project-desc">{{ i18n "project_collab_desc" }}</p>
          <div class="project-footer">
            <a href="#contact" class="project-link">
              <i class="fa-solid fa-paper-plane"></i>
              {{ i18n "project_collab_cta" }}
            </a>
          </div>
        </div>
      </div>

    </div>
    <div class="carousel-controls">
      <button class="carousel-btn carousel-btn--prev" aria-label="{{ i18n "carousel_prev" }}">
        <i class="fa-solid fa-chevron-left"></i>
      </button>
      <div class="carousel-dots"></div>
      <button class="carousel-btn carousel-btn--next" aria-label="{{ i18n "carousel_next" }}">
        <i class="fa-solid fa-chevron-right"></i>
      </button>
    </div>
    </div>{{/* end carousel-wrap */}}
  </div>
</section>
