<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames((['settings' => []]));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter((['settings' => []]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars, $__key, $__value); ?>

<div class="relative bg-gradient-to-br from-teal-50 via-slate-50 to-emerald-50 py-20 sm:py-32 overflow-hidden">
    <!-- Subtle overlay for texture -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-[0.03]"></div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-20">
            <span class="inline-flex items-center gap-2 py-1.5 px-4 rounded-full bg-white text-teal-700 text-sm font-bold tracking-widest uppercase mb-4 shadow-sm border border-teal-100">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
                The Journey
            </span>
            <h2 class="text-3xl font-extrabold text-slate-900 sm:text-5xl tracking-tight">Patient-Centered Step-by-Step Flow</h2>
            <p class="mt-4 max-w-2xl mx-auto text-xl text-slate-600">We walk with you every step of the way, ensuring clarity, comfort, and care.</p>
        </div>

        <div class="relative">
            <!-- Connecting dashed line -->
            <div class="hidden lg:block absolute top-1/2 left-0 w-full border-t-2 border-dashed border-teal-200 transform -translate-y-1/2 z-0"></div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12 relative z-10">
                <!-- Step 1 -->
                <div class="relative group">
                    <div class="bg-white rounded-2xl p-8 shadow-md border border-gray-100 transition-all duration-300 transform group-hover:-translate-y-2 group-hover:shadow-xl relative overflow-hidden h-full">
                        <div class="absolute -right-4 -bottom-4 text-9xl font-black text-teal-50 opacity-50 group-hover:text-teal-100 transition-colors duration-300 pointer-events-none">1</div>
                        <div class="w-14 h-14 rounded-2xl bg-teal-100 text-teal-600 flex items-center justify-center mb-6 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300">
                            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3 relative z-10"><?php echo e($settings['about_journey1_title'] ?? 'Initial Consultation'); ?></h3>
                        <p class="text-gray-500 text-sm leading-relaxed relative z-10"><?php echo e($settings['about_journey1_desc'] ?? 'A thorough discussion of your medical history, concerns, and goals in a comfortable, private setting.'); ?></p>
                    </div>
                </div>

                <!-- Step 2 -->
                <div class="relative group lg:mt-8">
                    <div class="bg-white rounded-2xl p-8 shadow-md border border-gray-100 transition-all duration-300 transform group-hover:-translate-y-2 group-hover:shadow-xl relative overflow-hidden h-full">
                        <div class="absolute -right-4 -bottom-4 text-9xl font-black text-teal-50 opacity-50 group-hover:text-teal-100 transition-colors duration-300 pointer-events-none">2</div>
                        <div class="w-14 h-14 rounded-2xl bg-teal-100 text-teal-600 flex items-center justify-center mb-6 transform group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-300">
                            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3 relative z-10"><?php echo e($settings['about_journey2_title'] ?? 'Precision Diagnostics'); ?></h3>
                        <p class="text-gray-500 text-sm leading-relaxed relative z-10"><?php echo e($settings['about_journey2_desc'] ?? 'Utilizing state-of-the-art diagnostic tools to accurately identify underlying conditions and factors.'); ?></p>
                    </div>
                </div>

                <!-- Step 3 -->
                <div class="relative group">
                    <div class="bg-white rounded-2xl p-8 shadow-md border border-gray-100 transition-all duration-300 transform group-hover:-translate-y-2 group-hover:shadow-xl relative overflow-hidden h-full">
                        <div class="absolute -right-4 -bottom-4 text-9xl font-black text-teal-50 opacity-50 group-hover:text-teal-100 transition-colors duration-300 pointer-events-none">3</div>
                        <div class="w-14 h-14 rounded-2xl bg-teal-100 text-teal-600 flex items-center justify-center mb-6 transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300">
                            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path></svg>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3 relative z-10"><?php echo e($settings['about_journey3_title'] ?? 'Tailored Treatment Plan'); ?></h3>
                        <p class="text-gray-500 text-sm leading-relaxed relative z-10"><?php echo e($settings['about_journey3_desc'] ?? 'Developing a customized, evidence-based strategy specifically designed for your unique needs and body.'); ?></p>
                    </div>
                </div>

                <!-- Step 4 -->
                <div class="relative group lg:mt-8">
                    <div class="bg-white rounded-2xl p-8 shadow-md border border-gray-100 transition-all duration-300 transform group-hover:-translate-y-2 group-hover:shadow-xl relative overflow-hidden h-full">
                        <div class="absolute -right-4 -bottom-4 text-9xl font-black text-teal-50 opacity-50 group-hover:text-teal-100 transition-colors duration-300 pointer-events-none">4</div>
                        <div class="w-14 h-14 rounded-2xl bg-teal-100 text-teal-600 flex items-center justify-center mb-6 transform group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-300">
                            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3 relative z-10"><?php echo e($settings['about_journey4_title'] ?? 'Recovery & Support'); ?></h3>
                        <p class="text-gray-500 text-sm leading-relaxed relative z-10"><?php echo e($settings['about_journey4_desc'] ?? 'Ongoing monitoring, post-treatment care, and dedicated emotional support to ensure lasting well-being.'); ?></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php /**PATH /Users/sumankc/Desktop/ Websites/Dr Rajan/resources/views/components/about/process-flow.blade.php ENDPATH**/ ?>