@page "/privacy"
@namespace MidrandBooks.Components.Pages
@using Microsoft.AspNetCore.Components
@inject IJSRuntime JSRuntime

<div id="privacy-razor" class="w-full max-w-7xl mx-auto px-4 sm:px-6 my-10 space-y-8 min-h-[600px] animate-in fade-in duration-300">
    
    <!-- Header Hero Banner -->
    <header class="relative overflow-hidden rounded-3xl border border-violet-500/30 bg-slate-900 p-8 md:p-12 shadow-xl flex flex-col justify-between gap-6">
        <div class="absolute top-0 right-0 h-64 w-64 bg-violet-600/10 rounded-full blur-3xl pointer-events-none" />
        <div class="absolute bottom-0 left-0 h-40 w-40 bg-indigo-600/10 rounded-full blur-2xl pointer-events-none" />
        
        <div class="space-y-4 max-w-3xl relative z-10">
            <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-violet-500/20 border border-violet-500/30 text-xs font-mono font-bold text-violet-300">
                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
                Regulatory Governance
            </div>
            <h1 class="font-serif text-3xl md:text-4xl font-black text-white tracking-tight">
                Privacy &amp; Data Protection Policy
            </h1>
            <p class="text-xs md:text-sm text-slate-300 leading-relaxed font-medium font-sans">
                Midrand Books is designed, maintained, owned, and hosted by <strong class="text-violet-300">LiteCharms (PTY) Ltd</strong> (<a href="https://www.litecharms.co.za" target="_blank" rel="noopener noreferrer" class="text-violet-400 hover:text-violet-300 underline">www.litecharms.co.za</a>), a company duly incorporated and registered in accordance with the Companies Act of South Africa (Registration No: <span class="font-mono text-xs">2020/269438/07</span>).
            </p>
        </div>
    </header>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        
        <!-- Sidebar Navigation Index -->
        <div class="lg:col-span-3 lg:sticky lg:top-24 hidden lg:block">
            <div class="rounded-2xl border border-white/10 bg-slate-900/60 backdrop-blur-md p-5 space-y-4 shadow-sm">
                <span class="text-[10px] font-mono font-bold tracking-wider text-slate-400 uppercase block pb-2 border-b border-white/5">
                    Policy Sections
                </span>
                <nav class="flex flex-col gap-2 font-mono text-[11px] font-bold text-slate-300 uppercase">
                    <button @onclick='() => ScrollToSection("section-processing")' class="px-3 py-2.5 rounded-xl hover:bg-white/5 text-left transition-all hover:text-white cursor-pointer hover:pl-4">
                        1. Lawful Processing
                    </button>
                    <button @onclick='() => ScrollToSection("section-collection")' class="px-3 py-2.5 rounded-xl hover:bg-white/5 text-left transition-all hover:text-white cursor-pointer hover:pl-4">
                        2. Information We Collect
                    </button>
                    <button @onclick='() => ScrollToSection("section-identity")' class="px-3 py-2.5 rounded-xl hover:bg-white/5 text-left transition-all hover:text-white cursor-pointer hover:pl-4">
                        3. Identity Nodes
                    </button>
                    <button @onclick='() => ScrollToSection("section-payment")' class="px-3 py-2.5 rounded-xl hover:bg-white/5 text-left transition-all hover:text-white cursor-pointer hover:pl-4">
                        4. PayFast Gateway
                    </button>
                    <button @onclick='() => ScrollToSection("section-rights")' class="px-3 py-2.5 rounded-xl hover:bg-white/5 text-left transition-all hover:text-white cursor-pointer hover:pl-4">
                        5. Data Subject Rights
                    </button>
                </nav>
            </div>
        </div>

        <!-- Scrollable Legal Article Body -->
        <div class="lg:col-span-9 space-y-6">
            <div class="rounded-2xl border border-white/10 bg-slate-900/40 backdrop-blur-md p-6 sm:p-8 shadow-sm space-y-8 text-slate-200 text-xs sm:text-sm leading-relaxed">
                
                <section id="section-processing" class="space-y-3 scroll-mt-28">
                    <h3 class="font-serif text-lg sm:text-xl font-bold text-white border-b border-white/5 pb-2">
                        1. Commitment to POPIA Compliance
                    </h3>
                    <p class="font-medium text-slate-300">
                        LiteCharms (PTY) Ltd trading as Midrand Books ("we", "us", "our") is dedicated to protecting the privacy and personal data of our customers in strict alignment with the <strong>Protection of Personal Information Act, No. 4 of 2013 (POPIA)</strong> of South Africa. We act as the "Responsible Party" for all data collected across our web architecture.
                    </p>
                </section>

                <section id="section-collection" class="space-y-3 scroll-mt-28">
                    <h3 class="font-serif text-lg sm:text-xl font-bold text-white border-b border-white/5 pb-2">
                        2. Collection of Personal Information
                    </h3>
                    <p class="font-medium text-slate-300">
                        We collect personal information solely to facilitate the cataloging, transaction, and dispatch of archival material. This information includes, but is not limited to:
                    </p>
                    <ul class="list-disc pl-5 space-y-2 text-slate-300 font-medium">
                        <li><strong class="text-white">Identity Details:</strong> Name, email address, and verification markers via federated claim contexts.</li>
                        <li><strong class="text-white">Logistics Metrics:</strong> Physical shipping addresses and localized postal codes for courier assignment within South African borders.</li>
                        <li><strong class="text-white">Digital Footprints:</strong> IP addresses, access telemetry, and structural tracking metrics.</li>
                    </ul>
                </section>

                <section id="section-identity" class="space-y-3 scroll-mt-28">
                    <h3 class="font-serif text-lg sm:text-xl font-bold text-white border-b border-white/5 pb-2">
                        3. Decentralized Claims &amp; Identity Security
                    </h3>
                    <p class="font-medium text-slate-300">
                        For enhanced systemic protection, your core security credentials, access authentication methods, and identity validation vectors are managed externally through our secure cross-tenant single-sign-on architecture (<strong class="text-white">STS Security Cluster</strong>). LiteCharms (PTY) Ltd does not store or process raw account passwords locally on its primary catalog databases.
                    </p>
                </section>

                <section id="section-payment" class="space-y-3 scroll-mt-28">
                    <h3 class="font-serif text-lg sm:text-xl font-bold text-white border-b border-white/5 pb-2">
                        4. Secure Financial Handover Disclosures
                    </h3>
                    <p class="font-medium text-slate-300">
                        All credit card, Instant EFT, and electronic payments are handled through a direct, secure integration handshake with the <strong class="text-white">PayFast (Pty) Ltd</strong> merchant payment system. Midrand Books never captures, indexes, or retains sensitive primary account numbers (PAN), CVV digits, or banking pins. Payment states are transmitted securely using cryptographically signed verification payloads.
                    </p>
                </section>

                <section id="section-rights" class="space-y-3 scroll-mt-28">
                    <h3 class="font-serif text-lg sm:text-xl font-bold text-white border-b border-white/5 pb-2">
                        5. Data Subject Rights &amp; Information Officer
                    </h3>
                    <p class="font-medium text-slate-300">
                        In accordance with POPIA parameters, you reserve explicit rights to request access to, correction of, or total destruction of your personal information stored inside our archives. For any data protection inquiries, or to contact our designated Information Officer, please direct formal correspondence to <code class="bg-slate-950/60 px-2 py-1 rounded text-violet-300 font-bold border border-white/5">privacy@midrandbooks.co.za</code>.
                    </p>
                </section>

            </div>
        </div>

    </div>

</div>

@code {
    private async Task ScrollToSection(string elementId)
    {
        await JSRuntime.InvokeVoidAsync("eval", $@"
            var el = document.getElementById('{elementId}');
            if (el) {{
                el.scrollIntoView({{ behavior: 'smooth', block: 'start' }});
            }}
        ");
    }
}