{% load static %}
<section id="how-it-works" class="relative z-0 py-12 sm:py-16 scroll-mt-20" data-animate>
  <div class="max-w-6xl mx-auto px-6">
    <div class="text-center mb-12 sm:mb-16">
      <span class="inline-flex items-center text-xs font-bold tracking-[0.25em] uppercase text-indigo-500">How it works</span>
      <h2 class="mt-3 text-4xl sm:text-5xl font-light text-slate-900 tracking-tight">From idea to results in&nbsp;minutes</h2>
    </div>

    <div class="relative">
      <!-- Connecting line (desktop only) -->
      <div class="hidden lg:block absolute top-[72px] left-[10%] right-[10%] h-px border-t-2 border-dashed border-indigo-200 z-0"></div>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-4 relative z-10">

        <!-- Step 1: Describe -->
        <div class="flex flex-col items-center text-center" data-animate>
          <div class="w-28 h-28 sm:w-32 sm:h-32 mb-4 rounded-2xl bg-indigo-50/60 flex items-center justify-center p-4">
            <img src="{% static 'images/undraw/setup-wizard.svg' %}" alt="" class="w-full h-full object-contain" loading="lazy">
          </div>
          <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-violet-600 text-white text-xs font-bold mb-2">1</span>
          <h3 class="text-sm font-semibold text-slate-900">Describe the work</h3>
          <p class="mt-1 text-xs text-slate-500 leading-relaxed max-w-[180px]">Tell your agent what to do in plain English</p>
        </div>

        <!-- Step 2: Delegate -->
        <div class="flex flex-col items-center text-center" data-animate>
          <div class="w-28 h-28 sm:w-32 sm:h-32 mb-4 rounded-2xl bg-indigo-50/60 flex items-center justify-center p-4">
            <img src="{% static 'images/undraw/message-sent.svg' %}" alt="" class="w-full h-full object-contain" loading="lazy">
          </div>
          <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-violet-600 text-white text-xs font-bold mb-2">2</span>
          <h3 class="text-sm font-semibold text-slate-900">Delegate like a coworker</h3>
          <p class="mt-1 text-xs text-slate-500 leading-relaxed max-w-[180px]">Email, text, or chat &mdash; your agent has its own identity</p>
        </div>

        <!-- Step 3: Agent works -->
        <div class="flex flex-col items-center text-center" data-animate>
          <div class="w-28 h-28 sm:w-32 sm:h-32 mb-4 rounded-2xl bg-indigo-50/60 flex items-center justify-center p-4">
            <img src="{% static 'images/undraw/web-search.svg' %}" alt="" class="w-full h-full object-contain" loading="lazy">
          </div>
          <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-violet-600 text-white text-xs font-bold mb-2">3</span>
          <h3 class="text-sm font-semibold text-slate-900">Your agent goes to work</h3>
          <p class="mt-1 text-xs text-slate-500 leading-relaxed max-w-[180px]">Browses the web, collects data, fills forms &mdash; 24/7</p>
        </div>

        <!-- Step 4: Results -->
        <div class="flex flex-col items-center text-center" data-animate>
          <div class="w-28 h-28 sm:w-32 sm:h-32 mb-4 rounded-2xl bg-indigo-50/60 flex items-center justify-center p-4">
            <img src="{% static 'images/undraw/files-sent.svg' %}" alt="" class="w-full h-full object-contain" loading="lazy">
          </div>
          <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-violet-600 text-white text-xs font-bold mb-2">4</span>
          <h3 class="text-sm font-semibold text-slate-900">Real deliverables</h3>
          <p class="mt-1 text-xs text-slate-500 leading-relaxed max-w-[180px]">Reports, CSVs, PDFs &mdash; emailed right to your inbox</p>
        </div>

        <!-- Step 5: Collaborate -->
        <div class="flex flex-col items-center text-center" data-animate>
          <div class="w-28 h-28 sm:w-32 sm:h-32 mb-4 rounded-2xl bg-indigo-50/60 flex items-center justify-center p-4">
            <img src="{% static 'images/undraw/work-chat.svg' %}" alt="" class="w-full h-full object-contain" loading="lazy">
          </div>
          <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-violet-600 text-white text-xs font-bold mb-2">5</span>
          <h3 class="text-sm font-semibold text-slate-900">Iterate together</h3>
          <p class="mt-1 text-xs text-slate-500 leading-relaxed max-w-[180px]">Review, refine, and build on results like a real teammate</p>
        </div>

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