//! Generated Unified {ComponentName} Page Component
//!
//! Auto-generated hero page implementation with hero section and call-to-action.

use leptos::prelude::*;
use shared::i18n::create_content_provider;

/// Unified {ComponentName} page component that delegates to appropriate implementation
#[component]
pub fn {ComponentName}Page(_language: String) -> impl IntoView {
    #[cfg(not(target_arch = "wasm32"))]
    {
        // SSR context: use static implementation
        view! {
            <crate::{ModuleName}::ssr::{ComponentName}PageSSR language=_language.clone() />
        }
    }

    #[cfg(target_arch = "wasm32")]
    {
        // Client context: use reactive implementation
        view! {
            <crate::{ModuleName}::client::{ComponentName}PageClient language=_language.clone() />
        }
    }
}

/// Unified {ComponentName} Page component that works in both SSR and client contexts
#[component]
pub fn Unified{ComponentName}Page(
    #[prop(optional)] lang_content: Option<std::collections::HashMap<String, String>>,
) -> impl IntoView {
    // Use DRY content accessor helper
    let content = create_content_provider(lang_content.clone());

    // Pre-extract CTA values to avoid closure ownership issues
    let cta_primary_text = content.t("{prefix}-cta-primary-text");
    let cta_primary_url = content.t("{prefix}-cta-primary-url");

    view! {
        <div class="min-h-screen ds-bg-page">
            // Hero Section
            <section class="py-20 ds-container">
                <div class="mx-auto max-w-4xl text-center">
                    <h1 class="text-balance text-4xl font-bold tracking-tight ds-text sm:text-6xl mb-ds-4">
                        {content.t("{prefix}-hero-title")}
                    </h1>
                    <p class="mt-ds-6 ds-body ds-text-secondary max-w-2xl mx-auto">
                        {content.t("{prefix}-hero-subtitle")}
                    </p>

                    // CTA Section
                    <div class="mt-10 flex items-center justify-center gap-x-6">
                        <components::SpaLink
                            href={cta_primary_url}
                            class="no-underline ds-btn-primary".to_string()>
                            {cta_primary_text}
                        </components::SpaLink>

                        // Optional secondary CTA
                        {move || {
                            let secondary_text = content.t_quiet("{prefix}-cta-secondary-text");
                            let secondary_url = content.t_quiet("{prefix}-cta-secondary-url");
                            if !secondary_text.is_empty() && !secondary_url.is_empty() {
                                view! {
                                    <components::SpaLink
                                        href={secondary_url}
                                        class="ds-btn-secondary".to_string()>
                                        {secondary_text}
                                    </components::SpaLink>
                                }.into_view()
                            } else {
                                view! {}.into_view()
                            }
                        }}
                    </div>
                </div>
            </section>

            // Features/Benefits Section (optional)
            {move || {
                let features_title = content.t_quiet("{prefix}-features-title");
                if !features_title.is_empty() {
                    view! {
                        <section class="py-16 ds-bg">
                            <div class="ds-container">
                                <div class="text-center mb-ds-12">
                                    <h2 class="text-3xl font-bold ds-text">{features_title}</h2>
                                </div>

                                // This would be populated by FTL content or components
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-ds-8">
                                    // Feature cards would go here - can be customized per page
                                    <div class="text-center p-ds-6">
                                        <div class="ds-body ds-text-secondary">
                                            {content.t_quiet("{prefix}-feature-1")}
                                        </div>
                                    </div>
                                    <div class="text-center p-ds-6">
                                        <div class="ds-body ds-text-secondary">
                                            {content.t_quiet("{prefix}-feature-2")}
                                        </div>
                                    </div>
                                    <div class="text-center p-ds-6">
                                        <div class="ds-body ds-text-secondary">
                                            {content.t_quiet("{prefix}-feature-3")}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    }.into_view()
                } else {
                    view! {}.into_view()
                }
            }}
        </div>
    }
}
