@extends('layouts.app')

@section('title', 'Service Quotation')

@section('content')
<section class="page-hero page-hero--quotation">
    <div class="container">
        <nav class="quotation-breadcrumb" aria-label="Breadcrumb">
            <a href="{{ route('home') }}">Home</a>
            <span>/</span>
            <span aria-current="page">Service Quotation</span>
        </nav>
        <span class="section-label">Service Quotation</span>
        <h1>Service Quotation</h1>
    </div>
</section>

<section class="section quotation-section">
    <div class="container quotation-container">
        <div class="quotation-layout">
            <aside class="quotation-side reveal">
                <div class="quotation-side-card">
                    <h2>Need a custom estimate?</h2>
                    <p>Share your requirements and we will prepare a tailored quotation for your application.</p>
                    <div class="quotation-meta">
                        <div class="quotation-meta-chip">
                            <strong>{{ count($application_types) }}</strong>
                            <span>Application Types</span>
                        </div>
                        <div class="quotation-meta-chip">
                            <strong>Fast</strong>
                            <span>Response</span>
                        </div>
                    </div>
                </div>
            </aside>

            <div class="quotation-form-card reveal">
                <h2>{{ $heading }}</h2>
                <div id="quotationFormContainer">
                    @include('partials.quotation-form')
                </div>
                <div id="quotationFormMessage" class="form-message" role="alert" aria-live="polite"></div>
            </div>
        </div>
    </div>
</section>
@endsection