@extends('layouts.home')


@push('css')
<link rel="stylesheet" href="{{ asset('home') }}/css/service.css">
@endpush


@section('content')
<!-- Hero Section -->
<section class="services-hero">
    <div class="container services-hero-content">
        <h2>Our Medical Services</h2>
        <p>Comprehensive healthcare services provided by experienced professionals using state-of-the-art technology
        </p>
        <a href="#all-services"><button class="btn btn-primary">Explore Our Services</button></a>
    </div>
</section>

<!-- Services Content Section -->
<section class="services-content" id="all-services">
    <div class="container">
        <div class="section-title">
            <h2>Healthcare Services</h2>
            <p>We offer a wide range of medical services to meet all your healthcare needs</p>
        </div>

        <div class="services-filter">
            <button class="filter-btn active" data-filter="all">All Services</button>
            @foreach($categories as $category)
            <button class="filter-btn" data-filter="{{ $category->name }}">{{ $category->name }}</button>
            @endforeach
        </div>

        <div class="services-grid">


            @foreach ($services as $service)
            <div class="service-card" data-category="{{ $service->serviceCategory->name }}">
                <img src="{{ asset('public/'.$service->image) }}" width="120" alt="img">
                <h3>{{ $service->title }}</h3>
                <p>{{ $service->subtitle}}</p>
                <div class="service-features">
                    {!! nl2br(e($service->short_description)) !!}
                </div>
                <a href="#"><button class="btn btn-outline">Learn More</button></a>
            </div>
            @endforeach

        </div>
    </div>
</section>

<!-- Specialized Services Section -->
{{-- <section class="specialized-services">
    <div class="container">
        <div class="section-title">
            <h2>Specialized Care Centers</h2>
            <p>Our specialized centers provide focused expertise for specific healthcare needs</p>
        </div>

        <div class="specialized-grid">
            <div class="specialized-card">
                <h3><i class="fas fa-heart"></i> Heart & Vascular Center</h3>
                <p>Our comprehensive heart center offers advanced cardiac care, from prevention to complex surgical
                    interventions, with outcomes that meet national standards of excellence.</p>
            </div>

            <div class="specialized-card">
                <h3><i class="fas fa-baby"></i> Women's Health Center</h3>
                <p>Dedicated to all aspects of women's health, including obstetrics, gynecology, breast health, and
                    bone health, providing compassionate care through all stages of life.</p>
            </div>

            <div class="specialized-card">
                <h3><i class="fas fa-brain"></i> Neuroscience Institute</h3>
                <p>Bringing together neurologists, neurosurgeons, and specialists to provide comprehensive care for
                    disorders of the brain, spine, and nervous system.</p>
            </div>

            <div class="specialized-card">
                <h3><i class="fas fa-lungs"></i> Respiratory Care Center</h3>
                <p>Specializing in the diagnosis and treatment of respiratory conditions, from asthma and COPD to
                    sleep disorders and critical care ventilation.</p>
            </div>

            <div class="specialized-card">
                <h3><i class="fas fa-user-md"></i> Cancer Care Center</h3>
                <p>Providing multidisciplinary cancer care with advanced treatment options, including chemotherapy,
                    radiation therapy, and surgical oncology.</p>
            </div>

            <div class="specialized-card">
                <h3><i class="fas fa-wheelchair"></i> Orthopedics & Sports Medicine</h3>
                <p>Comprehensive care for bone, joint, and muscle conditions, with specialized programs for athletes
                    and active individuals of all ages.</p>
            </div>
        </div>
    </div>
</section> --}}

<!-- Emergency Services -->
<section class="emergency-services">
    <div class="container">
        <h2>Emergency Medical Care</h2>
        <p>Our Emergency Department is staffed 24/7 with board-certified emergency physicians and specially trained
            nurses</p>
        <div class="emergency-number">
            <i class="fas fa-phone-alt"></i> (+880) 123-EMER
        </div>
        <a href="{{ route('contact') }}"><button class="btn btn-outline"
                style="background-color: white; color: var(--primary);">Emergency Department
                Information</button></a>
    </div>
</section>

<!-- Technology Section -->
<section class="technology">
    <div class="container">
        <div class="section-title">
            <h2>Advanced Medical Technology</h2>
            <p>We invest in the latest medical technology to provide accurate diagnoses and effective treatments</p>
        </div>

        <div class="tech-grid">
            <div class="tech-card">
                <i class="fas fa-magnet"></i>
                <h3>3T MRI Technology</h3>
                <p>High-field MRI scanners provide exceptional image quality for precise diagnosis.</p>
            </div>

            <div class="tech-card">
                <i class="fas fa-tachometer-alt"></i>
                <h3>256-Slice CT Scanner</h3>
                <p>Ultra-fast CT scanning reduces radiation exposure while improving image quality.</p>
            </div>

            <div class="tech-card">
                <i class="fas fa-robot"></i>
                <h3>Robotic Surgery</h3>
                <p>Da Vinci Surgical System enables minimally invasive procedures with enhanced precision.</p>
            </div>

            <div class="tech-card">
                <i class="fas fa-procedures"></i>
                <h3>Hybrid Operating Rooms</h3>
                <p>State-of-the-art ORs with advanced imaging for complex surgical procedures.</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="services-cta">
    <div class="container">
        <div class="section-title">
            <h2>Need Help Choosing a Service?</h2>
            <p>Our patient coordinators can help you find the right specialist or service for your healthcare needs
            </p>
        </div>
        <a href="{{ route('contact') }}"><button class="btn btn-primary">Contact Us Today</button></a>
    </div>
</section>
@endsection

@push('js')
<script src="{{ asset('home') }}/js/service.js"></script>
@endpush