@extends('layouts.nova.content-layout')

@section('page-title', 'Data Deletion')

@section('page-content')
<div class="max-w-3xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
    <p class="text-sm text-white/40 mb-1">Last updated: <time datetime="2026-03-05">March 5, 2026</time></p>

    <p class="text-white/60 text-sm leading-relaxed mb-8">This page explains how users can delete their account and request removal of their personal data. Follow the steps below depending on whether you still have access to your account.</p>

    <nav class="mb-8 rounded-xl border border-white/[0.08] bg-white/[0.02] px-6 py-4">
        <h2 class="text-xs font-semibold uppercase tracking-widest text-white/40 mb-2">Contents</h2>
        <ol class="space-y-1 text-sm text-sky-400">
            <li><a href="#signed-in" class="hover:text-sky-300 hover:underline">If you can sign in</a></li>
            <li><a href="#cant-sign-in" class="hover:text-sky-300 hover:underline">If you cannot sign in</a></li>
            <li><a href="#what-we-remove" class="hover:text-sky-300 hover:underline">What we remove</a></li>
            <li><a href="#providers" class="hover:text-sky-300 hover:underline">Providers</a></li>
        </ol>
    </nav>

    <div class="space-y-10">
        <section id="signed-in">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">If you can sign in</h2>
            <div class="text-sm text-neutral-400 leading-relaxed">
                <ol class="list-decimal list-inside space-y-2">
                    <li>Sign in to your account.</li>
                    <li>Go to your <strong>Settings</strong> &rarr; <strong>Account</strong> page. {{ Route::has('settings') ? '(You can open <a href="'.route('settings').'" class="text-sky-400 hover:underline">Settings</a>.)' : '' }}</li>
                    <li>Use the <strong>Delete account</strong> action to request permanent removal. Follow the confirmation steps — some actions are irreversible.</li>
                </ol>
            </div>
        </section>

        <section id="cant-sign-in">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">If you cannot sign in</h2>
            <div class="text-sm text-neutral-400 leading-relaxed">
                <p class="mb-3">If you no longer have access to the email address on your account or cannot sign in, please contact our support team so we can verify ownership and process the request.</p>
                <ul class="list-disc list-inside">
                    <li>Your account username or profile URL (if known)</li>
                    <li>The email address you used to register (if known)</li>
                    <li>A short explanation why you cannot sign in</li>
                </ul>
                <p class="mt-3">Contact us via the <a href="{{ Route::has('contact') ? route('contact') : url('/contact') }}" class="text-sky-400 hover:underline">Contact</a> page or the staff contact methods listed on the site.</p>
            </div>
        </section>

        <section id="what-we-remove">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">What we remove</h2>
            <div class="text-sm text-neutral-400 leading-relaxed">
                <p>When an account is deleted we remove personal data associated with that account in accordance with our retention and legal obligations. Publicly visible content you uploaded may remain unless you request its removal specifically.</p>
            </div>
        </section>

        <section id="providers">
            <h2 class="flex items-center gap-2 text-xl font-bold text-white border-b border-white/10 pb-3 mb-4">Providers</h2>
            <div class="text-sm text-neutral-400 leading-relaxed">
                <p>If you are adding this URL to an OAuth provider's developer settings for data-deletion instructions, use: <strong>{{ url('/data-deletion') }}</strong></p>
            </div>
        </section>
    </div>
</div>

@endsection