import { useRef } from "react";
import { Link } from "react-router-dom";
import { motion, useReducedMotion, useScroll, useTransform } from "framer-motion";
import SEO from "../lib/seo";
import CharHeadline from "./CharHeadline";
import type { ReactNode } from "react";

interface Crumb {
  label: string;
  to?: string;
}

interface PageHeroProps {
  eyebrow?: string;
  title: string;
  desc?: string;
  breadcrumb?: Crumb[];
  children?: ReactNode;
  image?: string;
  testId?: string;
}

export default function PageHero({ eyebrow, title, desc, breadcrumb = [], children, image, testId = "page-hero" }: PageHeroProps) {
  const ref = useRef<HTMLElement>(null);
  const reduce = useReducedMotion();
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] });
  const imgY = useTransform(scrollYProgress, [0, 1], ["0%", reduce ? "0%" : "18%"]);

  const jsonLd = breadcrumb.length
    ? {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        itemListElement: breadcrumb.map((b, i) => ({
          "@type": "ListItem",
          position: i + 1,
          name: b.label,
          item: b.to ? `https://www.aviokan.com${b.to}` : undefined,
        })),
      }
    : undefined;

  return (
    <section ref={ref} className="relative bg-[#14151A] overflow-hidden pt-32 pb-16 md:pt-40 md:pb-20" data-testid={testId}>
      {image ? (
        <>
          <motion.img
            src={image}
            alt=""
            aria-hidden="true"
            style={{ y: imgY }}
            className="absolute inset-0 h-[120%] w-full object-cover opacity-[0.28] will-change-transform"
            data-testid="page-hero-image"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-[#14151A]/80 via-[#14151A]/60 to-[#14151A]" />
        </>
      ) : (
        <div className="absolute inset-0 bg-grid-dark opacity-60 pointer-events-none" />
      )}
      <div className="grain" aria-hidden="true" />
      <div className="absolute top-0 right-0 h-80 w-80 rounded-full bg-cy/12 blur-[130px] pointer-events-none" aria-hidden="true" />

      <div className="mx-auto max-w-[1320px] px-5 md:px-10 relative">
        {/* Instrument meta row */}
        <div className="flex items-center justify-between gap-4 pb-4 border-b border-white/10" data-testid="breadcrumbs">
          <nav aria-label="Breadcrumb" className="flex items-center gap-2 text-[10px] font-tech tracking-[0.2em] uppercase text-white/50 min-w-0">
            {breadcrumb.map((b, i) => (
              <span key={i} className="flex items-center gap-2 whitespace-nowrap">
                {i > 0 && <span className="text-ember">/</span>}
                {b.to ? (
                  <Link to={b.to} className="hover:text-cy transition-colors">{b.label}</Link>
                ) : (
                  <span className="text-white/85">{b.label}</span>
                )}
              </span>
            ))}
          </nav>
          {eyebrow && (
            <p className="hidden md:flex items-center gap-2.5 text-[10px] font-tech tracking-[0.28em] text-cy whitespace-nowrap" data-testid="page-hero-eyebrow">
              <span className="h-1.5 w-1.5 rotate-45 bg-ember inline-block" aria-hidden="true" />
              ( {eyebrow} )
            </p>
          )}
        </div>

        <CharHeadline
          delay={0.1}
          emberPeriod={title.trimEnd().endsWith(".")}
          lines={title.split("\n").map((l) => ({ text: l, cls: "text-white" }))}
          className="font-display font-semibold leading-[0.98] tracking-[-0.015em] text-[clamp(2.6rem,6vw,5.4rem)] mt-12 max-w-[1150px]"
        />
        {desc && <p className="mt-7 text-base md:text-lg text-white/65 leading-relaxed max-w-xl">{desc}</p>}
        {children && <div className="mt-10 flex flex-wrap gap-4">{children}</div>}
      </div>

      {/* Bottom instrument rail */}
      <div className="mx-auto max-w-[1320px] px-5 md:px-10 relative mt-14 md:mt-20 flex items-center justify-between text-[9px] font-tech tracking-[0.28em] text-white/30">
        <span>AVIOKAN TECHNOLOGIES — INTEGRATE · INNOVATE · TRANSFORM</span>
        <span className="hidden md:inline">28.6139° N — 77.2090° E</span>
      </div>
    </section>
  );
}