use leptos::prelude::*;

#[component]
pub fn FeaturesDemoPage() -> impl IntoView {
    view! {
        <div class="bg-white dark:bg-gray-900 min-h-screen">
            <div class="relative isolate px-6 pt-14 lg:px-8">
                <div class="mx-auto max-w-4xl py-16 sm:py-24">
                    <div class="text-center mb-12">
                        <h1 class="text-balance text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
                            "Features Demo"
                        </h1>
                        <p class="mt-6 text-lg text-gray-600 dark:text-gray-400">
                            "Explore the powerful features of this Rust web application stack"
                        </p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
                                "Reactive UI"
                            </h3>
                            <p class="text-gray-600 dark:text-gray-400 mb-4">
                                "Built with Leptos for fast, reactive components"
                            </p>
                            <div class="space-y-2">
                                <div class="w-full bg-blue-200 rounded-full h-2">
                                    <div class="bg-blue-600 h-2 rounded-full w-3/4"></div>
                                </div>
                                <div class="text-sm text-gray-500">"Component reactivity"</div>
                            </div>
                        </div>

                        <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
                                "Fast Backend"
                            </h3>
                            <p class="text-gray-600 dark:text-gray-400 mb-4">
                                "Powered by Axum for high-performance server-side logic"
                            </p>
                            <div class="space-y-2">
                                <div class="w-full bg-green-200 rounded-full h-2">
                                    <div class="bg-green-600 h-2 rounded-full w-5/6"></div>
                                </div>
                                <div class="text-sm text-gray-500">"Server performance"</div>
                            </div>
                        </div>

                        <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
                                "Beautiful Styling"
                            </h3>
                            <p class="text-gray-600 dark:text-gray-400 mb-4">
                                "TailwindCSS for rapid UI development"
                            </p>
                            <div class="flex space-x-2">
                                <div class="w-4 h-4 bg-blue-500 rounded"></div>
                                <div class="w-4 h-4 bg-green-500 rounded"></div>
                                <div class="w-4 h-4 bg-purple-500 rounded"></div>
                                <div class="w-4 h-4 bg-pink-500 rounded"></div>
                            </div>
                        </div>

                        <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
                                "Type Safety"
                            </h3>
                            <p class="text-gray-600 dark:text-gray-400 mb-4">
                                "Rust's type system ensures reliability and performance"
                            </p>
                            <div class="bg-gray-200 dark:bg-gray-700 p-2 rounded text-sm font-mono">
                                <span class="text-blue-600 dark:text-blue-400">"fn"</span>
                                <span class="text-gray-800 dark:text-gray-200">" safe_function() -> "</span>
                                <span class="text-green-600 dark:text-green-400">"Result"</span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-12 text-center">
                        <div class="inline-flex items-center space-x-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-3 rounded-lg">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                            <span class="font-semibold">"Built with Rust"</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
}
