@extends('layouts.default')

@section('title', __('local.meta.title'))
@section('meta_description', __('local.meta.description'))
@section('canonical', route('local-services'))

@section('structured_data')
    @php
        $serviceAreas = array_map(
            static fn (string $city): array => ['@type' => 'City', 'name' => $city],
            __('local.areas.cities')
        );
        $localStructuredData = [
            '@context' => 'https://schema.org',
            '@graph' => [
                [
                    '@type' => 'Service',
                    '@id' => route('local-services').'#service',
                    'name' => __('local.schema.name'),
                    'serviceType' => __('local.schema.service_type'),
                    'description' => __('local.meta.description'),
                    'url' => route('local-services'),
                    'provider' => ['@id' => route('home').'#person'],
                    'areaServed' => $serviceAreas,
                ],
                [
                    '@type' => 'BreadcrumbList',
                    'itemListElement' => [
                        [
                            '@type' => 'ListItem',
                            'position' => 1,
                            'name' => __('global.navigation.home'),
                            'item' => route('home'),
                        ],
                        [
                            '@type' => 'ListItem',
                            'position' => 2,
                            'name' => __('local.breadcrumb'),
                            'item' => route('local-services'),
                        ],
                    ],
                ],
            ],
        ];
    @endphp
    <script type="application/ld+json">{!! json_encode($localStructuredData, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}</script>
@endsection

@section('styles')
    <style>
        .local-page {
            width: 100%;
            color: var(--text-primary);
        }

        .local-page__lead {
            max-width: 950px;
            margin: 0 auto 70px;
            text-align: center;
            font-family: Raleway, sans-serif;
            font-size: clamp(20px, 2.5vw, 30px);
            font-weight: 500;
            line-height: 1.45;
        }

        .local-page__section {
            margin-top: 80px;
        }

        .local-page__section:first-of-type {
            margin-top: 0;
        }

        .local-page__section h2 {
            margin: 0 0 18px;
            color: var(--text-primary);
            font-family: Raleway, sans-serif;
            font-size: clamp(27px, 4vw, 42px);
            line-height: 1.2;
        }

        .local-page__section > p {
            max-width: 900px;
            color: var(--text-secondary);
            font-family: Raleway, sans-serif;
            font-size: 17px;
            line-height: 1.75;
        }

        .local-services-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 22px;
            margin-top: 35px;
        }

        .local-service-card {
            padding: 30px;
            border-radius: 22px;
            background: var(--section-secondary-color);
        }

        .local-service-card h3 {
            margin: 0 0 12px;
            color: var(--text-primary);
            font-family: Raleway, sans-serif;
            font-size: 21px;
        }

        .local-service-card p {
            margin: 0;
            color: var(--text-secondary);
            font-family: Raleway, sans-serif;
            line-height: 1.65;
        }

        .local-city-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 30px 0 0;
            padding: 0;
            list-style: none;
        }

        .local-city-list li {
            padding: 9px 15px;
            border: 1px solid var(--btn-footer-border-color);
            border-radius: 30px;
            color: var(--text-primary);
            background: var(--section-secondary-color);
            font-family: Raleway, sans-serif;
        }

        .local-page__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 28px;
        }

        .local-faq {
            margin-top: 28px;
        }

        .local-faq details {
            padding: 20px 0;
            border-bottom: 1px solid var(--btn-footer-border-color);
        }

        .local-faq summary {
            color: var(--text-primary);
            cursor: pointer;
            font-family: Raleway, sans-serif;
            font-size: 18px;
            font-weight: 600;
        }

        .local-faq p {
            max-width: 900px;
            margin: 15px 0 0;
            color: var(--text-secondary);
            font-family: Raleway, sans-serif;
            line-height: 1.7;
        }

        @media (max-width: 767px) {
            .local-services-grid {
                grid-template-columns: 1fr;
            }

            .local-page__lead {
                margin-bottom: 45px;
            }

            .local-page__section {
                margin-top: 55px;
            }

            .local-service-card {
                padding: 24px;
            }
        }
    </style>
@endsection

@section('content')
    <section class="header-page projects-header-bg">
        <div class="tag-header">{{ __('local.header.tag') }}</div>
        <h1 class="title-header">{{ __('local.header.title') }}</h1>
    </section>

    <section class="tree-details">
        <div class="container-tree">
            <a href="{{ route('home') }}" class="btn-back w-inline-block">
                <div class="btn-back-name">{{ __('global.tree.back-btn') }}</div>
            </a>
            <div class="tree-text">
                <div class="tree-arbo">
                    <a href="{{ route('home') }}">{{ __('global.navigation.home') }}</a> &nbsp;&gt;&nbsp;
                    <span class="tree-arbo-current">{{ __('local.breadcrumb') }}</span>
                </div>
            </div>
        </div>
    </section>

    <main class="content">
        <div class="container-contact local-page">
            <p class="local-page__lead">{{ __('local.intro.text') }}</p>

            <section class="local-page__section">
                <h2>{{ __('local.intro.title') }}</h2>
                <p>{{ __('local.services.intro') }}</p>

                <div class="local-services-grid">
                    @foreach(__('local.services.items') as $service)
                        <article class="local-service-card">
                            <h3>{{ $service['title'] }}</h3>
                            <p>{{ $service['text'] }}</p>
                        </article>
                    @endforeach
                </div>
            </section>

            <section class="local-page__section">
                <h2>{{ __('local.areas.title') }}</h2>
                <p>{{ __('local.areas.text') }}</p>
                <ul class="local-city-list" aria-label="{{ __('local.areas.title') }}">
                    @foreach(__('local.areas.cities') as $city)
                        <li>{{ $city }}</li>
                    @endforeach
                </ul>
            </section>

            <section class="local-page__section">
                <h2>{{ __('local.approach.title') }}</h2>
                <p>{{ __('local.approach.text') }}</p>
                <div class="local-page__actions">
                    <a href="{{ route('projects') }}" class="btn w-inline-block">
                        <span class="btn-label">{{ __('local.approach.projects_button') }}</span>
                    </a>
                    <a href="{{ route('contact') }}" class="btn-outline w-inline-block">
                        <span class="btn-outline-label">{{ __('local.approach.contact_button') }}</span>
                    </a>
                </div>
            </section>

            <section class="local-page__section">
                <h2>{{ __('local.faq.title') }}</h2>
                <div class="local-faq">
                    @foreach(__('local.faq.items') as $item)
                        <details>
                            <summary>{{ $item['question'] }}</summary>
                            <p>{{ $item['answer'] }}</p>
                        </details>
                    @endforeach
                </div>
            </section>
        </div>
    </main>
@endsection