//! Unified About Page Component using shared delegation patterns
//!
//! This module provides a unified interface that automatically selects between
//! client-side reactive and server-side static implementations based on
//! context.

use leptos::prelude::*;
use rustelo_core_lib::i18n::content_helper::create_content_provider_reactive;
#[cfg(target_arch = "wasm32")]
use rustelo_core_lib::utils::nav;

/// Unified About Page component that works in both SSR and client contexts
/// Takes structured content data instead of individual parameters
#[component]
pub fn UnifiedAboutPage(
    #[prop(default = rustelo_core_lib::config::get_default_language().to_string())]
    _language: String,
    #[prop(optional)] lang_content: Option<std::collections::HashMap<String, String>>,
) -> impl IntoView {
    // Clean closure pattern that works with Leptos ownership model
    // Use DRY content accessor helper
    let content = create_content_provider_reactive(lang_content.clone());

    // Map to actual keys from the FTL file
    let about_cta_contact_text = content.t("about-get-in-touch");
    let about_cta_services_text = content.t("about-start-project");
    let about_cta_contact_url = content.t("about-contact-url");
    let about_cta_services_url = content.t("about-work-request-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">
              <div class="mb-8">
                <div class="flex items-center justify-center gap-8 mb-6">
                  <img src="/images/logos/jesusperez.png" alt="jesusperez" class="lg:h-20 h-15" />
                  <img src="/images/JesusPerez_f.jpg" alt="Jesús Pérez Profile Picture" class="lg:w-40 rounded-full w-32 object-cover border-2 ds-border" />
                </div>
                <h1 class="text-balance text-4xl font-bold tracking-tight ds-text sm:text-6xl">
                  {content.t("about-page-title")}
                </h1>
                <p class="mt-ds-6 ds-body ds-text-secondary max-w-2xl mx-auto">
                  {content.t("about-page-subtitle")}
                </p>
              </div>
            </div>
          </section>

          // Background Section
          <section class="py-16 ds-bg">
            <div class="ds-container-lg ds-container">
              <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div>
                  <h2 class="text-3xl font-bold ds-text mb-6">
                    {content.t("about-my-journey")}
                  </h2>
                  <div class="space-y-4 ds-text-secondary">
                    <p>
                      {content.t("about-journey-paragraph-1")}
                    </p>
                    <p>
                      {content.t("about-journey-paragraph-2")}
                    </p>
                    <p>
                      {content.t("about-journey-paragraph-3")}
                    </p>
                  </div>
                </div>

                <div class="p-8 ds-rounded-lg">
                  <h3 class="ds-heading-4 ds-text mb-ds-4">
                    {content.t("about-philosophy-approach")}
                  </h3>
                  <ul class="space-y-3 ds-text-secondary">
                    <li class="flex items-start gap-3">
                      <span class="text-green-500 mt-1">"✓"</span>
                      <span>{content.t("about-open-source-first")}</span>
                    </li>
                    <li class="flex items-start gap-3">
                      <span class="text-green-500 mt-1">"✓"</span>
                      <span>{content.t("about-self-hosted-solutions")}</span>
                    </li>
                    <li class="flex items-start gap-3">
                      <span class="text-green-500 mt-1">"✓"</span>
                      <span>{content.t("about-performance-security-design")}</span>
                    </li>
                    <li class="flex items-start gap-3">
                      <span class="text-green-500 mt-1">"✓"</span>
                      <span>{content.t("about-pragmatic-solutions")}</span>
                    </li>
                    <li class="flex items-start gap-3">
                      <span class="text-green-500 mt-1">"✓"</span>
                      <span>{content.t("about-knowledge-transfer-empowerment")}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </section>

          // Expertise Section
          <section class="py-16 ds-bg-page">
            <div class="ds-container-lg ds-container">
              <div class="text-center mb-ds-12">
                <h2 class="text-3xl font-bold ds-text">{content.t("about-technical-expertise")}</h2>
                <p class="mt-4 ds-text-secondary">
                  {content.t("about-technologies-work-with")}
                </p>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                // Rust Development
                <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm">
                  <div class="text-center mb-ds-4">
                    <span class="text-4xl">"🦀"</span>
                  </div>
                  <h3 class="ds-heading-4 ds-text mb-3 text-center">
                    {content.t("about-rust-development-title")}
                  </h3>
                  <ul class="space-y-ds-2 ds-caption ds-text-secondary">
                    <li>{content.t("about-systems-programming-item")}</li>
                    <li>{content.t("about-web-applications-item")}</li>
                    <li>{content.t("about-cli-tools-automation")}</li>
                    <li>{content.t("about-performance-optimization-item")}</li>
                    <li>{content.t("about-memory-safety-concurrency")}</li>
                  </ul>
                </div>

                // Infrastructure
                <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm">
                  <div class="text-center mb-ds-4">
                    <span class="text-4xl">"🏗️"</span>
                  </div>
                  <h3 class="ds-heading-4 ds-text mb-3 text-center">
                    {content.t("about-infrastructure-title")}
                  </h3>
                  <ul class="space-y-ds-2 ds-caption ds-text-secondary">
                    <li>{content.t("about-kubernetes-container")}</li>
                    <li>{content.t("about-cicd-pipeline-design")}</li>
                    <li>{content.t("about-monitoring-observability")}</li>
                    <li>{content.t("about-self-hosted-alternatives")}</li>
                    <li>{content.t("about-security-compliance")}</li>
                  </ul>
                </div>

                // Web3 & Blockchain
                <div class="ds-bg p-ds-6 ds-rounded-lg ds-shadow-sm">
                  <div class="text-center mb-ds-4">
                    <span class="text-4xl">"🌐"</span>
                  </div>
                  <h3 class="ds-heading-4 ds-text mb-3 text-center">
                    {content.t("about-web3-blockchain-title")}
                  </h3>
                  <ul class="space-y-ds-2 ds-caption ds-text-secondary">
                    <li>{content.t("about-polkadot-ecosystem-dev")}</li>
                    <li>{content.t("about-substrate-blockchain")}</li>
                    <li>{content.t("about-smart-contract-dev")}</li>
                    <li>{content.t("about-dapp-architecture")}</li>
                    <li>{content.t("about-cross-chain-communication")}</li>
                  </ul>
                </div>
              </div>
            </div>
          </section>

          // Values Section
          <section class="py-16 ds-bg">
            <div class="ds-container-lg ds-container">
              <div class="text-center mb-ds-12">
                <h2 class="text-3xl font-bold ds-text">{content.t("about-why-self-hosted-open-source")}</h2>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-ds-8">
                <div class="space-y-6">
                  <div>
                    <h3 class="ds-body font-semibold ds-text mb-2">
                      {content.t("about-control-privacy")}
                    </h3>
                    <p class="ds-text-secondary">
                      {content.t("about-control-privacy-desc")}
                    </p>
                  </div>

                  <div>
                    <h3 class="ds-body font-semibold ds-text mb-2">
                      {content.t("about-cost-effectiveness")}
                    </h3>
                    <p class="ds-text-secondary">
                      {content.t("about-cost-effectiveness-desc")}
                    </p>
                  </div>

                  <div>
                    <h3 class="ds-body font-semibold ds-text mb-2">
                      {content.t("about-resilience")}
                    </h3>
                    <p class="ds-text-secondary">
                      {content.t("about-resilience-desc")}
                    </p>
                  </div>
                </div>

                <div class="space-y-6">
                  <div>
                    <h3 class="ds-body font-semibold ds-text mb-2">
                      {content.t("about-performance")}
                    </h3>
                    <p class="ds-text-secondary">
                      {content.t("about-performance-desc")}
                    </p>
                  </div>

                  <div>
                    <h3 class="ds-body font-semibold ds-text mb-2">
                      {content.t("about-customization")}
                    </h3>
                    <p class="ds-text-secondary">
                      {content.t("about-customization-desc")}
                    </p>
                  </div>

                  <div>
                    <h3 class="ds-body font-semibold ds-text mb-2">
                      {content.t("about-community")}
                    </h3>
                    <p class="ds-text-secondary">
                      {content.t("about-community-desc")}
                    </p>
                  </div>
                </div>
              </div>
            </div>
        </section>

        // CTA Section
        <section class="py-16">
          <div class="mx-auto max-w-4xl ds-container text-center">
            <h2 class="text-3xl font-bold ds-text mb-ds-4">{content.t("about-lets-work-together")}</h2>
            <p class="ds-text-secondary mb-8 ds-body">
              {content.t("about-work-together-desc")}
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href={about_cta_contact_url.clone()} class="no-underline ds-btn-secondary"
                    on:click=move |_ev| {
                        #[cfg(target_arch = "wasm32")]
                        {
                            if let Some(set_path) = use_context::<WriteSignal<String>>() {
                                _ev.prevent_default();
                                nav::anchor_navigate(set_path, &about_cta_contact_url);
                                rustelo_core_lib::utils::doc_scroll_to_top(100);
                            }
                        }
                    }
                >
                {about_cta_contact_text}
                </a>
                <a href={about_cta_services_url.clone()} class="no-underline ds-btn-secondary"
                    on:click=move |_ev| {
                        #[cfg(target_arch = "wasm32")]
                        {
                            if let Some(set_path) = use_context::<WriteSignal<String>>() {
                                _ev.prevent_default();
                                nav::anchor_navigate(set_path, &about_cta_services_url);
                                rustelo_core_lib::utils::doc_scroll_to_top(100);
                            }
                        }
                    }
                >
                {about_cta_services_text}
                </a>
            </div>
          </div>
        </section>
      </div>
    }
}
