@extends('layouts.site')

@section('meta_title')
    {{ __('site.nav_contact') }} — {{ brand_name() }}
@endsection

@section('title', __('site.nav_contact'))

@section('content')
    @php
        $locale = app()->getLocale();
        $cu = $contactUs;
        $cfg = is_array($contactConfig ?? null) ? $contactConfig : \App\Support\SiteSettings::contactConfig();
        $heroChips = brand_contact_hero_chips();
        $trustItems = is_array($cfg['trust'] ?? null) ? $cfg['trust'] : [];
        $hours = is_array($cfg['hours'] ?? null) ? $cfg['hours'] : [];
        $checklist = is_array($cfg['repair_checklist'] ?? null) ? $cfg['repair_checklist'] : [];
        $mapUrl = filled($cfg['map_url'] ?? null) ? (string) $cfg['map_url'] : null;
        $specialties = is_array($specialties ?? null) ? $specialties : [];
        $checklistTitle = brand_trans(site_profile()->labelKey('contact_checklist_title') ?? 'site.contact_repair_title');
        $checklistSub = brand_trans(site_profile()->labelKey('contact_checklist_sub') ?? 'site.contact_repair_sub');
        $checklistCta = site_profile()->cta('primary');

        $phone = $cu?->mobile ?: $cu?->cellphone;
        $phoneAlt = ($cu?->cellphone && $cu->cellphone !== $cu->mobile) ? $cu->cellphone : null;
        $email = $cu?->email;
        $whatsappHref = site_whatsapp_url();
        if ($cu?->whatsapp) {
            $digits = preg_replace('/\D+/', '', (string) $cu->whatsapp);
            if ($digits !== '') {
                $whatsappHref = 'https://wa.me/'.$digits;
            }
        }
        $address = $cu ? locale_field($cu, 'address') : null;
        $brand = $cu ? locale_field($cu, 'name') : brand_name();
        $intro = $cu ? \Illuminate\Support\Str::limit((string) (locale_field($cu, 'text') ?: locale_field($cu, 'subject') ?: ''), 420) : '';
        $heroTitle = $cu ? trim((string) (locale_field($cu, 'subject') ?: '')) : '';
        $heroSubRaw = $cu ? trim((string) (locale_field($cu, 'text') ?: '')) : '';
        $heroSub = $heroSubRaw !== ''
            ? \Illuminate\Support\Str::of($heroSubRaw)
                ->replaceMatches('/[#*_`>-]+/u', ' ')
                ->replace("\r\n", ' ')
                ->replace("\n", ' ')
                ->squish()
                ->limit(220)
                ->toString()
            : '';
        $heroImage = $cu?->heroImageUrl();
    @endphp

    <div
        class="site-contact"
        x-data="{
            dockVisible: false,
            heroInView: true,
            isMobile() {
                return window.__SITE_VIEWPORT__?.isMobile
                    ?? document.documentElement.classList.contains('layout-mobile');
            },
            syncDock() {
                this.dockVisible = this.isMobile() ? !this.heroInView : (window.scrollY > 500);
            },
            init() {
                const onScroll = () => this.syncDock();
                window.addEventListener('scroll', onScroll, { passive: true });
                this.$nextTick(() => {
                    const hero = this.$refs.hero;
                    if (hero && 'IntersectionObserver' in window) {
                        const io = new IntersectionObserver((entries) => {
                            this.heroInView = entries.some((e) => e.isIntersecting);
                            this.syncDock();
                        }, { threshold: 0.05 });
                        io.observe(hero);
                    }
                    this.syncDock();
                });
            }
        }"
    >
        <section
            @class([
                'site-contact-hero',
                'site-contact-hero--has-image' => filled($heroImage),
            ])
            @if (filled($heroImage))
                style="--contact-hero-image: url('{{ $heroImage }}')"
            @endif
            x-ref="hero"
            data-reveal="section"
        >
            <div class="site-contact-hero__media" aria-hidden="true"></div>
            <div class="site-contact-hero__glow" aria-hidden="true"></div>
            <div class="site-container site-contact-hero__inner">
                <nav class="site-contact-hero__crumb eca-breadcrumb" aria-label="Breadcrumb">
                    <a href="{{ route('site.home', ['locale' => $locale]) }}">{{ __('site.nav_home') }}</a>
                    <span class="eca-breadcrumb__sep">›</span>
                    <span>{{ __('site.nav_contact') }}</span>
                </nav>

                <h1 class="site-contact-hero__title">{{ $heroTitle !== '' ? $heroTitle : __('site.contact_hero_title') }}</h1>
                <p class="site-contact-hero__sub">{{ $heroSub !== '' ? $heroSub : brand_trans('site.contact_hero_sub') }}</p>

                <div class="site-contact-hero__actions">
                    @feature('repair_services')
                    <button type="button" class="site-btn-primary" data-assistant-open data-intent="repair">
                        {{ __('site.contact_start_assistant') }}
                    </button>
                    @endfeature
                    <a href="{{ $whatsappHref }}" target="_blank" rel="noopener" class="site-btn-outline">
                        {{ __('site.cta_whatsapp') }}
                    </a>
                </div>

                @if ($heroChips !== [])
                    <ul class="site-contact-hero__chips">
                        @foreach ($heroChips as $chip)
                            @php
                                $chipKey = (string) ($chip['key'] ?? '');
                                $chipIcon = (string) ($chip['icon'] ?? 'repair');
                            @endphp
                            @if ($chipKey !== '')
                                <li class="site-contact-hero__chip">
                                    <x-site.svg-icon :name="$chipIcon" class="h-4 w-4" />
                                    <span>{{ __('site.contact_chip_'.$chipKey) }}</span>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                @endif
            </div>
        </section>

        @if ($cu && ($phone || $email || $whatsappHref || $address))
            <section class="site-contact-channels-bar" data-reveal="soft">
                <div class="site-container">
                    <div class="site-contact-channels-grid">
                        @if ($phone)
                            <a href="tel:{{ preg_replace('/\s+/', '', $phone) }}" class="site-contact-qcard">
                                <span class="site-contact-qcard__icon"><x-site.svg-icon name="contact_us" class="h-6 w-6" /></span>
                                <span class="site-contact-qcard__body">
                                    <span class="site-contact-qcard__label">{{ __('site.contact_channel_call') }}</span>
                                    <span class="site-contact-qcard__value" dir="ltr">{{ $phone }}</span>
                                </span>
                            </a>
                        @endif
                        <a href="{{ $whatsappHref }}" target="_blank" rel="noopener" class="site-contact-qcard">
                            <span class="site-contact-qcard__icon"><x-site.svg-icon name="socials" class="h-6 w-6" /></span>
                            <span class="site-contact-qcard__body">
                                <span class="site-contact-qcard__label">{{ __('site.contact_channel_whatsapp') }}</span>
                                <span class="site-contact-qcard__value">{{ __('site.cta_whatsapp') }}</span>
                            </span>
                        </a>
                        @if ($email)
                            <a href="mailto:{{ $email }}" class="site-contact-qcard">
                                <span class="site-contact-qcard__icon"><x-site.svg-icon name="chat" class="h-6 w-6" /></span>
                                <span class="site-contact-qcard__body">
                                    <span class="site-contact-qcard__label">{{ __('site.contact_channel_email') }}</span>
                                    <span class="site-contact-qcard__value break-all">{{ $email }}</span>
                                </span>
                            </a>
                        @endif
                        @if ($address)
                            <a href="#contact-hub" class="site-contact-qcard">
                                <span class="site-contact-qcard__icon"><x-site.svg-icon name="home" class="h-6 w-6" /></span>
                                <span class="site-contact-qcard__body">
                                    <span class="site-contact-qcard__label">{{ __('site.contact_channel_visit') }}</span>
                                    <span class="site-contact-qcard__value line-clamp-2">{{ $address }}</span>
                                </span>
                            </a>
                        @endif
                    </div>
                </div>
            </section>
        @endif

        @if ($trustItems !== [])
            <section class="site-contact-trust" data-reveal="soft">
                <div class="site-container">
                    <div class="site-contact-trust__grid">
                        @foreach ($trustItems as $item)
                            @php
                                $tIcon = (string) ($item['icon'] ?? 'repair');
                                $tLabel = \App\Support\SiteSettings::localizedContactText($item['label'] ?? []);
                                $tValue = \App\Support\SiteSettings::localizedContactText($item['value'] ?? []);
                            @endphp
                            @if ($tLabel !== '' || $tValue !== '')
                                <div class="site-contact-trust__item">
                                    <span class="site-contact-trust__icon" aria-hidden="true">
                                        <x-site.svg-icon :name="$tIcon" class="h-6 w-6" />
                                    </span>
                                    <p class="site-contact-trust__value">{{ $tValue }}</p>
                                    <p class="site-contact-trust__label">{{ $tLabel }}</p>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

        <div class="site-container site-contact__main pb-24">
            @if ($checklist !== [])
            <section class="site-contact-repair mx-2" data-reveal="section">
                <div class="site-contact-repair__copy">
                    <h2 class="site-contact-repair__title">{{ $checklistTitle }}</h2>
                    <p class="site-contact-repair__sub">{{ $checklistSub }}</p>
                    <ul class="site-contact-repair__list">
                        @foreach ($checklist as $row)
                            @php
                                $rIcon = (string) ($row['icon'] ?? 'check');
                                $rLabel = \App\Support\SiteSettings::localizedContactText($row['label'] ?? []);
                            @endphp
                            @if ($rLabel !== '')
                                <li>
                                    <x-site.svg-icon :name="$rIcon" class="h-4 w-4" />
                                    <span>{{ $rLabel }}</span>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </div>
                @if (($checklistCta['intent'] ?? null) || ($checklistCta['url'] ?? null))
                    @if ($checklistCta['url'] ?? null)
                        <a href="{{ $checklistCta['url'] }}" class="site-btn-primary site-contact-repair__cta">
                            {{ $checklistCta['label'] !== '' ? $checklistCta['label'] : __('site.contact_repair_cta') }}
                        </a>
                    @else
                        <button
                            type="button"
                            class="site-btn-primary site-contact-repair__cta"
                            data-assistant-open
                            data-intent="{{ $checklistCta['intent'] }}"
                        >
                            {{ $checklistCta['label'] !== '' ? $checklistCta['label'] : __('site.contact_repair_cta') }}
                        </button>
                    @endif
                @endif
            </section>
            @endif

            @unless ($cu)
                <section class="site-contact-empty eca-detail-glass" data-reveal="soft">
                    <p class="site-contact-empty__text">{{ __('site.empty_contact') }}</p>
                    @feature('repair_services')
                    <button type="button" class="site-btn-primary" data-assistant-open data-intent="repair">
                        {{ __('site.contact_repair_cta') }}
                    </button>
                    @endfeature
                </section>
            @endunless

            <div class="site-contact-split">
                <div class="site-contact-intro eca-detail-glass">
                    @if ($brand)
                        <p class="site-contact-intro__brand">{{ $brand }}</p>
                    @endif
                    @if ($intro !== '')
                        <p class="site-contact-intro__text">{{ $intro }}</p>
                    @else
                        <p class="site-contact-intro__text">{{ brand_trans('site.contact_hero_sub') }}</p>
                    @endif
                    @feature('repair_services')
                    <button type="button" class="site-btn-outline mt-4" data-assistant-open data-intent="repair">
                        {{ __('site.contact_start_assistant') }}
                    </button>
                    @endfeature
                </div>

                <aside id="contact-hub" class="site-contact-hub eca-detail-glass">
                    <header class="site-contact-hub__head">
                        <span class="site-contact-hub__icon" aria-hidden="true">
                            <x-site.svg-icon name="contact_us" class="h-6 w-6" />
                        </span>
                        <h2 class="site-contact-hub__title">{{ __('site.contact_hub_title') }}</h2>
                    </header>

                    <dl class="site-contact-hub__rows">
                        @if ($phone)
                            <div class="site-contact-hub__row">
                                <dt>{{ __('site.contact_channel_call') }}</dt>
                                <dd><a href="tel:{{ preg_replace('/\s+/', '', $phone) }}" dir="ltr">{{ $phone }}</a></dd>
                            </div>
                        @endif
                        @if ($phoneAlt)
                            <div class="site-contact-hub__row">
                                <dt>{{ __('site.contact_landline') }}</dt>
                                <dd><a href="tel:{{ preg_replace('/\s+/', '', $phoneAlt) }}" dir="ltr">{{ $phoneAlt }}</a></dd>
                            </div>
                        @endif
                        @if ($email)
                            <div class="site-contact-hub__row">
                                <dt>{{ __('site.contact_channel_email') }}</dt>
                                <dd><a href="mailto:{{ $email }}" class="break-all">{{ $email }}</a></dd>
                            </div>
                        @endif
                        <div class="site-contact-hub__row">
                            <dt>{{ __('site.contact_channel_whatsapp') }}</dt>
                            <dd><a href="{{ $whatsappHref }}" target="_blank" rel="noopener">{{ __('site.cta_whatsapp') }}</a></dd>
                        </div>
                    </dl>

                    @if ($hours !== [])
                        <div class="site-contact-hub__hours">
                            <h3>{{ __('site.contact_hours_title') }}</h3>
                            <ul>
                                @foreach ($hours as $hour)
                                    @php
                                        $hKey = (string) ($hour['key'] ?? '');
                                        $hVal = (string) ($hour['value_key'] ?? '');
                                    @endphp
                                    @if ($hKey !== '')
                                        <li>
                                            <span>{{ __('site.contact_hours_'.$hKey) }}</span>
                                            <strong>{{ $hVal !== '' ? __('site.'.$hVal) : '' }}</strong>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if ($address)
                        <div class="site-contact-hub__address">
                            <h3>{{ __('site.contact_address') }}</h3>
                            <p class="whitespace-pre-wrap">{{ $address }}</p>
                            @if ($mapUrl)
                                <a href="{{ $mapUrl }}" target="_blank" rel="noopener" class="site-contact-hub__map">
                                    {{ __('site.contact_map_open') }}
                                </a>
                            @endif
                        </div>
                    @endif
                </aside>
            </div>
        </div>

        <div class="site-detail-process">
            <x-site.home-repair-process lazy />
        </div>

        @if ($specialties !== [])
            <section class="site-contact-specialties" data-reveal="section">
                <div class="site-container">
                    <header class="site-contact-specialties__header">
                        <h2>{{ __('site.contact_specialties_title') }}</h2>
                        <p>{{ __('site.contact_specialties_sub') }}</p>
                    </header>
                    <ul class="site-contact-specialties__grid">
                        @foreach ($specialties as $item)
                            <li>
                                <a href="{{ $item['url'] }}" class="site-contact-specialty">
                                    <span class="site-contact-specialty__icon" data-accent="{{ $item['accent'] ?? 'cyan' }}">
                                        <x-site.svg-icon :name="$item['icon']" class="h-6 w-6" />
                                    </span>
                                    <span class="site-contact-specialty__title">{{ $item['title'] }}</span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                    <div class="site-contact-specialties__cta">
                        @feature('repair_services')
                        <button type="button" class="site-btn-primary" data-assistant-open data-intent="repair">
                            {{ __('site.contact_repair_cta') }}
                        </button>
                        @endfeature
                        <a href="{{ $whatsappHref }}" target="_blank" rel="noopener" class="site-btn-outline">
                            {{ __('site.cta_whatsapp') }}
                        </a>
                    </div>
                </div>
            </section>
        @endif

        @feature('repair_services')
        <div
            class="site-contact-dock"
            x-show="dockVisible"
            x-cloak
            x-transition.opacity
            role="complementary"
            aria-label="{{ __('site.contact_dock_title') }}"
        >
            <div class="site-contact-dock__inner">
                <div class="site-contact-dock__copy">
                    <p class="site-contact-dock__title">{{ __('site.contact_dock_title') }}</p>
                    <p class="site-contact-dock__sub">{{ brand_trans('site.contact_dock_sub') }}</p>
                </div>
                <div class="site-contact-dock__actions">
                    <button type="button" class="site-btn-primary site-contact-dock__btn" data-assistant-open data-intent="repair">
                        {{ __('site.contact_dock_assistant') }}
                    </button>
                    <a href="{{ $whatsappHref }}" target="_blank" rel="noopener" class="site-btn-outline site-contact-dock__btn">
                        {{ __('site.contact_channel_whatsapp') }}
                    </a>
                </div>
            </div>
        </div>
        @endfeature
    </div>
@endsection