import type { ReactNode } from "react";

export function PremiumHero({
  image,
  eyebrow,
  title,
  subtitle,
  children,
  className = "",
}: {
  image: string;
  eyebrow?: string;
  title: ReactNode;
  subtitle?: ReactNode;
  children?: ReactNode;
  className?: string;
}) {
  return (
    <section className={`relative isolate overflow-hidden bg-[#05050a] ${className}`}>
      <img
        src={image}
        alt=""
        aria-hidden="true"
        width={1920}
        height={1280}
        className="absolute inset-0 h-full w-full object-cover opacity-70 scale-105"
      />
      <div className="absolute inset-0 bg-[linear-gradient(100deg,rgba(5,5,10,0.95)_0%,rgba(5,5,10,0.72)_45%,rgba(5,5,10,0.4)_100%)]" />
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(255,67,8,0.28),transparent_55%)]" />

      {/* light beam */}
      <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent)] animate-beam" />

      {/* floating particles */}
      <div className="pointer-events-none absolute inset-0">
        {[8, 22, 36, 51, 64, 78, 91].map((left, i) => (
          <span
            key={left}
            className="absolute bottom-0 h-1.5 w-1.5 rounded-full bg-[#FF4308]/70 blur-[1px] animate-particle"
            style={{ left: `${left}%`, animationDelay: `${i * 1.3}s` }}
          />
        ))}
      </div>

      <div className="container-airfis relative py-24 lg:py-32">
        <div className="grid lg:grid-cols-12 gap-12 items-center">
          <div className="lg:col-span-6 animate-fade-up">
            {eyebrow && (
              <p className="text-xs font-semibold uppercase tracking-[0.22em] text-[#FF4308]">
                {eyebrow}
              </p>
            )}
            <h1 className="h-display mt-5 text-white">{title}</h1>
            {subtitle && <p className="mt-6 text-lg text-white/70 max-w-xl">{subtitle}</p>}
          </div>
          {children && <div className="lg:col-span-6">{children}</div>}
        </div>
      </div>
    </section>
  );
}