"use client";

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

export default function ShopCard() {
  const { t } = useTranslation("shop");
  const config = getThemeConfig();
  const shopUrl = config.services?.shopUrl;

  if (!shopUrl) return null;

  return (
    <div className="mb-12">
    <a
      href={shopUrl}
      target="_blank"
      rel="noopener noreferrer"
      className="group block overflow-hidden rounded-2xl border border-emerald-200/80 bg-gradient-to-br from-emerald-50 via-white to-teal-50/60 p-8 shadow-sm transition-all duration-300 hover:border-emerald-300 hover:shadow-xl hover:shadow-emerald-100/50 dark:border-emerald-800/80 dark:from-emerald-900/30 dark:via-slate-900 dark:to-teal-900/20 dark:hover:border-emerald-700 dark:hover:shadow-emerald-900/30 sm:p-10"
    >
      <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex-1">
          <div className="mb-3 inline-flex items-center gap-2 rounded-full bg-emerald-100 px-4 py-1.5 text-sm font-semibold text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
            <span className="text-lg">🛒</span>
            {t("badge")}
          </div>
          <h3 className="mb-3 text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-3xl">
            {t("title")}
          </h3>
          <p className="mb-4 max-w-xl text-base leading-relaxed text-slate-600 dark:text-slate-400">
            {t("desc")}
          </p>
        </div>
        <div className="flex shrink-0 items-center gap-4 rounded-2xl bg-white/90 p-6 shadow-md backdrop-blur-sm transition-transform dark:bg-slate-800/90 group-hover:scale-[1.02] sm:p-8">
          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-500 text-3xl shadow-lg shadow-emerald-200/50">
            🛍️
          </div>
          <div className="text-left">
            <div className="font-bold text-slate-800 dark:text-slate-200">{t("cta")}</div>
            <div className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t("ctaHint")}</div>
          </div>
        </div>
      </div>
    </a>
    </div>
  );
}