@extends('layouts.app')

@section('title', 'Privacy Policy')

@section('content')
<!-- Hero Section -->
<div class="relative bg-slate-900 pt-32 pb-24 overflow-hidden">
    <!-- Decorative Glow -->
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full">
        <div class="absolute top-[-10%] left-[20%] w-[600px] h-[600px] bg-indigo-600/20 rounded-full blur-[120px]"></div>
        <div class="absolute bottom-[-10%] right-[20%] w-[400px] h-[400px] bg-blue-600/10 rounded-full blur-[100px]"></div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center space-y-6">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 mb-4">
            <span class="flex h-2 w-2 rounded-full bg-indigo-400"></span>
            <span class="text-[10px] font-black text-indigo-300 uppercase tracking-[0.2em]">Legal Framework</span>
        </div>
        <h1 class="text-5xl md:text-7xl font-black text-white tracking-tight leading-none">
            Privacy <span class="text-indigo-400">Policy</span>
        </h1>
        <p class="text-slate-400 text-lg max-w-2xl mx-auto font-medium">
            Your privacy is our priority. Learn how Medcare Hospital protects and manages your personal information.
        </p>
        <div class="flex items-center justify-center gap-4 text-slate-500 text-xs font-bold uppercase tracking-widest pt-4">
            <span>Last Updated: {{ date('F d, Y') }}</span>
            <span class="h-1 w-1 rounded-full bg-slate-700"></span>
            <span>Version 2.0</span>
        </div>
    </div>
</div>

<div class="bg-slate-50 min-h-screen py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col lg:flex-row gap-12">
            
            <!-- Sidebar Navigation -->
            <aside class="lg:w-1/4 h-fit sticky top-32 hidden lg:block">
                <div class="bg-white rounded-3xl p-8 border border-slate-100 shadow-sm space-y-6">
                    <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest px-2">On this page</h3>
                    <nav class="space-y-1">
                        <a href="#introduction" class="flex items-center gap-3 px-4 py-3 text-sm font-bold text-indigo-600 bg-indigo-50 rounded-xl transition-all">
                            <span class="h-1.5 w-1.5 rounded-full bg-indigo-600"></span>
                            1. Introduction
                        </a>
                        <a href="#collection" class="flex items-center gap-3 px-4 py-3 text-sm font-bold text-slate-500 hover:text-indigo-600 hover:bg-slate-50 rounded-xl transition-all">
                            <span class="h-1.5 w-1.5 rounded-full bg-slate-300"></span>
                            2. Information Collection
                        </a>
                        <a href="#usage" class="flex items-center gap-3 px-4 py-3 text-sm font-bold text-slate-500 hover:text-indigo-600 hover:bg-slate-50 rounded-xl transition-all">
                            <span class="h-1.5 w-1.5 rounded-full bg-slate-300"></span>
                            3. Use of Information
                        </a>
                        <a href="#security" class="flex items-center gap-3 px-4 py-3 text-sm font-bold text-slate-500 hover:text-indigo-600 hover:bg-slate-50 rounded-xl transition-all">
                            <span class="h-1.5 w-1.5 rounded-full bg-slate-300"></span>
                            4. Data Security
                        </a>
                    </nav>
                    
                    <div class="pt-6 border-t border-slate-50">
                        <p class="text-[10px] text-slate-400 leading-relaxed">
                            Questions about our policy? <br>
                            Contact our legal team at <br>
                            <a href="mailto:legal@medcare.com" class="text-indigo-600 font-bold">legal@medcare.com</a>
                        </p>
                    </div>
                </div>
            </aside>

            <!-- Main Content -->
            <div class="lg:w-3/4 space-y-12">
                
                <!-- Section 1: Introduction -->
                <section id="introduction" class="bg-white rounded-[2rem] p-8 md:p-12 border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
                    <div class="flex items-center gap-6 mb-8">
                        <div class="h-14 w-14 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 shrink-0">
                            <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <div>
                            <span class="text-indigo-600 text-xs font-black uppercase tracking-widest mb-1 block">Chapter One</span>
                            <h2 class="text-3xl font-black text-slate-800 tracking-tight">Introduction</h2>
                        </div>
                    </div>
                    <div class="prose prose-slate prose-lg max-w-none text-slate-500 leading-relaxed">
                        <p>Welcome to <strong>Medcare Hospital</strong>. We are profoundly committed to protecting your personal and medical information. This privacy policy serves as our promise to you regarding how we collect, use, and safeguard the data you entrust to us.</p>
                        <p>As a leading healthcare provider, we understand the sensitivity of your health records. Our practices are designed to exceed industry standards and comply with all international data protection regulations.</p>
                    </div>
                </section>

                <!-- Section 2: Information Collection -->
                <section id="collection" class="bg-white rounded-[2rem] p-8 md:p-12 border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
                    <div class="flex items-center gap-6 mb-8">
                        <div class="h-14 w-14 bg-blue-50 rounded-2xl flex items-center justify-center text-blue-600 shrink-0">
                            <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 114 0v2m-4 0h4m-4 0H5m12 0h2L12 3 5 11h14z"/>
                            </svg>
                        </div>
                        <div>
                            <span class="text-blue-600 text-xs font-black uppercase tracking-widest mb-1 block">Chapter Two</span>
                            <h2 class="text-3xl font-black text-slate-800 tracking-tight">Information Collection</h2>
                        </div>
                    </div>
                    <div class="prose prose-slate prose-lg max-w-none text-slate-500 leading-relaxed">
                        <p>We collect information you provide directly to us through various touchpoints:</p>
                        <ul class="space-y-4 pt-4">
                            <li class="flex items-start gap-3">
                                <div class="h-6 w-6 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center shrink-0 mt-1">
                                    <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                                </div>
                                <span><strong>Patient Registration:</strong> Name, date of birth, contact details, and identification numbers.</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <div class="h-6 w-6 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center shrink-0 mt-1">
                                    <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                                </div>
                                <span><strong>Appointment Booking:</strong> Preferred dates, medical symptoms, and department interests.</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <div class="h-6 w-6 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center shrink-0 mt-1">
                                    <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                                </div>
                                <span><strong>Health Records:</strong> Historical diagnosis, Lab results, and treatment plans.</span>
                            </li>
                        </ul>
                    </div>
                </section>

                <!-- Section 3: Use of Information -->
                <section id="usage" class="bg-white rounded-[2rem] p-8 md:p-12 border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
                    <div class="flex items-center gap-6 mb-8">
                        <div class="h-14 w-14 bg-amber-50 rounded-2xl flex items-center justify-center text-amber-600 shrink-0">
                            <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                            </svg>
                        </div>
                        <div>
                            <span class="text-amber-600 text-xs font-black uppercase tracking-widest mb-1 block">Chapter Three</span>
                            <h2 class="text-3xl font-black text-slate-800 tracking-tight">Use of Information</h2>
                        </div>
                    </div>
                    <div class="prose prose-slate prose-lg max-w-none text-slate-500 leading-relaxed">
                        <p>Your information is used strictly for healthcare excellence purposes:</p>
                        <div class="grid md:grid-cols-2 gap-6 mt-6">
                            <div class="bg-slate-50 p-6 rounded-2xl border border-slate-100">
                                <h4 class="text-slate-800 font-bold mb-2 uppercase tracking-tight text-sm">Medical Services</h4>
                                <p class="text-sm">To provide accurate diagnosis, treatment plans, and continuous medical supervision.</p>
                            </div>
                            <div class="bg-slate-50 p-6 rounded-2xl border border-slate-100">
                                <h4 class="text-slate-800 font-bold mb-2 uppercase tracking-tight text-sm">Communication</h4>
                                <p class="text-sm">To send appointment reminders, health bulletins, and emergency notifications.</p>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Section 4: Data Security -->
                <section id="security" class="bg-white rounded-[2rem] p-8 md:p-12 border border-slate-100 shadow-sm hover:shadow-md transition-shadow">
                    <div class="flex items-center gap-6 mb-8">
                        <div class="h-14 w-14 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-600 shrink-0">
                            <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 00-2 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                            </svg>
                        </div>
                        <div>
                            <span class="text-emerald-600 text-xs font-black uppercase tracking-widest mb-1 block">Chapter Four</span>
                            <h2 class="text-3xl font-black text-slate-800 tracking-tight">Data Security</h2>
                        </div>
                    </div>
                    <div class="prose prose-slate prose-lg max-w-none text-slate-500 leading-relaxed">
                        <p>We implement <strong>Military-grade Encryption</strong> and strict access controls to ensure your records are never compromised.</p>
                        <div class="inline-flex items-center gap-3 px-4 py-3 bg-emerald-50 text-emerald-700 rounded-xl border border-emerald-100 mt-6 animate-pulse">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                            <span class="text-sm font-bold uppercase tracking-widest">ISO 27001 Certified System</span>
                        </div>
                    </div>
                </section>

                <!-- Footer Note -->
                <div class="text-center py-10">
                    <p class="text-slate-400 text-sm font-medium">
                        Medcare Hospital Management &copy; {{ date('Y') }}. <br>
                        This policy is subject to change without prior notice.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection