@extends('user.layout')
@section('title', 'Page Title')
@section('content')
    @php
        // Contact details for the sidebar.
        $telContact = \App\Models\ContactInfo::first();
        $telPhone = ($telContact && !empty($telContact->phone[0])) ? $telContact->phone[0] : '+8801325074113';
        $telWhatsapp = preg_replace('/\D+/', '', $telPhone);

        // Turn a "FAQ" block in section six into question/answer pairs.
        // Used only when the block starts with "FAQ" or "Frequently Asked" and has 2+ questions ending in "?".
        $telFaq = [];
        $telSixHtml = (string) ($service->section_six_description ?? '');
        if (trim(strip_tags($telSixHtml)) !== '' && class_exists('DOMDocument')) {
            $telDom = new \DOMDocument();
            $telPrev = libxml_use_internal_errors(true);
            $telLoaded = $telDom->loadHTML('<?xml encoding="utf-8"?><div id="tel-faq-root">' . preg_replace('#</?o:p[^>]*>#i', '', $telSixHtml) . '</div>', LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
            libxml_clear_errors();
            libxml_use_internal_errors($telPrev);
            $telRoot = $telLoaded ? $telDom->getElementById('tel-faq-root') : null;
            if ($telRoot) {
                $telClean = fn ($s) => trim(preg_replace('/\s+/u', ' ', str_replace(["\xC2\xA0", "\u{200B}"], [' ', ''], $s)));
                $telNodes = [];
                foreach ($telRoot->childNodes as $telNode) {
                    if ($telNode->nodeType === XML_ELEMENT_NODE && in_array(strtolower($telNode->nodeName), ['style', 'script'])) continue;
                    if ($telClean($telNode->textContent) === '') continue;
                    $telNodes[] = $telNode;
                }
                if ($telNodes && preg_match('/^(faq|frequently asked)/i', $telClean($telNodes[0]->textContent))) {
                    $telCur = null;
                    foreach (array_slice($telNodes, 1) as $telNode) {
                        $telText = $telClean($telNode->textContent);
                        if (str_ends_with($telText, '?') && mb_strlen($telText) <= 200) {
                            if ($telCur) $telFaq[] = $telCur;
                            $telCur = ['q' => $telText, 'a' => ''];
                        } elseif ($telCur) {
                            $telCur['a'] .= $telDom->saveHTML($telNode);
                        }
                    }
                    if ($telCur) $telFaq[] = $telCur;
                    $telFaq = array_values(array_filter($telFaq, fn ($f) => trim(strip_tags($f['a'])) !== ''));
                    if (count($telFaq) < 2) $telFaq = [];
                }
            }
        }
    @endphp

    <div class="container-fluid p-0">
        <div class="card border-0 overflow-hidden">
            <img class="card-img img-fluid rounded-0 w-100" src="{{ optimizedImageUrl('service', $service->image, 1600) }}" srcset="{{ optimizedImageSrcset('service', $service->image, 1600) }}" sizes="100vw" fetchpriority="high" decoding="async" alt="{{ $service->name }}" title="{{ $service->name }}" style="max-height: 100vh;" />
            <div class="card-img-overlay text-white d-flex flex-column justify-content-center px-lg-5" style="background: rgba(0, 0, 0, 0.5);">
                <nav class="tel-crumb" aria-label="breadcrumb">
                    <a href="{{ url('/') }}">Home</a> <span aria-hidden="true">›</span>
                    <a href="{{ route('service') }}">Services</a> <span aria-hidden="true">›</span>
                    <span aria-current="page">{{ $service->name }}</span>
                </nav>
                <p class="card-text mb-0">#{{ str_replace(' ', '', config('app.name')) }}</p>
                <h2 class="card-title">{{ $service->name }}</h2>
                <p class="card-text">{{ $service->title }}</p>
            </div>
        </div>
    </div>

    <div class="tel-svcpage container-fluid container-lg">
        <div class="row g-4 g-lg-5">
            <article class="col-lg-8 tel-svc-main">
                <div class="bg-light tel-svc-intro scroll-reveal">
                    <div class="fs-5 text-justify">{!! $service->short_description !!}</div>
                </div>

                <div class="py-4 scroll-reveal">
                    <div class="clearfix">
                        @if (filled($service->section_three_image))
                            <img src="{{ optimizedImageUrl('service', $service->section_three_image, 960) }}" srcset="{{ optimizedImageSrcset('service', $service->section_three_image, 960) }}" sizes="(min-width: 992px) 320px, 100vw" loading="lazy" decoding="async" class="img-thumbnail img-fluid float-lg-end ms-lg-3 mb-3 tel-svc-img" alt="{{ $service->section_three_title }}" title="{{ $service->section_three_title }}">
                        @endif
                        <h3 class="secondary">{{ $service->section_three_title }}</h3>
                        <div class="text-justify">{!! $service->section_three_description !!}</div>
                    </div>
                    <hr class="secondary opacity-100 border-3 mt-4">
                </div>

                @if (trim(strip_tags((string) $service->section_four_description)) !== '')
                    <div class="scroll-reveal">
                        <div class="text-justify">{!! $service->section_four_description !!}</div>
                        <hr class="secondary opacity-100 border-3 mt-5">
                    </div>
                @endif

                <div class="py-4 scroll-reveal">
                    <div class="clearfix">
                        @if (filled($service->section_five_image))
                            <img src="{{ optimizedImageUrl('service', $service->section_five_image, 960) }}" srcset="{{ optimizedImageSrcset('service', $service->section_five_image, 960) }}" sizes="(min-width: 992px) 320px, 100vw" loading="lazy" decoding="async" class="img-thumbnail img-fluid float-lg-start me-lg-3 mb-3 tel-svc-img" alt="{{ $service->section_five_title }}" title="{{ $service->section_five_title }}">
                        @endif
                        <h3 class="secondary">{{ $service->section_five_title }}</h3>
                        <div class="text-justify">{!! $service->section_five_description !!}</div>
                    </div>
                </div>

                @if (count($telFaq))
                    <section class="tel-faq scroll-reveal" aria-labelledby="telFaqTitle">
                        <h2 id="telFaqTitle">Frequently asked questions</h2>
                        @foreach ($telFaq as $telItem)
                            <details @if ($loop->first) open @endif>
                                <summary>{{ $telItem['q'] }}<i class="bi bi-plus-lg" aria-hidden="true"></i></summary>
                                <div class="tel-faq-a">{!! $telItem['a'] !!}</div>
                            </details>
                        @endforeach
                    </section>
                @elseif (trim(strip_tags($telSixHtml)) !== '')
                    <div class="bg-light rounded tel-svc-six scroll-reveal">
                        <div class="text-justify">{!! $service->section_six_description !!}</div>
                    </div>
                @endif

                <div class="tel-endcta">
                    <div>
                        <b>Ready to start your project?</b>
                        <span>Share your drawings or requirements for {{ $service->name }} and get a response from our engineers.</span>
                    </div>
                    <button type="button" class="tel-btn" data-bs-toggle="modal" data-bs-target="#enquiryModal"><i class="bi bi-envelope-paper"></i> Get in touch</button>
                </div>
            </article>

            <aside class="col-lg-4 tel-svc-aside">
                <div class="tel-sticky">
                    <div class="tel-cta">
                        <div class="tel-eyebrow">Free consultation</div>
                        <h3>Discuss your project with our engineers</h3>
                        <p>Tell us about your building. We will reply with next steps and a quotation for {{ $service->name }}.</p>
                        <button type="button" class="tel-btn" data-bs-toggle="modal" data-bs-target="#enquiryModal"><i class="bi bi-envelope-paper"></i> Get in touch</button>
                        <div class="tel-lines">
                            <a href="tel:{{ $telPhone }}"><i class="bi bi-telephone"></i> {{ $telPhone }}</a>
                            <a href="https://wa.me/{{ $telWhatsapp }}" target="_blank" rel="noopener"><i class="bi bi-whatsapp"></i> Chat on WhatsApp</a>
                        </div>
                    </div>

                    @if (!empty($service->service_highlights))
                        <div class="tel-card">
                            <h4>What's included</h4>
                            <ul class="tel-check">
                                @foreach ($service->service_highlights as $service_highlight)
                                    <li><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ $service_highlight }}</span></li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="tel-card">
                        <details class="tel-more">
                            <summary><span>All services ({{ $services->count() + 1 }})</span><i class="bi bi-chevron-down" aria-hidden="true"></i></summary>
                            <div class="tel-menu">
                                <a class="on" href="{{ route('service-details', $service->slug) }}" aria-current="page">{{ $service->name }} <i class="bi bi-arrow-right"></i></a>
                                @foreach ($services as $telOther)
                                    <a href="{{ route('service-details', $telOther->slug) }}">{{ $telOther->name }} <i class="bi bi-arrow-right"></i></a>
                                @endforeach
                            </div>
                        </details>
                    </div>
                </div>
            </aside>
        </div>
    </div>

    <div class="container-fluid py-3 bg-light scroll-reveal">
        <div class="container-fluid container-md my-4 home-service">
            <p class="mb-0 fw-semibold secondary">Powered by engineers</p>
            <h3 class="mb-4 fw-bolder">Our Services:</h3>
            <div class="swiper homeSwiper p-3">
                <div class="swiper-wrapper">
                    @foreach ($services as $sk => $relatedService)
                        <div class="swiper-slide">
                            <div class="card border-0 overflow-hidden">
                                <div class="overflow-hidden">
                                    <img class="card-img-top img-fluid w-100" src="{{ optimizedImageUrl('service', $relatedService->image, 960) }}" srcset="{{ optimizedImageSrcset('service', $relatedService->image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="{{ $relatedService->name }}" title="{{ $relatedService->name }}" style="height: 230px;" />
                                </div>
                                <div class="card-body py-2">
                                    <h6 class="card-text text-muted mb-1">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</h6>
                                    <h6 class="card-title secondary text-truncate">{{ $relatedService->name }}</h6>
                                    <a class="btn button-effect stretched-link" href="{{ route('service-details', $relatedService->slug) }}" role="button"><span>View Service</span></a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="row justify-content-center align-items-center mt-3">
                <div class="col-2">
                    <div class="d-flex align-items-center justify-content-center fw-bold">
                        <span id="currentSlide"></span>
                        <hr class="border-4 mx-1 mx-md-2" style="width: 20px;">
                        <span id="totalSlideCount"></span>
                    </div>
                </div>
                <div class="col-8">
                    <div class="progress-container position-relative overflow-hidden w-100" style="height: 4px;">
                        <div class="progress-bar-custom h-100 w-0" id="progressBar"></div>
                    </div>
                </div>
                <div class="col-2 position-relative">
                    <div class="position-absolute top-50 start-50 translate-middle" style="width: 90px !important;">
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid container-md px-2 px-lg-5 py-5 scroll-reveal">
        <p class="mb-0 fw-semibold primary">Powered by engineers</p>
        <h3 class="mb-4 fw-bolder">News & Blog:</h3>
        <div class="row row-cols-1 row-cols-lg-2 g-4">
            <div class="col">
                @foreach ($blogs->take(3) as $blog)
                    <div class="card border-0 overflow-hidden mb-3">
                        <div class="row row-cols-1 row-cols-md-2 g-0">
                            <div class="col">
                                <div class="overflow-hidden">
                                    <img class="card-img-top img-fluid" src="{{ optimizedImageUrl('blog', $blog->image, 960) }}" srcset="{{ optimizedImageSrcset('blog', $blog->image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="{{ $blog->title }}" title="{{ $blog->title }}" style="max-height: 137px;" />
                                </div>
                            </div>
                            <div class="col">
                                <div class="card-body pb-1 pt-2">
                                    <p class="card-text mb-2 fs-small fw-semibold text-muted">{{ $blog->created_at->format('d/m/Y') }}</p>
                                    <h6 class="card-title text-justify secondary">{{ excerpt($blog->title, 70) }}</h6>
                                    <a class="btn button-effect stretched-link fw-semibold" href="{{ route('blog-details', $blog->slug) }}" role="button"><span>See More</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            @if ($blogs->count() >= 4)
                @php $lastBlog = $blogs[3]; @endphp
                <div class="col">
                    <div class="card border-0 overflow-hidden">
                        <div class="overflow-hidden">
                            <img class="card-img-top img-fluid" src="{{ optimizedImageUrl('blog', $lastBlog->image, 960) }}" srcset="{{ optimizedImageSrcset('blog', $lastBlog->image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="{{ $lastBlog->title }}" title="{{ $lastBlog->title }}" style="max-height: 290px;" />
                        </div>
                        <div class="card-body">
                            <p class="card-text mb-2 fs-small fw-semibold text-muted">{{ $lastBlog->created_at->format('d/m/Y') }}</p>
                            <h5 class="card-title text-justify secondary">{{ $lastBlog->title }}</h5>
                            <a class="btn button-effect stretched-link fw-semibold" href="{{ route('blog-details', $lastBlog->slug) }}" role="button"><span>See More</span></a>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <form method="POST" action="{{ route('contact-store') }}" enctype="multipart/form-data" class="custom-form">
        @csrf
        <div class="modal fade" id="enquiryModal" tabindex="-1" aria-labelledby="enquiryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="enquiryModalLabel">Send Enquiry</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @if ($errors->any())
                            <div class="alert alert-danger" role="alert">{{ $errors->first() }}</div>
                        @endif
                        <div class="custom-form">
                            <div class="row g-3 mb-3">
                                <div class="col-md-6 position-relative">
                                    <input type="text" class="form-control" name="name" id="svcEnqName" value="{{ old('name') }}" placeholder=" " required>
                                    <label for="svcEnqName" class="form-label">Full Name</label>
                                </div>
                                <div class="col-md-6 position-relative">
                                    <input type="text" class="form-control" name="company_name" id="svcEnqCompany" value="{{ old('company_name') }}" placeholder=" " required>
                                    <label for="svcEnqCompany" class="form-label">Company Name</label>
                                </div>
                                <div class="col-md-6 position-relative">
                                    <input type="text" class="form-control" name="phone" id="svcEnqPhone" value="{{ old('phone') }}" placeholder=" " required>
                                    <label for="svcEnqPhone" class="form-label">Contact Number</label>
                                </div>
                                <div class="col-md-6 position-relative">
                                    <input type="email" class="form-control" name="email" id="svcEnqEmail" value="{{ old('email') }}" placeholder=" " required>
                                    <label for="svcEnqEmail" class="form-label">Email</label>
                                </div>
                                <div class="col-12 position-relative">
                                    <textarea class="form-control" name="message" id="svcEnqMessage" rows="4" placeholder=" " required>{{ old('message') }}</textarea>
                                    <label for="svcEnqMessage" class="form-label">Type your message here</label>
                                </div>
                                <div class="col-12 position-relative">
                                    <input type="file" class="form-control" name="attachment" id="svcEnqFile" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
                                    <small class="form-text text-muted">PDF, JPG, PNG, DOC, or DOCX; maximum 5 MB. If an error occurs, choose the file again.</small>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-custom px-4" style="width: 180px;"><span>SEND ENQUIRY</span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('styles')
    <style>
        /* Breadcrumb in the banner */
        .tel-crumb { font-size: .85rem; opacity: .9; margin-bottom: 6px; }
        .tel-crumb a { color: #fff; text-decoration: none; }
        .tel-crumb a:hover { text-decoration: underline; }

        /* Service page with sidebar */
        .tel-svcpage { max-width: 1180px; }
        .tel-svc-intro { border-radius: 12px; padding: 1.25rem 1.5rem; margin-top: 2.5rem; }
        .tel-svc-img { width: 42%; }
        .tel-svc-six { padding: 1.25rem 1.5rem; margin-top: .5rem; }
        .tel-svc-aside { padding-top: 2.5rem; }
        .tel-sticky { position: sticky; top: 106px; display: flex; flex-direction: column; gap: 18px; }
        .tel-cta { background: #014972; color: #fff; border-radius: 12px; padding: 22px 22px 20px; }
        .tel-eyebrow { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #8fd3f2; font-weight: 600; }
        .tel-cta h3 { color: #fff; font-size: 1.25rem; line-height: 1.3; margin: .4rem 0 .5rem; font-weight: 600; }
        .tel-cta p { color: #d7e8f2; font-size: .93rem; line-height: 1.55; margin: 0 0 1rem; }
        .tel-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #25aae1; color: #fff; border: 0; border-radius: 8px; padding: 10px 14px; font-weight: 600; cursor: pointer; }
        .tel-btn:hover, .tel-btn:focus-visible { background: #1b93c5; color: #fff; }
        .tel-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: .92rem; }
        .tel-lines a { color: #fff; text-decoration: none; display: flex; gap: 8px; align-items: center; }
        .tel-lines a:hover { text-decoration: underline; }
        .tel-card { background: #fff; border: 1px solid #dfe8ee; border-radius: 12px; padding: 18px 20px; }
        .tel-card h4 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #5b6b76; margin: 0 0 .75rem; font-weight: 600; }
        .tel-check { list-style: none; padding: 0; margin: 0; }
        .tel-check li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 6px 0; color: #16252f; font-size: .95rem; line-height: 1.4; }
        .tel-check li i { color: #25aae1; }
        .tel-more summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #5b6b76; font-weight: 600; }
        .tel-more summary::-webkit-details-marker { display: none; }
        .tel-more[open] summary { margin-bottom: .6rem; }
        .tel-more summary i { transition: transform .2s; }
        .tel-more[open] summary i { transform: rotate(180deg); }
        .tel-menu { max-height: 240px; overflow: auto; margin: 0 -6px; padding: 0 6px; }
        .tel-menu a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #014972; text-decoration: none; font-size: .93rem; font-weight: 500; }
        .tel-menu a:hover { background: #f1f8fc; }
        .tel-menu a.on { background: #014972; color: #fff; }

        /* FAQ */
        .tel-faq { margin-top: 1.5rem; }
        .tel-faq h2 { color: #014972; font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem; }
        .tel-faq details { border: 1px solid #dfe8ee; border-radius: 10px; background: #fff; margin-bottom: 10px; }
        .tel-faq details[open] { border-color: #bcd9e8; background: #f7fbfd; }
        .tel-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; font-weight: 600; color: #014972; font-size: 1.02rem; line-height: 1.4; }
        .tel-faq summary::-webkit-details-marker { display: none; }
        .tel-faq summary i { flex: none; transition: transform .2s; color: #25aae1; }
        .tel-faq details[open] summary i { transform: rotate(45deg); }
        .tel-faq-a { padding: 0 18px 14px; }
        .tel-faq .tel-faq-a > *:not(#x) { margin: 0 0 .6rem !important; }
        .tel-faq .tel-faq-a > *:not(#x):last-child { margin-bottom: 0 !important; }
        .tel-faq .tel-faq-a:not(#x), .tel-faq .tel-faq-a *:not(#x) { font-size: 1rem !important; font-weight: 400 !important; color: #212529 !important; line-height: 1.7 !important; margin-left: 0 !important; text-indent: 0 !important; background: transparent !important; }
        .tel-faq .tel-faq-a b:not(#x), .tel-faq .tel-faq-a strong:not(#x) { font-weight: 600 !important; }
        .tel-faq .tel-faq-a p:not(#x), .tel-faq .tel-faq-a div:not(#x), .tel-faq .tel-faq-a h3:not(#x), .tel-faq .tel-faq-a h4:not(#x), .tel-faq .tel-faq-a li:not(#x) { text-align: justify !important; -webkit-hyphens: auto; hyphens: auto; }
        .tel-faq .tel-faq-a p:empty { display: none; }
        .tel-faq-a ul, .tel-faq-a ol { padding-left: 1.25rem; }

        /* End-of-page box */
        .tel-endcta { margin: 2.5rem 0 1rem; border: 1px solid #cfe3ee; background: #f1f8fc; border-radius: 12px; padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
        .tel-endcta b { display: block; color: #014972; font-size: 1.1rem; margin-bottom: 4px; }
        .tel-endcta span { color: #3d4d57; font-size: .95rem; }
        .tel-endcta .tel-btn { width: auto; padding: 10px 22px; }

        @media (max-width: 991.98px) {
            .tel-svc-aside { padding-top: 0; padding-bottom: 1rem; }
            .tel-sticky { position: static; }
            .tel-svc-img { width: 100%; }
        }
        /* Short laptop screens: let the sidebar scroll with the page */
        @media (min-width: 992px) and (max-height: 760px) {
            .tel-sticky { position: static; }
        }
    </style>
@endpush

@push('scripts')
    <script>
        var swiper = new Swiper(".homeSwiper", {
            slidesPerView: 3,
            spaceBetween: 30,
            loop: true,
            autoplay: { delay: 3000, disableOnInteraction: false },
            speed: 2000,
            effect: "slide",
            navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
            on: {
                slideChange: function() {
                    document.getElementById("currentSlide").textContent = this.realIndex + 1;
                    document.getElementById("progressBar").style.width = ((this.realIndex + 1) / this.slides.length) * 100 + "%";
                }
            },
            breakpoints: {
                1600: { slidesPerView: 4, spaceBetween: 30 },
                1200: { slidesPerView: 3, spaceBetween: 30 },
                1024: { slidesPerView: 3, spaceBetween: 25 },
                768: { slidesPerView: 2, spaceBetween: 20 },
                576: { slidesPerView: 1, spaceBetween: 15 },
                320: { slidesPerView: 1, spaceBetween: 10 }
            }
        });
        document.getElementById("totalSlideCount").textContent = swiper.slides.length;
    </script>

    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "Service",
            "name": {!! json_encode($service->name) !!},
            "description": {!! json_encode(strip_tags($service->short_description)) !!},
            "provider": {
                "@type": "Organization",
                "name": "{{ config('app.name') }}"
            },
            "areaServed": {
                "@type": "Place",
                "name": "Worldwide"
            },
            "serviceType": "Mechanical Engineering Services",
            "url": "{{ url()->current() }}",
            "image": "{{ asset('storage/service/' . $service->image) }}",
            "mainEntityOfPage": {
                "@type": "WebPage",
                "@id": "{{ url()->current() }}"
            }
        }
    </script>

    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "Article",
            "headline": {!! json_encode($service->name) !!},
            "description": {!! json_encode(strip_tags($service->short_description)) !!},
            "author": {
                "@type": "Organization",
                "name": "{{ config('app.name') }}",
                "url": "{{ route('about') }}"
            },
            "publisher": {
                "@type": "Organization",
                "name": "{{ config('app.name') }}",
                "logo": {
                    "@type": "ImageObject",
                    "url": "{{ asset('storage/logo/logo.png') }}"
                }
            },
            "datePublished": "{{ $service->created_at?->toIso8601String() ?? now()->toIso8601String() }}",
            "image": "{{ asset('storage/service/' . $service->image) }}",
            "mainEntityOfPage": {
                "@type": "WebPage",
                "@id": "{{ url()->current() }}"
            }
        }
    </script>

    <script type="application/ld+json">
        {!! json_encode([
            '@context' => 'https://schema.org',
            '@type' => 'BreadcrumbList',
            'itemListElement' => [
                ['@type' => 'ListItem', 'position' => 1, 'name' => 'Home', 'item' => url('/')],
                ['@type' => 'ListItem', 'position' => 2, 'name' => 'Services', 'item' => route('service')],
                ['@type' => 'ListItem', 'position' => 3, 'name' => $service->name, 'item' => route('service-details', $service->slug)],
            ],
        ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!}
    </script>

    @if (count($telFaq))
        <script type="application/ld+json">
            {!! json_encode([
                '@context' => 'https://schema.org',
                '@type' => 'FAQPage',
                'mainEntity' => array_map(fn ($f) => [
                    '@type' => 'Question',
                    'name' => $f['q'],
                    'acceptedAnswer' => [
                        '@type' => 'Answer',
                        'text' => trim(preg_replace('/\s+/u', ' ', str_replace(["\xC2\xA0", "\u{200B}"], [' ', ''], html_entity_decode(strip_tags(str_replace('<', ' <', $f['a'])), ENT_QUOTES | ENT_HTML5, 'UTF-8')))),
                    ],
                ], $telFaq),
            ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!}
        </script>
    @endif
@endpush