"use client";

import { useMemo, useState } from "react";

interface Plan {
  id: string;
  emoji: string;
  name: string;
  price: string;
  cover: string[];
  best: string;
  note: string;
}

const PLANS: Plan[] = [
  {
    id: "safetywing", emoji: "🛡️", name: "SafetyWing Nomad",
    price: "$45–80/月", best: "多数数字游民首选",
    cover: ["门诊/住院", "紧急医疗运送", "旅行延误"],
    note: "覆盖全球多数国家，按月订阅灵活",
  },
  {
    id: "worldnomads", emoji: "🌍", name: "World Nomads",
    price: "按行程报价", best: "多国跳跃旅行",
    cover: ["冒险运动", "行李丢失", "紧急救援"],
    note: "适合含户外活动的行程，按段购买",
  },
  {
    id: "genki", emoji: "🇯🇵", name: "Genki",
    price: "€60–100/月", best: "欧洲长期旅居",
    cover: ["欧盟医疗", "牙科可选", "签证材料支持"],
    note: "对申根签证申请材料较友好",
  },
  {
    id: "local", emoji: "🏥", name: "目的地本地保险",
    price: "因地而异", best: "停留 6 个月+",
    cover: ["本地医院", "报销便捷", "费用通常更低"],
    note: "需了解当地条款与语言，适合长期定居",
  },
];

const FILTERS = [
  { key: "all", label: "🌏 全部" },
  { key: "flex", label: "📅 按月灵活" },
  { key: "trip", label: "✈️ 按行程" },
  { key: "long", label: "🏠 长期" },
];

export default function InsuranceGuide() {
  const [filter, setFilter] = useState("all");
  const [picked, setPicked] = useState<string | null>(null);

  const filtered = useMemo(() => {
    if (filter === "all") return PLANS;
    if (filter === "flex") return PLANS.filter((p) => p.id === "safetywing" || p.id === "genki");
    if (filter === "trip") return PLANS.filter((p) => p.id === "worldnomads");
    return PLANS.filter((p) => p.id === "local" || p.id === "genki");
  }, [filter]);

  return (
    <section className="section insurance-section" id="insurance">
      <div className="container">
        <div className="section-header reveal">
          <span className="section-tag">🏥 INSURANCE</span>
          <h2>旅居保险指南</h2>
          <p>远程工作不等于裸奔——选对国际医疗保险再出发</p>
        </div>

        <div className="events-filters reveal">
          {FILTERS.map((f) => (
            <button
              key={f.key}
              className={`filter-btn${filter === f.key ? " active" : ""}`}
              onClick={() => setFilter(f.key)}
            >
              {f.label}
            </button>
          ))}
        </div>

        <div className="insurance-grid">
          {filtered.map((p, i) => (
            <div
              key={p.id}
              className={`insurance-card reveal${picked === p.id ? " selected" : ""}`}
              style={{ transitionDelay: `${i * 0.08}s` }}
              onClick={() => setPicked(p.id === picked ? null : p.id)}
            >
              <div className="insurance-top">
                <span className="insurance-emoji">{p.emoji}</span>
                <span className="insurance-price">{p.price}</span>
              </div>
              <h3>{p.name}</h3>
              <p className="insurance-best">👍 {p.best}</p>
              <ul className="insurance-cover">
                {p.cover.map((c) => <li key={c}>✓ {c}</li>)}
              </ul>
              <p className="insurance-note">{p.note}</p>
              {picked === p.id && <span className="insurance-picked">✓ 已标记关注</span>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}