<%- include('layouts/header') %>

<!-- Portfolio Detail Container -->
<section class="py-16 md:py-24 bg-brandSlate/10 relative">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    
    <!-- Navigation Back Link -->
    <div class="mb-8">
      <a href="/#portfolio" class="inline-flex items-center gap-2 text-sm font-semibold text-brandNavy hover:text-brandPurple transition">
        <i class="fa-solid fa-arrow-left text-xs"></i> Kembali ke Galeri
      </a>
    </div>

    <!-- Active Portfolio Card Article -->
    <article class="bg-white rounded-3xl border border-gray-100 shadow-xl overflow-hidden space-y-8 p-6 sm:p-10">
      
      <!-- Headers block -->
      <div class="space-y-4">
        <div class="flex flex-wrap items-center gap-2.5">
          <span class="px-3.5 py-1.5 rounded-full bg-brandPurple/10 text-brandPurple text-xs font-bold font-display uppercase tracking-wider"><%= portfolio.category %></span>
          <span class="w-1.5 h-1.5 rounded-full bg-gray-300"></span>
          <span class="text-xs font-bold text-gray-400 uppercase tracking-widest flex items-center gap-1">
            <i class="fa-regular fa-user text-[10px]"></i> <%= portfolio.client_name %>
          </span>
        </div>
        
        <h1 class="font-display font-extrabold text-3xl sm:text-4xl text-brandDark tracking-tight leading-tight">
          <%= portfolio.title %>
        </h1>
      </div>

      <!-- Main Showcase Image -->
      <div class="aspect-[16/9] w-full rounded-2xl overflow-hidden bg-gray-50 relative border border-gray-100/50">
        <% if (portfolio.image) { %>
          <img src="<%= portfolio.image %>" alt="<%= portfolio.title %>" class="w-full h-full object-cover" referrerPolicy="no-referrer">
        <% } else { %>
          <div class="w-full h-full flex items-center justify-center text-gray-300 text-5xl bg-gray-100">
            <i class="fa-regular fa-image"></i>
          </div>
        <% } %>
      </div>

      <!-- Body Details Grid -->
      <div class="grid grid-cols-1 md:grid-cols-12 gap-8 pt-4">
        
        <!-- Left Column: Rich Description -->
        <div class="md:col-span-8 space-y-6">
          <h2 class="font-display font-bold text-lg text-brandDark border-b border-gray-100 pb-3">Studi Kasus Proyek</h2>
          <div class="text-sm sm:text-base text-brandNavy/80 leading-relaxed whitespace-pre-wrap"><%= portfolio.description %></div>
        </div>

        <!-- Right Column: Project Meta Card -->
        <div class="md:col-span-4">
          <div class="p-6 rounded-2xl bg-brandSlate/30 border border-gray-100 space-y-5">
            <h3 class="font-display font-bold text-sm text-brandDark uppercase tracking-wider">Spesifikasi Proyek</h3>
            
            <hr class="border-gray-100">
            
            <div class="space-y-4 text-xs">
              <div>
                <span class="text-[10px] text-gray-400 font-extrabold block uppercase">Nama Klien</span>
                <span class="font-bold text-brandDark mt-0.5 block"><%= portfolio.client_name %></span>
              </div>
              
              <div>
                <span class="text-[10px] text-gray-400 font-extrabold block uppercase">Kategori Layanan</span>
                <span class="font-bold text-brandDark mt-0.5 block"><%= portfolio.category %></span>
              </div>
              
              <div>
                <span class="text-[10px] text-gray-400 font-extrabold block uppercase">Waktu Selesai</span>
                <span class="font-semibold text-brandDark mt-0.5 block">
                  <%= new Date(portfolio.created_at).toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' }) %>
                </span>
              </div>
            </div>

            <% if (portfolio.project_url) { %>
              <div class="pt-2">
                <a href="<%= portfolio.project_url %>" target="_blank" rel="noopener noreferrer" class="block w-full py-3 rounded-xl bg-brandNavy hover:bg-brandPurple text-white text-center font-bold text-xs shadow-md transition duration-200">
                  <i class="fa-solid fa-globe mr-1.5"></i> Kunjungi Live Website
                </a>
              </div>
            <% } %>
          </div>
        </div>

      </div>

    </article>

    <!-- Call To Action Panel -->
    <div class="mt-12 p-8 sm:p-10 rounded-3xl bg-gradient-to-tr from-brandDark via-brandNavy to-brandDark text-white flex flex-col md:flex-row items-center justify-between gap-6 shadow-xl">
      <div class="space-y-2 text-center md:text-left">
        <h3 class="font-display font-bold text-lg text-white">Ingin Punya Website Seperti Ini?</h3>
        <p class="text-xs text-gray-400 max-w-md leading-relaxed">Dadofy siap menciptakan desain website impian Anda yang disandingkan dengan server handal siap saji di hari ini.</p>
      </div>
      <a href="https://wa.me/<%= settings.whatsapp || '081234567890' %>?text=Halo%20Dadofy,%20saya%20tertarik%20dengan%20proyek%20<%= encodeURIComponent(portfolio.title) %>" target="_blank" rel="noopener noreferrer" class="px-6 py-3.5 rounded-xl bg-gradient-to-r from-brandBlue to-brandPurple text-white font-bold text-sm text-center shadow-lg hover:shadow-brandPurple/20 hover:scale-[1.02] active:scale-[0.98] transition">
        Konsultasikan Proyek WhatsApp
      </a>
    </div>

    <!-- Recommendations Grid -->
    <% if (locals.otherPortfolios && otherPortfolios.length > 0) { %>
      <div class="mt-20 space-y-8">
        <h3 class="font-display font-extrabold text-xl text-brandDark flex items-center gap-2">
          <i class="fa-solid fa-wand-magic-sparkles text-brandPurple"></i> Ide Proyek Menarik Lainnya
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <% otherPortfolios.forEach((p) => { %>
            <article class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden flex flex-col justify-between group hover:shadow-lg transition duration-300">
              <div>
                <div class="aspect-[16/10] overflow-hidden bg-gray-50 relative">
                  <% if (p.image) { %>
                    <img src="<%= p.image %>" alt="<%= p.title %>" class="w-full h-full object-cover group-hover:scale-103 transitionduration-300" referrerPolicy="no-referrer">
                  <% } else { %>
                    <div class="w-full h-full flex items-center justify-center text-gray-300 text-xl bg-gray-100">
                      <i class="fa-regular fa-image"></i>
                    </div>
                  <% } %>
                  <span class="absolute top-3 left-3 px-2.5 py-1 rounded-full bg-white/95 text-[10px] font-bold text-brandPurple shadow-sm"><%= p.category %></span>
                </div>
                
                <div class="p-5 space-y-2">
                  <h4 class="font-display font-bold text-sm text-brandDark line-clamp-2 hover:text-brandPurple transition">
                    <a href="/portfolio/<%= p.slug %>"><%= p.title %></a>
                  </h4>
                </div>
              </div>

              <div class="px-5 pb-5 pt-3 border-t border-gray-50 flex justify-start">
                <a href="/portfolio/<%= p.slug %>" class="text-xs font-bold text-brandPurple flex items-center gap-1 hover:underline">
                  Lihat Detail <i class="fa-solid fa-chevron-right text-[8px]"></i>
                </a>
              </div>
            </article>
          <% }) %>
        </div>
      </div>
    <% } %>

  </div>
</section>

<%- include('layouts/footer') %>
