@extends('layouts.app')

@php
    use App\Helpers\SeoHelper;
    $locale = $locale ?? app()->getLocale();
    $pageSeo = SeoHelper::getPageSeo('calculator');
    $calc = $calculatorData;
    $contactBaseUrl = $localizedRoute('contact.index');
    $calcLocaleKey = in_array($locale, ['pt', 'br', 'es', 'fr'], true) ? $locale : 'en';
    $calcLocaleFallback = $calcLocaleKey === 'br' ? 'pt' : $calcLocaleKey;
    $calcTitle = $calc['copy']['title'][$calcLocaleKey] ?? $calc['copy']['title'][$calcLocaleFallback] ?? $calc['copy']['title']['en'] ?? '';
    $calcSubtitle = $calc['copy']['subtitle'][$calcLocaleKey] ?? $calc['copy']['subtitle'][$calcLocaleFallback] ?? $calc['copy']['subtitle']['en'] ?? '';
    $titleWords = preg_split('/\s+/u', trim($calcTitle), -1, PREG_SPLIT_NO_EMPTY) ?: [$calcTitle];
    $titleAccent = array_pop($titleWords);
    $titleLead = implode(' ', $titleWords);
    if ($titleLead === '') {
        $titleLead = $calcTitle;
        $titleAccent = '';
    }
    $calcStepNames = [];
    foreach ($calc['copy']['step_names'] ?? [] as $stepKey => $labels) {
        $calcStepNames[$stepKey] = $labels[$calcLocaleKey]
            ?? $labels[$calcLocaleFallback]
            ?? $labels['en']
            ?? $stepKey;
    }
@endphp

@section('title', $pageSeo['title'] ?? __('messages.calculator.meta_title'))
@section('meta_description', $pageSeo['description'] ?? __('messages.calculator.meta_description'))
@section('meta_keywords', $pageSeo['keywords'] ?? __('messages.calculator.meta_keywords'))

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

@section('content')
<article class="calculator-page dn-page">
    <section class="calculator-page__main" aria-labelledby="calculator-heading">
        <div class="site-container">
            <header class="calculator-form-header">
                <h1 id="calculator-heading" class="calculator-form-header__title">
                    @if($titleAccent !== '')
                        {{ $titleLead }}
                        <span class="calculator-form-header__title-accent">{{ $titleAccent }}</span>
                    @else
                        {{ $titleLead }}
                    @endif
                </h1>
                <p class="calculator-form-header__subtitle">{{ $calcSubtitle }}</p>
            </header>

            <div class="calculator-layout">
                <div class="calculator-main">
                    <div class="calculator-progress-wrap" aria-hidden="false">
                        <div class="calculator-progress-meta">
                            <span id="qc-step-label"></span>
                            <span id="qc-step-name"></span>
                        </div>
                        <div class="calculator-progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="10">
                            <div id="qc-progress" class="calculator-progress-fill" style="width: 10%"></div>
                        </div>
                    </div>

                    <div class="calculator-card">
                        <form id="quote-calculator-form" novalidate>
                            <div id="qc-step-service" class="qc-step active" role="group"></div>
                            <div id="qc-step-project-type" class="qc-step" role="group" hidden></div>
                            <div id="qc-step-questions" class="qc-step" role="group" hidden></div>
                            <div id="qc-step-addons" class="qc-step" role="group" hidden></div>
                            <div id="qc-step-context" class="qc-step" role="group" hidden></div>
                            <div id="qc-step-estimate" class="qc-step" role="group" hidden></div>
                            <div id="qc-step-handoff" class="qc-step" role="group" hidden></div>
                        </form>
                    </div>
                </div>

                <aside class="calculator-summary" aria-label="Estimate summary">
                    <div class="calculator-summary__inner">
                        <div id="qc-summary"></div>
                    </div>
                </aside>
            </div>
        </div>
    </section>
</article>

<script id="quote-calculator-config" type="application/json">@json($calc)</script>
<script>
    window.QUOTE_CALCULATOR_BOOT = {
        locale: @json($locale),
        contactBaseUrl: @json($contactBaseUrl),
        recommendationPrefix: @json($calc['copy']['recommendation_prefix'] ?? []),
        ctaPrimary: @json($calc['copy']['cta_primary'] ?? []),
        ctaSecondary: @json($calc['copy']['cta_secondary'] ?? []),
        stepNames: @json($calcStepNames),
    };
</script>
@push('scripts')
<script src="{{ asset('js/quote-calculator.js') }}?v=4" defer></script>
@endpush
@endsection