@push('structured-data')
    {{-- ContactPage schema (PRD 14.13) --}}
    <script type="application/ld+json">
        {!! json_encode(array_filter([
            '@context' => 'https://schema.org',
            '@type' => 'ContactPage',
            'name' => 'Contact',
            'url' => route('contact.create'),
            'mainEntity' => array_filter([
                '@type' => 'Person',
                'name' => $generalSettings['site_name'] ?? config('app.name'),
                'email' => $contactSettings['email'] ?? null,
                'telephone' => $contactSettings['phone'] ?? null,
            ]),
        ]), JSON_UNESCAPED_SLASHES) !!}
    </script>
@endpush

<x-layout :seo="$seo">
    {{-- --- Hero (PRD 4.18) --------------------------------------------- --}}
    <section class="section pb-0 bg-pattern-grid" style="background: var(--gradient-white-to-purple);">
        <div class="decor-blob decor-blob--md decor-blob--slow" style="top: -12%; right: 0%;" aria-hidden="true"></div>
        <div class="container-site">
            <x-breadcrumb :items="[['label' => 'Contact']]" />

            <div class="text-center mx-auto" style="max-width: 720px;" data-reveal>
                <span class="kicker-rule justify-content-center mb-2 d-inline-flex">Contact</span>
                <h1 class="hero-heading mb-3" data-split-text>{{ $contactSettings['heading'] ?? "Let's build something worth shipping" }}</h1>
                @if(!empty($contactSettings['intro']))
                    <p class="mb-0" style="font-size: var(--fs-paragraph); color: var(--color-paragraph);">
                        {{ $contactSettings['intro'] }}
                    </p>
                @endif
            </div>
        </div>
    </section>

    {{-- --- Contact info + glass form (PRD 3.23 / 6.10) ------------------- --}}
    <section class="section">
        <div class="container-site">
            <div class="contact-panel p-4 p-lg-5" data-reveal>
                <div class="row gy-5">
                    {{-- Left: contact details --}}
                    <div class="col-lg-5">
                        <h2 class="h4 mb-3" style="color: #fff;">Contact details</h2>
                        <p class="mb-4" style="color: rgba(255,255,255,.72);">
                            Prefer email or a call? Either works — use whichever is easiest.
                        </p>

                        <ul class="list-unstyled d-flex flex-column gap-3 mb-4">
                            @if(!empty($contactSettings['email']))
                                <li class="d-flex align-items-start gap-3">
                                    <span class="contact-icon"><i class="fa-solid fa-envelope" aria-hidden="true"></i></span>
                                    <span>
                                        <span class="d-block small" style="color: rgba(255,255,255,.6);">Email</span>
                                        <a href="mailto:{{ $contactSettings['email'] }}" class="text-decoration-none" style="color: #fff;">{{ $contactSettings['email'] }}</a>
                                    </span>
                                </li>
                            @endif

                            @if(!empty($contactSettings['phone']))
                                <li class="d-flex align-items-start gap-3">
                                    <span class="contact-icon"><i class="fa-solid fa-phone" aria-hidden="true"></i></span>
                                    <span>
                                        <span class="d-block small" style="color: rgba(255,255,255,.6);">Phone</span>
                                        <a href="tel:{{ preg_replace('/[^0-9+]/', '', $contactSettings['phone']) }}" class="text-decoration-none" style="color: #fff;">{{ $contactSettings['phone'] }}</a>
                                    </span>
                                </li>
                            @endif

                            @if(!empty($contactSettings['location']))
                                <li class="d-flex align-items-start gap-3">
                                    <span class="contact-icon"><i class="fa-solid fa-location-dot" aria-hidden="true"></i></span>
                                    <span>
                                        <span class="d-block small" style="color: rgba(255,255,255,.6);">Location</span>
                                        <span style="color: #fff;">{{ $contactSettings['location'] }}</span>
                                    </span>
                                </li>
                            @endif
                        </ul>

                        @if(($contactSettings['availability_status'] ?? null) === 'available')
                            <p class="d-inline-flex align-items-center gap-2 px-3 py-2 mb-4" style="background: rgba(124,58,237,.25); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: #fff; font-size: var(--fs-small);">
                                <span class="availability-dot" aria-hidden="true"></span>
                                Currently available for new projects
                            </p>
                        @endif

                        @if(!empty($contactSettings['response_time_note']))
                            <p class="small mb-4" style="color: rgba(255,255,255,.6);">{{ $contactSettings['response_time_note'] }}</p>
                        @endif

                        @if($socialLinks->isNotEmpty())
                            <div class="d-flex flex-wrap gap-2">
                                @foreach($socialLinks as $link)
                                    <a
                                        href="{{ $link->url }}"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        class="contact-icon text-decoration-none"
                                        aria-label="{{ $link->platform }}"
                                    >
                                        <i class="{{ $link->icon_class ?: 'fa-solid fa-link' }}" aria-hidden="true"></i>
                                    </a>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    {{-- Right: the form --}}
                    <div class="col-lg-7">
                        <div class="glass-panel p-4 p-lg-4">
                            @if($errors->any())
                                <div class="alert alert-danger" role="alert">
                                    <p class="mb-1 fw-semibold">Your message wasn&rsquo;t sent.</p>
                                    <ul class="mb-0 ps-3">
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <form method="POST" action="{{ route('contact.store') }}" novalidate data-contact-form>
                                @csrf

                                {{-- Honeypot (PRD 13.9). Positioned off-screen rather than
                                     display:none so assistive tech still reaches it, and
                                     labelled + aria-hidden so a real user is never confused
                                     by it. Bots that fill every input get rejected. --}}
                                <div aria-hidden="true" style="position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;">
                                    <label for="website_url">Leave this field empty</label>
                                    <input type="text" name="website_url" id="website_url" tabindex="-1" autocomplete="off" value="">
                                </div>

                                <input type="hidden" name="form_rendered_at" value="{{ time() }}">

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label form-label-dark">Full name</label>
                                        <input type="text" class="form-control form-control-glass @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" maxlength="120" required autocomplete="name">
                                        @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label form-label-dark">Email address</label>
                                        <input type="email" class="form-control form-control-glass @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" maxlength="180" required autocomplete="email">
                                        @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="phone" class="form-label form-label-dark">Phone <span style="color: rgba(255,255,255,.5);">(optional)</span></label>
                                        <input type="tel" class="form-control form-control-glass @error('phone') is-invalid @enderror" id="phone" name="phone" value="{{ old('phone') }}" maxlength="40" autocomplete="tel">
                                        @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="subject" class="form-label form-label-dark">Subject</label>
                                        <input type="text" class="form-control form-control-glass @error('subject') is-invalid @enderror" id="subject" name="subject" value="{{ old('subject') }}" maxlength="180" required>
                                        @error('subject')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <label for="message" class="form-label form-label-dark">Project details</label>
                                    <textarea class="form-control form-control-glass @error('message') is-invalid @enderror" id="message" name="message" rows="6" maxlength="5000" required placeholder="What are you building, who is it for, and when do you need it live?">{{ old('message') }}</textarea>
                                    @error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <button type="submit" class="btn btn-primary-gradient w-100" data-contact-submit>
                                    <span data-submit-label>Send message</span>
                                    <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true" data-submit-spinner></span>
                                </button>

                                <p class="small mt-3 mb-0" style="color: rgba(255,255,255,.55);">
                                    Your details are used only to reply to this enquiry. They are never sold or added to a mailing list.
                                </p>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- --- FAQ (PRD 4.18) ------------------------------------------------ --}}
    <x-faq-accordion
        :faqs="$faqs"
        id="contactFaq"
        heading="Before you write"
        subheading="A few things people usually ask first."
    />

    {{-- --- CTA (PRD 4.25) ------------------------------------------------ --}}
    <x-cta-banner
        heading="Not ready to send a brief yet?"
        description="Browse recent work to see the kind of projects I take on, and what shipping them actually involved."
        :primary="['label' => 'View portfolio', 'url' => route('portfolio.index')]"
        :secondary="['label' => 'See services', 'url' => route('services.index')]"
    />

    @push('scripts')
        @vite('resources/js/lib/contact-form.js')
    @endpush
</x-layout>