"use client";

import Link from "next/link";
import { SITE_CONFIG } from "../config/course";

const CHAT_URL = "https://chatwoot.hackrobot.cn/livechat?user_id=hackrobot";

export function Footer() {
  return (
    <footer className="animate__animated animate__fadeInUp border-t border-[var(--border)] py-6 sm:py-8" style={{ animationDelay: "0.1s", animationFillMode: "both" }}>
      <div className="mx-auto max-w-6xl px-4 sm:px-6">
        <div className="mb-4 flex flex-wrap items-center justify-center gap-4">
          <Link href="/" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
            返回首页
          </Link>
          <Link href="/cloudphone" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
            课程首页
          </Link>
          <a
            href={CHAT_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-1.5 rounded-full bg-[var(--accent)]/15 px-4 py-2 text-sm font-medium text-[var(--accent)] transition hover:bg-[var(--accent)]/25 hover:text-[var(--accent)]"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
            </svg>
            即时问答
          </a>
        </div>
        <div className="text-center text-sm text-[var(--muted-foreground)]">
          {SITE_CONFIG.footer}
        </div>
      </div>
    </footer>
  );
}