"use client";

import { useState } from "react";
import { useTranslation, Link } from "@/i18n/navigation";
import Footer from "@/app/components/Footer";

interface Service {
  id: string;
  icon: string;
  titleZh: string;
  titleEn: string;
  descZh: string;
  descEn: string;
  features: { zh: string; en: string }[];
  priceZh: string;
  priceEn: string;
  color: string;
  gradientFrom: string;
  gradientTo: string;
}

const SERVICES: Service[] = [
  {
    id: "insurance",
    icon: "🛡️",
    titleZh: "旅行保险",
    titleEn: "Travel Insurance",
    descZh: "数字游民定制方案，覆盖全球",
    descEn: "Global coverage for digital nomads",
    features: [
      { zh: "覆盖中国 + 境外", en: "Coverage in China + overseas" },
      { zh: "远程工作专属条款", en: "Remote work specific terms" },
      { zh: "医疗直付服务", en: "Direct medical payment" },
      { zh: "24/7 中文客服", en: "24/7 Chinese support" },
    ],
    priceZh: "¥15/天起",
    priceEn: "From ¥15/day",
    color: "emerald",
    gradientFrom: "from-emerald-500",
    gradientTo: "to-teal-500",
  },
  {
    id: "chat",
    icon: "💬",
    titleZh: "社区聊天",
    titleEn: "Community Chat",
    descZh: "与全球数字游民实时交流",
    descEn: "Connect with nomads worldwide in real-time",
    features: [
      { zh: "3,200+ 在线成员", en: "3,200+ members online" },
      { zh: "城市群/兴趣群", en: "City & interest groups" },
      { zh: "即时信息对接", en: "Instant networking" },
      { zh: "经验分享互助", en: "Experience sharing" },
    ],
    priceZh: "免费",
    priceEn: "Free",
    color: "violet",
    gradientFrom: "from-violet-500",
    gradientTo: "to-purple-500",
  },
  {
    id: "tools",
    icon: "🧰",
    titleZh: "工具箱",
    titleEn: "Tools",
    descZh: "汇率、税务、签证一站式",
    descEn: "Exchange, tax & visa in one place",
    features: [
      { zh: "实时汇率计算", en: "Real-time exchange rates" },
      { zh: "税务估算器", en: "Tax calculator" },
      { zh: "签证倒计时", en: "Visa countdown" },
      { zh: "FIRE 计算器", en: "FIRE calculator" },
    ],
    priceZh: "免费",
    priceEn: "Free",
    color: "blue",
    gradientFrom: "from-blue-500",
    gradientTo: "to-cyan-500",
  },
  {
    id: "coworking",
    icon: "🏢",
    titleZh: "共享办公",
    titleEn: "Coworking",
    descZh: "全球优质办公空间推荐",
    descEn: "Premium workspace recommendations",
    features: [
      { zh: "全球 10,000+ 空间", en: "10,000+ spaces worldwide" },
      { zh: "会员专属折扣", en: "Member discounts" },
      { zh: "实地考察报告", en: "On-site reviews" },
      { zh: "预订直通车", en: "Direct booking" },
    ],
    priceZh: "¥99/月起",
    priceEn: "From ¥99/month",
    color: "orange",
    gradientFrom: "from-orange-500",
    gradientTo: "to-amber-500",
  },
  {
    id: "visa",
    icon: "📋",
    titleZh: "签证服务",
    titleEn: "Visa Services",
    descZh: "专业签证顾问全程护航",
    descEn: "Professional visa consultants",
    features: [
      { zh: "全球签证办理", en: "Global visa processing" },
      { zh: "材料翻译公证", en: "Translation & notarization" },
      { zh: "加急服务", en: "Expedited service" },
      { zh: "拒签退款保障", en: "Refund guarantee" },
    ],
    priceZh: "咨询报价",
    priceEn: "Contact for quote",
    color: "rose",
    gradientFrom: "from-rose-500",
    gradientTo: "to-pink-500",
  },
  {
    id: "mentor",
    icon: "🎓",
    titleZh: "导师计划",
    titleEn: "Mentor Program",
    descZh: "资深游民一对一指导",
    descEn: "1-on-1 guidance from experienced nomads",
    features: [
      { zh: "职业规划建议", en: "Career planning" },
      { zh: "创业经验分享", en: "Startup experience" },
      { zh: "远程工作技巧", en: "Remote work tips" },
      { zh: "人脉资源对接", en: "Network access" },
    ],
    priceZh: "¥299/次",
    priceEn: "¥299/session",
    color: "indigo",
    gradientFrom: "from-indigo-500",
    gradientTo: "to-violet-500",
  },
];

export default function ServicesPage() {
  const { t } = useTranslation("services");

  return (
    <div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
      <main className="max-w-[1200px] mx-auto px-4 sm:px-6 py-6 sm:py-8">
        <div className="text-center mb-10 sm:mb-12">
          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3">
            {t("title")}
          </h1>
          <p className="text-gray-500 dark:text-gray-400 text-sm sm:text-base">
            {t("subtitle")}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6">
          {SERVICES.map((service) => (
            <div
              key={service.id}
              className="bg-white dark:bg-gray-900 rounded-2xl overflow-hidden shadow-sm border border-gray-100 dark:border-gray-800 hover:shadow-lg transition-shadow"
            >
              <div className={`h-2 bg-gradient-to-r ${service.gradientFrom} ${service.gradientTo}`} />
              <div className="p-5 sm:p-6">
                <div className="flex items-start justify-between mb-4">
                  <div className="flex items-center gap-3">
                    <span className="text-3xl">{service.icon}</span>
                    <div>
                      <h3 className="font-bold text-gray-900 dark:text-gray-100 text-lg">
                        {service.titleZh}
                      </h3>
                      <p className="text-xs text-gray-500 dark:text-gray-400">
                        {service.titleEn}
                      </p>
                    </div>
                  </div>
                </div>

                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
                  {service.descZh}
                </p>

                <ul className="space-y-2 mb-5">
                  {service.features.map((feature, i) => (
                    <li key={i} className="flex items-center gap-2 text-xs sm:text-sm text-gray-500 dark:text-gray-400">
                      <span className="text-[#ff4d4f]">✓</span>
                      {feature.zh}
                    </li>
                  ))}
                </ul>

                <div className="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-gray-800">
                  <span className="font-bold text-gray-900 dark:text-gray-100">
                    {service.priceZh}
                  </span>
                  <Link
                    href="/join"
                    className="text-sm font-medium text-[#ff4d4f] hover:text-[#ff7a45] transition-colors"
                  >
                    {t("learnMore")} →
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-12 sm:mt-16 bg-gradient-to-r from-[#ff4d4f] to-[#ff7a45] rounded-2xl p-6 sm:p-10 text-center">
          <h2 className="text-xl sm:text-2xl font-bold text-white mb-3">
            还没有找到需要的服务？
          </h2>
          <p className="text-white/80 mb-5 text-sm sm:text-base">
            联系我们的客服，获取定制化解决方案
          </p>
          <Link
            href="/contact"
            className="inline-block bg-white text-[#ff4d4f] px-6 py-2.5 rounded-full font-medium hover:bg-gray-100 transition-colors"
          >
            联系客服
          </Link>
        </div>
      </main>

      <Footer />
    </div>
  );
}