@extends('layouts.app')

@section('title', 'About Medcare')

@section('content')
<!-- About Hero -->
<div class="bg-slate-900 pt-48 pb-32 relative overflow-hidden text-inherit">
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-indigo-500 via-transparent to-transparent"></div>
    </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-4 relative z-10 italic">
        <h1 class="text-xs font-black text-indigo-400 uppercase tracking-[0.4em] mb-4">Our Journey & Mission</h1>
        <h2 class="text-4xl md:text-7xl font-black text-white tracking-tight">Dedicated To Your Well-being</h2>
        <div class="h-1.5 w-24 bg-indigo-600 mx-auto rounded-full mt-8"></div>
    </div>
</div>

<!-- Our Story Section -->
<div class="py-24 bg-white overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
            <div class="space-y-8 animate-fade-in-up">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 border border-indigo-100">
                    <span class="flex h-2 w-2 rounded-full bg-indigo-600"></span>
                    <span class="text-[10px] font-black text-indigo-700 uppercase tracking-widest leading-none">Established 1995</span>
                </div>
                <h3 class="text-4xl font-black text-slate-800 tracking-tight leading-tight uppercase italic">A Legacy of <span class="text-indigo-600">Clinical Excellence.</span></h3>
                <p class="text-lg text-slate-500 leading-relaxed">
                    Medcare Hospital was founded on the principle that healthcare should be accessible, compassionate, and of the highest quality. For over two decades, we have been at the forefront of medical innovation, providing life-saving treatments and holistic care to thousands of patients.
                </p>
                <div class="grid grid-cols-2 gap-8">
                    <div class="p-6 bg-slate-50 rounded-3xl border border-slate-100 italic transition-transform hover:-translate-y-2">
                        <p class="text-3xl font-black text-slate-800 mb-1">25+</p>
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Years of Trust</p>
                    </div>
                    <div class="p-6 bg-indigo-600 rounded-3xl shadow-xl shadow-indigo-100 italic transition-transform hover:-translate-y-2">
                        <p class="text-3xl font-black text-white mb-1">10k+</p>
                        <p class="text-[10px] text-indigo-100 font-bold uppercase tracking-widest">Annual Surgeries</p>
                    </div>
                </div>
            </div>
            <div class="relative">
                <div class="absolute -inset-4 bg-indigo-600/5 rounded-[4rem] blur-3xl"></div>
                <div class="relative rounded-[3rem] overflow-hidden shadow-2xl shadow-indigo-100 border-8 border-white group">
                    <img src="https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&q=80&w=2053" alt="Hospital Entrance" class="w-full h-[500px] object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-indigo-900/10 group-hover:bg-transparent transition-colors"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Values Section -->
<div class="py-24 bg-slate-50 relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center mb-16 space-y-4">
            <h2 class="text-sm font-black text-indigo-600 uppercase tracking-widest">How We Work</h2>
            <h3 class="text-4xl font-black text-slate-800 tracking-tight leading-tight uppercase italic">Our Core <span class="text-indigo-600">Philosophies</span></h3>
            <div class="h-1 w-24 bg-indigo-600 mx-auto rounded-full"></div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-white p-10 rounded-[3rem] shadow-sm hover:shadow-2xl hover:shadow-indigo-100 transition-all group">
                <div class="h-16 w-16 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-indigo-600 group-hover:text-white transition-all transform group-hover:rotate-12">
                    <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
                </div>
                <h4 class="text-xl font-black text-slate-800 mb-4 uppercase tracking-tight italic">Patient First</h4>
                <p class="text-slate-500 text-sm leading-relaxed">
                    Every decision we make is guided by the best interest of our patients. Your health, privacy, and comfort are our absolute priorities.
                </p>
            </div>

            <div class="bg-white p-10 rounded-[3rem] shadow-sm hover:shadow-2xl hover:shadow-indigo-100 transition-all group">
                <div class="h-16 w-16 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-indigo-600 group-hover:text-white transition-all transform group-hover:rotate-12">
                    <svg class="h-8 w-8" 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"/></svg>
                </div>
                <h4 class="text-xl font-black text-slate-800 mb-4 uppercase tracking-tight italic">Integrity</h4>
                <p class="text-slate-500 text-sm leading-relaxed">
                    We maintain the highest ethical standards in our clinical practices and administrative operations, ensuring complete transparency.
                </p>
            </div>

            <div class="bg-white p-10 rounded-[3rem] shadow-sm hover:shadow-2xl hover:shadow-indigo-100 transition-all group">
                <div class="h-16 w-16 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-indigo-600 group-hover:text-white transition-all transform group-hover:rotate-12">
                    <svg class="h-8 w-8" 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"/></svg>
                </div>
                <h4 class="text-xl font-black text-slate-800 mb-4 uppercase tracking-tight italic">Innovation</h4>
                <p class="text-slate-500 text-sm leading-relaxed">
                    We continuously invest in state-of-the-art technology and stay updated with latest medical research to provide cutting-edge care.
                </p>
            </div>
        </div>
    </div>
</div>

<!-- CTA -->
<div class="py-24 bg-white relative overflow-hidden">
    <div class="max-w-4xl mx-auto px-4 text-center space-y-8 relative z-10 italic">
        <h2 class="text-4xl md:text-5xl font-black text-slate-800 tracking-tight leading-tight uppercase">Join Us on Our Journey to Better <br> <span class="text-indigo-600">Community Health.</span></h2>
        <div class="flex justify-center pt-4">
            <a href="{{ route('public.contact') }}" class="px-12 py-5 bg-indigo-600 text-white rounded-2xl font-black uppercase tracking-widest text-sm hover:bg-slate-900 shadow-2xl shadow-indigo-100 transition-all transform hover:scale-110">
                Contact Our Team
            </a>
        </div>
    </div>
</div>
@endsection