@extends('layouts.app')

@section('title', 'Kontak')

@section('content')
<div class="container py-4">
    <h1 class="text-center mb-4" style="font-size: 2rem; font-weight: 500;"><i class="bi bi-telephone me-2"></i>Hubungi Kami</h1>
    
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card shadow">
                <div class="card-body p-4">
                    <h3 class="mb-4" style="font-size: 1.5rem; font-weight: 500;">Puskesmas Muara Kumpeh</h3>
                    
                    <div class="mb-4">
                        <h5 style="font-size: 1.125rem; font-weight: 500; margin-bottom: 0.75rem;">
                            <i class="bi bi-geo-alt-fill text-primary me-2"></i>Alamat
                        </h5>
                        <p class="ms-4" style="font-size: 15px; line-height: 1.7; margin-bottom: 0;">
                            Jl. Jambi Suak Kandis No.KM.6<br>
                            Muara Kumpeh, Kec. Kumpeh Ulu<br>
                            Kabupaten Muaro Jambi, Jambi 36373<br>
                            Indonesia
                        </p>
                    </div>
                    
                    <div class="mb-4">
                        <h5 style="font-size: 1.125rem; font-weight: 500; margin-bottom: 0.75rem;">
                            <i class="bi bi-telephone-fill text-success me-2"></i>No. Telepon
                        </h5>
                        <p class="ms-4" style="font-size: 15px; line-height: 1.7; margin-bottom: 0;">
                            <a href="tel:0692164429" style="text-decoration: none;">(0692) 164-429</a><br>
                            <a href="tel:0291715233" style="text-decoration: none;">(0291) 715-233</a>
                        </p>
                    </div>
                    
                    <div class="mb-4">
                        <h5 style="font-size: 1.125rem; font-weight: 500; margin-bottom: 0.75rem;">
                            <i class="bi bi-envelope-fill text-warning me-2"></i>Email
                        </h5>
                        <p class="ms-4" style="font-size: 15px; line-height: 1.7; margin-bottom: 0;">
                            <a href="mailto:puskesmaskumpeh@gmail.com" style="text-decoration: none;">puskesmaskumpeh@gmail.com</a>
                        </p>
                    </div>
                    
                    <div class="mb-4">
                        <h5 style="font-size: 1.125rem; font-weight: 500; margin-bottom: 0.75rem;">
                            <i class="bi bi-globe text-info me-2"></i>Website
                        </h5>
                        <p class="ms-4" style="font-size: 15px; line-height: 1.7; margin-bottom: 0;">
                            <a href="https://puskesmaskumpeh.com/" target="_blank" style="text-decoration: none;">https://puskesmaskumpeh.com/</a>
                        </p>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>
@endsection