"use client";

import { useTranslation } from "@/i18n/navigation";

export default function Hero() {
  const { t } = useTranslation("hero");
  const stats = [
    { value: "200+", labelKey: "resources" as const },
    { value: "7 天", labelKey: "path" as const },
    { value: "50+", labelKey: "tools" as const },
    { value: "30+", labelKey: "destinations" as const },
    { value: "100%", labelKey: "free" as const },
  ];
  return (
    <section className="relative overflow-hidden pt-24 pb-16 sm:pt-32 sm:pb-20">
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-sky-50/80 via-white to-white dark:from-slate-900 dark:via-slate-900 dark:to-slate-950" />
      <div className="pointer-events-none absolute top-0 left-1/2 h-[600px] w-[800px] -translate-x-1/2 rounded-full bg-gradient-to-br from-sky-100/60 via-cyan-50/40 to-amber-50/30 blur-3xl dark:from-sky-900/20 dark:via-slate-800/30 dark:to-amber-900/10" />

      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-sky-200 bg-sky-50 px-4 py-1.5 text-sm font-medium text-sky-700 dark:border-sky-800 dark:bg-sky-900/50 dark:text-sky-300">
            <span>🎒</span>
            <span>{t("badge")}</span>
          </div>

          <h1 className="mx-auto max-w-4xl text-4xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100 sm:text-5xl lg:text-7xl">
            <span className="gradient-text">{t("title")}</span>
            <br className="sm:hidden" />
            {t("titleSuffix")}
          </h1>

          <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-slate-600 dark:text-slate-400 sm:text-xl">
            {t("subtitle")}
            <br className="hidden sm:block" />
            <span className="text-slate-400 dark:text-slate-500 sm:text-slate-600">
              {t("subtitleEn")}
            </span>
          </p>

          <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
            <a
              href="#roadmap"
              className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-sky-500 px-8 py-3.5 text-base font-semibold text-white shadow-lg shadow-sky-500/25 transition-all hover:bg-sky-600 hover:shadow-xl hover:shadow-sky-500/30 sm:w-auto"
            >
              {t("ctaStart")}
              <span>→</span>
            </a>
            <a
              href="#community"
              className="inline-flex w-full items-center justify-center gap-2 rounded-full border border-slate-200 bg-white px-8 py-3.5 text-base font-semibold text-slate-700 shadow-sm transition-all hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-slate-600 dark:hover:bg-slate-700 sm:w-auto"
            >
              {t("ctaResources")}
            </a>
          </div>
        </div>

        {/* Stats marquee */}
        <div className="marquee-container mt-16 overflow-hidden">
          <div className="flex animate-scroll w-max gap-6">
            {[...stats, ...stats].map((s, i) => (
              <div
                key={i}
                className="flex shrink-0 items-center gap-3 rounded-2xl border border-slate-100 bg-white/80 px-6 py-4 shadow-sm backdrop-blur-sm dark:border-slate-700 dark:bg-slate-800/80"
              >
                <span className="text-2xl font-bold text-sky-600 sm:text-3xl">
                  {s.value}
                </span>
                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">
                  {t(`stats.${s.labelKey}`)}
                </span>
              </div>
            ))}
          </div>
        </div>

        <div className="marquee-container mt-4 overflow-hidden">
          <div className="flex animate-scroll-reverse w-max gap-6">
            {[...stats, ...stats].map((s, i) => (
              <div
                key={i}
                className="flex shrink-0 items-center gap-3 rounded-2xl border border-slate-100 bg-white/80 px-6 py-4 shadow-sm backdrop-blur-sm dark:border-slate-700 dark:bg-slate-800/80"
              >
                <span className="text-2xl font-bold text-amber-500 sm:text-3xl">
                  {s.value}
                </span>
                <span className="text-sm font-medium text-slate-500 dark:text-slate-400">
                  {t(`stats.${s.labelKey}`)}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}