Enterprise Solutions Projects Section

<section id="enterprise-solutions-section"
  class="bg-[#F4F4F5] text-[#18181B] py-24 px-6 lg:px-12 relative overflow-hidden"
  style="font-family: 'Plus Jakarta Sans', sans-serif;">
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <div class="max-w-7xl mx-auto">
    <div class="flex flex-col lg:flex-row justify-between items-end mb-16">
      <div class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.05s_both]">
        <h2 class="lg:text-5xl leading-none text-4xl font-medium text-[#18181B] mb-4 tracking-tight">
          Enterprise Solutions
        </h2>
        <p class="text-[#52525B] max-w-sm text-sm leading-relaxed">
          Scalable intelligence frameworks designed for high-compliance industries requiring precision and transparency.
        </p>
      </div>

      <div class="flex gap-4 mt-8 lg:mt-0 animate-on-scroll [animation:animationIn_0.8s_ease-out_0.1s_both]">
        <button onclick="setEnterpriseView('grid')" id="btn-grid" class="w-10 h-10 rounded-lg border border-[#E4E4E7] flex items-center justify-center bg-[#18181B] text-white transition-all duration-300 shadow-sm active:scale-95">
          <iconify-icon icon="solar:widget-4-bold-duotone" class="text-lg"></iconify-icon>
        </button>
        <button onclick="setEnterpriseView('list')" id="btn-list" class="w-10 h-10 rounded-lg border border-[#D4D4D8] flex items-center justify-center hover:bg-[#18181B]/5 bg-white text-[#18181B] transition-all duration-300 shadow-sm active:scale-95">
          <iconify-icon icon="solar:list-bold-duotone" class="text-lg"></iconify-icon>
        </button>
      </div>
    </div>

    <div id="projects-container" class="grid grid-cols-1 lg:grid-cols-2 gap-8 transition-all duration-500 ease-in-out">
      <!-- Project 1 -->
      <div class="group cursor-pointer project-item animate-on-scroll [animation:animationIn_0.8s_ease-out_0.1s_both]">
        <div
          class="relative aspect-[16/9] rounded-xl overflow-hidden mb-6 bg-white border border-gray-200 project-img-container shadow-sm transition-all duration-500">
          <div class="absolute inset-0 bg-gradient-to-tr from-gray-200/40 to-transparent opacity-50 z-10"></div>
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2e13f2ca-7986-4882-9d8c-9df127af1ae2_1600w.webp" alt="Supply Chain" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale group-hover:grayscale-0">
          <div
            class="absolute top-4 right-4 z-20 px-3 py-1.5 bg-white/90 backdrop-blur-md text-[10px] font-bold uppercase tracking-widest rounded-md text-[#18181B] border border-gray-100 shadow-sm">
            Automated Reasoning
          </div>
        </div>
        <div class="flex justify-between items-start border-t border-[#E4E4E7] pt-5 project-details">
          <div class="transition-all duration-300">
            <h3
              class="text-xl text-[#18181B] mb-1 group-hover:text-blue-600 transition-colors font-medium tracking-tight">
              Supply Chain Optimization
            </h3>
            <p class="text-xs text-[#71717A] font-mono uppercase tracking-wider">Logistics • Global Integration</p>
          </div>
          <div class="text-right">
            <div
              class="w-10 h-10 rounded-full border border-gray-100 flex items-center justify-center group-hover:border-blue-100 group-hover:bg-blue-50 transition-all duration-300">
              <iconify-icon icon="solar:arrow-up-right-bold-duotone"
                class="text-[#D4D4D8] group-hover:text-blue-600 text-xl"></iconify-icon>
            </div>
          </div>
        </div>
      </div>

      <!-- Project 2 -->
      <div
        class="group cursor-pointer lg:mt-24 project-item animate-on-scroll [animation:animationIn_0.8s_ease-out_0.15s_both]">
        <div
          class="relative aspect-[16/9] rounded-xl overflow-hidden mb-6 bg-white border border-gray-200 project-img-container shadow-sm transition-all duration-500">
          <div class="absolute inset-0 bg-gradient-to-tr from-gray-200/40 to-transparent opacity-50 z-10"></div>
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3e8aafa6-ac2a-49d2-9210-669e81a00e21_1600w.webp" alt="Healthcare" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 grayscale group-hover:grayscale-0">
          <div
            class="absolute top-4 right-4 z-20 px-3 py-1.5 bg-white/90 backdrop-blur-md text-[10px] font-bold uppercase tracking-widest rounded-md text-[#18181B] border border-gray-100 shadow-sm">
            Bio-Informatics
          </div>
        </div>
        <div class="flex justify-between items-start border-t border-[#E4E4E7] pt-5 project-details">
          <div class="transition-all duration-300">
            <h3
              class="text-xl text-[#18181B] mb-1 group-hover:text-blue-600 transition-colors font-medium tracking-tight">
              Diagnostic Neural Net
            </h3>
            <p class="text-xs text-[#71717A] font-mono uppercase tracking-wider">Healthcare • Geneva R&D</p>
          </div>
          <div class="text-right">
            <div
              class="w-10 h-10 rounded-full border border-gray-100 flex items-center justify-center group-hover:border-blue-100 group-hover:bg-blue-50 transition-all duration-300">
              <iconify-icon icon="solar:arrow-up-right-bold-duotone"
                class="text-[#D4D4D8] group-hover:text-blue-600 text-xl"></iconify-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function setEnterpriseView(view) {
      const container = document.getElementById("projects-container");
      const btnGrid = document.getElementById("btn-grid");
      const btnList = document.getElementById("btn-list");
      const items = document.querySelectorAll(".project-item");
      const imgContainers = document.querySelectorAll(".project-img-container");

      container.style.opacity = "0";
      container.style.transform = "translateY(10px)";

      setTimeout(() => {
        if (view === "list") {
          container.classList.remove("grid-cols-1", "lg:grid-cols-2");
          container.classList.add("flex", "flex-col", "gap-12");

          btnGrid.className = "w-10 h-10 rounded-lg border border-[#D4D4D8] flex items-center justify-center bg-white text-[#18181B] transition-all duration-300 shadow-sm";
          btnList.className = "w-10 h-10 rounded-lg border border-[#E4E4E7] flex items-center justify-center bg-[#18181B] text-white transition-all duration-300 shadow-sm";

          items.forEach((item) => {
            item.classList.add("lg:flex", "lg:gap-12", "lg:items-center");
            item.classList.remove("lg:mt-24");
          });
          imgContainers.forEach((div) => {
            div.classList.remove("mb-6", "aspect-[16/9]");
            div.classList.add("lg:w-2/5", "lg:mb-0", "aspect-video");
          });
        } else {
          container.classList.remove("flex", "flex-col", "gap-12");
          container.classList.add("grid-cols-1", "lg:grid-cols-2");

          btnGrid.className = "w-10 h-10 rounded-lg border border-[#E4E4E7] flex items-center justify-center bg-[#18181B] text-white transition-all duration-300 shadow-sm";
          btnList.className = "w-10 h-10 rounded-lg border border-[#D4D4D8] flex items-center justify-center bg-white text-[#18181B] transition-all duration-300 shadow-sm";

          items.forEach((item, index) => {
            item.classList.remove("lg:flex", "lg:gap-12", "lg:items-center");
            if (index === 1) item.classList.add("lg:mt-24");
          });
          imgContainers.forEach((div) => {
            div.classList.add("mb-6", "aspect-[16/9]");
            div.classList.remove("lg:w-2/5", "lg:mb-0", "aspect-video");
          });
        }

        container.style.opacity = "1";
        container.style.transform = "translateY(0)";
        
        if (window.initInViewAnimations) window.initInViewAnimations();
      }, 300);
    }
  </script>
</section>