@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'];
    $formMarket = config('leads.locale_to_form_market.' . $locale, 'other');
    $phoneConfig = config('leads.form_phone.' . $formMarket, config('leads.form_phone.other'));
    $phoneCountries = [
        ['code' => 'PT', 'locale' => 'pt', 'flag' => '🇵🇹', 'dial' => '+351', 'name' => 'Portugal', 'placeholder' => '912 345 678', 'format' => 'pt'],
        ['code' => 'BR', 'locale' => 'br', 'flag' => '🇧🇷', 'dial' => '+55', 'name' => 'Brasil', 'placeholder' => '(11) 98765-4321', 'format' => 'br'],
        ['code' => 'GB', 'locale' => 'en', 'flag' => '🇬🇧', 'dial' => '+44', 'name' => 'United Kingdom', 'placeholder' => '7700 900123', 'format' => 'gb'],
        ['code' => 'US', 'locale' => 'us', 'flag' => '🇺🇸', 'dial' => '+1', 'name' => 'United States', 'placeholder' => '(555) 123-4567', 'format' => 'nanp'],
        ['code' => 'CA', 'locale' => 'ca', 'flag' => '🇨🇦', 'dial' => '+1', 'name' => 'Canada', 'placeholder' => '(416) 555-0123', 'format' => 'nanp'],
        ['code' => 'ES', 'locale' => 'es', 'flag' => '🇪🇸', 'dial' => '+34', 'name' => 'España', 'placeholder' => '612 345 678', 'format' => '3-3-3'],
        ['code' => 'FR', 'locale' => 'fr', 'flag' => '🇫🇷', 'dial' => '+33', 'name' => 'France', 'placeholder' => '6 12 34 56 78', 'format' => 'fr'],
        ['code' => 'DE', 'locale' => 'de', 'flag' => '🇩🇪', 'dial' => '+49', 'name' => 'Deutschland', 'placeholder' => '1512 3456789', 'format' => 'de'],
        ['code' => 'IT', 'locale' => 'it', 'flag' => '🇮🇹', 'dial' => '+39', 'name' => 'Italia', 'placeholder' => '312 345 6789', 'format' => 'it'],
        ['code' => 'NL', 'locale' => 'nl', 'flag' => '🇳🇱', 'dial' => '+31', 'name' => 'Nederland', 'placeholder' => '6 12345678', 'format' => 'nl'],
        ['code' => 'IE', 'locale' => 'en', 'flag' => '🇮🇪', 'dial' => '+353', 'name' => 'Ireland', 'placeholder' => '85 123 4567', 'format' => 'ie'],
        ['code' => 'BE', 'locale' => 'fr', 'flag' => '🇧🇪', 'dial' => '+32', 'name' => 'Belgium', 'placeholder' => '470 12 34 56', 'format' => 'be'],
        ['code' => 'CH', 'locale' => 'de', 'flag' => '🇨🇭', 'dial' => '+41', 'name' => 'Switzerland', 'placeholder' => '78 123 45 67', 'format' => 'ch'],
        ['code' => 'AT', 'locale' => 'de', 'flag' => '🇦🇹', 'dial' => '+43', 'name' => 'Austria', 'placeholder' => '664 123456', 'format' => 'at'],
        ['code' => 'LU', 'locale' => 'fr', 'flag' => '🇱🇺', 'dial' => '+352', 'name' => 'Luxembourg', 'placeholder' => '621 123 456', 'format' => '3-3-3'],
        ['code' => 'DK', 'locale' => 'da', 'flag' => '🇩🇰', 'dial' => '+45', 'name' => 'Denmark', 'placeholder' => '20 12 34 56', 'format' => '2-2-2-2'],
        ['code' => 'SE', 'locale' => 'sv', 'flag' => '🇸🇪', 'dial' => '+46', 'name' => 'Sweden', 'placeholder' => '70 123 45 67', 'format' => 'se'],
        ['code' => 'NO', 'locale' => 'no', 'flag' => '🇳🇴', 'dial' => '+47', 'name' => 'Norway', 'placeholder' => '412 34 567', 'format' => 'no'],
        ['code' => 'FI', 'locale' => 'fi', 'flag' => '🇫🇮', 'dial' => '+358', 'name' => 'Finland', 'placeholder' => '40 123 4567', 'format' => 'fi'],
        ['code' => 'PL', 'locale' => 'pl', 'flag' => '🇵🇱', 'dial' => '+48', 'name' => 'Poland', 'placeholder' => '512 345 678', 'format' => '3-3-3'],
        ['code' => 'CZ', 'locale' => 'cs', 'flag' => '🇨🇿', 'dial' => '+420', 'name' => 'Czechia', 'placeholder' => '601 123 456', 'format' => '3-3-3'],
        ['code' => 'GR', 'locale' => 'el', 'flag' => '🇬🇷', 'dial' => '+30', 'name' => 'Greece', 'placeholder' => '691 234 5678', 'format' => '3-3-4'],
        ['code' => 'AU', 'locale' => 'en', 'flag' => '🇦🇺', 'dial' => '+61', 'name' => 'Australia', 'placeholder' => '412 345 678', 'format' => 'au'],
        ['code' => 'NZ', 'locale' => 'en', 'flag' => '🇳🇿', 'dial' => '+64', 'name' => 'New Zealand', 'placeholder' => '21 123 4567', 'format' => 'nz'],
        ['code' => 'MX', 'locale' => 'es', 'flag' => '🇲🇽', 'dial' => '+52', 'name' => 'Mexico', 'placeholder' => '55 1234 5678', 'format' => 'mx'],
        ['code' => 'AR', 'locale' => 'es', 'flag' => '🇦🇷', 'dial' => '+54', 'name' => 'Argentina', 'placeholder' => '9 11 1234 5678', 'format' => 'ar'],
        ['code' => 'CL', 'locale' => 'es', 'flag' => '🇨🇱', 'dial' => '+56', 'name' => 'Chile', 'placeholder' => '9 1234 5678', 'format' => 'cl'],
        ['code' => 'CO', 'locale' => 'es', 'flag' => '🇨🇴', 'dial' => '+57', 'name' => 'Colombia', 'placeholder' => '300 123 4567', 'format' => '3-3-4'],
        ['code' => 'ZA', 'locale' => 'en', 'flag' => '🇿🇦', 'dial' => '+27', 'name' => 'South Africa', 'placeholder' => '82 123 4567', 'format' => 'za'],
    ];
    $phoneLocaleMap = collect($phoneCountries)->keyBy('locale');
    $hasLocalePhoneCountry = isset($phoneLocaleMap[$locale]);
    $defaultPhoneCountry = old('phone_country')
        ?: (($hasLocalePhoneCountry ? $phoneLocaleMap[$locale]['code'] : null)
        ?: ($formMarket === 'brazil' ? 'BR' : ($formMarket === 'us' ? 'US' : 'PT')));
    
    // Helper function to generate localized routes (English has no prefix)
    $localizedRoute = function($routeName, $params = []) use ($locale) {
        return SeoHelper::localizedRoute($routeName, $params, $locale);
    };
@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')
{{-- ContactPage 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')
<style>
    /* Hero Gradient Background - Matching Homepage */
    .contact-hero-gradient {
        background: linear-gradient(to bottom, #ecf4f5 0%, #ffffff 100%);
    }
    
    
    .animate-slide-up {
        animation: slideUp 0.8s ease-out forwards;
    }
    
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .animation-delay-200 { animation-delay: 200ms; }
    
    /* Service Option Styles - Clean Selection */
    .service-option {
        position: relative;
    }
    .service-option::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 12px;
        background: transparent;
        transition: background 0.2s ease;
    }
    .service-option:hover::before {
        background: rgba(0, 183, 178, 0.04);
    }
    .service-option:hover {
        transform: translateX(2px);
    }
    .service-option:has(input:checked)::before {
        background: rgba(0, 183, 178, 0.08);
    }
    .service-option:has(input:checked) .service-icon {
        background: linear-gradient(135deg, #00b7b2 0%, #00a09c 100%);
    }
    .service-option:has(input:checked) .service-icon svg {
        color: white;
    }
    .service-option:has(input:checked) .service-label {
        color: #00b7b2;
        font-weight: 600;
    }
    
    /* Timeframe Option Styles - Clean Selection */
    .timeframe-option {
        position: relative;
    }
    .timeframe-option::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 12px;
        background: transparent;
        transition: background 0.2s ease;
    }
    .timeframe-option:hover::before {
        background: rgba(0, 183, 178, 0.04);
    }
    .timeframe-option:has(input:checked)::before {
        background: rgba(0, 183, 178, 0.08);
    }
    .timeframe-option:has(input:checked) .timeframe-icon {
        background: linear-gradient(135deg, #00b7b2 0%, #00a09c 100%);
    }
    .timeframe-option:has(input:checked) .timeframe-icon svg {
        color: white;
    }
    .timeframe-option:has(input:checked) .timeframe-label {
        color: #00b7b2;
    }
    
    /* Floating labels --- label floats on focus or when field has value (no overlap with input) */
    .float-label-wrap {
        position: relative;
    }
    .float-label-wrap input,
    .float-label-wrap textarea {
        display: block;
        width: 100%;
        padding-top: 1.25rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    @media (min-width: 640px) {
        .float-label-wrap input,
        .float-label-wrap textarea {
            padding-top: 1.5rem;
        }
    }
    .float-label-wrap textarea {
        min-height: 120px;
    }
    @media (min-width: 640px) {
        .float-label-wrap textarea {
            min-height: 140px;
        }
    }
    .float-label-wrap label {
        position: absolute;
        left: 1rem;
        top: 0.875rem;
        transform-origin: left top;
        color: #737373;
        font-size: 0.875rem;
        font-weight: 500;
        pointer-events: none;
        transition: transform 0.2s ease, color 0.2s ease, top 0.2s ease;
    }
    @media (min-width: 640px) {
        .float-label-wrap label {
            left: 1.25rem;
            top: 1rem;
            font-size: 1rem;
        }
    }
    .float-label-wrap textarea ~ label {
        top: 1rem;
    }
    @media (min-width: 640px) {
        .float-label-wrap textarea ~ label {
            top: 1.25rem;
        }
    }
    .float-label-wrap input:focus,
    .float-label-wrap textarea:focus {
        outline: none;
        border-color: #00b7b2;
        box-shadow: 0 0 0 3px rgba(0, 183, 178, 0.12);
    }
    /* Floated state: label above field (focus or has value --- CSS) */
    .float-label-wrap input:focus ~ label,
    .float-label-wrap input:not(:placeholder-shown) ~ label,
    .float-label-wrap.has-value input ~ label,
    .float-label-wrap textarea:focus ~ label,
    .float-label-wrap textarea:not(:placeholder-shown) ~ label,
    .float-label-wrap.has-value textarea ~ label {
        top: 0.375rem;
        transform: scale(0.85);
        color: #00b7b2;
    }
    @media (min-width: 640px) {
        .float-label-wrap input:focus ~ label,
        .float-label-wrap input:not(:placeholder-shown) ~ label,
        .float-label-wrap.has-value input ~ label,
        .float-label-wrap textarea:focus ~ label,
        .float-label-wrap textarea:not(:placeholder-shown) ~ label,
        .float-label-wrap.has-value textarea ~ label {
            top: 0.5rem;
            transform: scale(0.8);
        }
    }
    /* Floated state for textarea (slightly different top so it sits above content) */
    .float-label-wrap textarea:focus ~ label,
    .float-label-wrap textarea:not(:placeholder-shown) ~ label,
    .float-label-wrap.has-value textarea ~ label {
        top: 0.375rem;
        transform: scale(0.85);
    }
    @media (min-width: 640px) {
        .float-label-wrap textarea:focus ~ label,
        .float-label-wrap textarea:not(:placeholder-shown) ~ label,
        .float-label-wrap.has-value textarea ~ label {
            top: 0.5rem;
            transform: scale(0.8);
        }
    }
    .float-label-wrap .field-error {
        margin-top: 0.35rem;
        font-size: 0.875rem;
        color: #dc2626;
    }
    .phone-input-shell {
        position: relative;
        display: grid;
        grid-template-columns: 6.8rem minmax(0, 1fr);
        align-items: stretch;
        overflow: hidden;
        border: 2px solid #e5e5e5;
        border-radius: 0.75rem;
        background: #ffffff;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .phone-input-shell:focus-within {
        border-color: #00b7b2;
        box-shadow: 0 0 0 3px rgba(0, 183, 178, 0.12);
    }
    .phone-country-select {
        width: 100%;
        min-width: 0;
        border: 0;
        border-right: 1px solid #e5e5e5;
        border-radius: 0;
        background: #f8fafc;
        color: #111827;
        font-weight: 600;
        font-size: 0.875rem;
        padding: 1.05rem 1.25rem 0.8rem 0.75rem;
        outline: none;
        cursor: pointer;
    }
    .phone-number-input {
        width: 100%;
        min-width: 0;
        border: 0;
        background: transparent;
        color: #111827;
        font-size: 0.875rem;
        padding: 1.35rem 1rem 0.7rem 1rem;
        outline: none;
    }
    @media (min-width: 640px) {
        .phone-input-shell {
            grid-template-columns: 7.25rem minmax(0, 1fr);
        }
        .phone-country-select {
            font-size: 1rem;
            padding: 1.2rem 2rem 0.85rem 1rem;
        }
        .phone-number-input {
            font-size: 1rem;
            padding: 1.55rem 1.25rem 0.85rem 1.25rem;
        }
    }
    .phone-field label {
        left: calc(6.8rem + 1rem);
        top: 0.78rem;
    }
    .phone-field.has-value label,
    .phone-field:focus-within label {
        top: 0.35rem;
        transform: scale(0.85);
        color: #00b7b2;
    }
    @media (min-width: 640px) {
        .phone-field label {
            left: calc(7.25rem + 1.25rem);
            top: 0.95rem;
        }
        .phone-field.has-value label,
        .phone-field:focus-within label {
            top: 0.5rem;
            transform: scale(0.8);
        }
    }
    /* Dark mode adjustments */
</style>
@endpush

@section('content')

<!-- Hero Section - Matching Design System -->
<section class="relative pt-20 sm:pt-24 pb-8 sm:pb-12 overflow-hidden contact-hero-gradient">
    <div class="site-container">
        <!-- Hero Content - Mobile-first responsive grid -->
        <div class="grid grid-cols-1 md:grid-cols-[50%_1fr_30%] gap-6 md:gap-0 items-start">
            <!-- Left: Title -->
            <div class="animate-slide-up">
                <h1 class="page-hero__headline text-slate-900 mb-4 sm:mb-6">
                    {{ $contactText('hero.title_1') }}<br>
                    <span class="text-criazo-primary">{{ $contactText('hero.title_2') }}</span>
                </h1>
                
                <!-- Buttons below title (desktop only) -->
                <div class="hidden md:flex flex-wrap gap-3">
                    <a href="#contact-form-wrapper" 
                       onclick="event.preventDefault(); document.getElementById('contact-form-wrapper').scrollIntoView({ behavior: 'smooth', block: 'start' });"
                       class="inline-flex items-center px-5 py-2.5 bg-criazo-primary text-white rounded-full type-btn hover:bg-criazo-hover smooth-transition shadow-lg">
                        {{ $contactText('hero.primary_cta') }}
                    </a>
                </div>
            </div>
            
            <!-- Middle: Empty Space (Desktop only) -->
            <div class="hidden md:block"></div>
            
            <!-- Right: Description -->
            <div class="animate-slide-up animation-delay-200">
                <p class="text-sm text-slate-600 leading-snug mb-4">
                    {{ $contactText('hero.description') }}
                </p>
                
                <!-- Trust Indicators -->
                <div class="space-y-2 mb-6">
                    <div class="flex items-center gap-2 text-xs text-slate-600">
                        <svg class="w-4 h-4 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <span>{{ $contactText('hero.trust.0') }}</span>
                    </div>
                    <div class="flex items-center gap-2 text-xs text-slate-600">
                        <svg class="w-4 h-4 text-criazo-primary" 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>
                        <span>{{ $contactText('hero.trust.1') }}</span>
                    </div>
                    <div class="flex items-center gap-2 text-xs text-slate-600">
                        <svg class="w-4 h-4 text-criazo-primary" 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>
                        <span>{{ $contactText('hero.trust.2') }}</span>
                    </div>
                </div>
                
                <!-- Buttons below description (mobile only) -->
                <div class="flex flex-wrap gap-3 md:hidden">
                    <a href="#contact-form-wrapper" 
                       onclick="event.preventDefault(); document.getElementById('contact-form-wrapper').scrollIntoView({ behavior: 'smooth', block: 'start' });"
                       class="inline-flex items-center px-5 py-2.5 bg-criazo-primary text-white rounded-full type-btn hover:bg-criazo-hover smooth-transition shadow-lg">
                        {{ $contactText('hero.primary_cta') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="pt-8 pb-24 bg-white">
    <div class="site-container">
        
        <!-- Contact Form - Redesigned -->
        <div id="contact-form-wrapper">
            <div class="md:bg-white md:rounded-3xl md:shadow-2xl py-4 sm:py-6 md:py-12 md:px-8 lg:px-12">
                @if(session('error'))
                    <div class="mb-6 p-4 rounded-xl bg-amber-50 border border-amber-200 text-amber-800" role="alert">
                        {{ session('error') }}
                    </div>
                @endif
                <form id="contact-form" action="{{ $localizedRoute('contact.submit') }}" method="POST" class="space-y-6 md:space-y-8" data-form-market="{{ $formMarket }}" aria-label="{{ $contactText('aria.form') }}">
                    @csrf
                    <input type="text" name="fax_number" value="" tabindex="-1" autocomplete="off" class="hidden" aria-hidden="true">
                    
                    <!-- Hidden fields for tracking -->
                    <input type="hidden" name="service_slug" id="service_slug" value="{{ request('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') }}">
                    
                    <!-- Pre-selected Service/Industry Display -->
                    @if(request('service_name') || request('industry_name'))
                    <div class="p-3 sm:p-4 bg-criazo-primary/5 border border-criazo-primary/20 rounded-xl">
                        <p class="text-xs sm:text-sm text-neutral-600">
                            <span class="font-semibold text-criazo-primary">{{ $contactText('form.interested_in') }}</span>
                            @if(request('service_name'))
                                {{ request('service_name') }}
                            @endif
                            @if(request('industry_name'))
                                {{ $contactText('form.for_industry') }} {{ request('industry_name') }}
                            @endif
                        </p>
                    </div>
                    @endif
                    
                    <!-- Split View Layout: Left (Services & Timeframe) | Right (Input Fields) -->
                    <div class="grid grid-cols-1 lg:grid-cols-[45%_1fr] gap-6 md:gap-8 lg:gap-12">
                        <!-- Left Column: Services & Timeframe -->
                        <div class="space-y-6 md:space-y-8">
                            <!-- Services Section -->
                            <div class="space-y-2">
                                <h3 class="text-base sm:type-card-title">
                                    {{ $contactText('form.services_title') }}
                                </h3>
                                <p class="text-xs sm:text-sm text-neutral-600 mb-2">
                                    {{ $contactText('form.services_hint') }}
                                </p>
                                <div class="grid grid-cols-2 sm:grid-cols-2 gap-2">
                                    @php
                                    $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"/>'],
                                        'shopify' => ['label' => $contactText('service_options.shopify.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"/>'],
                                        'social-media' => ['label' => $contactText('service_options.social-media.label'), 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"/>'],
                                        '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"/>'],
                                        '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"/>'],
                                        '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"/>'],
                                        'hosting' => ['label' => $contactText('service_options.hosting.label'), 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z"/>'],
                                        'optimization' => ['label' => $contactText('service_options.optimization.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"/>']
                                    ];
                                    @endphp
                                    @foreach($serviceOptions as $value => $service)
                                    <label class="service-option group relative flex flex-col sm:flex-row sm:items-center items-center justify-center sm:justify-start gap-2 sm:gap-3 p-3 sm:p-3 rounded-xl cursor-pointer transition-all duration-200">
                                        <input type="checkbox" name="services[]" value="{{ $value }}"
                                               class="sr-only peer"
                                               {{ in_array($value, old('services', request('source') === 'calculator' && request('service') ? [request('service')] : [])) ? 'checked' : '' }}>
                                        <div class="service-icon w-8 h-8 sm:w-9 sm:h-9 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0 mb-1.5 sm:mb-0 transition-all duration-200">
                                            <svg class="w-4 h-4 sm:w-[18px] sm:h-[18px] text-gray-500 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                {!! $service['icon'] !!}
                                            </svg>
                                        </div>
                                        <span class="service-label text-xs sm:text-[14px] text-gray-700 font-medium sm:font-medium text-center sm:text-left transition-colors duration-200">{{ $service['label'] }}</span>
                                    </label>
                                    @endforeach
                                </div>
                                @error('services')
                                <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <!-- Timeframe Section -->
                            <div class="space-y-2">
                                <h3 class="text-base sm:type-card-title">
                                    {{ $contactText('form.timeframe_title') }}
                                </h3>
                                <p class="text-xs sm:text-sm text-neutral-600 mb-2">
                                    {{ $contactText('form.timeframe_hint') }}
                                </p>
                                @php
                                $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"/>'
                                    ]
                                ];
                                @endphp
                                <div class="grid grid-cols-2 gap-2">
                                    @foreach($timeframeOptions as $value => $option)
                                    <label class="timeframe-option group relative flex flex-col items-center justify-center p-3 sm:p-4 rounded-xl cursor-pointer transition-all duration-200">
                                        <input type="radio" name="timeframe" value="{{ $value }}" required
                                               class="sr-only peer"
                                               {{ old('timeframe') === $value ? 'checked' : '' }}>
                                        <div class="timeframe-icon w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-gray-100 flex items-center justify-center mb-1.5 sm:mb-2 transition-all duration-200">
                                            <svg class="w-4 h-4 sm:w-5 sm:h-5 text-gray-500 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                {!! $option['icon'] !!}
                                            </svg>
                                        </div>
                                        <span class="timeframe-label text-xs sm:text-[13px] text-gray-700 font-semibold transition-colors duration-200">{{ $option['label'] }}</span>
                                        <span class="text-[10px] sm:text-[11px] text-gray-500 mt-0.5">{{ $option['time'] }}</span>
                                    </label>
                                    @endforeach
                                </div>
                                @error('timeframe')
                                <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        
                        <!-- Right Column: Input Fields -->
                        <div class="space-y-6 md:space-y-8">
                            <!-- Personal Information Section -->
                            <div class="space-y-2">
                                <h3 class="text-base sm:type-card-title">
                                    {{ $contactText('form.contact_title') }}
                                </h3>
                                
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
                                    <div class="float-label-wrap">
                                        <input type="text" name="name" id="contact-name" required
                                               class="px-4 py-3 sm:px-5 sm:py-3.5 bg-white border-2 border-neutral-200 rounded-xl text-sm sm:text-base text-neutral-900 placeholder:text-transparent"
                                               placeholder=" "
                                               value="{{ old('name') }}" autocomplete="name">
                                        <label for="contact-name" class="text-sm sm:text-base">{{ $contactText('fields.name.label') }} *</label>
                                        @error('name')
                                        <p class="field-error">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div class="float-label-wrap">
                                        <input type="email" name="email" id="contact-email" required
                                               class="px-4 py-3 sm:px-5 sm:py-3.5 bg-white border-2 border-neutral-200 rounded-xl text-sm sm:text-base text-neutral-900 placeholder:text-transparent"
                                               placeholder=" "
                                               value="{{ old('email') }}" autocomplete="email">
                                        <label for="contact-email" class="text-sm sm:text-base">{{ $contactText('fields.email.label') }} *</label>
                                        @error('email')
                                        <p class="field-error">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="float-label-wrap phone-field" data-default-phone-country="{{ $defaultPhoneCountry }}" data-current-locale="{{ $locale }}" data-locale-phone-country="{{ $hasLocalePhoneCountry ? '1' : '0' }}">
                                    <div class="phone-input-shell">
                                        <select id="contact-phone-country"
                                                name="phone_country"
                                                class="phone-country-select"
                                                aria-label="{{ $contactText('fields.phone.country_label') }}"
                                                autocomplete="tel-country-code">
                                            @foreach($phoneCountries as $country)
                                                <option value="{{ $country['code'] }}"
                                                        data-locale="{{ $country['locale'] }}"
                                                        data-dial="{{ $country['dial'] }}"
                                                        data-placeholder="{{ $country['placeholder'] }}"
                                                        data-format="{{ $country['format'] ?? 'generic' }}"
                                                        {{ $defaultPhoneCountry === $country['code'] ? 'selected' : '' }}>
                                                    {{ $country['flag'] }} {{ $country['dial'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <input type="tel" name="phone" id="contact-phone"
                                               class="phone-number-input placeholder:text-transparent"
                                               placeholder=" "
                                               data-phone-market="{{ $formMarket }}"
                                               data-phone-placeholder="{{ $phoneConfig['placeholder'] ?? '' }}"
                                               value="{{ old('phone') }}" autocomplete="tel-national">
                                        <label for="contact-phone" class="text-sm sm:text-base">{{ $contactText('fields.phone.label') }} ({{ $contactText('fields.phone.optional') }})</label>
                                    </div>
                                    <p class="text-xs text-neutral-500 mt-1" id="contact-phone-hint" aria-hidden="true">{{ $contactText('fields.phone.example') }} {{ $phoneConfig['placeholder'] ?? '' }}</p>
                                    @error('phone')
                                    <p class="field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            
                            <!-- Website/Social Media Section -->
                            <div class="space-y-2">
                                <h3 class="text-base sm:type-card-title">
                                    {{ $contactText('form.company_title') }}
                                </h3>
                                <div class="float-label-wrap">
                                    <input type="text" name="website" id="contact-website"
                                           class="px-4 py-3 sm:px-5 sm:py-3.5 bg-white border-2 border-neutral-200 rounded-xl text-sm sm:text-base text-neutral-900 placeholder:text-transparent"
                                           placeholder=" "
                                           value="{{ old('website') }}" autocomplete="url">
                                    <label for="contact-website" class="text-sm sm:text-base">{{ $contactText('fields.website.label') }}</label>
                                    <p class="text-xs text-neutral-500 mt-1.5">{{ $contactText('fields.website.hint') }}</p>
                                    @error('website')
                                    <p class="field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            
                            <!-- Message Section -->
                            <div class="space-y-2">
                                <h3 class="text-base sm:type-card-title">
                                    {{ $contactText('form.project_title') }}
                                </h3>
                                <div class="float-label-wrap">
                                    <textarea name="message" id="contact-message" rows="5"
                                              class="px-4 py-3 pt-5 sm:px-5 sm:py-3.5 sm:pt-6 bg-white border-2 border-neutral-200 rounded-xl text-sm sm:text-base text-neutral-900 resize-none placeholder:text-transparent"
                                              placeholder=" ">{{ old('message', request('message')) }}</textarea>
                                    <label for="contact-message" class="text-sm sm:text-base">{{ $contactText('fields.message.label') }} ({{ $contactText('fields.message.optional') }})</label>
                                    @error('message')
                                    <p class="field-error">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                
                    <!-- Bottom Section: What happens + Submit Button -->
                    <div class="pt-6 md:pt-8 border-t border-neutral-200">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 lg:gap-8 items-start">
                            <!-- Left: What happens when I submit -->
                            <div class="p-4 sm:p-6 bg-criazo-primary/5 border border-criazo-primary/20 rounded-2xl">
                                <h3 class="text-sm sm:text-base font-semibold text-neutral-900 mb-2 sm:mb-3">{{ $contactText('form.next_title') }}</h3>
                                <ol class="space-y-1.5 sm:space-y-2 text-neutral-600 text-xs sm:text-sm">
                                    <li class="flex items-start gap-2 sm:gap-3"><span class="flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-criazo-primary text-white text-[10px] sm:text-xs font-semibold flex items-center justify-center">1</span><span class="pt-0.5">{{ $contactText('form.next_steps.0') }}</span></li>
                                    <li class="flex items-start gap-2 sm:gap-3"><span class="flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-criazo-primary text-white text-[10px] sm:text-xs font-semibold flex items-center justify-center">2</span><span class="pt-0.5">{{ $contactText('form.next_steps.1') }}</span></li>
                                    <li class="flex items-start gap-2 sm:gap-3"><span class="flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-criazo-primary text-white text-[10px] sm:text-xs font-semibold flex items-center justify-center">3</span><span class="pt-0.5">{{ $contactText('form.next_steps.2') }}</span></li>
                                </ol>
                                <p class="mt-3 sm:mt-4 text-xs sm:text-sm text-neutral-500">{{ $contactText('form.no_obligation') }}</p>
                            </div>
                            
                            <!-- Right: Submit Button -->
                            <div class="flex flex-col items-center md:items-end justify-center md:justify-start">
                                <button type="submit"
                                        aria-label="{{ $contactText('aria.schedule_consultation') }}"
                                        class="group w-full sm:w-auto inline-flex items-center justify-center px-8 sm:px-10 py-3 sm:py-4 bg-gradient-to-r from-criazo-primary to-criazo-hover text-white rounded-full text-sm sm:text-base font-semibold shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none">
                                    <span class="submit-text">{{ $contactText('form.submit') }}</span>
                                    <svg class="w-4 h-4 sm:w-5 sm:h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                                    </svg>
                                </button>
                                <div class="mt-4 sm:mt-6 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 text-[10px] sm:text-xs text-neutral-500">
                                    <span class="flex items-center gap-1.5">
                                        <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                                        </svg>
                                        {{ $contactText('form.secure') }}
                                    </span>
                                    <span class="flex items-center gap-1.5">
                                        <svg class="w-4 h-4 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        {{ $contactText('form.response_time') }}
                                    </span>
                                    <span class="flex items-center gap-1.5">
                                        <svg class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                        {{ $contactText('form.free_consultation') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

@push('scripts')
<script>
(function() {
    function setupPhoneField() {
        var field = document.querySelector('.phone-field');
        if (!field) return;

        var select = document.getElementById('contact-phone-country');
        var input = document.getElementById('contact-phone');
        var hint = document.getElementById('contact-phone-hint');
        var form = document.getElementById('contact-form');
        if (!select || !input) return;

        var options = Array.prototype.slice.call(select.options).map(function(option) {
            return {
                option: option,
                code: option.value,
                locale: option.getAttribute('data-locale') || '',
                dial: option.getAttribute('data-dial') || '',
                placeholder: option.getAttribute('data-placeholder') || '',
                format: option.getAttribute('data-format') || 'generic'
            };
        });

        function selectedCountry() {
            return options.find(function(country) { return country.code === select.value; }) || options[0];
        }

        function updatePhoneUi() {
            var country = selectedCountry();
            if (!country) return;
            input.setAttribute('placeholder', country.placeholder || ' ');
            input.setAttribute('inputmode', 'tel');
            if (hint) {
                hint.textContent = @json($contactText('fields.phone.example')) + ' ' + [country.dial, country.placeholder].filter(Boolean).join(' ');
            }
        }

        function dialDigits(country) {
            return (country.dial || '').replace(/\D/g, '');
        }

        function stripDialPrefix(value, country) {
            var digits = (value || '').replace(/\D/g, '');
            var dial = dialDigits(country);
            if (dial && digits.indexOf(dial) === 0) {
                return digits.slice(dial.length);
            }
            return digits;
        }

        function groupDigits(digits, groups) {
            var output = [];
            var index = 0;
            groups.forEach(function(size) {
                if (digits.length <= index) return;
                output.push(digits.slice(index, index + size));
                index += size;
            });
            if (digits.length > index) output.push(digits.slice(index));
            return output.filter(Boolean).join(' ');
        }

        function formatNationalNumber(value, country) {
            var digits = stripDialPrefix(value, country);
            var format = country.format || 'generic';

            if (format === 'br') {
                digits = digits.slice(0, 11);
                if (digits.length <= 2) return digits ? '(' + digits : '';
                var area = digits.slice(0, 2);
                var local = digits.slice(2);
                if (local.length <= 4) return '(' + area + ') ' + local;
                if (local.length <= 8) return '(' + area + ') ' + local.slice(0, 4) + '-' + local.slice(4);
                return '(' + area + ') ' + local.slice(0, 5) + '-' + local.slice(5, 9);
            }

            if (format === 'nanp') {
                digits = digits.slice(0, 10);
                if (digits.length <= 3) return digits ? '(' + digits : '';
                if (digits.length <= 6) return '(' + digits.slice(0, 3) + ') ' + digits.slice(3);
                return '(' + digits.slice(0, 3) + ') ' + digits.slice(3, 6) + '-' + digits.slice(6);
            }

            if (format === 'fr') return groupDigits(digits.slice(0, 9), [1, 2, 2, 2, 2]);
            if (format === 'gb') return groupDigits(digits.slice(0, 10), [4, 3, 3]);
            if (format === 'de') return groupDigits(digits.slice(0, 12), [4, 3, 5]);
            if (format === 'it') return groupDigits(digits.slice(0, 10), [3, 3, 4]);
            if (format === 'nl') return groupDigits(digits.slice(0, 9), [1, 4, 4]);
            if (format === 'ie') return groupDigits(digits.slice(0, 9), [2, 3, 4]);
            if (format === 'be') return groupDigits(digits.slice(0, 9), [3, 2, 2, 2]);
            if (format === 'ch') return groupDigits(digits.slice(0, 9), [2, 3, 2, 2]);
            if (format === 'at') return groupDigits(digits.slice(0, 11), [3, 6, 2]);
            if (format === 'se') return groupDigits(digits.slice(0, 9), [2, 3, 2, 2]);
            if (format === 'no') return groupDigits(digits.slice(0, 8), [3, 2, 3]);
            if (format === 'fi') return groupDigits(digits.slice(0, 10), [2, 3, 5]);
            if (format === 'au') return groupDigits(digits.slice(0, 9), [3, 3, 3]);
            if (format === 'nz') return groupDigits(digits.slice(0, 9), [2, 3, 4]);
            if (format === 'mx') return groupDigits(digits.slice(0, 10), [2, 4, 4]);
            if (format === 'ar') return groupDigits(digits.slice(0, 11), [1, 2, 4, 4]);
            if (format === 'cl') return groupDigits(digits.slice(0, 9), [1, 4, 4]);
            if (format === 'za') return groupDigits(digits.slice(0, 9), [2, 3, 4]);
            if (format === '2-2-2-2') return groupDigits(digits.slice(0, 8), [2, 2, 2, 2]);
            if (format === '3-3-3') return groupDigits(digits.slice(0, 9), [3, 3, 3]);
            if (format === '3-3-4') return groupDigits(digits.slice(0, 10), [3, 3, 4]);

            return groupDigits(digits.slice(0, 14), [3, 3, 4, 4]);
        }

        function applyNationalFormatting() {
            var country = selectedCountry();
            var formatted = formatNationalNumber(input.value, country);
            if (input.value !== formatted) input.value = formatted;
        }

        function detectCountryFromPrefix() {
            var value = (input.value || '').replace(/[\s().-]/g, '');
            if (!value.startsWith('+')) return;
            var match = options
                .filter(function(country) { return country.dial && value.indexOf(country.dial) === 0; })
                .sort(function(a, b) { return b.dial.length - a.dial.length; })[0];
            if (match && select.value !== match.code) {
                select.value = match.code;
                updatePhoneUi();
            }
        }

        function applyBrowserLanguageDefault() {
            if (input.value || field.getAttribute('data-locale-phone-country') === '1') return;
            var language = (navigator.language || '').slice(0, 2).toLowerCase();
            var match = options.find(function(country) { return country.locale === language; });
            if (match) select.value = match.code;
        }

        select.addEventListener('change', function() {
            updatePhoneUi();
            applyNationalFormatting();
            updateFloatLabels();
        });
        input.addEventListener('input', function() {
            detectCountryFromPrefix();
            applyNationalFormatting();
            updateFloatLabels();
        });

        if (form) {
            form.addEventListener('submit', function() {
                var country = selectedCountry();
                var value = (input.value || '').trim();
                if (!country || !value || value.startsWith('+')) return;
                input.value = country.dial + ' ' + value;
            });
        }

        detectCountryFromPrefix();
        applyBrowserLanguageDefault();
        updatePhoneUi();
        applyNationalFormatting();
    }

    function updateFloatLabels() {
        document.querySelectorAll('.float-label-wrap').forEach(function(wrap) {
            var input = wrap.querySelector('input, textarea');
            if (!input) return;
            if (input.value && input.value.trim() !== '') {
                wrap.classList.add('has-value');
            } else {
                wrap.classList.remove('has-value');
            }
        });
    }
    document.addEventListener('DOMContentLoaded', function() {
        setupPhoneField();
        updateFloatLabels();
        setTimeout(updateFloatLabels, 400);
        setTimeout(updateFloatLabels, 1000);
        document.querySelectorAll('.float-label-wrap input, .float-label-wrap textarea').forEach(function(el) {
            el.addEventListener('input', updateFloatLabels);
            el.addEventListener('change', updateFloatLabels);
            el.addEventListener('blur', updateFloatLabels);
        });
    });
    if (document.readyState !== 'loading') updateFloatLabels();
})();
</script>
@endpush

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

@endsection