import { Link } from 'react-router-dom'
import { SITE } from '@/content/site'
import { LogoMark } from '@/components/logo'

const COLUMNS = [
  {
    title: 'PRODUCT',
    links: [
      { label: '功能', href: '/#features' },
      { label: '架构', href: '/#architecture' },
      { label: '下载', href: '/download', internal: true },
    ],
  },
  {
    title: 'RESOURCES',
    links: [
      { label: '下载桌面版', href: '/download', internal: true },
      { label: '源码仓库', href: SITE.repo },
    ],
  },
] as const

export function SiteFooter() {
  return (
    <footer className="border-t border-hairline">
      <div className="mx-auto grid max-w-6xl gap-10 px-6 py-12 md:grid-cols-[1.5fr_1fr_1fr] lg:px-10">
        <div>
          <p className="flex items-center gap-2.5 font-mono text-[15px] font-semibold">
            <LogoMark size={30} />
            sundynix <em className="not-italic text-accent">agentix</em>
          </p>
          <p className="mt-2 text-[14px] text-ink-2">{SITE.tagline}</p>
          <p className="mt-4 font-mono text-[11.5px] tracking-[0.08em] text-ink-3">
            {SITE.version} · MACOS / WINDOWS / SELF-HOSTED
          </p>
        </div>

        {COLUMNS.map((col) => (
          <nav key={col.title} aria-label={col.title}>
            <p className="mb-3.5 font-mono text-[11px] tracking-[0.16em] text-ink-3">
              {col.title}
            </p>
            <ul className="space-y-2.5">
              {col.links.map((link) => (
                <li key={link.label}>
                  {'internal' in link && link.internal ? (
                    <Link
                      to={link.href}
                      className="text-[13.5px] text-ink-2 transition-colors hover:text-accent-ink"
                    >
                      {link.label}
                    </Link>
                  ) : (
                    <a
                      href={link.href}
                      target={link.href.startsWith('http') ? '_blank' : undefined}
                      rel={link.href.startsWith('http') ? 'noreferrer' : undefined}
                      className="text-[13.5px] text-ink-2 transition-colors hover:text-accent-ink"
                    >
                      {link.label}
                    </a>
                  )}
                </li>
              ))}
            </ul>
          </nav>
        ))}
      </div>

      <div className="border-t border-hairline">
        <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-6 gap-y-2 px-6 py-5 font-mono text-[12px] text-ink-3 lg:px-10">
          <span>© 2026 SUNDYNIX AGENTIX</span>
          <a
            href="https://beian.miit.gov.cn/"
            target="_blank"
            rel="noreferrer"
            className="transition-colors hover:text-accent-ink"
          >
            {SITE.icp}
          </a>
        </div>
      </div>
    </footer>
  )
}