@extends('website.layouts.app')

@section('title', 'Tim Kami')

{{-- ================= HERO / SUBHEADER ================= --}}
@section('hero')
<div id="Subheader" style="padding:200px 0 120px;">
    <div class="container">
        <div class="column one">
            <!-- <h1 class="title">Tim Kami</h1> -->
        </div>
    </div>
</div>
@endsection

<style>
.team-card {
    height: 300px;
    padding: 30px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-photo-wrapper {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 6px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.team-card-photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
}

.team-name {
    font-size: 20px;
    font-weight: 600;
    min-height: 50px; /* paksa tinggi nama */
    display: flex;
    align-items: center;
    text-align: center;
}

.team-position {
    color: #00bfa6;
    font-weight: 600;
    min-height: 40px; /* paksa tinggi jabatan */
    display: flex;
    align-items: center;
    text-align: center;
}

.team-desc {
    font-size: 14px;
    min-height: 50px; /* opsional jika ada deskripsi */
}


</style>
@section('content')

{{-- ================= INTRO ================= --}}
<div class="section mcb-section" style="padding-top:100px; padding-bottom:40px;">
    <div class="section_wrapper mcb-section-inner">

        <div class="wrap mcb-wrap one valign-top clearfix">
            <div class="mcb-wrap-inner">

                <div class="column mcb-column one column_column">
                    <div class="column_attr clearfix align_center">

                        <h3>Tenaga Profesional Kami</h3>
                        <p style="font-size:18px; max-width:900px; margin:0 auto;">
                            Tim kami terdiri dari tenaga kesehatan profesional
                            yang berpengalaman di bidang kebidanan dan kesehatan ibu & anak.
                            Kami berkomitmen memberikan pelayanan yang aman, nyaman,
                            dan penuh empati.
                        </p>

                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

{{-- ================= TEAM LIST ================= --}}
<div class="section mcb-section" style="padding-bottom:100px;">
    <div class="section_wrapper mcb-section-inner">

        <div class="wrap mcb-wrap one valign-top clearfix">
            <div class="mcb-wrap-inner">

                @foreach($teams as $team)
                    <div class="column mcb-column one-fourth column_column">
                        <div class="column_attr align_center team-card">

                            {{-- PHOTO --}}
                            <div class="team-photo-wrapper">
                                <img
                                src="{{ $team->photo
                                        ? asset($team->photo)
                                        : asset('asset/themes/images/avatar.png') }}"
                                alt="{{ $team->name }}"
                                class="team-card-photo"
                                >
                            </div>

                            {{-- NAME --}}
                            <div class="team-name">
                                {{ $team->name }}
                            </div>

                            {{-- POSITION --}}
                            <div class="team-position">
                                {{ $team->position }}
                            </div>

                            {{-- DESCRIPTION --}}
                            @if(!empty($team->description))
                            <div class="team-desc">
                                {{ $team->description }}
                            </div>
                            @endif

                        </div>
                    </div>
                    @endforeach


            </div>
        </div>

    </div>
</div>

{{-- ================= CTA ================= --}}
<div class="section mcb-section section-cta-center">
    <div class="section_wrapper">
        <div class="cta-center-inner">

            <h2 class="cta-title">
                Bidan Dewi Nuraeni
            </h2>

            <p class="cta-desc">
                Ingin mendapatkan informasi lebih lanjut atau membuat janji temu?
                Kami senang mendengar dari Anda. Silakan hubungi kami melalui halaman
                kontak untuk menghubungi tim kami.
            </p>

            <a href="{{ route('contact') }}" class="button button_size_2">
                <span class="button_label">Kontak Kami</span>
            </a>

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


@endsection