@extends('layouts.app')

@section('title', $policy['title'] . ' | ' . ($storeConfig['brandName'] ?? 'Aangina'))
@section('meta_description', $policy['title'] . ' — ' . ($storeConfig['brandName'] ?? 'Aangina'))

@section('content')
<div class="py-8 sm:py-14 px-4 sm:px-6">
    <div class="max-w-[760px] mx-auto">
        {{-- =================================================================
             1. TOP HEADER BLOCK: BREADCRUMB, H1 TITLE & QUICK POLICY PILLS
             ================================================================= --}}
        <nav aria-label="Breadcrumb" class="mb-4">
            <ol class="flex items-center gap-1.5 text-[13px] text-text-muted">
                <li>
                    <a href="{{ route('home') }}" class="hover:text-brand-primary transition-colors">Home</a>
                </li>
                <li aria-hidden="true" class="text-border-subtle">/</li>
                <li class="text-text-primary font-medium truncate" aria-current="page">
                    {{ $policy['title'] }}
                </li>
            </ol>
        </nav>

        <h1 class="type-h1 text-brand-primary">
            {{ $policy['title'] }}
        </h1>

        {{-- Quick Policy Navigation Pills --}}
        <div class="mt-5 flex items-center gap-2 overflow-x-auto no-scrollbar pb-1">
            @foreach($allPolicies as $pSlug => $pItem)
                @php
                    $isActive = $pSlug === $policy['slug'];
                @endphp
                <a
                    href="{{ url('/' . $pSlug) }}"
                    class="{{ $isActive ? 'pill-active' : 'pill-inactive' }} shrink-0"
                >
                    {{ $pItem['shortLabel'] }}
                </a>
            @endforeach
            <a
                href="{{ route('contact.index') }}"
                class="pill-inactive shrink-0"
            >
                Contact Us
            </a>
        </div>

        {{-- =================================================================
             2. EDITORIAL CONTENT CONTAINER (--bg-surface Card, 1px --border-subtle)
             ================================================================= --}}
        <article class="mt-7 bg-surface border border-border-subtle p-5 sm:p-9 divide-y divide-border-subtle">
            @foreach($policy['sections'] as $idx => $section)
                <section class="{{ $idx > 0 ? 'pt-7 mt-7' : '' }}">
                    <h2 class="type-h2 text-brand-primary">
                        {{ $section['heading'] }}
                    </h2>

                    @if(!empty($section['paragraphs']))
                        <div class="mt-3 space-y-3.5 text-[15px] lg:text-[16px] leading-[1.7] text-text-muted">
                            @foreach($section['paragraphs'] as $para)
                                <p>{{ $para }}</p>
                            @endforeach
                        </div>
                    @endif

                    @if(!empty($section['bullets']))
                        <ul class="mt-4 space-y-2.5 text-[15px] lg:text-[16px] leading-[1.7] text-text-primary">
                            @foreach($section['bullets'] as $bullet)
                                <li class="flex items-start gap-2.5">
                                    <span class="text-brand-primary font-bold mt-0.5">•</span>
                                    <span>{{ $bullet }}</span>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </section>
            @endforeach
        </article>

        {{-- =================================================================
             3. BOTTOM CTA BOX
             ================================================================= --}}
        <div class="mt-9 text-center">
            <a href="{{ route('sarees.hub') }}" class="btn-primary px-8">
                EXPLORE OUR SAREES →
            </a>
        </div>
    </div>
</div>
@endsection