"use client";

import Link from "next/link";
import Image from "next/image";
import { FaChevronRight, FaHouse } from "react-icons/fa6";

interface BreadcrumbProps {
  pageName: string;
  description?: string;
}

const Breadcrumb = ({ pageName, description }: BreadcrumbProps) => {
  return (
    <>
      <section className="relative z-10 overflow-hidden bg-slate-950 pt-32 pb-16 lg:pt-[160px] lg:pb-20 border-b border-slate-900">

        {/* ─── VISUAL BACKGROUND CANVAS FRAME ───────────────────── */}
        <div className="absolute inset-0 z-0 opacity-20 mix-blend-luminosity pointer-events-none">
          <Image
            src="/images/Knudsen/entice-banner-plain.jpg"
            alt="Architectural subtle background pattern texture"
            fill
            priority
            className="object-cover object-center"
            sizes="100vw"
          />
        </div>

        {/* Modern Ambient Glowing Radiance Overlays */}
        <div className="absolute left-0 top-0 z-10 h-[300px] w-[300px] rounded-full bg-cyan-500/10 blur-[120px] pointer-events-none" />
        <div className="absolute right-0 bottom-0 z-10 h-[250px] w-[500px] rounded-full bg-cyan-500/5 blur-[100px] pointer-events-none" />

        {/* ─── INTERFACE CONTENT CONTAINER ──────────────────────── */}
        <div className="container mx-auto px-4 max-w-7xl 2xl:max-w-[1440px] relative z-20">
          <div className="-mx-4 flex flex-wrap items-center">

            {/* Dynamic Page Identification Title & Description */}
            <div className="w-full px-4 flex justify-center">
              <div className="mb-6 text-center max-w-2xl">
                <h1 className="text-3xl font-black uppercase tracking-tight text-white sm:text-4xl md:text-5xl lg:text-6xl">
                  {pageName}
                </h1>

                {description && (
                  <p className="mt-3 text-sm md:text-base text-slate-400 font-medium leading-relaxed">
                    {description}
                  </p>
                )}

                {/* Subtle structural accent bar */}
                <div className="h-[3px] w-12 bg-cyan-500 rounded-full mx-auto mt-5" />
              </div>
            </div>

            {/* Clean Structural Navigation Tree */}
            <div className="w-full px-4">
              <div className="flex justify-center">
                <nav aria-label="Breadcrumb" className="bg-slate-900/60 backdrop-blur-md border border-slate-800/80 px-6 py-2.5 rounded-full shadow-lg">
                  <ul className="flex items-center justify-center flex-wrap gap-2 text-xs sm:text-sm font-bold tracking-wide uppercase">

                    {/* Root Terminal Route Link */}
                    <li className="flex items-center">
                      <Link
                        href="/"
                        className="inline-flex items-center gap-1.5 text-slate-400 hover:text-cyan-400 transition-colors duration-200"
                      >
                        <FaHouse className="w-3.5 h-3.5" />
                        Home
                      </Link>
                    </li>

                    {/* High Contrast Divider Arrow */}
                    <li className="text-slate-600 flex items-center justify-center" aria-hidden="true">
                      <FaChevronRight className="w-3 h-3 mx-1 text-cyan-500/60" />
                    </li>

                    {/* Active Page Terminal Leaf node */}
                    <li className="text-cyan-400 select-none font-black">
                      {pageName}
                    </li>

                  </ul>
                </nav>
              </div>
            </div>

          </div>
        </div>
      </section>
    </>
  );
};

export default Breadcrumb;