@extends('layouts.dynamic-test')

@php
    use Illuminate\Support\Str;
    $name = $service['name'] ?? 'Website Development';
@endphp

@section('title', 'Dynamic Nav Test — ' . $name)
@section('meta_description', 'Hidden test page for Dynamic Navigation navigation on a service page.')

@section('page-content')
<div class="dn-page">
    {{-- Overview (hero) --}}
    <section id="overview" class="dn-page-hero dn-page-hero--service" aria-labelledby="dn-service-heading">
        <div class="site-container pb-20 lg:pb-28">
            <div class="grid lg:grid-cols-[1fr_1.05fr] gap-12 lg:gap-16 items-end">
                <div class="pb-4 lg:pb-8">
                    <span class="dn-page-eyebrow">{{ $service['categoryLabel'] ?? 'Services' }}</span>
                    <h1 id="dn-service-heading" class="dn-page-title">{{ $service['heroTitle'] ?? $name }}</h1>
                    @if(!empty($service['heroSubtitle']))
                    <p class="dn-page-lead mt-6">{{ $service['heroSubtitle'] }}</p>
                    @endif
                    <p class="text-neutral-500 mt-4 max-w-xl leading-relaxed">{{ Str::limit($service['heroDescription'] ?? '', 220) }}</p>
                    <div class="flex flex-wrap gap-4 mt-10">
                        <a href="/contact?service=web-development" class="dn-page-btn dn-page-btn--dark">
                            Get a quote
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                        </a>
                        <a href="#faq" class="dn-page-btn dn-page-btn--ghost">Questions answered</a>
                    </div>
                </div>
                <div class="relative lg:self-end">
                    <div class="rounded-t-[2rem] overflow-hidden aspect-[4/3] bg-neutral-100 shadow-[0_-24px_80px_-20px_rgba(0,0,0,0.12)]">
                        <img src="{{ asset($service['listingImage']) }}"
                             alt="{{ $name }}"
                             class="w-full h-full object-cover"
                             loading="eager">
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Process --}}
    @if(!empty($service['process']))
    <section id="process" class="dn-page-section" aria-labelledby="dn-process-heading">
        <div class="site-container py-20 lg:py-28">
            <div class="max-w-2xl mb-14">
                <span class="dn-page-eyebrow">Process</span>
                <h2 id="dn-process-heading" class="dn-page-section-title">How we build your website</h2>
                <p class="dn-page-lead">A structured approach from architecture to launch — designed for clarity, speed, and conversion.</p>
            </div>
            <div class="grid md:grid-cols-3 gap-6">
                @foreach($service['process'] as $index => $step)
                <article class="dn-card dn-card--step">
                    <span class="dn-step-num">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
                    <h3 class="dn-card__title">{{ $step['title'] }}</h3>
                    <p class="dn-card__text">{{ $step['description'] }}</p>
                </article>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- Benefits --}}
    @if(!empty($service['benefits']))
    <section id="benefits" class="dn-page-section dn-page-section--muted" aria-labelledby="dn-benefits-heading">
        <div class="site-container py-20 lg:py-28">
            <div class="grid lg:grid-cols-[0.9fr_1.1fr] gap-16 items-center">
                <div>
                    <span class="dn-page-eyebrow">Benefits</span>
                    <h2 id="dn-benefits-heading" class="dn-page-section-title">Why choose Criazo for web development</h2>
                </div>
                <div class="border-t border-neutral-200/80">
                    @foreach($service['benefits'] as $benefit)
                    <div class="py-6 border-b border-neutral-100 flex items-start gap-4">
                        <span class="flex-shrink-0 w-6 h-6 rounded-full bg-criazo-primary/10 flex items-center justify-center mt-0.5">
                            <svg class="w-3.5 h-3.5 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                        </span>
                        <p class="text-neutral-700 leading-relaxed">{{ $benefit }}</p>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    @endif

    {{-- Outcomes --}}
    @if(!empty($service['outcomes']))
    <section id="outcomes" class="dn-page-section" aria-labelledby="dn-outcomes-heading">
        <div class="site-container py-20 lg:py-28">
            <div class="max-w-2xl mb-14">
                <span class="dn-page-eyebrow">Outcomes</span>
                <h2 id="dn-outcomes-heading" class="dn-page-section-title">What you can expect</h2>
            </div>
            <div class="grid sm:grid-cols-2 gap-5">
                @foreach($service['outcomes'] as $outcome)
                <article class="dn-card">
                    <p class="dn-card__text text-base">{{ $outcome }}</p>
                </article>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- FAQ --}}
    @if(!empty($service['faqs']))
    <section id="faq" class="dn-page-section" aria-labelledby="dn-faq-heading">
        <div class="site-container max-w-[900px] py-20 lg:py-28">
            <div class="text-center mb-14">
                <span class="dn-page-eyebrow">FAQ</span>
                <h2 id="dn-faq-heading" class="dn-page-section-title">Common questions</h2>
            </div>
            <div class="space-y-3">
                @foreach($service['faqs'] as $index => $faq)
                <details class="dn-faq-item group">
                    <summary class="dn-faq-question">
                        <span>{{ $faq['question'] }}</span>
                        <svg class="w-5 h-5 text-neutral-400 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </summary>
                    <div class="dn-faq-answer">
                        <p>{{ $faq['answer'] }}</p>
                    </div>
                </details>
                @endforeach
            </div>
        </div>
    </section>
    @endif
</div>
@endsection