"use client";

import { useEffect, useState } from "react";

const TIPS = [
  { emoji: "📶", text: "入住前用 Speedtest 测网速，低于 20Mbps 慎重签约" },
  { emoji: "💳", text: "准备一张无外汇手续费的信用卡，省下不少换汇成本" },
  { emoji: "🏥", text: "出发前购买 SafetyWing 等国际医疗保险，月费约 $40+" },
  { emoji: "🕐", text: "选时区重叠 ≥4 小时的城市，远程协作更轻松" },
  { emoji: "🛂", text: "护照有效期建议预留 6 个月以上，避免登机被拒" },
  { emoji: "☕", text: "先订 1 周 Airbnb 探路，再决定长期租房" },
];

export default function NomadTips() {
  const [idx, setIdx] = useState(0);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const show = setTimeout(() => setVisible(true), 8000);
    return () => clearTimeout(show);
  }, []);

  useEffect(() => {
    if (!visible) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % TIPS.length), 6000);
    return () => clearInterval(t);
  }, [visible]);

  if (!visible) return null;

  const tip = TIPS[idx];

  return (
    <div className="nomad-tips" role="status">
      <button className="nomad-tips-close" onClick={() => setVisible(false)} aria-label="关闭">✕</button>
      <span className="nomad-tips-emoji">{tip.emoji}</span>
      <div className="nomad-tips-body">
        <strong>游民小贴士</strong>
        <p key={idx}>{tip.text}</p>
      </div>
      <div className="nomad-tips-dots">
        {TIPS.map((_, i) => (
          <span key={i} className={i === idx ? "active" : ""} />
        ))}
      </div>
    </div>
  );
}