import { useEffect } from "react";
import { Mail, MapPin } from "lucide-react";
import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
import logoImage from "./assets/images/logo.png";
import { products } from "./utils/utils";

const Navbar = () => {
  const navigate = useNavigate();

  return (
    <nav className="fixed top-0 w-full z-50 bg-slate-950/70 backdrop-blur-md border-b border-slate-800">
      <div className="flex justify-between items-center max-w-7xl mx-auto px-6 h-20">
        <div
          className="flex items-center gap-3 cursor-pointer font-headline"
          onClick={() => navigate("/")}
        >
          <div
            style={{
              width: "7.75rem",
              height: "2.35rem",
              borderRadius: "9999px",
              overflow: "hidden",
            }}
            className="w-11 h-11 bg-white rounded-xl flex items-center justify-center"
          >
            <img
              style={{ width: "5.5rem", height: "3rem" }}
              src={logoImage}
              alt="智价云 Logo"
              className="w-7 h-7 object-contain"
            />
          </div>
        </div>

        <div className="hidden md:flex items-center space-x-10">
          <NavLink
            to="/"
            className={({ isActive }) =>
              `relative inline-flex items-center leading-none font-headline text-sm ${
                isActive
                  ? "text-secondary font-bold"
                  : "text-slate-300 hover:text-white font-medium transition-colors"
              }`
            }
          >
            {({ isActive }) => (
              <>
                首页
                {isActive && (
                  <span className="absolute left-0 -bottom-2 h-0.5 w-full bg-secondary rounded-full"></span>
                )}
              </>
            )}
          </NavLink>

          <div className="relative group">
            <span className="inline-flex items-center leading-none text-slate-300 hover:text-white transition-colors font-headline text-sm font-medium cursor-default">
              产品中心
            </span>
            <div className="absolute left-1/2 top-full mt-3 -translate-x-1/2 min-w-32 rounded-lg border border-slate-800 bg-slate-900/95 p-1.5 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
              {products.map((product) => (
                <a key={product.name} href={product.url} target="_blank" rel="noreferrer" className="block rounded-md px-3 py-2 text-sm text-slate-200 hover:bg-slate-800 hover:text-white transition-colors">
                  {product.name}
                </a>
              ))}
            </div>
          </div>
          <NavLink
            to="https://home.kailin.com.cn"
            target="_blank"
            rel="noreferrer"
            className={`relative inline-flex items-center leading-none font-headline text-sm text-slate-300 hover:text-white font-medium transition-colors`}
          >
            关于我们
          </NavLink>
          {/* <NavLink
            to="/contact"
            className={({ isActive }) =>
              `relative inline-flex items-center leading-none font-headline text-sm ${
                isActive
                  ? "text-secondary font-bold"
                  : "text-slate-300 hover:text-white font-medium transition-colors"
              }`
            }
          >
            {({ isActive }) => (
              <>
                联系我们
                {isActive && (
                  <span className="absolute left-0 -bottom-2 h-0.5 w-full bg-secondary rounded-full"></span>
                )}
              </>
            )}
          </NavLink> */}
        </div>

        <button
          onClick={() => navigate("/contact")}
          className="bg-blue-600 text-white px-6 py-2.5 rounded-lg font-headline text-sm font-bold hover:bg-blue-500 transition-all active:scale-95"
        >
          获取方案
        </button>
      </div>
    </nav>
  );
};

const Footer = () => {
  const navigate = useNavigate();

  return (
    <footer className="bg-slate-950 border-t border-slate-800 py-16 px-6">
      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
        <div className="space-y-6">
          <div className="text-xl font-bold text-white font-headline">
            开邻智数
          </div>
          <p className="text-sm text-slate-400 leading-relaxed">
            一站式企微生态SCRM私域直播
          </p>
        </div>
        <div>
          <h5 className="font-bold text-slate-200 mb-6 uppercase tracking-widest text-xs">
            联系我们
          </h5>
          <ul className="space-y-4 text-sm text-slate-400">
            <li className="flex items-center gap-2">
              <Mail className="w-4 h-4 text-secondary" />
              bd@dotouch.tech
            </li>
            <li className="flex items-start gap-2">
              <MapPin className="w-4 h-4 text-secondary mt-0.5" />
              <span>深圳大方无隅科技有限公司</span>
            </li>
          </ul>
        </div>
        <div>
          <h5 className="font-bold text-slate-200 mb-6 uppercase tracking-widest text-xs">
            产品中心
          </h5>
          <ul className="space-y-4 text-sm text-slate-400">
            {products.map((product) => (
              <li key={product.name}>
                <a href={product.url} target="_blank" rel="noreferrer" className="hover:text-secondary transition-colors">
                  {product.name}
                </a>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <h5 className="font-bold text-slate-200 mb-6 uppercase tracking-widest text-xs">
            法律条款
          </h5>
          <ul className="space-y-4 text-sm text-slate-400">
            <li>
              <a
                href="/privacy"
                target="_blank"
                rel="noreferrer"
                className="hover:text-secondary transition-colors"
              >
                隐私政策
              </a>
            </li>
            <li>
              <a
                href="/agreement"
                target="_blank"
                rel="noreferrer"
                className="hover:text-secondary transition-colors"
              >
                用户协议
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div className="max-w-7xl mx-auto mt-16 pt-8 border-t border-slate-800 text-center">
        <p className="text-sm text-slate-500">© 粤ICP备2024220172号-9</p>
      </div>
    </footer>
  );
};

export default function App() {
  const location = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  return (
    <div className="min-h-screen flex flex-col bg-slate-950 text-slate-100">
      <Navbar />
      <main className="flex-grow">
        <Outlet />
      </main>
      <Footer />
    </div>
  );
}