import { ReactNode } from "react";
import { Link, Outlet, useLocation } from "react-router-dom";
import { Github, Twitter, Linkedin, Mail } from "lucide-react";
import { cn } from "../lib/utils";
import { motion } from "motion/react";

function NavLink({ to, children, active }: { to: string; children: ReactNode; active?: boolean }) {
  return (
    <Link
      to={to}
      className={cn(
        "relative text-sm tracking-wide transition-colors hover:text-stone-900",
        active ? "text-stone-900 font-medium" : "text-stone-500"
      )}
    >
      {children}
      {active && (
        <motion.div
          layoutId="nav-indicator"
          className="absolute -bottom-[21px] left-0 right-0 h-[1px] bg-stone-900"
          initial={false}
          transition={{ type: "spring", stiffness: 500, damping: 30 }}
        />
      )}
    </Link>
  );
}

export function RootLayout() {
  const location = useLocation();

  return (
    <div className="min-h-screen bg-[#FDFBF7] font-sans text-stone-800 flex flex-col selection:bg-stone-200 selection:text-stone-900 print:bg-white print:text-stone-900">
      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-stone-200/50 bg-[#FDFBF7]/80 backdrop-blur-xl print:hidden">
        <div className="mx-auto max-w-5xl px-4 md:px-8 h-20 flex items-center justify-between">
          <Link to="/" className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-stone-900 text-[#FDFBF7] flex items-center justify-center font-serif italic text-2xl pb-1 shadow-sm">H</div>
            <span className="text-xl font-serif italic font-medium tracking-tight text-stone-900 hidden sm:block">Helena.</span>
          </Link>
          
          <nav className="flex items-center gap-4 sm:gap-6">
            <NavLink to="/" active={location.pathname === "/"}>Início</NavLink>
            <NavLink to="/blog" active={location.pathname.startsWith("/blog")}>Artigos</NavLink>
            <NavLink to="/curriculo" active={location.pathname === "/curriculo"}>Currículo</NavLink>
            <NavLink to="/contato" active={location.pathname === "/contato"}>Contato</NavLink>
          </nav>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 w-full max-w-5xl mx-auto px-4 md:px-8 py-12 md:py-24 print:py-0 print:px-0 print:max-w-none">
        <Outlet />
      </main>

      {/* Footer */}
      <footer className="border-t border-stone-200/50 py-16 text-stone-500 print:hidden mt-auto">
        <div className="max-w-5xl mx-auto px-4 md:px-8 flex flex-col md:flex-row justify-between items-center gap-8">
          <div className="flex flex-col items-center md:items-start gap-2">
            <div className="w-8 h-8 rounded-lg bg-stone-200 text-stone-600 flex items-center justify-center font-serif italic text-xl pb-1">H</div>
            <span className="text-sm font-serif italic text-stone-600">© {new Date().getFullYear()} Helena Costa. Direitos reservados.</span>
          </div>
          
          <div className="flex gap-4">
            <a href="#" className="hover:text-stone-900 transition-colors">
              <Twitter className="w-4 h-4" />
            </a>
            <a href="#" className="hover:text-stone-900 transition-colors">
              <Github className="w-4 h-4" />
            </a>
            <a href="#" className="hover:text-stone-900 transition-colors">
              <Linkedin className="w-4 h-4" />
            </a>
            <a href="#" className="hover:text-stone-900 transition-colors">
              <Mail className="w-4 h-4" />
            </a>
          </div>
        </div>
      </footer>
    </div>
  );
}