@push('scripts')
    @vite('resources/js/lib/service-interaction-tracking.js')
@endpush

<x-layout :seo="$seo">
    {{-- --- 1. Hero (Section 11.8) ------------------------------------------ --}}
    <section class="section pb-0 position-relative">
        <div class="container-site">
            <nav aria-label="breadcrumb" class="mb-3">
                <ol class="breadcrumb small">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-decoration-none">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('services.index') }}" class="text-decoration-none">Services</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $service['title'] }}</li>
                </ol>
            </nav>

            <span class="kicker-rule mb-2 d-inline-flex">Service</span>
            <h1 class="hero-heading mb-3">{{ $service['title'] }}</h1>
            <p class="mb-4 pb-4" style="font-size: var(--fs-paragraph); max-width: 640px; color: var(--color-paragraph);">
                {{ $service['short_description'] }}
            </p>
        </div>
    </section>

    <div class="container-site py-5">
        <div class="row gy-5">
            <div class="col-lg-8">
                {{-- --- 2. Overview (Section 11.9) --------------------------------- --}}
                @if($service['full_description'] ?? null)
                    <section class="mb-5">
                        <h2 class="section-title mb-4" data-reveal data-split-text style="font-size: 1.75rem;">Overview</h2>
                        <div class="rich-content" style="color: var(--color-paragraph); line-height: 1.75;">
                            {!! $service['full_description'] !!}
                        </div>
                    </section>
                @endif

                {{-- --- 3. Key Features (Section 11.10) ------------------------------ --}}
                @if(!empty($service['features']))
                    <section class="mb-5">
                        <h2 class="section-title mb-4" data-reveal data-split-text style="font-size: 1.75rem;">Key Features</h2>
                        <div class="row row-cols-1 row-cols-sm-2 g-3" data-reveal-group>
                            @foreach($service['features'] as $feature)
                                <div class="col">
                                    <div class="card-premium h-100">
                                        @if($feature['icon_class'] ?? null)
                                            <div class="mb-2" style="color: var(--color-primary); font-size: 1.5rem;">
                                                <i class="{{ $feature['icon_class'] }}" aria-hidden="true"></i>
                                            </div>
                                        @endif
                                        <h3 style="font-size: 1.1rem; color: var(--color-heading);" class="mb-1">{{ $feature['title'] }}</h3>
                                        @if($feature['description'] ?? null)
                                            <p class="small mb-0" style="color: var(--color-paragraph);">{{ $feature['description'] }}</p>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </section>
                @endif

                {{-- --- 4. Technologies Used (Section 11.11) -------------------------- --}}
                @if(!empty($service['technologies']))
                    <section class="mb-5">
                        <h2 class="section-title mb-4" data-reveal data-split-text style="font-size: 1.75rem;">Technologies Used</h2>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($service['technologies'] as $tech)
                                <span class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill" style="background: var(--color-light-purple); color: var(--color-primary); font-weight: 600;">
                                    {{ $tech }}
                                </span>
                            @endforeach
                        </div>
                    </section>
                @endif

                {{-- --- 5. Working Process (Section 11.12) ---------------------------- --}}
                @if(!empty($service['process_steps']))
                    <section class="mb-5">
                        <h2 class="section-title mb-4" data-reveal data-split-text style="font-size: 1.75rem;">Working Process</h2>
                        <ol class="process-timeline list-unstyled mb-0" data-reveal-group>
                            @foreach($service['process_steps'] as $index => $step)
                                <li class="process-step">
                                    <span class="process-step__marker" aria-hidden="true">{{ $index + 1 }}</span>
                                    <div class="process-step__body">
                                        <h3 style="font-size: 1.05rem; color: var(--color-heading);" class="mb-1">{{ $step['title'] }}</h3>
                                        @if($step['description'] ?? null)
                                            <p class="small mb-0" style="color: var(--color-paragraph);">{{ $step['description'] }}</p>
                                        @endif
                                    </div>
                                </li>
                            @endforeach
                        </ol>
                    </section>
                @endif

                {{-- --- 6. FAQ (Section 11.13) ------------------------------------------ --}}
                @if(!empty($service['faqs']))
                    <section class="mb-5">
                        <h2 class="section-title mb-4" data-reveal data-split-text style="font-size: 1.75rem;">Frequently Asked Questions</h2>
                        <div class="accordion" id="serviceFaqAccordion">
                            @foreach($service['faqs'] as $index => $faq)
                                <div class="accordion-item border-0 mb-2" style="background: transparent;">
                                    <h3 class="accordion-header">
                                        <button class="accordion-button collapsed card-premium" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ $index }}" aria-expanded="false">
                                            {{ $faq['question'] }}
                                        </button>
                                    </h3>
                                    <div id="faq{{ $index }}" class="accordion-collapse collapse" data-bs-parent="#serviceFaqAccordion">
                                        <div class="accordion-body" style="color: var(--color-paragraph);">
                                            {{ $faq['answer'] }}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </section>
                @endif
            </div>

            <div class="col-lg-4">
                <div class="card-premium" style="position: sticky; top: 100px;">
                    <h2 style="font-size: 1.1rem; color: var(--color-heading);" class="mb-3">Interested in this service?</h2>
                    <p class="small mb-3" style="color: var(--color-paragraph);">Get in touch to discuss your project requirements and timeline.</p>
                    <a
                        href="{{ route('contact.create') }}"
                        class="btn btn-primary-gradient w-100"
                        data-track-interaction
                        data-track-url="{{ route('services.track', $service['slug']) }}"
                        data-track-type="contact_click"
                    >
                        <i class="fa-solid fa-envelope me-1" aria-hidden="true"></i> Contact Me
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- --- 7 & 8. CTA + Contact (Section 11.14) --------------------------------- --}}
    <section class="section--dark text-center">
        <div class="container-site">
            <h2 class="section-title mb-3 text-white" data-reveal data-split-text>{{ $service['cta_heading'] ?: 'Ready to Start Your Project?' }}</h2>
            <p class="mb-4" style="color: rgba(255,255,255,.7); max-width: 560px; margin-inline: auto;">
                {{ $service['cta_subheading'] ?: "Let's discuss your business requirements." }}
            </p>
            <a
                href="{{ $service['cta_button_link'] ?: route('contact.create') }}"
                class="btn btn-primary-gradient"
                data-track-interaction
                data-track-url="{{ route('services.track', $service['slug']) }}"
                data-track-type="cta_click"
            >
                {{ $service['cta_button_text'] ?: 'Contact Me' }}
            </a>
        </div>
    </section>
</x-layout>