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

@section('title', 'ติดต่อเรา | ศูนย์ความรู้ อ.อ๊อบ')

@section('content')
    <main class="pt-[80px] sm:pt-[88px] bg-gradient-to-b from-white to-kru-light min-h-screen">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            {{-- Section Header --}}
            <div class="text-center mb-12">
                {!! $contact['detail'] ?? '' !!}
            </div>
            <div class="grid lg:grid-cols-2 gap-12">
                {{-- Left - Contact Info --}}
                <div>
                    {{-- Map --}}
                    @if (!empty($contact['google_map']))
                        <div class="mb-8">
                            <div class="flex items-center gap-2 mb-3">
                                <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-kru-blue/10 text-kru-blue">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                    </svg>
                                </span>
                                <h2 class="text-lg font-semibold text-kru-dark">@lang('frontend::lang.address_title')</h2>
                            </div>
                            <div class="bg-white rounded-2xl shadow-md overflow-hidden ring-1 ring-black/5">
                                <div class="aspect-video w-full">
                                    {!! $contact['google_map'] ?? '' !!}
                                </div>
                            </div>
                        </div>
                    @endif
                    
                    {{-- Contact Info Cards --}}
                    <div class="flex items-center gap-2 mb-4">
                        <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-kru-blue/10 text-kru-blue">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                            </svg>
                        </span>
                        <h2 class="text-lg font-semibold text-kru-dark">@lang('frontend::lang.contact_info_title_2')</h2>
                    </div>
                    <div class="contact-info-grid grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
                        @if (!empty($contact['office']))
                            <div
                                class="contact-info-card group p-5 bg-white rounded-2xl shadow-md hover:shadow-xl border border-gray-100 hover:-translate-y-0.5 transition-all duration-300">
                                <div
                                    class="w-12 h-12 rounded-xl bg-gradient-to-br from-kru-blue to-kru-purple flex items-center justify-center mb-3 shadow-sm group-hover:scale-105 transition-transform duration-300">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                    </svg>
                                </div>
                                <h3 class="font-semibold text-kru-dark mb-1.5">@lang('frontend::lang.address')</h3>
                                <p class="text-gray-600 text-sm whitespace-pre-line leading-relaxed">
                                    {{ $contact['office'] }}</p>
                            </div>
                        @endif

                        @if (!empty($contact['fax']) || !empty($contact['tel']))
                            <div
                                class="contact-info-card group p-5 bg-white rounded-2xl shadow-md hover:shadow-xl border border-gray-100 hover:-translate-y-0.5 transition-all duration-300">
                                <div
                                    class="w-12 h-12 rounded-xl bg-gradient-to-br from-kru-green to-kru-blue flex items-center justify-center mb-3 shadow-sm group-hover:scale-105 transition-transform duration-300">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                    </svg>
                                </div>
                                <h3 class="font-semibold text-kru-dark mb-1.5">@lang('frontend::lang.tel')</h3>
                                <p class="text-gray-600 text-sm whitespace-pre-line leading-relaxed">{{ $contact['tel'] }}
                                </p>
                                @if (!empty($contact['fax']))
                                    <p class="text-gray-500 text-sm mt-1.5">@lang('field.fax'): {{ $contact['fax'] }}</p>
                                @endif
                            </div>
                        @endif

                        @if (!empty($contact['work']))
                            <div
                                class="contact-info-card group p-5 bg-white rounded-2xl shadow-md hover:shadow-xl border border-gray-100 hover:-translate-y-0.5 transition-all duration-300">
                                <div
                                    class="w-12 h-12 rounded-xl bg-gradient-to-br from-kru-orange to-kru-yellow flex items-center justify-center mb-3 shadow-sm group-hover:scale-105 transition-transform duration-300">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                    </svg>
                                </div>
                                <h3 class="font-semibold text-kru-dark mb-1.5">@lang('frontend::lang.work')</h3>
                                <p class="text-gray-600 text-sm whitespace-pre-line leading-relaxed">{!! $contact['work'] ?? '' !!}
                                </p>
                            </div>
                        @endif

                        @if (!empty($contact['email']))
                            <div
                                class="contact-info-card group p-5 bg-white rounded-2xl shadow-md hover:shadow-xl border border-gray-100 hover:-translate-y-0.5 transition-all duration-300">
                                <div class="w-11 h-11 rounded-full bg-kru-pink flex items-center justify-center flex-shrink-0">
                                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                                </div>
                                <h3 class="font-semibold text-kru-dark mb-1.5">@lang('frontend::lang.email')</h3>
                                <p class="text-gray-600 text-sm whitespace-pre-line leading-relaxed">{{ $contact['email'] }}
                                </p>
                            </div>
                        @endif
                    </div>
                    {{-- Social Links --}}

                    {{-- <div class="flex gap-4">
                        <a href="https://www.facebook.com/Kruobbtutor/" target="_blank" rel="noopener noreferrer"
                            class="flex-1 flex items-center justify-center gap-2 p-4 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path
                                    d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                            </svg>
                            <span class="font-medium">Facebook</span>
                        </a>
                        <a href="https://www.youtube.com/c/kruobb" target="_blank" rel="noopener noreferrer"
                            class="flex-1 flex items-center justify-center gap-2 p-4 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-colors">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path
                                    d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                            </svg>
                            <span class="font-medium">YouTube</span>
                        </a>
                    </div> --}}

                </div>
                {{-- Right - Contact Form --}}
                <div>
                    <div class="flex items-center gap-2 mb-4">
                        <span class="flex items-center justify-center w-8 h-8 rounded-lg bg-kru-blue/10 text-kru-blue">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                            </svg>
                        </span>
                        <h2 class="text-lg font-semibold text-kru-dark">@lang('frontend::lang.contact_info_title')</h2>
                    </div>
                    <div
                        class="contact-form bg-white rounded-2xl shadow-md border border-gray-100 ring-1 ring-black/5 overflow-hidden p-6 lg:p-8">
                        @livewire('frontend::form.contact', ['page_init' => $page_init])
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection