@php
    $isAr = $locale === 'ar';
    $isKu = $locale === 'ku';
    $isRtl = $isAr || $isKu;
    $lang = $isAr ? 'ar' : ($isKu ? 'ku' : 'en');
    $nameField = 'name_'.$lang;
    $detailsField = 'details_'.$lang;
@endphp
<!doctype html>
<html lang="{{ $isAr ? 'ar' : ($isKu ? 'ckb' : 'en') }}" dir="{{ $isRtl ? 'rtl' : 'ltr' }}">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{ $isAr ? 'البرامج – أعمالنا' : ($isKu ? 'بەرنامەکان – کارەکانمان' : 'Programs – Our Works') }}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link href="/assets/styles.css" rel="stylesheet" />
  </head>
  <body data-page="works">
    <header class="topbar">
      <div class="container topbar-inner">
        @if($isAr)
          <a class="brand" href="/ar/index.html">
        @elseif($isKu)
          <a class="brand" href="/ku/index.html">
        @else
          <a class="brand" href="/index.html">
        @endif
          <div class="logo" aria-hidden="true"></div>
          <div class="brand-title">
            <strong>Creative Projects</strong>
            <span>مشاريع ابداعية</span>
          </div>
        </a>

        <nav class="nav" data-nav>
          @if($isAr)
            <a href="/ar/index.html" data-page="home">الرئيسية</a>
            <a href="/ar/about.html" data-page="about">من نحن</a>
            <a href="/ar/services.html" data-page="services">الخدمات</a>
            <a href="/ar/products.html" data-page="products">المنتجات</a>
            <a href="/ar/works.html" data-page="works">أعمالنا</a>
            <a href="/ar/contact.html" data-page="contact">تواصل معنا</a>
            <a href="/ar/works-programs.html">AR</a>
            <a href="/works-programs.html">EN</a>
            <a href="/ku/works-programs.html">KU</a>
          @elseif($isKu)
            <a href="/ku/index.html" data-page="home">سەرەکی</a>
            <a href="/ku/about.html" data-page="about">دەربارە</a>
            <a href="/ku/services.html" data-page="services">خزمەتگوزاریەکان</a>
            <a href="/ku/products.html" data-page="products">بەرهەمەکان</a>
            <a href="/ku/works.html" data-page="works">کارەکانمان</a>
            <a href="/ku/contact.html" data-page="contact">پەیوەندی</a>
            <a href="/ku/works-programs.html">KU</a>
            <a href="/works-programs.html">EN</a>
            <a href="/ar/works-programs.html">AR</a>
          @else
            <a href="/index.html" data-page="home">Home</a>
            <a href="/about.html" data-page="about">About</a>
            <a href="/services.html" data-page="services">Services</a>
            <a href="/products.html" data-page="products">Products</a>
            <a href="/works.html" data-page="works">Works</a>
            <a href="/contact.html" data-page="contact">Contact</a>
            <a href="/works-programs.html">EN</a>
            <a href="/ar/works-programs.html">AR</a>
            <a href="/ku/works-programs.html">KU</a>
          @endif
        </nav>
        <button class="menu-btn" type="button" data-menu-btn>{{ $isAr ? 'القائمة' : ($isKu ? 'مێنو' : 'Menu') }}</button>
      </div>
    </header>

    <main>
      <section class="hero">
        @php
          $showHeroImage = $heroSettings && $heroSettings->show_image && $heroSettings->image;
        @endphp
        <div class="container hero-grid {{ $showHeroImage ? '' : 'hero-grid--single' }}">
          <div>
            <div class="kicker">
              <span class="kicker-dot" aria-hidden="true"></span>
              {{ $isAr ? 'أعمالنا · البرامج' : ($isKu ? 'کارەکانمان · بەرنامەکان' : 'Works · Programs') }}
            </div>
            <h1>{{ $isAr ? 'البرامج' : ($isKu ? 'بەرنامەکان' : 'Programs') }}</h1>
            <p>{{ $isAr ? 'نماذج برامجنا المضافة من لوحة التحكم.' : ($isKu ? 'بەرنامەکان لە داشبۆردەوە زیادکراون.' : 'Programs added from the admin dashboard.') }}</p>
            <div class="hero-actions">
              @if($isAr)
                <a class="btn btn-ghost" href="/ar/works.html">العودة لأعمالنا</a>
              @elseif($isKu)
                <a class="btn btn-ghost" href="/ku/works.html">گەڕانەوە بۆ کارەکانمان</a>
              @else
                <a class="btn btn-ghost" href="/works.html">Back to Works</a>
              @endif
            </div>
          </div>
          @if($showHeroImage)
            <div class="hero-card">
              <div class="hero-card-inner">
                <img class="hero-image" alt="Hero" src="{{ asset('storage/'.$heroSettings->image) }}" />
              </div>
            </div>
          @endif
        </div>
      </section>

      <section class="section">
        <div class="container">
          <div class="section-title">
            <div>
              <h2>{{ $isAr ? 'أعمال البرامج' : ($isKu ? 'کارەکانی بەرنامە' : 'Programs Portfolio') }}</h2>
            </div>
          </div>

          <div class="grid grid-3">
            @forelse($programs as $program)
              <div class="card">
                <div class="work-split">
                  <div class="work-split__media">
                    <img src="{{ asset('storage/'.$program->logo) }}" alt="{{ $program->{$nameField} }}">
                  </div>
                  <div class="work-split__body">
                    <div class="pill"><i aria-hidden="true"></i>{{ $isAr ? 'برنامج' : ($isKu ? 'بەرنامە' : 'Program') }}</div>
                    <h3>{{ $program->{$nameField} }}</h3>
                    <p>{{ $program->{$detailsField} }}</p>
                    <div class="work-split__actions">
                      <a class="btn btn-primary" href="{{ $program->url }}" target="_blank" rel="noopener">{{ $isAr ? 'عرض' : ($isKu ? 'بینین' : 'View') }}</a>
                    </div>
                  </div>
                </div>
              </div>
            @empty
              <div class="card">
                <h3>{{ $isAr ? 'لا توجد برامج بعد' : ($isKu ? 'هێشتا بەرنامە نییە' : 'No programs yet') }}</h3>
                <p>{{ $isAr ? 'سيتم عرض البرامج هنا بعد إضافتها من لوحة التحكم.' : ($isKu ? 'دوای زیادکردن لە داشبۆرد لێرە دەردەکەون.' : 'Programs will appear here after adding them from dashboard.') }}</p>
              </div>
            @endforelse
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="container footer-grid">
        @if($isAr)
          <span>© مشاريع إبداعية</span>
          <span>بغداد المنصور الداودي · 07719777917 · 07819777917</span>
        @elseif($isKu)
          <span>© Creative Projects Co.</span>
          <span>بەغدا - مەنسوور - داوودی · 07719777917 · 07819777917</span>
        @else
          <span>© Creative Projects Co.</span>
          <span>Baghdad Almansoor Aldawoodi · 07719777917 · 07819777917</span>
        @endif
      </div>
    </footer>

    <script src="/assets/app.js"></script>
  </body>
</html>
