@extends('layouts.app')
@section('title', 'About Dr. Rajan Shah | Gynecologist & IVF Specialist')

@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="lg:grid lg:grid-cols-2 lg:gap-16 items-start">
            
            <!-- Image Section -->
            <div class="relative">
                <div class="aspect-w-3 aspect-h-4 rounded-2xl bg-gray-100 overflow-hidden shadow-xl border border-gray-100 flex items-center justify-center">
                    @if(isset($settings['about_image']) && $settings['about_image'])
                        <img src="{{ asset($settings['about_image']) }}" alt="{{ $settings['about_title'] ?? 'Dr. Rajan Shah' }}" class="w-full h-full object-cover">
                    @else
                        <!-- Placeholder Image -->
                        <div class="w-full h-[500px] bg-teal-50 flex items-center justify-center">
                            <svg class="h-32 w-32 text-teal-200" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
                            </svg>
                        </div>
                    @endif
                </div>
                
            </div>

            <!-- Content Section -->
            <div class="mt-10 lg:mt-0">
                <span class="text-teal-600 font-semibold tracking-wide uppercase text-sm">{{ $settings['about_tag'] ?? 'About The Doctor' }}</span>
                <h2 class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">
                    {{ $settings['about_title'] ?? 'Dr. Rajan Shah' }}
                </h2>
                <p class="text-xl text-gray-500 mt-2 font-medium">
                    {{ $settings['about_subtitle'] ?? 'Laparoscopic Gynecologist & Infertility Specialist' }}
                </p>

                <div class="mt-8 space-y-6 text-gray-600">
                    <p>
                        {{ $settings['about_desc_1'] ?? 'Pioneering Fertility Excellence in Nepal. Dr. Rajan Shah is one of Nepal’s most renowned gynecologists and IVF specialists, known for his expertise in fertility treatments and advanced reproductive techniques.' }}
                    </p>
                    <p>
                        {{ $settings['about_desc_2'] ?? 'With years of experience in gynecological laparoscopic surgery and infertility management, he has helped countless couples achieve their dream of parenthood. He is a recognized Fibroid Specialist in Nepal and operates using state-of-the-art technology.' }}
                    </p>
                </div>

                <div class="mt-10 border-t border-gray-200 pt-10">
                    <h3 class="text-xl font-bold text-gray-900 mb-6">Qualifications & Credentials</h3>
                    
                    <ul class="space-y-4">
                        @php
                            $qualsText = $settings['about_qualifications'] ?? "MBBS - Tribhuvan University (TU)\nMD - B.P. Koirala Institute of Health Sciences (BPKIHS)\nF.MAS - Fellowship in Minimal Access Surgery (with Merit)\nD.MAS - Diploma in Minimal Access Surgery (WLH, India)";
                            $quals = explode("\n", str_replace("\r", "", $qualsText));
                        @endphp
                        
                        @foreach(array_filter($quals) as $qual)
                            @php
                                // Try to bold the abbreviation before the hyphen
                                $parts = explode('-', $qual, 2);
                            @endphp
                            <li class="flex items-start">
                                <div class="flex-shrink-0 h-6 w-6 text-teal-500 mt-0.5">
                                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                </div>
                                <p class="ml-3 text-gray-700">
                                    @if(count($parts) == 2)
                                        <span class="font-bold text-gray-900">{{ trim($parts[0]) }}</span> - {{ trim($parts[1]) }}
                                    @else
                                        {{ trim($qual) }}
                                    @endif
                                </p>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="mt-10 bg-gray-50 rounded-xl p-6 border border-gray-100">
                    <h3 class="text-lg font-bold text-gray-900 mb-2">Current Position</h3>
                    <p class="text-gray-700">
                        <span class="font-medium text-teal-700">{{ $settings['about_current_position_title'] ?? 'Laparoscopic Gynecologist' }}</span><br>
                        {!! nl2br(e($settings['about_current_position_desc'] ?? "Everest Hospital Pvt. Ltd.,\nNew Baneshwor, Kathmandu, Nepal")) !!}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Dynamic Sections -->
<x-stats-bar :settings="$settings" />
<x-about.philosophy :settings="$settings" />
<x-about.services-grid :settings="$settings" />
<x-about.process-flow :settings="$settings" />
<x-about.testimonials :testimonials="$testimonials" />
<x-about.cta-banner :settings="$settings" />

@endsection
