@extends('page.layouts.main')

@section('content')
<div class="max-w-3xl mx-auto py-16 px-4 sm:px-8 mt-16 mb-16 pt-16">
    <div class="text-center mb-12">
        <h1 class="text-4xl font-bold tracking-tight text-gray-900 mb-3">Contact Us</h1>
        <p class="text-lg text-gray-500 dark:text-gray-400">We'd love to connect and answer your questions.</p>
    </div>
    <div class="rounded-2xl bg-white/90 dark:bg-gray-900/90 shadow-xl border border-gray-100 dark:border-gray-800 p-8 sm:p-12">
        <div class="flex flex-col md:flex-row md:items-stretch gap-12">
            <div class="flex-1 flex flex-col gap-7 justify-center">
                <div>
                    <h2 class="text-base font-semibold text-indigo-600 uppercase tracking-widest mb-1">Office Address</h2>
                    <div class="flex items-start gap-3">
                        <span class="inline-flex pt-2 pb-2 items-center justify-center h-8 w-8 bg-indigo-100 dark:bg-indigo-800 text-indigo-600 rounded-lg">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17.657 16.657L13.414 20.9a1.5 1.5 0 0 1-2.121 0L6.343 16.657a8 8 0 1 1 11.314 0z"/><circle cx="12" cy="10" r="4"/></svg>
                        </span>
                        <p class="text-gray-700 dark:text-gray-200 text-base leading-relaxed">
                            {{ settings('group_address') }}
                        </p>
                    </div>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-indigo-600 uppercase tracking-widest mb-1">Phone</h2>
                    <div class="flex items-center gap-3">
                        <span class="inline-flex pt-2 pb-2 items-center justify-center h-8 w-8 bg-indigo-100 dark:bg-indigo-800 text-indigo-600 dark:text-white rounded-lg">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M22 16.92V19a2 2 0 0 1-2.18 2A19.72 19.72 0 0 1 3 5.18 2 2 0 0 1 5 3h2.09A2 2 0 0 1 9 5.07c.13.36.12.76-.21 1.09l-1.2 1.21a16 16 0 0 0 7.09 7.09l1.21-1.2a1 1 0 0 1 1.1-.22A2 2 0 0 1 21 17.91z"/></svg>
                        </span>
                        <a href="tel:{{ preg_replace('/[^0-9\+]/', '', settings('group_phone')) }}"
                           class="text-gray-700 dark:text-gray-200 underline-offset-2 hover:underline transition font-medium">
                            {{ settings('group_phone') }}
                        </a>
                    </div>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-indigo-600 uppercase tracking-widest mb-1">Email</h2>
                    <div class="flex items-center gap-3">
                        <span class="inline-flex pt-2 pb-2 items-center justify-center h-8 w-8 bg-indigo-100 dark:bg-indigo-800 text-indigo-600 dark:text-white rounded-lg">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4h16v16H4V4zm0 0l8 8m0 0l8-8" /></svg>
                        </span>
                        <a href="mailto:{{ settings('group_email') }}"
                           class="text-gray-700 dark:text-gray-200 underline-offset-2 hover:underline transition font-medium">
                            {{ settings('group_email') }}
                        </a>
                    </div>
                </div>
                @if(settings('group_website'))
                <div>
                    <h2 class="text-base font-semibold text-indigo-600 uppercase tracking-widest mb-1">Website</h2>
                    <div class="flex items-center gap-3">
                        <span class="inline-flex pt-2 pb-2 items-center justify-center h-8 w-8 bg-indigo-100 dark:bg-indigo-800 text-indigo-600 dark:text-white rounded-lg">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 3v2m0 14v2m9-9h-2m-14 0H3m15.36-6.36l-1.42 1.42M6.36 17.64l-1.42 1.42M17.64 17.64l-1.42-1.42M6.36 6.36l-1.42-1.42"/></svg>
                        </span>
                        <a href="{{ str($url = settings('group_website'))->startsWith(['http://', 'https://']) ? $url : 'https://' . $url }}"
                           target="_blank" rel="noopener noreferrer"
                           class="text-gray-700 dark:text-gray-200 underline-offset-2 hover:underline transition font-medium">
                            {{ settings('group_website') }}
                        </a>
                    </div>
                </div>
                @endif
            </div>
            <div class="flex-1 flex items-center justify-center pl-0 md:pl-8 mt-8 md:mt-0">
                <div class="w-40 h-40 rounded-2xl bg-indigo-50 flex items-center justify-center border border-gray-100 dark:border-gray-800 shadow-sm">
                    <img src="{{ asset('media/logo/logo.png') }}"
                         alt="{{ config('app.name') }}"
                         class="w-32 h-32 object-contain mix-blend-multiply opacity-90 transition duration-150">
                </div>
            </div>
        </div>
    </div>
    {{-- Branches list --}}
    <div class="mt-2">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Our Branches</h3>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($branches as $branch)
                <div class="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-lg p-5 shadow-sm">
                    <h4 class="text-base font-semibold text-indigo-700 dark:text-indigo-400 mb-1">{{ $branch->name }}</h4>
                    <div class="text-sm text-gray-600 dark:text-gray-400 mb-2">
                        <span class="font-medium">Address:</span><br>
                        {{ $branch->address }}
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection