@extends('layouts.app')

@php
    use App\Helpers\SeoHelper;
    use App\Helpers\MarketContent;
    $locale = app()->getLocale();
    $contactContent = $contactContent ?? MarketContent::contact($locale);
    $contactText = function (string $key, array $replace = []) use ($contactContent) {
        $value = data_get($contactContent, $key, '');
        foreach ($replace as $placeholder => $replacement) {
            $value = str_replace(':' . $placeholder, $replacement, (string) $value);
        }
        return $value;
    };
    $pageSeo = $contactContent['metadata'];

    $phoneCountries = [
        ['code' => 'PT', 'flag' => '🇵🇹', 'dial' => '+351', 'name' => 'Portugal', 'placeholder' => '912 345 678', 'format' => 'pt', 'min' => 9],
        ['code' => 'BR', 'flag' => '🇧🇷', 'dial' => '+55', 'name' => 'Brasil', 'placeholder' => '(11) 98765-4321', 'format' => 'br', 'min' => 10],
        ['code' => 'GB', 'flag' => '🇬🇧', 'dial' => '+44', 'name' => 'United Kingdom', 'placeholder' => '7700 900123', 'format' => 'gb', 'min' => 10],
        ['code' => 'US', 'flag' => '🇺🇸', 'dial' => '+1', 'name' => 'United States', 'placeholder' => '(555) 123-4567', 'format' => 'nanp', 'min' => 10],
        ['code' => 'CA', 'flag' => '🇨🇦', 'dial' => '+1', 'name' => 'Canada', 'placeholder' => '(416) 555-0123', 'format' => 'nanp', 'min' => 10],
        ['code' => 'ES', 'flag' => '🇪🇸', 'dial' => '+34', 'name' => 'España', 'placeholder' => '612 345 678', 'format' => '3-3-3', 'min' => 9],
        ['code' => 'FR', 'flag' => '🇫🇷', 'dial' => '+33', 'name' => 'France', 'placeholder' => '6 12 34 56 78', 'format' => 'fr', 'min' => 9],
        ['code' => 'DE', 'flag' => '🇩🇪', 'dial' => '+49', 'name' => 'Deutschland', 'placeholder' => '1512 3456789', 'format' => 'de', 'min' => 10],
        ['code' => 'IT', 'flag' => '🇮🇹', 'dial' => '+39', 'name' => 'Italia', 'placeholder' => '312 345 6789', 'format' => 'it', 'min' => 9],
        ['code' => 'NL', 'flag' => '🇳🇱', 'dial' => '+31', 'name' => 'Nederland', 'placeholder' => '6 12345678', 'format' => 'nl', 'min' => 9],
        ['code' => 'IE', 'flag' => '🇮🇪', 'dial' => '+353', 'name' => 'Ireland', 'placeholder' => '85 123 4567', 'format' => 'ie', 'min' => 9],
        ['code' => 'BE', 'flag' => '🇧🇪', 'dial' => '+32', 'name' => 'Belgium', 'placeholder' => '470 12 34 56', 'format' => 'be', 'min' => 9],
        ['code' => 'CH', 'flag' => '🇨🇭', 'dial' => '+41', 'name' => 'Switzerland', 'placeholder' => '78 123 45 67', 'format' => 'ch', 'min' => 9],
        ['code' => 'AT', 'flag' => '🇦🇹', 'dial' => '+43', 'name' => 'Austria', 'placeholder' => '664 123456', 'format' => 'at', 'min' => 10],
        ['code' => 'LU', 'flag' => '🇱🇺', 'dial' => '+352', 'name' => 'Luxembourg', 'placeholder' => '621 123 456', 'format' => '3-3-3', 'min' => 9],
        ['code' => 'DK', 'flag' => '🇩🇰', 'dial' => '+45', 'name' => 'Denmark', 'placeholder' => '20 12 34 56', 'format' => '2-2-2-2', 'min' => 8],
        ['code' => 'SE', 'flag' => '🇸🇪', 'dial' => '+46', 'name' => 'Sweden', 'placeholder' => '70 123 45 67', 'format' => 'se', 'min' => 9],
        ['code' => 'NO', 'flag' => '🇳🇴', 'dial' => '+47', 'name' => 'Norway', 'placeholder' => '412 34 567', 'format' => 'no', 'min' => 8],
        ['code' => 'FI', 'flag' => '🇫🇮', 'dial' => '+358', 'name' => 'Finland', 'placeholder' => '40 123 4567', 'format' => 'fi', 'min' => 9],
        ['code' => 'PL', 'flag' => '🇵🇱', 'dial' => '+48', 'name' => 'Poland', 'placeholder' => '512 345 678', 'format' => '3-3-3', 'min' => 9],
        ['code' => 'CZ', 'flag' => '🇨🇿', 'dial' => '+420', 'name' => 'Czechia', 'placeholder' => '601 123 456', 'format' => '3-3-3', 'min' => 9],
        ['code' => 'GR', 'flag' => '🇬🇷', 'dial' => '+30', 'name' => 'Greece', 'placeholder' => '691 234 5678', 'format' => '3-3-4', 'min' => 10],
        ['code' => 'AU', 'flag' => '🇦🇺', 'dial' => '+61', 'name' => 'Australia', 'placeholder' => '412 345 678', 'format' => 'au', 'min' => 9],
        ['code' => 'NZ', 'flag' => '🇳🇿', 'dial' => '+64', 'name' => 'New Zealand', 'placeholder' => '21 123 4567', 'format' => 'nz', 'min' => 9],
        ['code' => 'MX', 'flag' => '🇲🇽', 'dial' => '+52', 'name' => 'Mexico', 'placeholder' => '55 1234 5678', 'format' => 'mx', 'min' => 10],
        ['code' => 'AR', 'flag' => '🇦🇷', 'dial' => '+54', 'name' => 'Argentina', 'placeholder' => '9 11 1234 5678', 'format' => 'ar', 'min' => 10],
        ['code' => 'CL', 'flag' => '🇨🇱', 'dial' => '+56', 'name' => 'Chile', 'placeholder' => '9 1234 5678', 'format' => 'cl', 'min' => 9],
        ['code' => 'CO', 'flag' => '🇨🇴', 'dial' => '+57', 'name' => 'Colombia', 'placeholder' => '300 123 4567', 'format' => '3-3-4', 'min' => 10],
        ['code' => 'ZA', 'flag' => '🇿🇦', 'dial' => '+27', 'name' => 'South Africa', 'placeholder' => '82 123 4567', 'format' => 'za', 'min' => 9],
    ];

    $localeToCountry = [
        'br' => 'BR', 'us' => 'US', 'uk' => 'GB',
        'es' => 'ES', 'fr' => 'FR', 'de' => 'DE', 'it' => 'IT', 'nl' => 'NL',
        'ca' => 'CA', 'au' => 'AU', 'mx' => 'MX',
    ];
    $defaultPhoneCountry = old('phone_country') ?: ($localeToCountry[$locale] ?? 'PT');

    $localizedRoute = function($routeName, $params = []) use ($locale) {
        return SeoHelper::localizedRoute($routeName, $params, $locale);
    };

    $serviceOptions = [
        'web-development' => [
            'label' => $contactText('service_options.web-development.label'),
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5a17.92 17.92 0 01-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"/>',
        ],
        'ecommerce' => [
            'label' => $contactText('service_options.ecommerce.label'),
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/>',
        ],
        'seo-sem' => [
            'label' => $contactText('service_options.seo-sem.label'),
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>',
        ],
        'advertising' => [
            'label' => $contactText('service_options.advertising.label'),
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46"/>',
        ],
        'branding' => [
            'label' => $contactText('service_options.branding.label'),
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z"/>',
        ],
        'digital-marketing' => [
            'label' => $contactText('service_options.digital-marketing.label'),
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"/>',
        ],
        'google-meta-ads' => [
            'label' => $contactText('service_options.google-meta-ads.label'),
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/>',
        ],
        'crm-bookings' => [
            'label' => $contactText('service_options.crm-bookings.label'),
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 3v2.25M17.25 3v2.25M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 10.5h7.5m-7.5 3h4.5"/>',
        ],
        'other' => [
            'label' => $contactText('service_options.other.label'),
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v12m6-6H6"/>',
        ],
    ];

    $timeframeOptions = [
        'morning' => [
            'label' => $contactText('timeframe_options.morning.label'),
            'time' => $contactText('timeframe_options.morning.time'),
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"/>',
        ],
        'afternoon' => [
            'label' => $contactText('timeframe_options.afternoon.label'),
            'time' => $contactText('timeframe_options.afternoon.time'),
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"/>',
        ],
        'evening' => [
            'label' => $contactText('timeframe_options.evening.label'),
            'time' => $contactText('timeframe_options.evening.time'),
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"/>',
        ],
        'flexible' => [
            'label' => $contactText('timeframe_options.flexible.label'),
            'time' => $contactText('timeframe_options.flexible.time'),
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>',
        ],
    ];

    $prefilledServices = old('services', request('source') === 'calculator' && request('service') ? [request('service')] : []);
@endphp

@section('title', $pageSeo['title'])
@section('meta_description', $pageSeo['description'])
@section('meta_keywords', $pageSeo['keywords'])
@section('og_image', asset($pageSeo['image'] ?? 'images/og-contact.jpg'))

@push('schema')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ContactPage",
  "@id": "{{ \App\Helpers\SeoHelper::getCanonicalUrl() }}/#webpage",
  "url": "{{ \App\Helpers\SeoHelper::getCanonicalUrl() }}",
  "name": "{{ $contactText('schema.name') }}",
  "description": "{{ $contactText('schema.description') }}",
  "isPartOf": { "@id": "{{ config('seo.site_url') }}/#website" },
  "about": { "@id": "{{ config('seo.site_url') }}/#organization" },
  "inLanguage": "{{ SeoHelper::getCurrentLanguageCode() }}",
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [
      { "@type": "ListItem", "position": 1, "name": "{{ __('messages.nav.home') }}", "item": "{{ $localizedRoute('home') }}" },
      { "@type": "ListItem", "position": 2, "name": "{{ __('messages.nav.contact') }}", "item": "{{ \App\Helpers\SeoHelper::getCanonicalUrl() }}" }
    ]
  },
  "mainEntity": {
    "@type": "Organization",
    "@id": "{{ config('seo.site_url') }}/#organization",
    "name": "{{ __('messages.meta.author') }}",
    "email": "{{ config('seo.organization.email') }}",
    "telephone": "{{ config('seo.organization.phone') }}",
    "address": { "@type": "PostalAddress", "addressLocality": "{{ __('messages.meta.address_locality_default') }}", "addressCountry": "PT" }
  }
}
</script>
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('css/contact-page.css') }}?v=23">
@endpush

@push('head')
<script src="{{ asset('js/contact-form.js') }}?v=6" defer></script>
@endpush

@section('content')
<article class="contact-page dn-page">
    <section id="contact" class="contact-page__form-section" aria-labelledby="contact-form-heading">
        <div class="site-container">
            <div id="contact-form-wrapper">
                <div class="contact-card">
                    @if(session('error'))
                        <div class="contact-prefill-banner" role="alert" style="background:#fef3c7;border-color:#fcd34d;color:#92400e;">
                            {{ session('error') }}
                        </div>
                    @endif

                    <header class="contact-form-header">
                        <h1 id="contact-form-heading" class="contact-form-header__title">
                            {{ $contactText('form.discovery_title_1') }}
                            <span class="contact-form-header__title-accent">{{ $contactText('form.discovery_title_2') }}</span>
                        </h1>
                        <p class="contact-form-header__subtitle">{{ $contactText('form.discovery_subtitle') }}</p>
                    </header>

                    <form id="contact-form"
                          action="{{ $localizedRoute('contact.submit') }}"
                          method="POST"
                          novalidate
                          aria-label="{{ $contactText('aria.form') }}">
                        @csrf
                        <div class="contact-hp" aria-hidden="true">
                            <input type="text" name="fax_number" value="" tabindex="-1" autocomplete="off">
                            <input type="text" name="company_url" value="" tabindex="-1" autocomplete="off">
                        </div>
                        <input type="hidden" name="_js_ready" id="contact-js-ready" value="">
                        <input type="hidden" name="_form_loaded_at" id="contact-form-loaded-at" value="">

                        <input type="hidden" name="source" value="{{ request('source') }}">
                        <input type="hidden" name="lead_uuid" value="{{ request('lead_uuid') }}">
                        <input type="hidden" name="selected_timeline" value="{{ request('selected_timeline') }}">
                        <input type="hidden" name="service_slug" id="service_slug" value="{{ request('service') ?? request('selected_service') }}">
                        <input type="hidden" name="service_name" id="service_name" value="{{ request('service_name') }}">
                        <input type="hidden" name="industry_slug" id="industry_slug" value="{{ request('industry') }}">
                        <input type="hidden" name="industry_name" id="industry_name" value="{{ request('industry_name') }}">
                        <input type="hidden" name="selected_project_type" value="{{ request('selected_project_type') }}">
                        <input type="hidden" name="selected_scope" value="{{ request('selected_scope') }}">
                        <input type="hidden" name="selected_addons" value="{{ request('selected_addons') }}">
                        <input type="hidden" name="selected_budget_range" value="{{ request('selected_budget_range') }}">
                        <input type="hidden" name="detected_country" value="{{ request('detected_country') }}">
                        <input type="hidden" name="market_multiplier" value="{{ request('market_multiplier') }}">
                        <input type="hidden" name="complexity_level" value="{{ request('complexity_level') }}">
                        <input type="hidden" name="estimated_hours" value="{{ request('estimated_hours') }}">
                        <input type="hidden" name="estimated_price_min" value="{{ request('estimated_price_min') }}">
                        <input type="hidden" name="estimated_price_max" value="{{ request('estimated_price_max') }}">
                        <input type="hidden" name="entry_page" value="{{ request('entry_page') }}">
                        <input type="hidden" name="first_page" value="{{ request('first_page') }}">
                        <input type="hidden" name="referrer" value="{{ request('referrer') }}">
                        <input type="hidden" name="utm_source" value="{{ request('utm_source') }}">
                        <input type="hidden" name="utm_medium" value="{{ request('utm_medium') }}">
                        <input type="hidden" name="utm_campaign" value="{{ request('utm_campaign') }}">
                        <input type="hidden" name="utm_term" value="{{ request('utm_term') }}">
                        <input type="hidden" name="utm_content" value="{{ request('utm_content') }}">
                        <input type="hidden" name="gclid" value="{{ request('gclid') }}">
                        <input type="hidden" name="fbclid" value="{{ request('fbclid') }}">
                        <input type="hidden" name="msclkid" value="{{ request('msclkid') }}">
                        <input type="hidden" name="entry_service_hint" value="{{ request('entry_service_hint') }}">
                        <input type="hidden" name="entry_intent_hint" value="{{ request('entry_intent_hint') }}">
                        <input type="hidden" name="recommended_service" value="{{ request('recommended_service') }}">
                        <input type="hidden" name="session_language" value="{{ request('session_language') }}">
                        <input type="hidden" name="generated_summary" value="{{ request('generated_summary') }}">

                        @if(request('service_name') || request('industry_name'))
                        <div class="contact-prefill-banner">
                            <strong>{{ $contactText('form.interested_in') }}</strong>
                            @if(request('service_name')){{ request('service_name') }}@endif
                            @if(request('industry_name')) {{ $contactText('form.for_industry') }} {{ request('industry_name') }}@endif
                        </div>
                        @endif

                        {{-- Step 1: Services --}}
                        <div class="contact-form-section" id="contact-step-services">
                            <x-contact-section-heading
                                :title="$contactText('form.services_title')"
                                :hint="$contactText('form.services_hint')" />
                            <div class="contact-option-grid contact-option-grid--services" data-section="services">
                                @foreach($serviceOptions as $value => $service)
                                <label class="contact-option contact-option--service">
                                    <input type="checkbox" name="services[]" value="{{ $value }}"
                                           {{ in_array($value, $prefilledServices) ? 'checked' : '' }}>
                                    <span class="contact-option__icon" aria-hidden="true">
                                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">{!! $service['icon'] !!}</svg>
                                    </span>
                                    <span class="contact-option__label">{{ $service['label'] }}</span>
                                </label>
                                @endforeach
                            </div>
                            @error('services')<p class="contact-section-error">{{ $message }}</p>@enderror
                        </div>

                        {{-- Step 2: About you --}}
                        <div class="contact-form-section" id="contact-step-about">
                            <x-contact-section-heading :title="$contactText('form.contact_title')" />
                            <div class="contact-fields-grid">
                                <div class="contact-field">
                                    <label class="contact-field__label" for="contact-name">{{ $contactText('fields.name.label') }} *</label>
                                    <div class="contact-input-wrap">
                                        <span class="contact-input-wrap__icon" aria-hidden="true">
                                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0"/></svg>
                                        </span>
                                        <input type="text" name="name" id="contact-name" required
                                               class="contact-input"
                                               placeholder="{{ $contactText('fields.name.placeholder') }}"
                                               value="{{ old('name') }}" autocomplete="name">
                                    </div>
                                    @error('name')<p class="contact-field-error">{{ $message }}</p>@enderror
                                </div>

                                <div class="contact-field">
                                    <label class="contact-field__label" for="contact-email">{{ $contactText('fields.email.label') }} *</label>
                                    <div class="contact-input-wrap">
                                        <span class="contact-input-wrap__icon" aria-hidden="true">
                                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg>
                                        </span>
                                        <input type="email" name="email" id="contact-email" required
                                               class="contact-input"
                                               placeholder="{{ $contactText('fields.email.placeholder') }}"
                                               value="{{ old('email') }}" autocomplete="email">
                                    </div>
                                    @error('email')<p class="contact-field-error">{{ $message }}</p>@enderror
                                </div>

                                <div class="contact-field">
                                    <label class="contact-field__label" for="contact-phone">
                                        {{ $contactText('fields.phone.label') }}
                                        <span class="contact-field__label-optional">({{ $contactText('fields.phone.optional') }})</span>
                                    </label>
                                    <div class="contact-phone-shell" id="contact-phone-shell">
                                        <select id="contact-phone-country"
                                                name="phone_country"
                                                class="contact-phone-country"
                                                aria-label="{{ $contactText('fields.phone.country_label') }}"
                                                autocomplete="off">
                                            @foreach($phoneCountries as $country)
                                                <option value="{{ $country['code'] }}"
                                                        data-dial="{{ $country['dial'] }}"
                                                        data-placeholder="{{ $country['placeholder'] }}"
                                                        data-format="{{ $country['format'] }}"
                                                        data-min-digits="{{ $country['min'] }}"
                                                        {{ $defaultPhoneCountry === $country['code'] ? 'selected' : '' }}>
                                                    {{ $country['flag'] }} {{ $country['dial'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="contact-phone-input-wrap">
                                            <span class="contact-input-wrap__icon" aria-hidden="true">
                                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/></svg>
                                            </span>
                                            <input type="tel" name="phone" id="contact-phone"
                                                   class="contact-phone-input"
                                                   placeholder=""
                                                   value="{{ old('phone') }}"
                                                   autocomplete="tel-national"
                                                   inputmode="tel">
                                        </div>
                                    </div>
                                    @error('phone')<p class="contact-field-error">{{ $message }}</p>@enderror
                                </div>

                                <div class="contact-field">
                                    <label class="contact-field__label" for="contact-company">
                                        {{ $contactText('fields.company.label') }}
                                        <span class="contact-field__label-optional">({{ $contactText('fields.phone.optional') }})</span>
                                    </label>
                                    <div class="contact-input-wrap">
                                        <span class="contact-input-wrap__icon" aria-hidden="true">
                                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008H17.25v-.008zm0 3h.008v.008H17.25v-.008zm0 3h.008v.008H17.25v-.008z"/></svg>
                                        </span>
                                        <input type="text" name="company" id="contact-company"
                                               class="contact-input"
                                               placeholder="{{ $contactText('fields.company.placeholder') }}"
                                               value="{{ old('company') }}" autocomplete="organization">
                                    </div>
                                    @error('company')<p class="contact-field-error">{{ $message }}</p>@enderror
                                </div>
                            </div>
                        </div>

                        {{-- Step 3: Project --}}
                        <div class="contact-form-section" id="contact-step-project">
                            <x-contact-section-heading
                                :title="$contactText('form.project_title')"
                                :hint="$contactText('form.project_hint')" />
                            <div class="contact-textarea-wrap">
                                <span class="contact-input-wrap__icon" aria-hidden="true">
                                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z"/></svg>
                                </span>
                                <textarea name="message" id="contact-message" rows="5" maxlength="1000"
                                          class="contact-textarea"
                                          placeholder="{{ $contactText('fields.message.placeholder') }}">{{ old('message', request('message')) }}</textarea>
                                <span class="contact-char-count" id="contact-message-count" aria-live="polite">0 / 1000</span>
                            </div>
                            @error('message')<p class="contact-field-error">{{ $message }}</p>@enderror
                        </div>

                        {{-- Step 4: Timeframe --}}
                        <div class="contact-form-section" id="contact-step-timeframe">
                            <x-contact-section-heading
                                :title="$contactText('form.timeframe_title')"
                                :hint="$contactText('form.timeframe_reachout')" />
                            <div class="contact-option-grid contact-option-grid--timeframe" data-section="timeframe">
                                @foreach($timeframeOptions as $value => $option)
                                <label class="contact-option contact-option--timeframe">
                                    <input type="radio" name="timeframe" value="{{ $value }}"
                                           {{ old('timeframe') === $value ? 'checked' : '' }}>
                                    <span class="contact-option__icon" aria-hidden="true">
                                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">{!! $option['icon'] !!}</svg>
                                    </span>
                                    <span class="contact-option__content">
                                        <span class="contact-option__label">{{ $option['label'] }}</span>
                                        <span class="contact-option__time">{{ $option['time'] }}</span>
                                    </span>
                                </label>
                                @endforeach
                            </div>
                            @error('timeframe')<p class="contact-section-error">{{ $message }}</p>@enderror
                        </div>

                        {{-- Submit --}}
                        <div class="contact-form-footer">
                            <button type="submit" class="contact-submit-btn" aria-label="{{ $contactText('aria.schedule_consultation') }}">
                                <span class="submit-text">{{ $contactText('form.submit') }}</span>
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                                </svg>
                            </button>
                            <div class="contact-trust-row">
                                <span class="contact-trust-item">
                                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    {{ $contactText('form.response_time') }}
                                </span>
                                <span class="contact-trust-item">
                                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"/></svg>
                                    {{ $contactText('form.free_consultation') }}
                                </span>
                                <span class="contact-trust-item">
                                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                                    {{ $contactText('form.no_obligation') }}
                                </span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
</article>

@include('components.explore-site-section')
@endsection