use leptos::prelude::*;
use leptos_router::hooks::use_navigate;
use crate::components::prelude::*;

#[component]
pub fn AccentHero(
    #[prop(optional)] id: Option<&'static str>,
    #[prop(optional)] class: Option<&'static str>,
) -> impl IntoView {
    let navigate = use_navigate();
    
    let base_classes = "absolute flex flex-col items-center justify-center text-center px-4 sm:px-6 lg:px-8 overflow-hidden";
    let height_classes = "min-h-screen h-full"; // Full screen for accent
    
    let final_classes = match class {
        Some(c) => format!("{} {} {}", base_classes, height_classes, c),
        None => format!("{} {}", base_classes, height_classes),
    };
    
    // Reactive translation functions - using translation signals
    let _location = leptos_router::hooks::use_location();
    let _translation_context = crate::i18n::use_translation_context();

    let profile = t8s!("/en/profile");
    
    let on_buy_traffic_click = move |_| {
        navigate(profile, Default::default());
    };

    view! {
        <div class="relative lg:h-[45vw]">
            <section
                class=final_classes
                id=id.unwrap_or("hero-accent-section")
            >
                <div 
                    class="absolute inset-0 pointer-events-none"
                    style=""
                    id="accent-background-overlay"
                ></div>

                // // Accent variant layout - structured with top brand, center content, bottom key
                // <div class="flex flex-col items-center justify-between z-10 relative w-full h-full py-8 sm:py-12 lg:py-16" id="hero-accent-content">
                //     // Top section - Brand/Logo area
                //     <div class="flex flex-col items-center gap-2 sm:gap-3" id="hero-top-section">
                //         <h2 
                //             class="text-base sm:text-lg lg:text-xl font-medium tracking-wide"
                //             style="color: var(--text-muted);"
                //             id="hero-brand-text"
                //         >
                //             "Top-Level"
                //         </h2>
                //         <div 
                //             class="text-xs sm:text-sm lg:text-base font-normal tracking-wider opacity-80"
                //             style="color: var(--text-muted);"
                //             id="hero-sub-brand"
                //         >
                //             "Except BePHN"
                //         </div>
                //     </div>

                //     // Center section - Main content with icon and text
                //     <div class="flex flex-col items-center justify-center gap-6 sm:gap-8 lg:gap-12 flex-1" id="hero-center-section">
                //         // Big Icon (optional)
                //         {icon.map(|i| view! {
                //             <div 
                //                 class="flex items-center justify-center" 
                //                 id="hero-icon"
                //             >
                //                 <Card
                //                     variant=CardVariant::IconContainer
                //                     padding="p-4 sm:p-6 lg:p-8"
                //                     max_width="w-[100px] sm:w-[120px] lg:w-[140px]"
                //                     class="w-[100px] h-[100px] sm:w-[120px] sm:h-[120px] lg:w-[140px] lg:h-[140px] flex items-center justify-center"
                //                     id="hero-icon-card"
                //                 >
                //                     {i}
                //                 </Card>
                //             </div>
                //         })}

                //         // Main number/value display  
                //         <div class="flex flex-col items-center gap-3 sm:gap-4" id="hero-main-content">
                //             <div 
                //                 class="text-4xl sm:text-6xl lg:text-8xl xl:text-9xl font-bold leading-none tracking-tight"
                //                 style="color: var(--main-main-light);"
                //                 id="hero-big-number"
                //             >
                //                 "15"
                //             </div>
                            
                //             // Main Text
                //             <h1 
                //                 class="text-xl sm:text-2xl lg:text-3xl xl:text-4xl font-semibold leading-tight tracking-tight text-center"
                //                 style="color: var(--text-primary);"
                //                 id="hero-main-text"
                //             >
                //                 {main_text}
                //             </h1>
                            
                //             // Sub Text (optional)
                //             {sub_text.map(|text| view! {
                //                 <p 
                //                     class="text-sm sm:text-base lg:text-lg font-normal leading-relaxed tracking-tight text-center max-w-2xl opacity-90"
                //                     style="color: var(--text-muted);"
                //                     id="hero-sub-text"
                //                 >
                //                     {text}
                //                 </p>
                //             })}
                //         </div>
                //     </div>

                //     // Bottom section - Large number display
                //     <div class="flex flex-col items-center gap-2" id="hero-bottom-section">
                //         <div 
                //             class="text-2xl sm:text-3xl lg:text-4xl font-bold tracking-wider"
                //             style="color: var(--main-main-light);"
                //             id="hero-large-number"
                //         >
                //             "500000000"
                //         </div>
                //         <div 
                //             class="text-xs sm:text-sm lg:text-base font-medium tracking-wide opacity-70"
                //             style="color: var(--text-muted);"
                //             id="hero-bottom-label"
                //         >
                //             "KeyPK"
                //         </div>
                //     </div>
                // </div>
            </section>
            <div class="relative flex flex-col w-full z-10 top-[calc(8vw-50px)]" id="hero-accent-content">
                <h1 class="mx-auto md:w-1/2 lg:w-1/3 font-semibold text-[48px] leading-[54px] text-center">
                    {t8r!("Proxy servers from more than")} 
                    <span style="color: var(--text-accent);">" 150 "</span> {t8r!("countries")}
                    {" "}{t8r!("and")}
                    <span style="color: var(--text-accent);">" 30,000 "</span> {t8r!("cities.")}
                </h1>
                <span class="text-[var(--text-muted)] mx-auto text-[18px] leading-[24px] text-center mt-[24px]">
                    {t8r!("Unique service with residential, mobile and datacenter proxies")}
                </span>
                <button 
                    class="rounded-[14px] bg-[var(--main-light-80)] mx-auto py-[14px] mt-[48px] hover:opacity-90 transition-opacity duration-200 cursor-pointer"
                    on:click=on_buy_traffic_click
                    id="hero-buy-traffic-button"
                >
                    <span class="mx-auto text-center text-[var(--main-dark-text)] font-[18px] leading-[24px] font-semibold">
                        {t8r!("Buy Traffic")}
                    </span>
                </button>
            </div>
        </div>
    }
}

