//! Home page component.

use leptos::prelude::*;

use crate::components::{Card, PageLayout};

/// Home page.
#[component]
pub fn HomePage() -> impl IntoView {
    view! {
        <PageLayout>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                // Hero section
                <section class="text-center mb-16">
                    <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
                        "Welcome to "
                        <span class="text-blue-400">"Chattyness"</span>
                    </h1>
                    <p class="text-xl text-gray-300 max-w-2xl mx-auto mb-8">
                        "Create and explore virtual spaces where communities come alive. "
                        "Build your own realm, customize it, and invite others to join."
                    </p>
                    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                        <a href="/realms/new" class="btn-primary text-lg px-8 py-4">
                            "Create Your Realm"
                        </a>
                        <a href="/realms" class="btn-secondary text-lg px-8 py-4">
                            "Explore Realms"
                        </a>
                    </div>
                </section>

                // Features section
                <section class="mb-16">
                    <h2 class="text-2xl font-bold text-white text-center mb-8">"Why Chattyness?"</h2>
                    <div class="grid md:grid-cols-3 gap-8">
                        <FeatureCard
                            icon="castle"
                            title="Create Realms"
                            description="Build themed virtual spaces with multiple scenes, customizable spots, and interactive elements."
                        />
                        <FeatureCard
                            icon="users"
                            title="Build Communities"
                            description="Invite friends, manage members, and create a thriving community around your interests."
                        />
                        <FeatureCard
                            icon="palette"
                            title="Customize Everything"
                            description="Props, avatars, scenes, and scripts - make your realm truly unique."
                        />
                    </div>
                </section>

                // CTA section
                <section class="text-center">
                    <Card class="p-8 max-w-2xl mx-auto">
                        <h2 class="text-2xl font-bold text-white mb-4">"Ready to get started?"</h2>
                        <p class="text-gray-300 mb-6">
                            "Create your first realm in just a few clicks. No experience needed."
                        </p>
                        <a href="/realms/new" class="btn-primary inline-block">
                            "Create a Realm"
                        </a>
                    </Card>
                </section>
            </div>
        </PageLayout>
    }
}

/// Feature card component.
#[component]
fn FeatureCard(icon: &'static str, title: &'static str, description: &'static str) -> impl IntoView {
    let icon_symbol = match icon {
        "castle" => "castle",
        "users" => "users",
        "palette" => "palette",
        _ => "star",
    };

    view! {
        <Card class="p-6 text-center">
            <div class="text-4xl mb-4" aria-hidden="true">
                <img
                    src=format!("/icons/{}.svg", icon_symbol)
                    alt=""
                    class="w-12 h-12 mx-auto"
                    aria-hidden="true"
                />
            </div>
            <h3 class="text-xl font-semibold text-white mb-2">{title}</h3>
            <p class="text-gray-400">{description}</p>
        </Card>
    }
}