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

@push('styles')
    <script type="text/javascript">
        var onloadCallback = function() {
            grecaptcha.render('get_recaptcha', {
                'sitekey': "{{ $page_init['setting']['recapcha'] ?? '' }}",
                'callback': function() {
                    $('#submit').removeAttr('disabled');
                }
            });
        };
    </script>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
    <link type="text/css" href="{{ asset('assets/libs/toastr/build/toastr.min.css') }}" rel="stylesheet">
    <style>
        .form-invalid-message {
            color: rgb(239 68 68) !important;
            font-size: 11px !important;
            margin-top: 3px !important;
            padding-bottom: 0.25rem !important;
        }
    </style>
@endpush

@section('content')
    @php
        $sp_word = explode(' ', $page_init['link_contact']['name']);
        $last_word = end($sp_word);
        $title = str_replace($last_word, '', $page_init['link_contact']['name']);
        if (empty($title)) {
            $title = $page_init['link_contact']['name'];
            $last_word = '';
        }
    @endphp

    @include('frontend::components.page-hero', [
        'title' => $title,
        'titleHighlight' => $last_word,
        'subtitle' => $page_init['link_contact']['desc'] ?? '',
        'image' => !empty($page_init['link_contact']['image']) ? asset($page_init['link_contact']['image']) : '',
        'imageAlt' => $page_init['link_contact']['name'] ?? '',
        'imagePosition' => 'object-center',
    ])

    {{-- Section A: Head Office --}}
    @if (!empty($page_init['contact']['office']) || !empty($page_init['contact']['tel'][0]) || !empty($page_init['contact']['email'][0]) || !empty($page_init['contact']['google_map']))
        <section class="relative overflow-hidden py-20 bg-[var(--background)]">
            @include('frontend::components.tsic-ellipse-decoration')
            <div class="container relative z-10 mx-auto px-4 lg:px-8">
                <div class="max-w-5xl mx-auto">
                    <h2 class="text-3xl font-bold mb-8 flex items-center gap-3">
                        <span class="w-8 h-8 text-[var(--primary)]">
                            <svg 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>
                        {{ __('frontend::lang.page.contact.head_office') }}
                    </h2>

                    <div class="p-8 rounded-[2rem] bg-gradient-to-br from-[var(--primary-5)] to-[var(--accent-5)] border border-[var(--border)] shadow-sm">
                        <div class="grid md:grid-cols-2 gap-8">
                            <div class="space-y-6">
                                @if (!empty($page_init['contact']['office']))
                                    <div class="flex items-start gap-4">
                                        <div class="w-12 h-12 rounded-full bg-[var(--primary-10)] flex items-center justify-center flex-shrink-0">
                                            <svg class="w-6 h-6 text-[var(--primary)]" 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>
                                        <div>
                                            <h4 class="font-semibold mb-1">{{ __('frontend::lang.page.contact.address') }}</h4>
                                            <p class="text-[var(--muted-foreground)] leading-relaxed text-pretty">
                                                {{ $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 rounded-full bg-[var(--primary-10)] flex items-center justify-center flex-shrink-0">
                                            <svg class="w-6 h-6 text-[var(--primary)]" 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>
                                        <div>
                                            <h4 class="font-semibold mb-1">{{ __('frontend::lang.page.contact.phone') }}</h4>
                                            @foreach ($page_init['contact']['tel'] as $item)
                                                <p class="text-[var(--muted-foreground)]">
                                                    <a class="text-[var(--primary)] hover:underline" href="tel:{{ $item }}">
                                                        {{ $item }}
                                                    </a>
                                                </p>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                                @if (!empty($page_init['contact']['email'][0]))
                                    <div class="flex items-start gap-4">
                                        <div class="w-12 h-12 rounded-full bg-[var(--primary-10)] flex items-center justify-center flex-shrink-0">
                                            <svg class="w-6 h-6 text-[var(--primary)]" 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" />
                                            </svg>
                                        </div>
                                        <div>
                                            <h4 class="font-semibold mb-1">{{ __('frontend::lang.page.contact.email') }}</h4>
                                            @foreach ($page_init['contact']['email'] as $item)
                                                <p class="text-[var(--muted-foreground)]">
                                                    <a class="text-[var(--primary)] hover:underline" href="mailto:{{ $item }}">
                                                        {{ $item }}
                                                    </a>
                                                </p>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>

                            @if (!empty($page_init['contact']['google_map']))
                                <div class="rounded-[2rem] h-[400px] overflow-hidden">
                                    {!! $page_init['contact']['google_map'] !!}
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    {{-- Section B: Key Contacts --}}
    @if (!empty($positions['list'][0]))
        @php
            $useKeyContactsSlider = count($positions['list']) > 2;
        @endphp
        <section class="relative overflow-hidden py-20 bg-[var(--muted-30)]">
            @include('frontend::components.tsic-ellipse-decoration')
            <div class="container relative z-10 mx-auto px-4 lg:px-8">
                <div class="max-w-5xl mx-auto">
                    <h2 class="text-3xl font-bold mb-8 flex items-center gap-3">
                        <span class="w-8 h-8 text-[var(--primary)]">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                            </svg>
                        </span>
                        {{ __('frontend::lang.page.contact.key_contacts') }}
                    </h2>

                    @if ($useKeyContactsSlider)
                        <div class="relative">
                            <div class="key-contacts-swiper swiper overflow-hidden">
                                <div class="swiper-wrapper">
                                    @foreach ($positions['list'] as $contact)
                                        <div class="swiper-slide px-2 pb-12 h-auto">
                                            <div class="p-6 rounded-[2rem] bg-[var(--card)] border border-[var(--border)] shadow-sm">
                                                <h3 class="font-bold text-lg mb-4">{{ $contact['desc'] ?? '' }}</h3>
                                                <div class="space-y-3 text-sm">
                                                    <div>
                                                        <p class="text-[var(--muted-foreground)] mb-1">{{ __('frontend::lang.page.contact.name') }}</p>
                                                        <p class="font-medium">{{ $contact['name'] ?? '' }}</p>
                                                    </div>
                                                    @if (!empty($contact['tel'][0]))
                                                        <div>
                                                            <p class="text-[var(--muted-foreground)] mb-1">{{ __('frontend::lang.page.contact.phone') }}</p>
                                                            <p class="font-medium space-y-1">
                                                                @foreach ($contact['tel'] as $phone)
                                                                    <a class="text-[var(--primary)] hover:underline block" href="tel:{{ $phone }}">
                                                                        {{ $phone }}
                                                                    </a>
                                                                @endforeach
                                                            </p>
                                                        </div>
                                                    @endif
                                                    @if (!empty($contact['email'][0]))
                                                        <div>
                                                            <p class="text-[var(--muted-foreground)] mb-1">{{ __('frontend::lang.page.contact.email') }}</p>
                                                            <p class="font-medium space-y-1">
                                                                @foreach ($contact['email'] as $email)
                                                                    <a class="text-[var(--primary)] hover:underline block" href="mailto:{{ $email }}">
                                                                        {{ $email }}
                                                                    </a>
                                                                @endforeach
                                                            </p>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="swiper-button-next key-contacts-next !w-10 !h-10 md:!w-12 md:!h-12" aria-label="Next"></div>
                            <div class="swiper-button-prev key-contacts-prev !w-10 !h-10 md:!w-12 md:!h-12" aria-label="Previous"></div>
                            <div class="key-contacts-pagination mt-8 flex justify-center gap-1"></div>
                        </div>
                    @else
                        <div class="grid md:grid-cols-2 gap-6">
                            @foreach ($positions['list'] as $contact)
                                <div class="p-6 rounded-[2rem] bg-[var(--card)] border border-[var(--border)] shadow-sm">
                                    <h3 class="font-bold text-lg mb-4">{{ $contact['desc'] ?? '' }}</h3>
                                    <div class="space-y-3 text-sm">
                                        <div>
                                            <p class="text-[var(--muted-foreground)] mb-1">{{ __('frontend::lang.page.contact.name') }}</p>
                                            <p class="font-medium">{{ $contact['name'] ?? '' }}</p>
                                        </div>
                                        @if (!empty($contact['tel'][0]))
                                            <div>
                                                <p class="text-[var(--muted-foreground)] mb-1">{{ __('frontend::lang.page.contact.phone') }}</p>
                                                <p class="font-medium space-y-1">
                                                    @foreach ($contact['tel'] as $phone)
                                                        <a class="text-[var(--primary)] hover:underline block" href="tel:{{ $phone }}">
                                                            {{ $phone }}
                                                        </a>
                                                    @endforeach
                                                </p>
                                            </div>
                                        @endif
                                        @if (!empty($contact['email'][0]))
                                            <div>
                                                <p class="text-[var(--muted-foreground)] mb-1">{{ __('frontend::lang.page.contact.email') }}</p>
                                                <p class="font-medium space-y-1">
                                                    @foreach ($contact['email'] as $email)
                                                        <a class="text-[var(--primary)] hover:underline block" href="mailto:{{ $email }}">
                                                            {{ $email }}
                                                        </a>
                                                    @endforeach
                                                </p>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </section>
    @endif

    {{-- Section C: Plant - Gradient: accent/5 → primary/5 --}}
    @if (!empty($factories['list'][0]))
        @php
            $useFactoriesSlider = count($factories['list']) > 1;
        @endphp
        <section class="relative overflow-hidden py-20 bg-[var(--background)]">
            @include('frontend::components.tsic-ellipse-decoration')
            <div class="container relative z-10 mx-auto px-4 lg:px-8">
                <div class="max-w-5xl mx-auto">
                    <h2 class="text-3xl font-bold mb-8 flex items-center gap-3">
                        <span class="w-8 h-8 text-[var(--accent)]">
                            <svg 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" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                            </svg>
                        </span>
                        {{ __('frontend::lang.page.contact.manufacturing_plant') }}
                    </h2>

                    @if ($useFactoriesSlider)
                        <div class="relative">
                            <div class="factories-swiper swiper overflow-hidden">
                                <div class="swiper-wrapper">
                                    @foreach ($factories['list'] as $factory)
                                        <div class="swiper-slide px-[3.5rem] pb-6 h-auto">
                                            <div class="p-6 md:p-8 rounded-[2rem] bg-gradient-to-br from-[var(--accent-5)] to-[var(--primary-5)] border border-[var(--border)] shadow-sm flex flex-col">
                                                <h3 class="text-xl font-bold mb-6 text-[var(--foreground)]">{{ $factory['name'] ?? '' }}</h3>
                                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 flex-1">
                                                    <div class="space-y-6">
                                                        @if (!empty($factory['desc']))
                                                            <div>
                                                                <h4 class="font-semibold mb-3 text-lg">{{ __('frontend::lang.page.contact.address') }}</h4>
                                                                <div class="flex items-start gap-4">
                                                                    <svg class="w-6 h-6 text-[var(--accent)] flex-shrink-0 mt-1" 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>
                                                                    <p class="text-[var(--muted-foreground)] leading-relaxed text-pretty text-sm">
                                                                        {{ $factory['desc'] ?? '' }}
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        @endif

                                                        @if (!empty($factory['tel'][0]))
                                                            <div>
                                                                <h4 class="font-semibold mb-3 text-lg">{{ __('frontend::lang.page.contact.phone') }}</h4>
                                                                <div class="flex items-start gap-3">
                                                                    <svg class="w-5 h-5 text-[var(--accent)] flex-shrink-0 mt-0.5" 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 class="space-y-1 text-sm">
                                                                        @foreach ($factory['tel'] as $tel)
                                                                            <p><a class="text-[var(--primary)] hover:underline font-medium" href="tel:{{ $tel }}">{{ $tel }}</a></p>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endif

                                                        @if (!empty($factory['email'][0]))
                                                            <div>
                                                                <h4 class="font-semibold mb-3 text-lg">Email</h4>
                                                                <div class="flex items-start gap-3">
                                                                    <svg class="w-5 h-5 text-[var(--accent)] flex-shrink-0 mt-0.5" 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" />
                                                                    </svg>
                                                                    <div class="space-y-1 text-sm">
                                                                        @foreach ($factory['email'] as $email)
                                                                            <p><a class="text-[var(--primary)] hover:underline font-medium" href="mailto:{{ $email }}">{{ $email }}</a></p>
                                                                        @endforeach
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>

                                                    @if (!empty($factory['google_map']))
                                                        <div class="rounded-[2rem] h-[260px] md:h-full md:min-h-[320px] overflow-hidden flex-shrink-0">
                                                            {!! $factory['google_map'] !!}
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="swiper-button-next factories-next !w-10 !h-10 md:!w-12 md:!h-12" aria-label="Next"></div>
                            <div class="swiper-button-prev factories-prev !w-10 !h-10 md:!w-12 md:!h-12" aria-label="Previous"></div>
                            <div class="factories-pagination mt-8 flex justify-center gap-1"></div>
                        </div>
                    @else
                        <div class="grid md:grid-cols-1 gap-8">
                            @foreach ($factories['list'] as $factory)
                                <div class="p-6 md:p-8 rounded-[2rem] bg-gradient-to-br from-[var(--accent-5)] to-[var(--primary-5)] border border-[var(--border)] shadow-sm flex flex-col">
                                    <h3 class="text-xl font-bold mb-6 text-[var(--foreground)]">{{ $factory['name'] ?? '' }}</h3>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 flex-1">
                                        <div class="space-y-6">
                                            @if (!empty($factory['desc']))
                                                <div>
                                                    <h4 class="font-semibold mb-3 text-lg">{{ __('frontend::lang.page.contact.address') }}</h4>
                                                    <div class="flex items-start gap-4">
                                                        <svg class="w-6 h-6 text-[var(--accent)] flex-shrink-0 mt-1" 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>
                                                        <p class="text-[var(--muted-foreground)] leading-relaxed text-pretty text-sm">
                                                            {{ $factory['desc'] ?? '' }}
                                                        </p>
                                                    </div>
                                                </div>
                                            @endif

                                            @if (!empty($factory['tel'][0]))
                                                <div>
                                                    <h4 class="font-semibold mb-3 text-lg">{{ __('frontend::lang.page.contact.phone') }}</h4>
                                                    <div class="flex items-start gap-3">
                                                        <svg class="w-5 h-5 text-[var(--accent)] flex-shrink-0 mt-0.5" 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 class="space-y-1 text-sm">
                                                            @foreach ($factory['tel'] as $tel)
                                                                <p><a class="text-[var(--primary)] hover:underline font-medium" href="tel:{{ $tel }}">{{ $tel }}</a></p>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif

                                            @if (!empty($factory['email'][0]))
                                                <div>
                                                    <h4 class="font-semibold mb-3 text-lg">Email</h4>
                                                    <div class="flex items-start gap-3">
                                                        <svg class="w-5 h-5 text-[var(--accent)] flex-shrink-0 mt-0.5" 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" />
                                                        </svg>
                                                        <div class="space-y-1 text-sm">
                                                            @foreach ($factory['email'] as $email)
                                                                <p><a class="text-[var(--primary)] hover:underline font-medium" href="mailto:{{ $email }}">{{ $email }}</a></p>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        @if (!empty($factory['google_map']))
                                            <div class="rounded-[2rem] h-[260px] md:h-full md:min-h-[320px] overflow-hidden flex-shrink-0">
                                                {!! $factory['google_map'] !!}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </section>
    @endif

    {{-- Section D: Inquiry Form --}}
    <section class="relative overflow-hidden py-20 bg-[var(--muted-30)]">
        @include('frontend::components.tsic-ellipse-decoration')
        <div class="container relative z-10 mx-auto px-4 lg:px-8">
            <div class="max-w-3xl mx-auto">
                <div class="text-center mb-12">
                    <h2 class="text-3xl font-bold mb-4">{{ __('frontend::lang.page.contact.form_title') }}</h2>
                    <p class="text-[var(--muted-foreground)] text-pretty">
                        {{ __('frontend::lang.page.contact.form_desc') }}
                    </p>
                </div>

                <div class="p-8 rounded-[2rem] bg-[var(--card)] border border-[var(--border)] shadow-sm">
                    <form class="space-y-6" id="contact_frm" method="POST" onsubmit="send_contact()">
                        @csrf
                        <div class="grid md:grid-cols-2 gap-6">
                            <div class="space-y-2">
                                <label class="text-sm font-medium" for="name">{{ __('frontend::lang.form.name') }} *</label>
                                <input class="w-full px-4 py-3 rounded-full border border-[var(--input)] bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]" id="name" name="name" data-max="{{ __('frontend::lang.form.placeholder.max', ['label' => __('frontend::lang.form.name'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.form.placeholder.input', ['label' => __('frontend::lang.form.name')]) }}" maxlength="255">
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium" for="surname">{{ __('frontend::lang.form.surname') }} *</label>
                                <input class="w-full px-4 py-3 rounded-full border border-[var(--input)] bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]" id="surname" name="surname" data-max="{{ __('frontend::lang.form.placeholder.max', ['label' => __('frontend::lang.form.surname'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.form.placeholder.input', ['label' => __('frontend::lang.form.surname')]) }}" maxlength="255">
                            </div>
                        </div>

                        <div class="grid md:grid-cols-2 gap-6">
                            <div class="space-y-2">
                                <label class="text-sm font-medium" for="tel">{{ __('frontend::lang.form.phone') }} *</label>
                                <input class="w-full px-4 py-3 rounded-full border border-[var(--input)] bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)] tel-number" id="tel" name="tel" data-max="{{ __('frontend::lang.form.placeholder.max', ['label' => __('frontend::lang.form.phone'), 'max' => 20]) }}" type="text" placeholder="{{ __('frontend::lang.form.placeholder.input', ['label' => __('frontend::lang.form.phone')]) }}" maxlength="20">
                            </div>
                            <div class="space-y-2">
                                <label class="text-sm font-medium" for="email">{{ __('frontend::lang.form.email') }} *</label>
                                <input class="w-full px-4 py-3 rounded-full border border-[var(--input)] bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]" id="email" name="email" data-max="{{ __('frontend::lang.form.placeholder.max', ['label' => __('frontend::lang.form.email'), 'max' => 255]) }}" data-email="{{ __('frontend::lang.form.placeholder.email') }}" type="email" placeholder="{{ __('frontend::lang.form.placeholder.input', ['label' => __('frontend::lang.form.email')]) }}" maxlength="255">
                            </div>
                        </div>

                        <div class="space-y-2">
                            <label class="text-sm font-medium" for="subject">{{ __('frontend::lang.form.topic') }} *</label>
                            <input class="w-full px-4 py-3 rounded-full border border-[var(--input)] bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]" id="subject" name="subject" data-max="{{ __('frontend::lang.form.placeholder.max', ['label' => __('frontend::lang.form.topic'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.form.placeholder.input', ['label' => __('frontend::lang.form.topic')]) }}" maxlength="255">
                        </div>

                        <div class="space-y-2">
                            <label class="text-sm font-medium" for="msg">{{ __('frontend::lang.form.message') }} *</label>
                            <textarea class="w-full px-4 py-3 min-h-[150px] rounded-[1.5rem] resize-none border border-[var(--input)] bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--ring)]" id="msg" name="msg" data-max="{{ __('frontend::lang.form.placeholder.max', ['label' => __('frontend::lang.form.message'), 'max' => 500]) }}" placeholder="{{ __('frontend::lang.form.placeholder.input', ['label' => __('frontend::lang.form.message')]) }}" rows="6"></textarea>
                        </div>

                        <div class="flex items-start gap-3">
                            <input class="mt-1 w-4 h-4 rounded border-[var(--input)] text-[var(--accent)] focus:ring-[var(--ring)]" id="policy" name="policy" type="checkbox" placeholder="{{ __('frontend::lang.form.placeholder.input', ['label' => __('frontend::lang.form.policy')]) }}">
                            <label class="text-sm text-[var(--muted-foreground)]" for="policy">
                                {{ __('frontend::lang.form.policy_desc') }}
                                <a class="text-[var(--accent)] underline hover:no-underline" href="{{ $link_term['url'] }}" target="_blank" rel="noopener noreferrer">{{ $link_term['name'] ?? '' }}</a>
                                {{ __('frontend::lang.label.and') }}
                                <a class="text-[var(--accent)] underline hover:no-underline" href="{{ $link_policy['url'] }}" target="_blank" rel="noopener noreferrer">{{ $link_policy['name'] ?? '' }}</a>
                            </label>
                        </div>

                        <div class="mb-8" id="get_recaptcha"></div>

                        <button class="w-full py-3 px-6 rounded-full bg-tsic-blue text-white font-medium hover:bg-tsic-purple transition-colors flex items-center justify-center gap-2" id="submit" type="submit" disabled>
                            <svg class="w-5 h-5" 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>
                            {{ __('frontend::lang.btn.send_message') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    @if (!empty($useKeyContactsSlider) || !empty($useFactoriesSlider))
        <script>
            (function() {
                function initKeyContactsSwiper() {
                    var el = document.querySelector('.key-contacts-swiper');
                    if (!el || typeof Swiper === 'undefined') return;
                    new Swiper('.key-contacts-swiper', {
                        slidesPerView: 1,
                        spaceBetween: 24,
                        loop: true,
                        breakpoints: {
                            768: {
                                slidesPerView: 2
                            }
                        },
                        navigation: {
                            nextEl: '.key-contacts-next',
                            prevEl: '.key-contacts-prev'
                        },
                        pagination: {
                            el: '.key-contacts-pagination',
                            clickable: true
                        }
                    });
                }

                function initFactoriesSwiper() {
                    var el = document.querySelector('.factories-swiper');
                    if (!el || typeof Swiper === 'undefined') return;
                    new Swiper('.factories-swiper', {
                        slidesPerView: 1,
                        spaceBetween: 24,
                        loop: true,
                        autoHeight: true,
                        navigation: {
                            nextEl: '.factories-next',
                            prevEl: '.factories-prev'
                        },
                        pagination: {
                            el: '.factories-pagination',
                            clickable: true
                        }
                    });
                }

                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', function() {
                        initKeyContactsSwiper();
                        initFactoriesSwiper();
                    });
                } else {
                    initKeyContactsSwiper();
                    initFactoriesSwiper();
                }
            })();
        </script>
    @endif
    <script src="{{ asset('assets/libs/validator/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/libs/toastr/build/toastr.min.js') }}"></script>

    {{ module_vite('build-frontend', 'resources/assets/js/contact.js') }}
@endpush