import Link from 'next/link'
import Image from 'next/image'
import logo from '@/assets/images/icon.png'
import Footer from '@/components/Footer'

export default function DeleteAccountInfo() {
    return (
        <div className="min-h-screen bg-background flex flex-col">
            <header className="border-b border-gray-800 bg-background-dark/80 backdrop-blur-md sticky top-0 z-50">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
                    <Link href="/" className="flex items-center gap-2">
                        <Image
                            src={logo}
                            alt="Nemia Logo"
                            width={32}
                            height={32}
                            className="rounded-lg object-contain"
                        />
                        <span className="font-display font-bold text-xl tracking-tight text-white">
                            Nemia
                        </span>
                    </Link>
                    <Link
                        href="/login"
                        className="text-sm font-semibold text-gray-300 hover:text-white transition-colors"
                    >
                        Log In
                    </Link>
                </div>
            </header>

            <main className="flex-grow max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                <h1 className="text-4xl font-bold text-white mb-6">
                    Request Account Deletion
                </h1>

                <div className="prose prose-invert max-w-none space-y-8 text-gray-300">
                    <section>
                        <p className="text-lg leading-relaxed">
                            We respect your privacy and your right to control your personal
                            data. If you wish to delete your Nemia account and all associated
                            data, you can do so directly within the application.
                        </p>
                    </section>

                    <section>
                        <h2 className="text-2xl font-semibold text-white mb-4">
                            How to delete your account
                        </h2>
                        <ol className="list-decimal pl-5 space-y-2 marker:text-primary">
                            <li>
                                <Link href="/login" className="text-primary hover:underline">
                                    Log in
                                </Link>{' '}
                                to your account on the Nemia web app.
                            </li>
                            <li>
                                Navigate to the <strong>Dashboard</strong>.
                            </li>
                            <li>
                                In the top navigation bar, locate the user menu (or your email).
                            </li>
                            <li>
                                Click the <strong>"Delete Account"</strong> button.
                            </li>
                            <li>
                                Confirm the deletion in the modal that appears by typing "DELETE".
                            </li>
                        </ol>
                    </section>

                    <section>
                        <h2 className="text-2xl font-semibold text-white mb-4">
                            What happens to your data?
                        </h2>
                        <p>
                            When you confirm account deletion, the following actions occur
                            immediately:
                        </p>
                        <ul className="list-disc pl-5 space-y-2 marker:text-gray-500">
                            <li>
                                <strong>Profile Deactivation:</strong> Your user profile is deactivated and you are signed out.
                            </li>
                            <li>
                                <strong>Content Removal:</strong> All flashcards, decks, folders, and study progress created by you are explicitly marked as deleted and become inaccessible.
                            </li>
                            <li>
                                <strong>Data Retention:</strong> Your data is "soft deleted" in our database to allow for immediate service application but is effectively removed from all user-facing systems. If you wish for a complete permanent purge of your data record, please contact support at <a href="mailto:im@mati.ss" className="text-primary hover:underline">im@mati.ss</a>.
                            </li>
                        </ul>
                    </section>
                </div>
            </main>

            <Footer />
        </div>
    )
}