"use client";

import { useEffect } from "react";
import { useTranslation } from "@/i18n/navigation";
import { getThemeConfig } from "@/config";
import SocialPlatformIcon from "../../components/SocialPlatformIcon";

export default function AboutContent() {
  const { t } = useTranslation("about");

  useEffect(() => {
    window.history.scrollRestoration = "manual";
    window.scrollTo(0, 0);
    return () => {
      window.history.scrollRestoration = "auto";
    };
  }, []);
  const config = getThemeConfig();
  const linktreeUrl = config.linktreeUrl;
  const socialLinks = config.socialLinks ?? [];
  const teamMembers = config.teamMembers ?? [];

  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-950">
      <section className="py-20 sm:py-28">
        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h1 className="text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-5xl">
              {t("title")}
            </h1>
            <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600 dark:text-slate-400">
              {t("subtitle")}
            </p>
          </div>

          {/* 团队成员 */}
          {teamMembers.length > 0 && (
            <div className="mt-16">
              <h2 className="mb-2 text-center text-2xl font-bold text-slate-900 dark:text-slate-100 sm:text-3xl">
                {t("teamTitle")}
              </h2>
              <p className="mb-10 text-center text-slate-600 dark:text-slate-400">
                {t("teamDesc")}
              </p>
              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {teamMembers.map((member) => {
                  const content = (
                    <div className="card-hover flex flex-col items-center rounded-2xl border border-slate-100 bg-white p-6 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
                      <div className="mb-4 flex h-20 w-20 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-sky-100 to-cyan-50 text-4xl dark:from-sky-900/50 dark:to-cyan-900/50">
                        {member.avatar ?? "👤"}
                      </div>
                      <h3 className="text-lg font-bold text-slate-900 dark:text-slate-100">
                        {member.name}
                      </h3>
                      <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
                        {member.role}
                      </p>
                    </div>
                  );
                  if (member.link) {
                    return (
                      <a
                        key={member.name}
                        href={member.link}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="block"
                      >
                        {content}
                      </a>
                    );
                  }
                  return <div key={member.name}>{content}</div>;
                })}
              </div>
            </div>
          )}

          {/* 社交平台 Linktree */}
          {(linktreeUrl || socialLinks.length > 0) && (
            <div className="mt-16">
              <h2 className="mb-2 text-center text-2xl font-bold text-slate-900 dark:text-slate-100 sm:text-3xl">
                {t("linktreeTitle")}
              </h2>
              <p className="mb-10 text-center text-slate-600 dark:text-slate-400">
                {t("linktreeDesc")}
              </p>
              {(["domestic", "overseas"] as const).map((group) => {
                const items = socialLinks.filter((l) => l.group === group);
                if (items.length === 0) return null;
                return (
                  <div key={group} className="mb-10 last:mb-0">
                    <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                      {group === "domestic" ? t("groupDomestic") : t("groupOverseas")}
                    </h3>
                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                      {items.map((item) => (
                        <a
                          key={item.platform}
                          href={item.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="card-hover group flex items-center gap-4 rounded-2xl border border-slate-100 bg-white p-5 shadow-sm transition-all dark:border-slate-800 dark:bg-slate-900"
                        >
                          <SocialPlatformIcon platform={item.platform} />
                          <div className="min-w-0 flex-1">
                            <div className="font-bold text-slate-900 dark:text-slate-100">
                              {item.label}
                            </div>
                            <div className="mt-0.5 text-sm text-slate-500 dark:text-slate-400">
                              {t("linktreeCta")}
                            </div>
                          </div>
                          <span className="shrink-0 text-slate-400 transition-transform group-hover:translate-x-1">
                            ↗
                          </span>
                        </a>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </section>
    </div>
  );
}