use leptos::prelude::*;

#[component]
pub fn AboutPage() -> impl IntoView {
    eprintln!("AboutPage rendering");
    view! {
        <div class="bg-white dark:bg-gray-900 h-screen overflow-hidden">

            <div class="relative isolate px-6 pt-14 lg:px-8">
                <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
                    <div class="text-center">
                        <h1 class="text-balance text-5xl font-semibold tracking-tight text-gray-900 dark:text-gray-100 sm:text-7xl">About</h1>
                        <p class="mt-8 text-pretty text-lg font-medium text-gray-500 dark:text-gray-400 sm:text-xl/8">
                            This is a powerful web application built with Rust, featuring:
                        </p>
                        <ul class="mt-8 text-left text-lg text-gray-600 dark:text-gray-300 space-y-4 max-w-md mx-auto">
                            <li class="flex items-center">
                                <span class="text-green-500 mr-2">"✓"</span>
                                "Leptos for reactive UI components"
                            </li>
                            <li class="flex items-center">
                                <span class="text-green-500 mr-2">"✓"</span>
                                "Axum for the backend server"
                            </li>
                            <li class="flex items-center">
                                <span class="text-green-500 mr-2">"✓"</span>
                                "TailwindCSS for beautiful styling"
                            </li>
                            <li class="flex items-center">
                                <span class="text-green-500 mr-2">"✓"</span>
                                "Server-side rendering (SSR)"
                            </li>
                            <li class="flex items-center">
                                <span class="text-green-500 mr-2">"✓"</span>
                                "Client-side hydration"
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    }
}

// <header class="absolute inset-x-0 top-0 z-50">
//     <nav class="flex items-center justify-between p-6 lg:px-8">
//         <div class="flex flex-1 justify-end">
//             <a href="/">
//                 <span class="-m-1.5 text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 border border-dashed rounded-xl px-4 py-2 opacity-50 hover:opacity-100 transition-all duration-300">Home</span>
//             </a>
//         </div>
//     </nav>
// </header>
