@extends('layouts.app')
@section('title', 'Why Laparoscopy | Dr. Rajan Shah')

@section('content')
<div class="bg-white py-16 sm:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-base text-teal-600 font-semibold tracking-wide uppercase">Advanced Surgical Care</h2>
            <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                Why Choose Laparoscopy?
            </p>
            <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
                Minimally invasive surgery offers significant benefits over traditional open surgery, utilizing state-of-the-art 3D 4K technology.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Benefit 1 -->
            <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100 hover:border-teal-300 transition-colors">
                <div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center mb-6 text-teal-600">
                    <svg class="w-6 h-6" 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">Reduced Pain</h3>
                <p class="text-gray-600">Smaller incisions mean significantly less post-operative pain and reduced need for pain medication compared to traditional surgery.</p>
            </div>
            
            <!-- Benefit 2 -->
            <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100 hover:border-teal-300 transition-colors">
                <div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center mb-6 text-teal-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3">Shorter Recovery Time</h3>
                <p class="text-gray-600">Patients typically experience a much faster recovery, often leaving the hospital the same day or the next day.</p>
            </div>

            <!-- Benefit 3 -->
            <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100 hover:border-teal-300 transition-colors">
                <div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center mb-6 text-teal-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3">Reduced Bleeding</h3>
                <p class="text-gray-600">Enhanced visualization and precise instruments result in minimal blood loss during the procedure.</p>
            </div>

            <!-- Benefit 4 -->
            <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100 hover:border-teal-300 transition-colors">
                <div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center mb-6 text-teal-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3">Least Chance of Infection</h3>
                <p class="text-gray-600">Smaller incisions limit the exposure of internal organs to potential contaminants, drastically reducing infection risks.</p>
            </div>

            <!-- Benefit 5 -->
            <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100 hover:border-teal-300 transition-colors">
                <div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center mb-6 text-teal-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.121 15.536c-1.171 1.952-3.07 1.952-4.242 0-1.172-1.953-1.172-5.119 0-7.072 1.171-1.952 3.07-1.952 4.242 0M8 10.5h4m-4 3h4"></path></svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3">Almost Scarless</h3>
                <p class="text-gray-600">Tiny incisions (usually 0.5 to 1 cm) heal quickly and leave barely visible scars, providing excellent cosmetic results.</p>
            </div>

            <!-- Benefit 6 -->
            <div class="bg-gray-50 rounded-2xl p-8 border border-gray-100 hover:border-teal-300 transition-colors">
                <div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center mb-6 text-teal-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-3">Quick Return to Normal Activities</h3>
                <p class="text-gray-600">Patients can typically resume their regular daily routines and work much sooner than with open surgery.</p>
            </div>
        </div>

        <!-- Technology Banner -->
        <div class="mt-16 bg-gray-900 rounded-3xl overflow-hidden shadow-2xl lg:flex">
            <div class="lg:w-1/2 p-10 lg:p-16 flex flex-col justify-center">
                <span class="text-teal-400 font-semibold tracking-wide uppercase text-sm mb-2">State-of-the-art Technology</span>
                <h3 class="text-3xl font-extrabold text-white mb-4">3D 4K Karl Storz ICG RUBINA</h3>
                <p class="text-gray-400 text-lg mb-8">
                    Dr. Rajan Shah utilizes highly advanced 3D 4K Karl Storz camera systems, providing unmatched precision, depth perception, and clarity during complex gynecological procedures.
                </p>
                <div>
                    <a href="{{ route('contact') }}" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-gray-900 bg-teal-400 hover:bg-teal-300 transition-colors">
                        Consult for Surgery
                    </a>
                </div>
            </div>
            <div class="lg:w-1/2 bg-gray-800 relative min-h-[300px]">
                <!-- Abstract Representation of 4K Tech -->
                <div class="absolute inset-0 flex items-center justify-center p-12">
                    <div class="relative w-full h-full border-2 border-teal-500/30 rounded-full flex items-center justify-center">
                        <div class="absolute w-3/4 h-3/4 border-2 border-teal-400/50 rounded-full animate-[spin_20s_linear_infinite]"></div>
                        <div class="absolute w-1/2 h-1/2 border-2 border-teal-300/80 rounded-full animate-[spin_15s_linear_infinite_reverse]"></div>
                        <div class="bg-teal-500 w-1/4 h-1/4 rounded-full shadow-[0_0_50px_rgba(20,184,166,0.6)] flex items-center justify-center text-white font-bold text-2xl">
                            4K
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
