@extends('layouts.app')
@section('title', __('pages.branches.title'))

@section('content')
    <div class="shell py-stack-lg">
        <h1 class="text-headline-lg-mobile md:text-display-lg">{{ __('pages.branches.title') }}</h1>
        <p class="mt-stack-sm max-w-2xl text-body-lg text-on-surface-variant">{{ __('pages.branches.intro') }}</p>

        @foreach ($groups as $governorate => $branches)
            <section class="mt-stack-lg">
                <h2 class="u-label rule-start text-secondary">
                    {{ config("shop.governorates.{$governorate}." . app()->getLocale(), $governorate) }}
                </h2>

                <div class="mt-stack-sm grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    @foreach ($branches as $branch)
                        <article class="rounded-lg border border-outline-variant/70 p-stack-md transition-all duration-300 ease-soft hover:border-secondary/60 hover:shadow-ambient">
                            <h3 class="font-headline text-body-lg text-primary">{{ $branch->name }}</h3>
                            <p class="mt-2 text-body-md text-on-surface-variant">{{ $branch->address }}</p>

                            @if ($branch->hours)
                                <p class="mt-2 text-label-sm text-outline">
                                    <span class="u-label-sm text-secondary">{{ __('pages.branches.hours') }}</span> — {{ $branch->hours }}
                                </p>
                            @endif

                            <div class="mt-stack-sm flex flex-wrap gap-3">
                                @if ($branch->phone)
                                    <a href="tel:{{ $branch->phone }}" class="u-label-sm text-secondary hover:text-primary num">
                                        {{ __('pages.branches.call') }}
                                    </a>
                                @endif
                                @if ($branch->map_url)
                                    <a href="{{ $branch->map_url }}" target="_blank" rel="noopener"
                                       class="u-label-sm text-secondary hover:text-primary">
                                        {{ __('pages.branches.directions') }}
                                    </a>
                                @endif
                            </div>
                        </article>
                    @endforeach
                </div>
            </section>
        @endforeach
    </div>
@endsection