@extends('frontend::layouts.master')

@section('content')
    @if (!empty($header))
        <x-frontend::page-cover title="{{ $header['name'] ?? '' }}" subtitle="{{ $header['desc'] ?? '' }}" />
    @endif
    @if (!empty($about_us['status']))
        <section class="max-w-7xl mx-auto px-6 py-16">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    {!! $about_us['detail'] !!}
                </div>
                <div>
                    <img class="rounded-lg" src="{{ asset($about_us['image']) }}" alt="{{ $about_us['name'] ?? '' }}">
                </div>
            </div>
        </section>
    @endif
    @if (!empty($about_us_detail['detail']))
        <section class="py-16 bg-med-white">
            <div class="container mx-auto px-4">
                {!! $about_us_detail['detail'] !!}
            </div>
        </section>
    @endif
    @if (!empty($page_init['contact']['name']))
        <section class="bg-med-gray py-16">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-4xl font-bold text-med-dark">{{ $page_init['contact']['name'] ?? '' }}</h2>
                    <div class="w-20 h-1 bg-med-primary mx-auto mt-4 rounded-full"></div>
                </div>
                <div class="bg-med-white rounded-2xl shadow-xl overflow-hidden flex flex-col md:flex-row">
                    @if (!empty($page_init['contact']['google_map']))
                        <div class="w-full md:w-1/2 h-[300px] md:h-auto min-h-[400px]">
                            {!! $page_init['contact']['google_map'] !!}
                        </div>
                    @endif
                    <div class="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                        <h3 class="text-2xl font-bold text-med-primary mb-8">{{ $page_init['contact']['name'] ?? '' }}</h3>
                        <div class="space-y-6">
                            @if (!empty($page_init['contact']['office']))
                                <div class="flex items-start gap-4">
                                    <div class="w-12 h-12 bg-med-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                        <i class="fa-solid fa-location-dot text-med-primary text-xl"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-med-dark text-lg">{{ __('frontend::lang.label.address') }}</h4>
                                        <p class="text-med-dark/70">
                                            {{ $page_init['contact']['office'] ?? '' }}
                                        </p>
                                    </div>
                                </div>
                            @endif
                            @if (!empty($page_init['contact']['tel'][0]))
                                <div class="flex items-start gap-4">
                                    <div class="w-12 h-12 bg-med-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                        <i class="fa-solid fa-phone text-med-primary text-xl"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-med-dark text-lg">{{ __('frontend::lang.label.tel') }}</h4>
                                        @foreach ($page_init['contact']['tel'] as $item)
                                            <a class="text-med-dark/70 hover:text-med-primary transition" href="tel:{{ $item ?? '' }}">
                                                {{ str_format($item ?? '', '-', [1, 3, 2, 4]) }}
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                            @if (!empty($page_init['contact']['work']))
                                <div class="flex items-start gap-4">
                                    <div class="w-12 h-12 bg-med-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                        <i class="fa-solid fa-clock text-med-primary text-xl"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-med-dark text-lg">{{ __('frontend::lang.label.time') }}</h4>
                                        <ul class="text-med-dark/70">
                                            <li>{{ $page_init['contact']['work'] ?? '' }}</li>
                                        </ul>
                                    </div>
                                </div>
                            @endif
                            @if (!empty($page_init['contact']['email'][0]))
                                <div class="flex items-start gap-4">
                                    <div class="w-12 h-12 bg-med-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                        <i class="fa-solid fa-envelope text-med-primary text-xl"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-med-dark text-lg">{{ __('frontend::lang.label.email') }}</h4>
                                        <div>
                                            @foreach ($page_init['contact']['email'] as $item)
                                                <a class="text-med-dark/70 hover:text-med-primary transition" href="mailto:{{ $item ?? '' }}">
                                                    {{ $item ?? '' }}
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
@endsection