use yew::prelude::*;

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <main class="container">
            // 1. Hero Section
            <section class="hero">
                <img src="public/logo.png" alt="Maltemedia Logo" width="150" />
                <h1>{ "Maltemedia" }</h1>
                <p class="subtitle">
                    { "A modern, fast, and secure application to stay updated with the latest news from different worlds." }
                </p>

                <div class="badge-container">
                    <span class="badge">{ "Made with Rust & Yew" }</span>
                    <span class="badge">{ "GPL v3" }</span>
                    <span class="badge badge-special">{ "Powered by Easy-Nostr" }</span>
                </div>

                <div class="cta-container">
                    <a href="https://gitea.malxte.de/Bytemalte/marstemedia" target="_blank" class="gitea-button">
                        <span class="icon">{ "💻" }</span>
                        { " Download & Source Code" }
                    </a>
                    <p class="hint">{ "Find the latest releases on our Gitea instance" }</p>
                </div>
            </section>

            // 2. Features Grid
            <div class="grid">
                <div class="card">
                    <div class="card-icon">{ "🌌" }</div>
                    <h3>{ "Nostr Feed" }</h3>
                    <p>{ "Browse decentralized posts using the Easy-Nostr engine. Fast, anonymous, and secure." }</p>
                </div>
                <div class="card">
                    <div class="card-icon">{ "🤖" }</div>
                    <h3>{ "AI News" }</h3>
                    <p>{ "Get instant tech news summaries generated by Llama 3 via Groq or OpenRouter." }</p>
                </div>
                <div class="card">
                    <div class="card-icon">{ "📻" }</div>
                    <h3>{ "RSS Reader" }</h3>
                    <p>{ "Follow your favorite news sources like NASA or Heise by adding custom RSS feeds." }</p>
                </div>
                <div class="card">
                    <div class="card-icon">{ "🔒" }</div>
                    <h3>{ "Private & Secure" }</h3>
                    <p>{ "Built with Tauri v2 for a native, high-performance experience with a minimal footprint." }</p>
                </div>
            </div>

            // 3. Easy-Nostr Highlight Section (Informativ & Modern)
            <section class="crate-feature">
                <div class="crate-content">
                    <h2>{ "The Engine: Easy-Nostr" }</h2>
                    <p>
                        { "To ensure a seamless decentralized experience, I developed " }
                        <code>{ "easy-nostr" }</code>
                        { "—a high-level Rust library that simplifies identity management, social feeds, and NIP-17 encrypted messaging." }
                    </p>
                    <div class="crate-links">
                        <a href="https://gitea.malxte.de/Bytemalte/easy-nostr" target="_blank" class="secondary-button">
                            { "Explore Crate on Gitea" }
                        </a>
                    </div>
                </div>
            </section>

            // 4. Footer & Tech Stack
            <section class="footer-info">
                <h2>{ "Built with Modern Technology" }</h2>
                <div class="tech-tags">
                    <span>{ "Tauri v2" }</span>
                    <span>{ "Yew (Wasm)" }</span>
                    <span>{ "Rust" }</span>
                    <span class="highlight-tag">{ "Easy-Nostr" }</span>
                </div>
                <p class="hint" style="margin-top: 30px;">{ "© 2026 Maltemedia • Open Source" }</p>
            </section>
        </main>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}
