@php
    $links = \App\Models\Backend\ContentApplication::with('translations')
        ->where('application_status', 'ACTIVE')
        ->where('application_url', '!=', '')
        ->where('application_url', '!=', '#')
        ->orderBy('application_sort')
        ->get();
    $grouped = $links->groupBy('application_cat');
    $catLabels = [
        'INTERNATIONAL'    => 'International Frameworks',
        'NATIONAL'      => 'National Agencies',
    ];
@endphp
<style>
.page-hero{background:linear-gradient(135deg,var(--green-800),var(--green-900));padding:3rem 0;color:#fff;margin-bottom:0;}
.page-hero h1{font-weight:700;font-size:clamp(2rem,4vw,2.8rem);}
.page-hero p{font-size:1rem;font-weight:500;max-width:400px;opacity:.9;}
.link-section{padding:3rem 0;background:var(--cream);min-height:50vh;}
.link-card{border:1px solid #ece8db;border-radius:.75rem;padding:1.25rem;height:100%;background:#fff;display:flex;gap:1rem;align-items:flex-start;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s;margin-bottom:.75rem;}
.link-card:hover{box-shadow:0 8px 20px rgba(46,74,53,.08);transform:translateY(-2px);}
.link-icon{width:52px;height:52px;background:var(--green-100);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--green-800);flex:0 0 52px;}
.link-card h4{font-weight:700;font-size:.9rem;color:var(--green-800);margin-bottom:.2rem;}
.link-card p{font-size:.8rem;font-weight:500;margin:0;line-height:1.5;color:#5b6a5e;}
.section-title{color:var(--green-800);font-weight:700;font-size:1.35rem;margin-bottom:1.5rem;}
.footer-pages{padding:2rem 0 1.5rem;border-top:1px solid #ece8db;background:#fff;}
.footer-pages a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.85rem;display:inline-flex;align-items:center;gap:.5rem;}
.footer-pages a:hover{color:var(--green-800);}
.footer-pages .bi{color:var(--green-800);}
.f-divider{width:1px;height:26px;background:#cfc9b8;}
.link-number {
    width:28px;
    height:28px;
    background:var(--green-800);
    color:#fff;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0.75rem;
    font-weight:700;
    flex-shrink:0;
}
</style>

<div style="min-height:calc(100vh - 64px);background:#fff;">
  <header class="page-hero">
    <div class="container">
      <h1>Related Links</h1>
      <p>Useful links to international frameworks, partners and related organisations.</p>
    </div>
  </header>

  <div class="link-section">
    <div class="container">
      @if($links->count())
        @foreach($catLabels as $code => $label)
          @php 
            $items = $grouped->get($code, collect()); 
            $counter = 1; // Reset counter untuk setiap kategori
          @endphp
          @if($items->count())
            <h2 class="section-title">{{ $label }}</h2>
            <div class="mb-4">
              @foreach($items as $l)
                @php $t = $l->translations->first(); @endphp
                <a href="{{ $l->application_url ?: '#' }}" target="{{ str_starts_with($l->application_url ?? '', '#') ? '_self' : '_blank' }}" class="link-card">
                  <div style="display:flex;align-items:center;gap:10px;">
                    <span class="link-number">{{ $counter }}</span>
                    <div class="link-icon"><i class="bi bi-box-arrow-up-right"></i></div>
                  </div>
                  <div>
                    <h4>{{ $t?->application_translation_title ?? 'Untitled' }}</h4>
                  </div>
                </a>
                @php $counter++; @endphp
              @endforeach
            </div>
          @endif
        @endforeach
      @else
        <div class="text-center py-5">
          <i class="bi bi-link-45deg" style="font-size:3rem;color:var(--green-200);"></i>
          <h4 class="mt-3" style="color:var(--green-800);">No links yet</h4>
          <p style="color:#8a9a8e;">Related links will appear here once available.</p>
        </div>
      @endif
    </div>
  </div>

<style>
.footer-redd-article {
  background: url('/assets/redd-plus/faq_footer_bg.png') center bottom/cover no-repeat;
  padding: 4rem 0 2.5rem;
}
.footer-redd-article a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .85rem;
}
.footer-redd-article a:hover { color: var(--green-800); }
.footer-redd-article .bi { color: var(--green-800); font-size: 1.1rem; }
.footer-redd-article .f-divider { width: 1px; height: 26px; background: #cfc9b8; }
</style>
    <footer class="footer-redd-article">
      <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center gap-4">
          <img src="/assets/redd-plus/logo.png" alt="REDD+ Malaysia" height="46">
          <span class="f-divider d-none d-md-inline-block"></span>
          <a href="https://redd.nres.gov.my"><i class="bi bi-globe2"></i> redd.nres.gov.my</a>
          <span class="f-divider d-none d-md-inline-block"></span>
          <a href="mailto:redd@nres.gov.my"><i class="bi bi-envelope"></i> redd@nres.gov.my</a>
          <span class="f-divider d-none d-md-inline-block"></span>
          <a href="tel:+60380008000"><i class="bi bi-telephone"></i> +603 8000 8000</a>
        </div>
      </div>
    </footer>
</div>