@extends('layouts.home')


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


@section('content')
<!-- Page Hero Section -->
<section class="page-hero">
    <div class="container page-hero-content">
        <h1>Our History</h1>
        <p>Discover the journey of TGP Hospital from its humble beginnings to becoming a leading healthcare institution.
        </p>
        <div class="breadcrumb">
            <a href="{{ route('home') }}">Home</a>
            <span>/</span>
            <a href="{{ route('about') }}">About Us</a>
            <span>/</span>
            <a href="{{ route('history') }}">Our History</a>
        </div>
    </div>
</section>

<!-- History Timeline Section -->
<section class="history-section">
    <div class="container">
        <div class="section-title">
            <h2>Our Journey Through Time</h2>
            <p>For over 25 years, TGP Hospital has been at the forefront of healthcare innovation and patient care.</p>
        </div>

        <div class="timeline">
            @foreach ($stories as $index => $item)
            <div class="timeline-item {{ $index % 2 === 0 ? 'left' : 'right' }}">
                <div class="timeline-content">
                    <div class="timeline-year">{{ $item->year }}</div>
                    <p>{{ $item->story }}</p>
                </div>
            </div>
            @endforeach

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

<!-- Mission Section -->
<section class="mission-section">
    <div class="container">
        <div class="section-title">
            <h2>Our Mission & Values</h2>
            <p>Guided by our founding principles, we continue to deliver exceptional healthcare with compassion and
                innovation.</p>
        </div>

        <div class="mission-grid">

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


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

<!-- Leadership Section -->
<section class="leadership-section">
    <div class="container">
        <div class="section-title">
            <h2>Our Founders</h2>
            <p>The visionary leaders who established TGP Hospital and set the standard for excellence in healthcare.</p>
        </div>

        <div class="leaders-grid">


            @foreach ($founders as $founder)
            <div class="leader-card">
                <div class="leader-image">
                    <img src="{{ asset('public/'.$founder->image) }}" alt="{{ $founder->name }}">
                </div>
                <div class="leader-info">
                    <h3>{{ $founder->name }}</h3>
                    <p>{{ $founder->position }}</p>
                    <p>{{ $founder->about }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endsection


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