import type { ReactNode } from "react";
import palmFronds from "@/assets/palm-fronds.png.asset.json";

export function PageHero({
  eyebrow,
  title,
  children,
  fronds = true,
}: {
  eyebrow: string;
  title: string;
  children?: ReactNode;
  fronds?: boolean;
}) {
  return (
    <section className="relative overflow-hidden bg-muted pb-12 pt-32 md:pb-16 md:pt-44">
      {fronds && (
        <img
          src={palmFronds.url}
          alt=""
          aria-hidden
          width={1280}
          height={800}
          loading="lazy"
          className="pointer-events-none absolute -top-10 -right-10 w-[72%] max-w-[340px] opacity-50 sm:-top-6 sm:right-0 sm:w-[58%] sm:max-w-[560px] sm:opacity-60"
        />
      )}
      <div className="relative mx-auto max-w-4xl px-6">
        <p className="eyebrow">{eyebrow}</p>
        <h1 className="mt-3 text-4xl text-primary sm:text-5xl md:text-6xl">{title}</h1>
        {children && <div className="mt-5 max-w-2xl text-base md:text-lg leading-relaxed text-foreground/80">{children}</div>}
      </div>
    </section>
  );
}

export { CtaBand } from "./CtaBand";