import BannerDecorations from "@/components/pages/home/banner-decorations";
import type { ReactNode } from "react";

/** Decorative hero background behind live-demos content (grid, orbs, radial wash). */
export default function LiveDemosBannerBackdrop({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <section className="relative px-4 pt-8 pb-6 mt-8 md:px-12 md:pt-10 lg:px-24 lg:pt-10 lg:mt-10 overflow-hidden">
      <div
        className="pointer-events-none absolute inset-0 overflow-hidden"
        aria-hidden
      >
        <BannerDecorations />
      </div>
      <div className="relative z-10">{children}</div>
    </section>
  );
}