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

<!-- 1. SECTION HERO -->
<section class="relative bg-white overflow-hidden py-24 md:py-32 border-b border-gray-100">
  <!-- Minimal Ambient Background Ornaments -->
  <div class="absolute top-0 left-1/4 w-[500px] h-[500px] bg-gradient-to-tr from-brandBlue/5 to-brandPurple/5 rounded-full blur-3xl pointer-events-none -translate-y-1/2"></div>
  <div class="absolute bottom-0 right-10 w-96 h-96 bg-brandBlue/5 rounded-full blur-2xl pointer-events-none"></div>

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
      
      <!-- Copywrite and actions column -->
      <div class="lg:col-span-7 space-y-8 text-left">
        <!-- Floating badge indication -->
        <span class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-brandPurple/10 text-brandPurple text-xs font-bold font-display uppercase tracking-widest leading-none transform transition hover:-translate-y-0.5">
          <i class="fa-solid fa-sparkles text-[10px]"></i> Jasa Pembuatan Website & Server VPS
        </span>
        
        <h1 class="font-display font-black text-4xl sm:text-5xl lg:text-6xl text-brandDark tracking-tight leading-[1.1]">
          Website Profesional untuk Bisnis yang <span class="bg-gradient-to-r from-brandBlue to-brandPurple bg-clip-text text-transparent underline decoration-brandBlue/30 decoration-wavy">Mau Terlihat Serius</span>
        </h1>
        
        <p class="text-base sm:text-lg text-brandNavy/70 leading-relaxed max-w-2xl">
          Dadofy membantu kamu membuat website modern, cepat, dan responsif &mdash; lengkap dengan hosting dan VPS agar project digital kamu bisa langsung online tanpa ribet teknis.
        </p>
        
        <!-- CTA Actions bundle -->
        <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 pt-2">
          <a href="https://wa.me/<%= settings.whatsapp || '081234567890' %>?text=Halo%20Dadofy,%20saya%20tertarik%20untuk%20konsultasi%20pembuatan%20website" target="_blank" rel="noopener noreferrer" class="px-8 py-4 rounded-2xl bg-brandNavy text-white hover:bg-brandPurple font-bold shadow-lg shadow-brandNavy/10 hover:shadow-brandPurple/20 hover:scale-[1.01] transition text-center flex items-center justify-center gap-2">
            <i class="fa-brands fa-whatsapp text-lg"></i> Konsultasi Sekarang
          </a>
          <a href="#packages" class="px-8 py-4 rounded-2xl bg-white border-2 border-gray-100 hover:border-brandPurple hover:text-brandPurple font-bold text-brandNavy text-center transition flex items-center justify-center gap-2">
            Lihat Paket Website <i class="fa-solid fa-arrow-right text-xs"></i>
          </a>
        </div>
        
        <!-- Core keywords disclaimer -->
        <p class="text-xs text-gray-400 font-medium leading-relaxed max-w-lg">
          <i class="fa-solid fa-circle-check text-brandBlue mr-1"></i> Cocok untuk UMKM, sekolah, company profile, landing page, toko online, CBT online, dan sistem custom.
        </p>
      </div>

      <!-- Hero illustration visual -->
      <div class="lg:col-span-5 relative">
        <div class="relative mx-auto max-w-[380px] sm:max-w-[420px] aspect-square rounded-3xl bg-gradient-to-tr from-brandBlue/10 to-brandPurple/10 p-6 flex items-center justify-center shadow-2xl relative overflow-hidden">
          <div class="absolute inset-0 bg-white/40 backdrop-blur-2xl"></div>
          
          <!-- Mockup Platform Visual Card -->
          <div class="bg-white rounded-2xl shadow-xl w-full p-6 relative border border-gray-100/80 space-y-4">
            <div class="flex items-center justify-between border-b border-gray-100 pb-3">
              <div class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded-full bg-red-400"></span>
                <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
                <span class="w-3 h-3 rounded-full bg-green-400"></span>
              </div>
              <span class="text-[10px] font-mono text-gray-400 bg-gray-50 px-2.5 py-1 rounded">dadofy.id/my-awesome-site</span>
            </div>
            
            <div class="space-y-2">
              <div class="h-4 bg-gray-100 rounded w-2/3"></div>
              <div class="h-3 bg-gray-50 rounded w-5/6"></div>
              <div class="h-3 bg-gray-50 rounded w-full"></div>
            </div>
            
            <!-- Highlight statistics elements representing Website performance metrics -->
            <div class="grid grid-cols-2 gap-3 pt-2">
              <div class="bg-gradient-to-tr from-brandBlue/5 to-white p-3 rounded-xl border border-brandBlue/10 flex flex-col items-center">
                <span class="text-2xl font-bold font-display text-brandBlue">99.9%</span>
                <span class="text-[9px] font-bold text-gray-400 uppercase tracking-wider">Uptime Server</span>
              </div>
              <div class="bg-gradient-to-tr from-brandPurple/5 to-white p-3 rounded-xl border border-brandPurple/10 flex flex-col items-center">
                <span class="text-2xl font-bold font-display text-brandPurple">0.4s</span>
                <span class="text-[9px] font-bold text-gray-400 uppercase tracking-wider">Page Speed</span>
              </div>
            </div>
            
            <div class="pt-2 flex justify-end">
              <span class="text-[10px] py-1 px-3 bg-emerald-500/10 text-emerald-500 rounded-full font-bold uppercase tracking-wider flex items-center gap-1">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-ping"></span> SEO Optimized
              </span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- 2. SECTION LAYANAN -->
<section id="services" class="py-24 bg-brandSlate/40 relative">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Section Introduction -->
    <div class="text-center max-w-3xl mx-auto space-y-4 mb-16">
      <h2 class="text-xs font-display font-bold uppercase tracking-widest text-brandPurple">Spesialisasi Dadofy</h2>
      <p class="font-display font-extrabold text-3xl sm:text-4xl text-brandDark tracking-tight">
        Layanan Lengkap untuk Solusi Digital Tanpa Ribet
      </p>
      <p class="text-brandNavy/65 text-sm sm:text-base">
        Dari konsep desain visual hingga pengaturan server premium, kami menangani seluruh alur teknis untuk kesuksesan platform online Anda.
      </p>
    </div>

    <!-- Services Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      
      <!-- Service 1 -->
      <div class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 flex flex-col justify-between group">
        <div class="space-y-6">
          <div class="w-12 h-12 rounded-xl bg-brandBlue/10 flex items-center justify-center text-brandBlue text-xl group-hover:bg-brandBlue group-hover:text-white transition duration-300">
            <i class="fa-solid fa-code"></i>
          </div>
          <div class="space-y-2">
            <h3 class="font-display font-bold text-xl text-brandDark">Pembuatan Website</h3>
            <p class="text-sm text-brandNavy/70 leading-relaxed">
              Website modern, responsif, dan sesuai kebutuhan brand kamu. Mulai dari company profile, landing page, website sekolah, toko online, sampai sistem custom.
            </p>
          </div>
        </div>
        <div class="pt-6 border-t border-gray-50 mt-6 flex items-center text-xs font-semibold text-brandBlue gap-1">
          <span>Pelajari Desain Premium</span> <i class="fa-solid fa-chevron-right text-[9px] transform group-hover:translate-x-1 transition"></i>
        </div>
      </div>
      
      <!-- Service 2 -->
      <div class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 flex flex-col justify-between group">
        <div class="space-y-6">
          <div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center text-emerald-500 text-xl group-hover:bg-emerald-500 group-hover:text-white transition duration-300">
            <i class="fa-solid fa-cloud-arrow-up"></i>
          </div>
          <div class="space-y-2">
            <h3 class="font-display font-bold text-xl text-brandDark">Hosting Website</h3>
            <p class="text-sm text-brandNavy/70 leading-relaxed">
              Hosting siap pakai untuk website kamu. Dadofy bantu setup, upload, konfigurasi SSL, dan memastikan website bisa online dengan lancar tanpa batas bandwidth harian.
            </p>
          </div>
        </div>
        <div class="pt-6 border-t border-gray-50 mt-6 flex items-center text-xs font-semibold text-emerald-500 gap-1">
          <span>Hosting Instan</span> <i class="fa-solid fa-chevron-right text-[9px] transform group-hover:translate-x-1 transition"></i>
        </div>
      </div>
      
      <!-- Service 3 -->
      <div class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 flex flex-col justify-between group">
        <div class="space-y-6">
          <div class="w-12 h-12 rounded-xl bg-brandPurple/10 flex items-center justify-center text-brandPurple text-xl group-hover:bg-brandPurple group-hover:text-white transition duration-300">
            <i class="fa-solid fa-server"></i>
          </div>
          <div class="space-y-2">
            <h3 class="font-display font-bold text-xl text-brandDark">VPS Server</h3>
            <p class="text-sm text-brandNavy/70 leading-relaxed">
              Untuk project yang butuh performa lebih tinggi, akses server penuh, atau sistem custom, Dadofy menyediakan VPS dengan konfigurasi sesuai kebutuhan teknis sistem Anda.
            </p>
          </div>
        </div>
        <div class="pt-6 border-t border-gray-50 mt-6 flex items-center text-xs font-semibold text-brandPurple gap-1">
          <span>Kelola VPS Aman</span> <i class="fa-solid fa-chevron-right text-[9px] transform group-hover:translate-x-1 transition"></i>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- 3. SECTION PAKET WEBSITE -->
<section id="packages" class="py-24 bg-white relative">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Section Introduction -->
    <div class="text-center max-w-3xl mx-auto space-y-4 mb-16">
      <h2 class="text-xs font-display font-bold uppercase tracking-widest text-brandBlue">Pilihan Paket Ekonomis</h2>
      <p class="font-display font-extrabold text-3xl sm:text-4xl text-brandDark tracking-tight">
        Rincian Biaya Investasi Website Pembuatan
      </p>
      <p class="text-brandNavy/65 text-sm sm:text-base">
        Pilih paket yang paling cocok berdasarkan kebutuhan operasional dan tujuan bisnis Anda.
      </p>
    </div>

    <!-- Pricing Cards Layout -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch pt-4">
      
      <!-- Package 1: Starter -->
      <div class="bg-white rounded-2xl p-8 border border-gray-100 shadow-sm relative flex flex-col justify-between transform hover:scale-[1.01] transition-all duration-300">
        <div class="space-y-6">
          <div class="space-y-2">
            <span class="inline-block px-3 py-1 bg-gray-50 text-brandNavy font-extrabold text-[10px] uppercase rounded-full tracking-wider">PAKET PERSONAL</span>
            <h3 class="font-display font-extrabold text-2xl text-brandDark">Starter</h3>
            <div class="flex items-baseline gap-1 pt-2">
              <span class="text-sm font-semibold text-gray-400">Mulai</span>
              <span class="text-3xl font-black font-display text-brandDark">Rp500.000</span>
            </div>
            <p class="text-xs text-gray-400 leading-relaxed">Cocok untuk landing page, portofolio profil personal, atau instansi pemula.</p>
          </div>
          
          <hr class="border-gray-100">
          
          <ul class="space-y-4 text-sm text-brandNavy/80">
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandBlue"></i> 1 halaman landing page</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandBlue"></i> Desain responsive modern</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandBlue"></i> Tombol integrasi WhatsApp</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandBlue"></i> Optimasi SEO Basic harian</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandBlue"></i> Upload ke hosting langsung</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandBlue"></i> Revisi desain ringan 2x</li>
          </ul>
        </div>
        
        <div class="pt-8">
          <a href="https://wa.me/<%= settings.whatsapp || '081234567890' %>?text=Halo%20Dadofy,%20saya%20tertarik%20dengan%20Paket%20Starter%20Rp500rb" target="_blank" rel="noopener noreferrer" class="block w-full py-3.5 rounded-xl bg-gray-50 hover:bg-brandNavy hover:text-white text-center font-bold text-brandNavy transition text-sm">
            Pesan Paket Starter
          </a>
        </div>
      </div>
      
      <!-- Package 2: Business (RECOMMENDED / PREMIER VALUE) -->
      <div class="bg-white rounded-2xl p-8 border-2 border-brandPurple shadow-xl relative flex flex-col justify-between transform hover:scale-[1.01] transition-all duration-300">
        <!-- Floating highlight ribbon -->
        <span class="absolute top-0 right-1/2 translate-x-1/2 -translate-y-1/2 px-4 py-1 rounded-full bg-gradient-to-r from-brandBlue to-brandPurple text-white text-[10px] font-black uppercase tracking-wider shadow">PILIHAN FAVORIT</span>
        
        <div class="space-y-6 pt-3">
          <div class="space-y-2">
            <span class="inline-block px-3 py-1 bg-brandPurple/10 text-brandPurple font-extrabold text-[10px] uppercase rounded-full tracking-wider">PAKET UMKM / REGULAR</span>
            <h3 class="font-display font-extrabold text-2xl text-brandDark">Business</h3>
            <div class="flex items-baseline gap-1 pt-2">
              <span class="text-sm font-semibold text-gray-400">Mulai</span>
              <span class="text-3xl font-black font-display text-brandPurple bg-gradient-to-r from-brandBlue to-brandPurple bg-clip-text text-transparent">Rp1.500.000</span>
            </div>
            <p class="text-xs text-brandPurple/60 leading-relaxed">Website komprehensif profil bisnis profesional berfitur lengkap.</p>
          </div>
          
          <hr class="border-gray-100">
          
          <ul class="space-y-4 text-sm text-brandNavy/80">
            <li class="flex items-center gap-2 text-brandPurple font-semibold"><i class="fa-solid fa-star text-brandPurple"></i> Sampai 5 halaman website</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandPurple"></i> Desain custom modern premium</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandPurple"></i> Responsive mobile optimal</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandPurple"></i> Integrasi formulir kontak</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandPurple"></i> Link direct ke WhatsApp</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandPurple"></i> Google SEO Core Setup</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandPurple"></i> Setup Hosting & Domain gratis 1th</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandPurple"></i> Bantuan teknis & revisi</li>
          </ul>
        </div>
        
        <div class="pt-8">
          <a href="https://wa.me/<%= settings.whatsapp || '081234567890' %>?text=Halo%20Dadofy,%20saya%20tertarik%20dengan%20Paket%20Business%20Rp1.5jt" target="_blank" rel="noopener noreferrer" class="block w-full py-4 rounded-xl bg-gradient-to-r from-brandBlue to-brandPurple text-white text-center font-bold font-display shadow-md hover:shadow-lg transition text-sm">
            Pesan Paket Business
          </a>
        </div>
      </div>
      
      <!-- Package 3: Custom System -->
      <div class="bg-white rounded-2xl p-8 border border-gray-100 shadow-sm relative flex flex-col justify-between transform hover:scale-[1.01] transition-all duration-300">
        <div class="space-y-6">
          <div class="space-y-2">
            <span class="inline-block px-3 py-1 bg-gray-50 text-brandNavy font-extrabold text-[10px] uppercase rounded-full tracking-wider">PLATFORM CUSTOM</span>
            <h3 class="font-display font-extrabold text-2xl text-brandDark">Custom System</h3>
            <div class="flex items-baseline gap-1 pt-2">
              <span class="text-3xl font-black font-display text-brandDark">Harga Menyesuaikan</span>
            </div>
            <p class="text-xs text-gray-400 leading-relaxed">Sistem custom, aplikasi CBT online sekolah, e-commerce kompleks, dll.</p>
          </div>
          
          <hr class="border-gray-100">
          
          <ul class="space-y-4 text-sm text-brandNavy/80">
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandPurple"></i> Admin panel manajemen praktis</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandPurple"></i> Sistem login user & database terenskripsi</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandPurple"></i> Dashboard analitis performa</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandPurple"></i> Integrasi API payment gateway/eksternal</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandPurple"></i> Konfigurasi Server VPS premium</li>
            <li class="flex items-center gap-2"><i class="fa-solid fa-check text-brandPurple"></i> Opsi SLA Maintenance & Backups</li>
          </ul>
        </div>
        
        <div class="pt-8">
          <a href="https://wa.me/<%= settings.whatsapp || '081234567890' %>?text=Halo%20Dadofy,%20saya%20butuh%20kategori%20Website%20Custom%20Sistem" target="_blank" rel="noopener noreferrer" class="block w-full py-3.5 rounded-xl bg-gray-50 hover:bg-brandNavy hover:text-white text-center font-bold text-brandNavy transition text-sm">
            Konsultasi Kustomisasi
          </a>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- 4. SECTION HOSTING & VPS -->
<section id="hosting" class="py-24 bg-gradient-to-tr from-brandDark via-brandNavy to-brandDark text-white relative">
  <!-- Decorative visual overlay -->
  <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(123,44,191,0.15),transparent_50%)] pointer-events-none"></div>

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
      
      <!-- Copywrite and introductory card -->
      <div class="lg:col-span-5 space-y-6">
        <span class="inline-block px-3 py-1 rounded-full bg-brandBlue/20 text-brandBlue text-xs font-bold uppercase tracking-widest leading-none">SERVER & DOMAIN INTEGRASI</span>
        <h2 class="font-display font-extrabold text-3xl sm:text-4xl tracking-tight text-white leading-tight">
          Penyediaan Server Kecepatan Tinggi & Fleksibel
        </h2>
        <p class="text-sm text-gray-400 leading-relaxed">
          Semua produk website yang diproduksi oleh Dadofy didukung sepenuhnya oleh web hosting performa tinggi dan server privat berbasis Cloud (VPS). Kami menjamin website Anda dapat diakses secepat kilat dengan perlindungan filter keamanan SSL gratis.
        </p>
        
        <div class="flex items-center gap-4 pt-4 border-t border-white/5">
          <div class="flex items-center gap-2 text-xs font-semibold text-gray-300">
            <i class="fa-solid fa-lock text-brandBlue"></i> Let's Encrypt SSL Gratis
          </div>
          <div class="h-4 w-px bg-white/10"></div>
          <div class="flex items-center gap-2 text-xs font-semibold text-gray-300">
            <i class="fa-solid fa-gauge-high text-brandPurple"></i> NVMe Storage Cepat
          </div>
        </div>
      </div>

      <!-- Offering blocks -->
      <div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-8">
        
        <!-- Offer 1: Web Hosting -->
        <div class="bg-white/5 border border-white/10 rounded-2xl p-8 space-y-6 hover:bg-white/[0.08] transition duration-300">
          <div class="flex items-center justify-between">
            <div class="w-10 h-10 rounded-xl bg-brandBlue/20 flex items-center justify-center text-brandBlue">
              <i class="fa-solid fa-cloud"></i>
            </div>
            <span class="text-xs text-brandBlue font-bold bg-brandBlue/10 px-2.5 py-1 rounded-full">Web Hosting</span>
          </div>
          
          <div class="space-y-2">
            <h3 class="font-display font-extrabold text-xl text-white">Mulai Rp25.000<span class="text-xs text-gray-400 font-normal">/bulan</span></h3>
            <p class="text-xs text-gray-400 leading-relaxed">Penyimpanan hosting handal sangat direkomendasikan untuk situs company profile UMKM atau halaman landing page ringan.</p>
          </div>
          
          <ul class="space-y-3 text-xs text-gray-300">
            <li><i class="fa-solid fa-circle-check text-brandBlue mr-1.5"></i> Let's Encrypt SSL Gratis</li>
            <li><i class="fa-solid fa-circle-check text-brandBlue mr-1.5"></i> Custom Email Bisnis</li>
            <li><i class="fa-solid fa-circle-check text-brandBlue mr-1.5"></i> Bantuan Migrasi Situs</li>
          </ul>
        </div>
        
        <!-- Offer 2: VPS Server Privat -->
        <div class="bg-white/5 border border-white/10 rounded-2xl p-8 space-y-6 hover:bg-white/[0.08] transition duration-300">
          <div class="flex items-center justify-between">
            <div class="w-10 h-10 rounded-xl bg-brandPurple/25 flex items-center justify-center text-brandPurple">
              <i class="fa-solid fa-terminal"></i>
            </div>
            <span class="text-xs text-brandPurple font-bold bg-brandPurple/10 px-2.5 py-1 rounded-full">VPS Server</span>
          </div>
          
          <div class="space-y-2">
            <h3 class="font-display font-extrabold text-xl text-white">Mulai Rp100.000<span class="text-xs text-gray-400 font-normal">/bulan</span></h3>
            <p class="text-xs text-gray-400 leading-relaxed">Akses kontrol root server penuh untuk sistem operasional instansi custom, aplikasi CBT dengan lalu lintas data padat.</p>
          </div>
          
          <ul class="space-y-3 text-xs text-gray-300">
            <li><i class="fa-solid fa-circle-check text-brandPurple mr-1.5"></i> Full SSH Root Access</li>
            <li><i class="fa-solid fa-circle-check text-brandPurple mr-1.5"></i> Pilihan Sistem Panel</li>
            <li><i class="fa-solid fa-circle-check text-brandPurple mr-1.5"></i> Konfigurasi Awal Gratis</li>
          </ul>
        </div>

      </div>

    </div>
  </div>
</section>

<!-- 5. SECTION PORTFOLIO -->
<section id="portfolio" class="py-24 bg-white relative">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Section Introduction & Category selection -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-16">
      <div class="space-y-4 max-w-2xl text-left">
        <h2 class="text-xs font-display font-bold uppercase tracking-widest text-brandPurple">Galeri Klien</h2>
        <p class="font-display font-extrabold text-3xl sm:text-4xl text-brandDark tracking-tight">
          Karya Portfolio Hasil Produksi Dadofy
        </p>
        <p class="text-brandNavy/65 text-sm">
          Semua proyek dikerjakan secara eksklusif dengan fokus pada kecepatan performa, estetika modern, dan fungsionalitas bagi pengguna.
        </p>
      </div>
    </div>

    <!-- Portfolios Grid layout -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <% if (portfolios && portfolios.length > 0) { %>
        <% portfolios.forEach((p, index) => { %>
          <article class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden flex flex-col justify-between group hover:shadow-xl hover:-translate-y-1 transition-all duration-300" id="item-<%= p.id %>">
            <div>
              <!-- Portfolio Card Image -->
              <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-105 transition-all duration-500" referrerPolicy="no-referrer">
                <% } else { %>
                  <div class="w-full h-full flex items-center justify-center text-gray-300 text-3xl bg-gray-100">
                    <i class="fa-regular fa-image"></i>
                  </div>
                <% } %>
                <!-- Category badge on corner -->
                <span class="absolute top-4 left-4 px-3.5 py-1.5 rounded-full bg-white/95 backdrop-blur-sm text-xs font-bold text-brandPurple shadow-sm"><%= p.category %></span>
              </div>
              
              <!-- Content Body -->
              <div class="p-6 space-y-3">
                <div class="flex items-center gap-1.5 text-[10px] font-bold text-gray-400 uppercase tracking-widest">
                  <i class="fa-regular fa-folder-open text-[9px]"></i> <%= p.client_name %>
                </div>
                <h3 class="font-display font-bold text-lg text-brandDark hover:text-brandPurple transition line-clamp-2">
                  <a href="/portfolio/<%= p.slug %>"><%= p.title %></a>
                </h3>
                <p class="text-sm text-brandNavy/70 leading-relaxed line-clamp-3">
                  <%= p.description %>
                </p>
              </div>
            </div>

            <!-- Card Bottom buttons -->
            <div class="px-6 pb-6 pt-2 flex items-center justify-between border-t border-gray-50/80">
              <a href="/portfolio/<%= p.slug %>" class="text-xs font-bold text-brandPurple flex items-center gap-1 group/btn hover:underline">
                Rincian Studi Kasus <i class="fa-solid fa-arrow-right text-[10px] transform group-hover/btn:translate-x-0.5 transition"></i>
              </a>
              <% if (p.project_url) { %>
                <a href="<%= p.project_url %>" target="_blank" rel="noopener noreferrer" class="text-xs font-semibold text-brandNavy hover:text-brandBlue transition flex items-center gap-1">
                  <i class="fa-solid fa-globe text-[11px]"></i> Kunjungi
                </a>
              <% } %>
            </div>
          </article>
        <% }) %>
      <% } else { %>
        <div class="col-span-full py-16 text-center border border-dashed border-gray-200 rounded-2xl bg-brandSlate/40">
          <i class="fa-regular fa-folder-open text-4xl text-gray-300 mb-3"></i>
          <p class="text-sm font-semibold text-gray-500">Belum ada karya portfolio yang ditambahkan saat ini.</p>
        </div>
      <% } %>
    </div>

  </div>
</section>

<!-- 6. SECTION KENAPA PILIH DADOFY -->
<section id="why-us" class="py-24 bg-brandSlate/40 relative">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Section titles -->
    <div class="text-center max-w-3xl mx-auto space-y-4 mb-20">
      <h2 class="text-xs font-display font-bold uppercase tracking-widest text-brandPurple">Mengapa Harus Dadofy?</h2>
      <p class="font-display font-extrabold text-3xl sm:text-4xl text-brandDark tracking-tight">
        Fokus Kami Adalah Menghemat Waktu & Tenaga Anda
      </p>
    </div>

    <!-- Grid blocks -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      
      <!-- Perk 1 -->
      <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100/50 space-y-4">
        <div class="w-10 h-10 rounded-xl bg-orange-500/10 text-orange-500 flex items-center justify-center text-lg">
          <i class="fa-solid fa-crown"></i>
        </div>
        <h3 class="font-display font-bold text-base text-brandDark">Hasil Premium Eksklusif</h3>
        <p class="text-xs text-brandNavy/70 leading-relaxed">
          Tidak ada visual murahan. Kami merancang desain website modern yang dioptimalkan sesuai dengan tren startup masa kini.
        </p>
      </div>
      
      <!-- Perk 2 -->
      <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100/50 space-y-4">
        <div class="w-10 h-10 rounded-xl bg-brandBlue/10 text-brandBlue flex items-center justify-center text-lg">
          <i class="fa-solid fa-gauge-high"></i>
        </div>
        <h3 class="font-display font-bold text-base text-brandDark">Akses Cepat Kilat</h3>
        <p class="text-xs text-brandNavy/70 leading-relaxed">
          Optimasi performa halaman secara ketat agar website memiliki respon pemuatan konten minimal, ramah dicrawl Google.
        </p>
      </div>
      
      <!-- Perk 3 -->
      <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100/50 space-y-4">
        <div class="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center text-lg">
          <i class="fa-solid fa-circle-check"></i>
        </div>
        <h3 class="font-display font-bold text-base text-brandDark">Beres Masalah Teknis</h3>
        <p class="text-xs text-brandNavy/70 leading-relaxed">
          Dari file transfer, konfigurasi domain, server VPS, sampai instalasi keamanan link SSL kami tangani 100% tuntas.
        </p>
      </div>
      
      <!-- Perk 4 -->
      <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100/50 space-y-4">
        <div class="w-10 h-10 rounded-xl bg-brandPurple/10 text-brandPurple flex items-center justify-center text-lg">
          <i class="fa-solid fa-headset"></i>
        </div>
        <h3 class="font-display font-bold text-base text-brandDark">Konsultasi Ramah & Cepat</h3>
        <p class="text-xs text-brandNavy/70 leading-relaxed">
          Tim Dadofy selalu responsif memecahkan hambatan harian, mengarahkan saran terbaik bagi rencana operasional platform digital Anda.
        </p>
      </div>

    </div>
  </div>
</section>

<!-- 7. SECTION TESTIMONIAL -->
<section id="testimonials" class="py-24 bg-white relative">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Section labels -->
    <div class="text-center max-w-3xl mx-auto space-y-4 mb-20">
      <h2 class="text-xs font-display font-bold uppercase tracking-widest text-brandPurple">Suara Klien Kami</h2>
      <p class="font-display font-extrabold text-3xl sm:text-4xl text-brandDark tracking-tight">
        Apa Kata Mereka Tentang Dadofy?
      </p>
    </div>

    <!-- Review items grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      
      <!-- Review 1 -->
      <blockquote class="bg-brandSlate/30 rounded-2xl p-8 space-y-6 flex flex-col justify-between relative">
        <div class="absolute top-6 right-8 text-brandPurple/10 text-5xl font-serif">“</div>
        <p class="text-sm text-brandNavy/80 leading-relaxed relative z-10">
          "Website landing page bikinan Dadofy bener-bener membantu jaminan brand busana kami naik kelas. Ditambah servernya dapet hosting kenceng, diakses tanpa buffering sama sekali!"
        </p>
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-brandPurple/20 text-brandPurple flex items-center justify-center font-bold text-sm">Z</div>
          <div>
            <cite class="not-italic font-bold text-sm block text-brandDark">Zahra Amalia</cite>
            <span class="text-[10px] text-gray-400 font-semibold uppercase">Zahra Hijab Style</span>
          </div>
        </div>
      </blockquote>
      
      <!-- Review 2 -->
      <blockquote class="bg-brandSlate/30 rounded-2xl p-8 space-y-6 flex flex-col justify-between relative">
        <div class="absolute top-6 right-8 text-brandPurple/10 text-5xl font-serif">“</div>
        <p class="text-sm text-brandNavy/80 leading-relaxed relative z-10">
          "Dadofy ngerjain web profile madrasah kami lengkap sama server VPS untuk ujian CBT. Siswa ngerjain ujian lancar jaya, CS-nya sangat ramah bantu konfigurasi DNS!"
        </p>
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-brandBlue/20 text-brandBlue flex items-center justify-center font-bold text-sm">H</div>
          <div>
            <cite class="not-italic font-bold text-sm block text-brandDark">Ustadz Hasan</cite>
            <span class="text-[10px] text-gray-400 font-semibold uppercase">Madrasah Aliyah Hidayat</span>
          </div>
        </div>
      </blockquote>
      
      <!-- Review 3 -->
      <blockquote class="bg-brandSlate/30 rounded-2xl p-8 space-y-6 flex flex-col justify-between relative">
        <div class="absolute top-6 right-8 text-brandPurple/10 text-5xl font-serif">“</div>
        <p class="text-sm text-brandNavy/80 leading-relaxed relative z-10">
          "Pusing ngurusin backend IT terjawab tuntas berkat jasa Custom System Dadofy. Landing page dapet, domain beres, server terkonfigurasi otomatis sesuai load harian."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-orange-500/10 text-orange-500 flex items-center justify-center font-bold text-sm">Y</div>
          <div>
            <cite class="not-italic font-bold text-sm block text-brandDark">Yudi Hermanto</cite>
            <span class="text-[10px] text-gray-400 font-semibold uppercase">PT Cahaya Logistik Nusantara</span>
          </div>
        </div>
      </blockquote>

    </div>
  </div>
</section>

<!-- 8. SECTION KONTAK -->
<section id="contact" class="py-24 bg-brandSlate/40 border-t border-gray-100 relative overflow-hidden">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-stretch">
      
      <!-- Left detail indicators list -->
      <div class="lg:col-span-5 flex flex-col justify-between space-y-8">
        <div class="space-y-4">
          <span class="inline-block px-3 py-1 rounded-full bg-brandPurple/10 text-brandPurple text-xs font-bold uppercase tracking-widest leading-none">KONTAK RESPONSIF</span>
          <h2 class="font-display font-extrabold text-3xl sm:text-4xl text-brandDark tracking-tight leading-tight">
            Konsultasikan Impian Digital Anda Bersama Kami
          </h2>
          <p class="text-sm text-brandNavy/70 leading-relaxed">
            Punya ide program yang butuh digarap cepat? Hubungi tim support Dadofy hari ini. Kami selalu siap mendengar detail perencanaan platform Anda dengan seksama.
          </p>
        </div>
        
        <!-- Interactive metadata cards -->
        <div class="space-y-4">
          <div class="p-5 bg-white rounded-2xl border border-gray-100 flex items-center gap-4">
            <div class="w-11 h-11 bg-emerald-500/10 rounded-xl text-emerald-500 flex items-center justify-center text-lg">
              <i class="fa-brands fa-whatsapp"></i>
            </div>
            <div>
              <span class="text-[10px] text-gray-400 font-bold block">FAST RESPOND</span>
              <a href="https://wa.me/<%= settings.whatsapp %>" target="_blank" rel="noopener noreferrer" class="font-bold text-brandDark hover:text-brandPurple transition text-sm"><%= settings.whatsapp || '081234567890' %></a>
            </div>
          </div>
          
          <div class="p-5 bg-white rounded-2xl border border-gray-100 flex items-center gap-4">
            <div class="w-11 h-11 bg-brandBlue/10 rounded-xl text-brandBlue flex items-center justify-center text-lg">
              <i class="fa-solid fa-envelope"></i>
            </div>
            <div>
              <span class="text-[10px] text-gray-400 font-bold block">SUPPORT EMAIL</span>
              <a href="mailto:<%= settings.email %>" class="font-bold text-brandDark hover:text-brandPurple transition text-sm"><%= settings.email || 'halo@dadofy.id' %></a>
            </div>
          </div>
        </div>
        
        <p class="text-xs text-gray-400 leading-relaxed font-semibold">
          <i class="fa-solid fa-shield-halved text-brandPurple mr-1"></i> Data dan pesan Anda terenkripsi aman secara privat bersama Dadofy. Live 24/7.
        </p>
      </div>

      <!-- Contact input message panel -->
      <div class="lg:col-span-7">
        <div class="bg-white rounded-3xl p-8 sm:p-10 shadow-xl border border-gray-100 space-y-6">
          <div class="space-y-2">
            <h3 class="font-display font-bold text-xl text-brandDark">Formulir Kontak</h3>
            <p class="text-xs text-brandNavy/60 leading-relaxed">Silakan lengkapi formulir di bawah ini, tim support Dadofy akan membalas pesan Anda sesegera mungkin.</p>
          </div>
          
          <form action="/contact" method="POST" id="contactInquiryForm" class="space-y-5">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <!-- Full name -->
            <div>
              <label for="name" class="block text-xs font-bold text-brandNavy/80 mb-1.5 uppercase tracking-wider">Nama Lengkap *</label>
              <input type="text" name="name" id="name" required placeholder="Contoh: Zahra Amalia" class="w-full px-4 py-3 bg-brandSlate/40 hover:bg-brandSlate border border-transparent focus:border-brandPurple focus:bg-white rounded-xl text-sm text-brandDark font-medium outline-none transition duration-200">
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
              <!-- Email address -->
              <div>
                <label for="email" class="block text-xs font-bold text-brandNavy/80 mb-1.5 uppercase tracking-wider">Alamat Email *</label>
                <input type="email" name="email" id="email" required placeholder="name@yourcompany.com" class="w-full px-4 py-3 bg-brandSlate/40 hover:bg-brandSlate border border-transparent focus:border-brandPurple focus:bg-white rounded-xl text-sm text-brandDark font-medium outline-none transition duration-200">
              </div>
              
              <!-- Phone with WA flag -->
              <div>
                <label for="phone" class="block text-xs font-bold text-brandNavy/80 mb-1.5 uppercase tracking-wider">Nomor Handphone / WA *</label>
                <div class="relative">
                  <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-xs font-bold text-emerald-500">
                    <i class="fa-brands fa-whatsapp text-sm"></i>
                  </span>
                  <input type="tel" name="phone" id="phone" required placeholder="08XXXXXXXXXX" class="w-full pl-10 pr-4 py-3 bg-brandSlate/40 hover:bg-brandSlate border border-transparent focus:border-brandPurple focus:bg-white rounded-xl text-sm text-brandDark font-medium outline-none transition duration-200">
                </div>
              </div>
            </div>
            
            <!-- Target service dropdown selection -->
            <div>
              <label for="service" class="block text-xs font-bold text-brandNavy/80 mb-1.5 uppercase tracking-wider">Layanan Yang Dibutuhkan *</label>
              <select name="service" id="service" required class="w-full px-4 py-3 bg-brandSlate/40 hover:bg-brandSlate border border-transparent focus:border-brandPurple focus:bg-white rounded-xl text-sm text-brandDark font-semibold outline-none transition duration-200 cursor-pointer">
                <option value="" disabled selected class="text-gray-400 font-normal">-- Pilih salah satu kebutuhan Anda --</option>
                <option value="Pembuatan Website (Starter)" class="text-brandDark font-medium">Pembuatan Website (Starter - Rp500.000)</option>
                <option value="Pembuatan Website (Business)" class="text-brandDark font-medium">Pembuatan Website (Business - Rp1.500.000)</option>
                <option value="Pembuatan Website Kustom Sistem" class="text-brandDark font-medium">Pembuatan Website Kustom (E-Commerce / CBT / ERP)</option>
                <option value="Server Cloud VPS & Konfigurasi" class="text-brandDark font-medium">Server Cloud VPS & Konfigurasi Server</option>
                <option value="Layanan Web Hosting Siap Pakai" class="text-brandDark font-medium">Layanan Web Hosting Siap Pakai</option>
              </select>
            </div>
            
            <!-- Client message textarea -->
            <div>
              <label for="message" class="block text-xs font-bold text-brandNavy/80 mb-1.5 uppercase tracking-wider">Pesan / Detail Rencana *</label>
              <textarea name="message" id="message" rows="4" required placeholder="Ceritakan konsep website impian Anda, atau sistem khusus yang ingin Anda buat..." class="w-full px-4 py-3 bg-brandSlate/40 hover:bg-brandSlate border border-transparent focus:border-brandPurple focus:bg-white rounded-xl text-sm text-brandDark font-medium outline-none transition duration-200 resize-none"></textarea>
            </div>
            
            <!-- Submit CTA -->
            <div class="pt-2">
              <button type="submit" class="w-full py-4 rounded-xl bg-brandNavy hover:bg-brandPurple text-white font-extrabold text-sm tracking-wide shadow-md hover:shadow-xl hover:shadow-brandPurple/20 hover:scale-[1.01] active:scale-[0.99] transition cursor-pointer flex items-center justify-center gap-2">
                <i class="fa-solid fa-paper-plane text-xs"></i> Kirim Formulir Sekarang
              </button>
            </div>
          </form>
        </div>
      </div>

    </div>
  </div>
</section>

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