@extends('layouts.app')

@section('title', $title . ' - Saba Remedies')

@section('content')
<div class="bg-gradient-to-r from-emerald-800 to-teal-900 text-white py-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-2xl sm:text-3xl font-extrabold">{{ $title }}</h1>
        <p class="text-xs text-emerald-200 mt-1">Official Policy &amp; Compliance Documentation &bull; Saba Remedies</p>
    </div>
</div>

<section class="py-12 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            <!-- Sidebar: Policy Navigation -->
            <div class="lg:col-span-4 bg-white rounded-3xl border border-slate-200 p-6 shadow-xs space-y-3">
                <h3 class="font-extrabold text-slate-900 text-sm border-b border-slate-100 pb-3">Legal &amp; Compliance</h3>
                <nav class="space-y-1.5 text-xs font-semibold">
                    <a href="{{ route('pages.privacy') }}" class="flex items-center justify-between px-3.5 py-2.5 rounded-xl transition-all {{ ($activePolicy ?? '') === 'privacy' ? 'bg-emerald-50 text-emerald-800 font-bold border border-emerald-200' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' }}">
                        <span><i class="fa-solid fa-user-shield mr-2 text-emerald-600"></i> Privacy Policy</span>
                        <i class="fa-solid fa-chevron-right text-[10px] opacity-60"></i>
                    </a>
                    <a href="{{ route('pages.terms') }}" class="flex items-center justify-between px-3.5 py-2.5 rounded-xl transition-all {{ ($activePolicy ?? '') === 'terms' ? 'bg-emerald-50 text-emerald-800 font-bold border border-emerald-200' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' }}">
                        <span><i class="fa-solid fa-file-contract mr-2 text-emerald-600"></i> Terms &amp; Conditions</span>
                        <i class="fa-solid fa-chevron-right text-[10px] opacity-60"></i>
                    </a>
                    <a href="{{ route('pages.medical-disclaimer') }}" class="flex items-center justify-between px-3.5 py-2.5 rounded-xl transition-all {{ ($activePolicy ?? '') === 'disclaimer' ? 'bg-emerald-50 text-emerald-800 font-bold border border-emerald-200' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' }}">
                        <span><i class="fa-solid fa-heart-pulse mr-2 text-emerald-600"></i> Medical Disclaimer</span>
                        <i class="fa-solid fa-chevron-right text-[10px] opacity-60"></i>
                    </a>
                    <a href="{{ route('pages.shipping') }}" class="flex items-center justify-between px-3.5 py-2.5 rounded-xl transition-all {{ ($activePolicy ?? '') === 'shipping' ? 'bg-emerald-50 text-emerald-800 font-bold border border-emerald-200' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' }}">
                        <span><i class="fa-solid fa-truck-fast mr-2 text-emerald-600"></i> Shipping &amp; Delivery</span>
                        <i class="fa-solid fa-chevron-right text-[10px] opacity-60"></i>
                    </a>
                    <a href="{{ route('pages.refund') }}" class="flex items-center justify-between px-3.5 py-2.5 rounded-xl transition-all {{ ($activePolicy ?? '') === 'refund' ? 'bg-emerald-50 text-emerald-800 font-bold border border-emerald-200' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' }}">
                        <span><i class="fa-solid fa-rotate-left mr-2 text-emerald-600"></i> Return &amp; Refund</span>
                        <i class="fa-solid fa-chevron-right text-[10px] opacity-60"></i>
                    </a>
                    <a href="{{ route('pages.cancellation') }}" class="flex items-center justify-between px-3.5 py-2.5 rounded-xl transition-all {{ ($activePolicy ?? '') === 'cancellation' ? 'bg-emerald-50 text-emerald-800 font-bold border border-emerald-200' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' }}">
                        <span><i class="fa-solid fa-ban mr-2 text-emerald-600"></i> Cancellation Policy</span>
                        <i class="fa-solid fa-chevron-right text-[10px] opacity-60"></i>
                    </a>
                    <a href="{{ route('pages.cookie-policy') }}" class="flex items-center justify-between px-3.5 py-2.5 rounded-xl transition-all {{ ($activePolicy ?? '') === 'cookie' ? 'bg-emerald-50 text-emerald-800 font-bold border border-emerald-200' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900' }}">
                        <span><i class="fa-solid fa-cookie-bite mr-2 text-emerald-600"></i> Cookie Policy</span>
                        <i class="fa-solid fa-chevron-right text-[10px] opacity-60"></i>
                    </a>
                </nav>

                <div class="pt-4 border-t border-slate-100">
                    <p class="text-[11px] text-slate-500 mb-2">Need direct assistance?</p>
                    <a href="{{ route('pages.contact') }}" class="inline-flex items-center gap-1.5 text-xs font-bold text-emerald-700 hover:text-emerald-800">
                        <i class="fa-solid fa-headset"></i> Contact Patient Support &rarr;
                    </a>
                </div>
            </div>

            <!-- Policy Content (8 cols) -->
            <div class="lg:col-span-8 bg-white rounded-3xl border border-slate-200 p-8 sm:p-10 shadow-sm space-y-6 text-slate-700 text-xs sm:text-sm leading-relaxed">
                <div class="border-b border-slate-100 pb-4">
                    <h2 class="text-xl sm:text-2xl font-extrabold text-slate-900">{{ $title }}</h2>
                    <p class="text-xs text-slate-400 mt-1">Last Updated: {{ date('F Y') }}</p>
                </div>

                <div class="prose prose-sm max-w-none text-slate-700 space-y-4">
                    @if(!empty($content))
                        {!! $content !!}
                    @else
                        <p>
                            At Saba Remedies, we prioritize patient trust, customer satisfaction, and the highest standards of authentic Unani medical formulations. For specific policy inquiries or assistance, please contact our support team at <a href="mailto:info@sabaremedies.com" class="text-emerald-700 font-bold hover:underline">info@sabaremedies.com</a>.
                        </p>
                    @endif
                </div>
            </div>
        </div>

    </div>
</section>
@endsection