import { motion } from "framer-motion";
import { Link } from "@tanstack/react-router";
import { ChevronRight } from "lucide-react";

export function PageHero({ title, subtitle }: { title: string; subtitle?: string }) {
  return (
    <section className="relative overflow-hidden bg-surface">
      <div className="absolute -right-20 -top-20 h-72 w-72 rounded-full opacity-20 blur-3xl" style={{ backgroundImage: "var(--gradient-primary)" }} />
      <div className="absolute -left-20 bottom-0 h-72 w-72 rounded-full opacity-10 blur-3xl" style={{ backgroundImage: "var(--gradient-primary)" }} />
      <div className="container-x relative py-16 text-center">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
          <nav className="flex items-center justify-center gap-1 text-sm text-muted-foreground">
            <Link to="/" className="hover:text-primary">Beranda</Link>
            <ChevronRight className="h-4 w-4" />
            <span className="text-primary">{title}</span>
          </nav>
          <h1 className="mt-3 text-4xl font-bold text-foreground sm:text-5xl">{title}</h1>
          {subtitle && <p className="mx-auto mt-3 max-w-2xl text-muted-foreground">{subtitle}</p>}
        </motion.div>
      </div>
    </section>
  );
}