@extends('layouts.app')

@php
    use App\Helpers\SeoHelper;
    $locale = $locale ?? app()->getLocale();
    $pageSeo = SeoHelper::getPageSeo('calculator');
    $calc = $calculatorData;
    $contactBaseUrl = $localizedRoute('contact.index');
@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')
<style>
    .qc-card { border: 1px solid #e8e8ed; border-radius: 16px; background: #fff; transition: 0.2s ease; }
    .qc-card:hover { border-color: rgba(0, 183, 178, 0.35); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); }
    .qc-card.active { border-color: #00b7b2; box-shadow: 0 0 0 2px rgba(0, 183, 178, 0.2); background: rgba(0, 183, 178, 0.03); }
    .qc-step { display: none; }
    .qc-step.active { display: block; }
</style>
@endpush

@section('content')
<article class="min-h-screen bg-white">
    <div class="site-container py-10 md:py-16">
        <header class="text-center mb-8 md:mb-10">
            <h1 class="page-hero__headline">{{ $calc['copy']['title'][$locale] ?? $calc['copy']['title']['en'] }}</h1>
            <p class="text-neutral-600 mt-3 max-w-2xl mx-auto">{{ $calc['copy']['subtitle'][$locale] ?? $calc['copy']['subtitle']['en'] }}</p>
        </header>

        <div class="w-full bg-neutral-100 rounded-full h-2 mb-8">
            <div id="qc-progress" class="bg-criazo-primary h-2 rounded-full smooth-transition" style="width: 10%"></div>
        </div>

        <div class="grid lg:grid-cols-[1fr_360px] gap-6">
            <section class="bg-white rounded-2xl border border-neutral-200 p-4 sm:p-6 md:p-8">
                <form id="quote-calculator-form" novalidate>
                    <div id="qc-step-service" class="qc-step active"></div>
                    <div id="qc-step-project-type" class="qc-step"></div>
                    <div id="qc-step-questions" class="qc-step"></div>
                    <div id="qc-step-addons" class="qc-step"></div>
                    <div id="qc-step-context" class="qc-step"></div>
                    <div id="qc-step-estimate" class="qc-step"></div>
                    <div id="qc-step-handoff" class="qc-step"></div>
                </form>
            </section>

            <aside class="lg:sticky lg:top-28 h-fit bg-neutral-50 border border-neutral-200 rounded-2xl p-5">
                <div id="qc-summary" class="text-sm text-neutral-700 space-y-2"></div>
            </aside>
        </div>
    </div>
</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'] ?? []),
    };
</script>
@push('scripts')
<script src="{{ asset('js/quote-calculator.js') }}" defer></script>
@endpush
@endsection