@extends('website.layouts.app')

@section('title', 'Beranda')

@section('hero')
    @include('website.layouts.hero')
@endsection

@section('content')

{{-- ================= WELCOME ================= --}}
<div class="section mcb-section" style="padding:70px 0 80px; background:#f9fbfd">
    <div class="section_wrapper mcb-section-inner">

        {{-- Title --}}
        <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">
                        <h2>Layanan Utama Kami</h2>
                        <p style="max-width:700px; margin:0 auto;">
                            PMB Dewi Nuraeni memberikan pelayanan kebidanan yang aman,
                            profesional, dan penuh empati untuk ibu dan anak.
                        </p>
                    </div>
                </div>
            </div>
        </div>

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

                {{-- Card 1 --}}
                <div class="column mcb-column one-fourth column_column">
                    <div class="clinic-card">
                        <h5>Konsultasi Kehamilan</h5>
                        <p>
                            Pemeriksaan rutin dan konsultasi kehamilan
                            dengan bidan berpengalaman.
                        </p>
                    </div>
                </div>

                {{-- Card 2 --}}
                <div class="column mcb-column one-fourth column_column">
                    <div class="clinic-card">
                        <h5>Persalinan Normal</h5>
                        <p>
                            Layanan persalinan normal yang aman
                            dengan pendekatan humanis.
                        </p>
                    </div>
                </div>

                {{-- Card 3 --}}
                <div class="column mcb-column one-fourth column_column">
                    <div class="clinic-card">
                        <h5>Perawatan Ibu & Anak</h5>
                        <p>
                            Perawatan pasca melahirkan
                            untuk kesehatan ibu dan anak.
                        </p>
                    </div>
                </div>

                {{-- Card 4 --}}
                <div class="column mcb-column one-fourth column_column">
                    <div class="clinic-card highlight">
                        <h5>Reservasi Online</h5>
                        <p>
                            Mudah melakukan reservasi jadwal
                            tanpa harus menunggu lama.
                        </p>

                        <a href="{{ route('reservation') }}" class="clinic-card-btn">
                            Reservasi
                        </a>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>


{{-- ================= SERVICES ================= --}}
<div class="section mcb-section" style="padding:80px 0">
    <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>Layanan Kami</h3>
                        <p>Pelayanan kebidanan profesional & terpercaya</p>
                    </div>
                </div>
            </div>
        </div>

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

                @foreach($services->take(4) as $service)
                    <div class="column mcb-column one-fourth column_column">
                        <div class="column_attr clearfix"
                             style="border:1px solid #eee; padding:30px; height:100%;">
                            <h5>{{ $service->name }}</h5>
                            <p>{{ Str::limit($service->description, 120) }}</p>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>

        <div class="wrap mcb-wrap one valign-top clearfix" style="margin-top:30px">
            <div class="mcb-wrap-inner align_center">
                <a href="{{ route('services') }}" class="button button_theme">
                    <span class="button_label">Lihat Semua Layanan</span>
                </a>
            </div>
        </div>

    </div>
</div>

{{-- ================= TEAM ================= --}}
<div class="section mcb-section" style="padding:80px 0; background:#f9f9f9">
    <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>Tim Kami</h3>
                        <p>Bidan profesional & staff berpengalaman</p>
                    </div>
                </div>
            </div>
        </div>

        <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 clearfix"
                             style="border:1px solid #eaeaea; padding:30px;">
                            <h6>{{ $team->name }}</h6>
                            <small>{{ $team->position ?? 'Bidan' }}</small>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>

    </div>
</div>

{{-- ================= TESTIMONI ================= --}}
<div class="section mcb-section" style="padding:80px 0">
    <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>Testimoni Pasien</h3>
                        <p>Apa kata pasien kami</p>
                    </div>
                </div>
            </div>
        </div>

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

                {{-- Static dulu, nanti bisa dari database --}}
                <div class="column mcb-column one-third column_column">
                    <div class="column_attr clearfix" style="padding:30px; border:1px solid #eee;">
                        <p>"Pelayanan sangat ramah dan profesional. Saya merasa sangat nyaman."</p>
                        <strong>- Ibu Sari</strong>
                    </div>
                </div>

                <div class="column mcb-column one-third column_column">
                    <div class="column_attr clearfix" style="padding:30px; border:1px solid #eee;">
                        <p>"Bidan Dewi sangat sabar dan detail dalam menjelaskan kondisi."</p>
                        <strong>- Ibu Rina</strong>
                    </div>
                </div>

                <div class="column mcb-column one-third column_column">
                    <div class="column_attr clearfix" style="padding:30px; border:1px solid #eee;">
                        <p>"Tempat bersih dan pelayanannya cepat."</p>
                        <strong>- Ibu Lina</strong>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

{{-- ================= FAQ ================= --}}
<div id="faq-section" class="section mcb-section" style="padding:80px 0; background:#f9f9f9">
    <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>Pertanyaan Umum (FAQ)</h3>
                    </div>
                </div>
            </div>
        </div>

        <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">
                        <h6>Apakah perlu reservasi terlebih dahulu?</h6>
                        <p>Disarankan melakukan reservasi agar pelayanan lebih optimal.</p>

                        <h6>Jam operasional klinik?</h6>
                        <p>{{ isset($settings['opening_hours']) ? $settings['opening_hours'] : 'Setiap hari pukul 08.00 – 21.00 WIB.' }}</p>

                        <h6>Apakah melayani persalinan?</h6>
                        <p>Ya, kami melayani persalinan normal sesuai indikasi medis.</p>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

@endsection