<section class="py-16 md:py-24 bg-slate-100 dark:bg-slate-800/50">
    <div class="container mx-auto px-4">
        <div class="text-center mb-16">
            <h2 class="text-3xl sm:text-4xl font-bold text-gray-800 dark:text-white">Create Your Website in 3 Simple Steps</h2>
            <p class="mt-4 text-lg text-gray-600 dark:text-gray-300 max-w-xl mx-auto">Building your online presence has never been easier.</p>
        </div>
        <div class="grid md:grid-cols-3 gap-8 md:gap-12 relative">
            {{-- Connecting lines (decorative) --}}
            <div class="hidden md:block absolute top-1/2 left-0 right-0 h-0.5 bg-blue-200 dark:bg-blue-700 transform -translate-y-1/2 -z-10"></div>
            <div class="hidden md:block absolute top-1/2 left-1/4 w-8 h-8 bg-blue-500 dark:bg-blue-400 rounded-full transform -translate-x-1/2 -translate-y-1/2 ring-4 ring-slate-100 dark:ring-slate-800/50"></div>
            <div class="hidden md:block absolute top-1/2 right-1/4 w-8 h-8 bg-blue-500 dark:bg-blue-400 rounded-full transform translate-x-1/2 -translate-y-1/2 ring-4 ring-slate-100 dark:ring-slate-800/50"></div>

            {{-- Step 1 --}}
            <div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg relative">
                <div class="absolute -top-6 left-1/2 -translate-x-1/2 bg-blue-500 text-white w-12 h-12 rounded-full flex items-center justify-center text-2xl font-bold shadow-md">1</div>
                <div class="text-blue-500 dark:text-blue-400 mt-8 mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-6.75 3h9m-9 3h9M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-700 dark:text-white mb-2">Describe Your Vision</h3>
                <p class="text-gray-500 dark:text-gray-400 text-sm">Tell our AI about your business, style preferences, and desired features.</p>
            </div>
            {{-- Step 2 --}}
            <div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg relative">
                <div class="absolute -top-6 left-1/2 -translate-x-1/2 bg-blue-500 text-white w-12 h-12 rounded-full flex items-center justify-center text-2xl font-bold shadow-md">2</div>
                <div class="text-green-500 dark:text-green-400 mt-8 mb-4">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.25 12h.008v.008h-.008V12zm0 0h.008v.008h-.008V12zm0 0h.008v.008h-.008V12zm0 0h.008v.008h-.008V12z" /></svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-700 dark:text-white mb-2">AI Generates</h3>
                <p class="text-gray-500 dark:text-gray-400 text-sm">Watch as WebPilot AI instantly crafts a complete, unique website draft for you.</p>
            </div>
            {{-- Step 3 --}}
            <div class="text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg relative">
                <div class="absolute -top-6 left-1/2 -translate-x-1/2 bg-blue-500 text-white w-12 h-12 rounded-full flex items-center justify-center text-2xl font-bold shadow-md">3</div>
                <div class="text-purple-500 dark:text-purple-400 mt-8 mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 11.25h9.75m-9.75 5.25h9.75M3.75 6.75h1.5v1.5h-1.5v-1.5zm0 4.5h1.5v1.5h-1.5v-1.5zm0 4.5h1.5v1.5h-1.5v-1.5z" /></svg>
                </div>
                <h3 class="text-xl font-semibold text-gray-700 dark:text-white mb-2">Customize & Launch</h3>
                <p class="text-gray-500 dark:text-gray-400 text-sm">Use our easy editor to perfect your site, then deploy it to the world.</p>
            </div>
        </div>
    </div>
</section>
