const footerSections = [
  {
    title: "指南",
    links: [
      { label: "7天学习路径", href: "#roadmap" },
      { label: "全部资源", href: "#resources" },
      { label: "工具推荐", href: "#tools" },
      { label: "目的地数据库", href: "#" },
    ],
  },
  {
    title: "资源",
    links: [
      { label: "远程工作平台", href: "#" },
      { label: "签证政策汇总", href: "#" },
      { label: "共居空间推荐", href: "#" },
      { label: "数字游民保险", href: "#" },
    ],
  },
  {
    title: "社区",
    links: [
      { label: "Discord", href: "#" },
      { label: "微信群", href: "#community" },
      { label: "即刻", href: "#" },
      { label: "GitHub", href: "#" },
    ],
  },
  {
    title: "关于",
    links: [
      { label: "关于我们", href: "#" },
      { label: "贡献指南", href: "#" },
      { label: "隐私政策", href: "#" },
      { label: "联系我们", href: "#" },
    ],
  },
];

export default function Footer() {
  return (
    <footer className="border-t border-slate-100 bg-white">
      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-5">
          <div className="lg:col-span-1">
            <a href="#" className="flex items-center gap-2 text-lg font-bold">
              <span className="text-2xl">🌍</span>
              <span>数字游民指南</span>
            </a>
            <p className="mt-3 text-sm leading-relaxed text-slate-500">
              开源免费的数字游民资源平台
              <br />
              助你开启自由工作与旅行的生活方式
            </p>
          </div>

          {footerSections.map((section) => (
            <div key={section.title}>
              <h4 className="mb-4 text-sm font-bold text-slate-900">
                {section.title}
              </h4>
              <ul className="space-y-2.5">
                {section.links.map((link) => (
                  <li key={link.label}>
                    <a
                      href={link.href}
                      className="text-sm text-slate-500 transition-colors hover:text-slate-700"
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-slate-100 pt-8 sm:flex-row">
          <p className="text-sm text-slate-400">
            Made with 🌍 by 数字游民社区 | Digital Nomad Guide
          </p>
          <p className="text-sm text-slate-400">开源共享 · 社区驱动</p>
        </div>
      </div>
    </footer>
  );
}