@extends('layouts.home')

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


@section('content')
<!-- Page Hero Section -->
<section class="page-hero">
    <div class="container page-hero-content">
        <h1>Mission & Values</h1>
        <p>Discover the core principles that guide everything we do at TGP Hospital</p>
        <div class="breadcrumb">
            <a href="{{ route('home') }}">Home</a>
            <span>/</span>
            <a href="{{ route('about') }}">About Us</a>
            <span>/</span>
            <a href="{{ route('mission') }}">Mission & Values</a>
        </div>
    </div>
</section>

<!-- Mission Statement Section -->
<section class="mission-statement">
    <div class="container">
        <div class="statement-container">
            <h2>{{ $mission->name }}</h2>
            <p>{{ $mission->description }}</p>
        </div>
    </div>
</section>

<!-- Values Section -->
<section class="values-section">
    <div class="container">
        <div class="section-title">
            <h2>Our Core Values</h2>
            <p>These fundamental principles guide our decisions, actions, and relationships with patients, families, and
                each other.</p>
        </div>

        <div class="values-grid">


            @foreach ($values as $value)
            <div class="value-card">
                <img src="{{ asset('public/'. $value->image) }}" width="120" alt="img">
                <h3>{{ $value->name }}</h3>
                <p>{{ $value->description }}</p>
            </div>
            @endforeach


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

<!-- Vision Section -->
<section class="vision-section">
    <div class="container">
        <div class="vision-container">
            <div class="vision-image">
                <img src="{{$vision->image}}" width="120" alt="img">
            </div>
            <div class="vision-content">
                <h2>{{ $vision->name }}</h2>
                <p>{{$vision->description}}</p>
            </div>
        </div>
    </div>
</section>

<!-- Commitment Section -->
<section class="commitment-section">
    <div class="container">
        <div class="section-title">
            <h2>Our Commitment</h2>
            <p>These promises guide our daily actions and long-term strategies</p>
        </div>

        <div class="commitment-grid">
            @foreach ($commitments as $item)
            <div class="commitment-card">
                <h3><img src="{{ asset('public/'. $item->image) }}" width="50" alt=""> {{ $item->name }}</h3>
                <p>{{
                    $item->description}}
                </p>
            </div>
            @endforeach

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

<!-- CTA Section -->
<section class="cta-section">
    <div class="container">
        <div class="cta-content">
            <h2>Experience Our Values in Action</h2>
            <p>At TGP Hospital, our mission and values aren't just words—they're the foundation of everything we do.
                Experience the difference our commitment makes in your healthcare journey.</p>
            <div class="cta-buttons">
                <a href="{{ route('doctors') }}"><button class="btn btn-white">Meet Our Team</button></a>
                <a href="{{ route('booking') }}"><button class="btn btn-transparent">Book an Appointment</button></a>
            </div>
        </div>
    </div>
</section>
@endsection

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