// Home page / landing page

use crate::components::{Card, GlowColor, NavBar};
use leptos::prelude::*;
use leptos_router::components::A;

/// Home page component
#[component]
pub fn HomePage() -> impl IntoView {
    view! {
        <div class="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex flex-col">
            <NavBar />

            <main class="flex-1 container mx-auto px-6 py-12">
                <div class="max-w-2xl mx-auto text-center mb-12">
                    <h2 class="text-5xl font-bold mb-4 text-white">
                        "Multi-Agent Development Platform"
                    </h2>
                    <p class="text-xl text-gray-300 mb-8">
                        "12 specialized AI agents working in parallel to build, review, and deploy your software."
                    </p>
                    <div class="flex gap-4 justify-center">
                        <A
                            href="/projects"
                            attr:class="px-6 py-3 rounded-lg bg-gradient-to-r from-cyan-500/90 to-cyan-600/90 text-white font-medium hover:from-cyan-400 hover:to-cyan-500 transition-all hover:shadow-lg hover:shadow-cyan-500/50"
                        >
                            "Get Started"
                        </A>
                        <A
                            href="/agents"
                            attr:class="px-6 py-3 rounded-lg bg-white/10 border border-white/20 text-white font-medium hover:bg-white/20 transition-all"
                        >
                            "Explore Agents"
                        </A>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
                    <Card glow=GlowColor::Cyan hover_effect=true>
                        <h3 class="text-lg font-semibold text-cyan-400 mb-2">"12 Agents"</h3>
                        <p class="text-gray-300 text-sm">
                            "Architect, Developer, Reviewer, Tester, Documenter, and more"
                        </p>
                    </Card>
                    <Card glow=GlowColor::Purple hover_effect=true>
                        <h3 class="text-lg font-semibold text-purple-400 mb-2">"Parallel Workflows"</h3>
                        <p class="text-gray-300 text-sm">
                            "All agents work simultaneously without waiting"
                        </p>
                    </Card>
                    <Card glow=GlowColor::Pink hover_effect=true>
                        <h3 class="text-lg font-semibold text-pink-400 mb-2">"Multi-IA Routing"</h3>
                        <p class="text-gray-300 text-sm">
                            "Claude, OpenAI, Gemini, and Ollama integration"
                        </p>
                    </Card>
                </div>
            </main>

            <footer class="border-t border-white/10 bg-white/5 backdrop-blur-md py-6">
                <div class="container mx-auto px-6 text-center text-gray-400 text-sm">
                    "VAPORA v1.0 — Multi-Agent Development Platform"
                </div>
            </footer>
        </div>
    }
}