<x-layouts.site>
    <x-slot:title>{{ $guide->title }}</x-slot:title>
    <x-slot:description>{{ $guide->description }}</x-slot:description>

    @php $leafCount = count($guide->pages) + 1; @endphp

    <div class="relative min-h-[calc(100vh-4.75rem)] overflow-hidden bg-navy-950"
         x-data="{
            page: 0,
            total: {{ $leafCount }},
            turning: null,
            tx: 0,
            ty: 0,
            next() {
                if (this.page >= this.total - 1) return;
                this.turning = this.page;
                this.page++;
                setTimeout(() => this.turning = null, 800);
            },
            prev() {
                if (this.page <= 0) return;
                this.page--;
                this.turning = this.page;
                setTimeout(() => this.turning = null, 800);
            },
            jump(i) { this.page = i; },
         }"
         @keydown.window.arrow-right="next()" @keydown.window.arrow-left="prev()"
         @touchstart.passive="tx = $event.touches[0].clientX; ty = $event.touches[0].clientY"
         @touchend.passive="
            const dx = $event.changedTouches[0].clientX - tx;
            const dy = $event.changedTouches[0].clientY - ty;
            if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) { dx > 0 ? prev() : next() }
         ">

        <div class="blob -left-32 top-20 h-96 w-96 bg-wise-500/15" aria-hidden="true"></div>
        <div class="blob -right-24 bottom-10 h-80 w-80 bg-navy-400/20" aria-hidden="true"></div>

        <div class="container-site relative flex min-h-[calc(100vh-4.75rem)] flex-col py-6">
            {{-- Top bar --}}
            <div class="flex flex-wrap items-center justify-between gap-3">
                <a href="{{ route('resources') }}" class="flex items-center gap-1.5 text-sm font-semibold text-navy-300 transition hover:text-wise-300">
                    <x-icon name="arrow-left" class="h-4 w-4" /> All guides
                </a>
                <div class="flex items-center gap-3">
                    <span class="hidden text-xs font-bold text-navy-400 sm:block">Swipe, tap a page edge, or use ← →</span>
                    <a href="{{ route('resources.pdf', $guide) }}" class="btn-accent btn-sm">
                        <x-icon name="download" class="h-4 w-4" /> Download PDF
                    </a>
                </div>
            </div>

            {{-- The book --}}
            <div class="book mx-auto mt-5 w-full max-w-lg flex-1">
                <div class="relative mx-auto aspect-[3/4] max-h-[66vh] w-full sm:aspect-[4/5]">
                    {{-- spine + page-stack edges --}}
                    <div class="absolute inset-y-0 -left-2 w-2.5 rounded-l-lg bg-navy-800 shadow-lg" aria-hidden="true"></div>
                    <div class="absolute inset-y-2 -right-1.5 w-2 rounded-r bg-white/85 shadow" aria-hidden="true"></div>
                    <div class="absolute inset-y-1 -right-3 w-2 rounded-r bg-white/60" aria-hidden="true"></div>

                    {{-- ── Leaf 0: the cover ── --}}
                    <div class="leaf" :class="{ 'flipped': page > 0, 'settled': page > 0 && turning !== 0 }"
                         :style="`z-index: ${turning === 0 ? 200 : (page > 0 ? 0 : 150)}`">
                        <div class="face front shadow-2xl">
                            <img src="{{ $guide->coverUrl() }}" alt="" class="h-full w-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-navy-950/90 via-navy-900/40 to-navy-950/30"></div>
                            <div class="absolute inset-0 flex flex-col justify-between p-7 md:p-8">
                                <span class="text-[11px] font-extrabold uppercase tracking-[0.25em] text-wise-300">moneywise guides</span>
                                <div>
                                    @if ($guide->category)
                                        <span class="chip bg-wise-400 text-navy-950">{{ $guide->category }}</span>
                                    @endif
                                    <h1 class="mt-3 font-display text-3xl font-extrabold leading-tight text-white md:text-4xl">{{ $guide->title }}</h1>
                                    <p class="mt-3 text-sm text-navy-100 md:text-base">{{ $guide->description }}</p>
                                    <button @click="next()" class="btn-accent mt-5">
                                        Open the book <x-icon name="arrow-right" class="h-4 w-4" />
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="face back">
                            <div class="flex h-full flex-col items-center justify-center gap-3 p-8 text-center">
                                <x-icon name="book-open" class="h-8 w-8 text-navy-300" />
                                <p class="font-display text-sm font-bold text-navy-400">{{ $guide->title }}</p>
                                <p class="text-xs text-navy-300">moneywise.co.ke</p>
                            </div>
                        </div>
                    </div>

                    {{-- ── Content leaves ── --}}
                    @foreach ($guide->pages as $i => $p)
                        @php $idx = $i + 1; @endphp
                        <div class="leaf" :class="{ 'flipped': page > {{ $idx }}, 'settled': page > {{ $idx }} && turning !== {{ $idx }} }"
                             :style="`z-index: ${turning === {{ $idx }} ? 200 : (page > {{ $idx }} ? {{ $idx }} : {{ 150 - $idx }})}`">
                            <div class="face front bg-[#fdfcf8] shadow-2xl">
                                {{-- paper grain + spine shading --}}
                                <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-navy-100/40"></div>
                                <div class="pointer-events-none absolute inset-y-0 left-0 w-6 bg-gradient-to-r from-navy-200/50 to-transparent"></div>

                                <div class="relative flex h-full flex-col overflow-y-auto p-7 md:p-9">
                                    <span class="text-[10px] font-extrabold uppercase tracking-[0.25em] text-wise-600">{{ $guide->title }}</span>
                                    <h2 class="mt-2.5 font-display text-2xl font-bold text-navy-900 md:text-[1.7rem]">{{ $p['title'] }}</h2>
                                    <div class="mt-3.5 flex-1 space-y-3.5 text-[15px] leading-relaxed text-navy-700">
                                        @foreach (explode("\n\n", $p['body']) as $paragraph)
                                            <p>{!! nl2br(e($paragraph)) !!}</p>
                                        @endforeach
                                    </div>
                                    <div class="mt-5 flex items-center justify-between border-t border-navy-100 pt-3.5 text-xs font-bold text-navy-400">
                                        <span>moneywise.co.ke</span>
                                        <span>{{ $idx }} / {{ count($guide->pages) }}</span>
                                    </div>
                                </div>

                                {{-- page-edge click zones --}}
                                <button @click="prev()" class="absolute inset-y-0 left-0 w-1/6 cursor-w-resize" aria-label="Previous page" tabindex="-1"></button>
                                <button @click="next()" class="absolute inset-y-0 right-0 w-1/6 cursor-e-resize" aria-label="Next page" tabindex="-1"></button>

                                {{-- corner curl hint --}}
                                @if ($idx < $leafCount - 1)
                                    <div class="pointer-events-none absolute bottom-0 right-0 h-9 w-9"
                                         style="background: linear-gradient(135deg, transparent 50%, rgb(28 43 95 / 0.12) 50%); border-bottom-right-radius: 1rem"></div>
                                @endif
                            </div>
                            <div class="face back">
                                <div class="flex h-full flex-col items-center justify-center gap-2 p-8 text-center opacity-60">
                                    <p class="font-display text-xs font-bold uppercase tracking-[0.2em] text-navy-400">{{ $p['title'] }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Bottom controls --}}
            <div class="mx-auto mt-5 flex w-full max-w-lg items-center justify-between gap-4">
                <button @click="prev()" :disabled="page === 0" :class="page === 0 && 'opacity-30 pointer-events-none'"
                        class="grid h-10 w-10 place-items-center rounded-full bg-white/10 text-white ring-1 ring-white/20 backdrop-blur transition hover:bg-wise-400 hover:text-navy-950" aria-label="Previous page">
                    <x-icon name="arrow-left" class="h-4 w-4" />
                </button>

                <div class="flex flex-1 items-center gap-1.5">
                    <template x-for="i in total" :key="i">
                        <button @click="jump(i - 1)" class="h-1.5 flex-1 rounded-full transition-all duration-300"
                                :class="page >= i - 1 ? 'bg-wise-400' : 'bg-white/20 hover:bg-white/40'"></button>
                    </template>
                </div>

                <button @click="next()" :disabled="page === total - 1" :class="page === total - 1 && 'opacity-30 pointer-events-none'"
                        class="grid h-10 w-10 place-items-center rounded-full bg-white/10 text-white ring-1 ring-white/20 backdrop-blur transition hover:bg-wise-400 hover:text-navy-950" aria-label="Next page">
                    <x-icon name="arrow-right" class="h-4 w-4" />
                </button>
            </div>

            {{-- End-of-book CTA --}}
            <div x-show="page === total - 1" x-cloak x-transition class="mx-auto mt-4 flex max-w-lg flex-wrap items-center justify-center gap-3">
                <a href="{{ route('resources.pdf', $guide) }}" class="btn-accent btn-sm"><x-icon name="download" class="h-4 w-4" /> Take the PDF</a>
                <a href="{{ route('tools.index') }}" class="btn-white btn-sm">Open the tools</a>
            </div>
        </div>
    </div>
</x-layouts.site>
