---
import Decor from "./Decor.astro";
/**
 * Einheitlicher Seitenkopf: Apex-Brush-Eyebrow + Fraunces-H1 (+ optionaler Lead).
 * Titel kommt als Default-Slot (mit eigenem rainbow-text/squiggle-Akzent),
 * Lead optional als <Fragment slot="lead">.
 */
interface Props {
  eyebrow: string;
  center?: boolean;
  decor?: boolean;
}
const { eyebrow, center = false, decor = true } = Astro.props;
const hasLead = Astro.slots.has("lead");
---

<section class={`relative overflow-hidden ${center ? "text-center" : ""}`}>
  {decor && (
    <Fragment>
      <Decor type="sparkle" class="w-9 absolute top-12 right-[7%] opacity-70 anim-float" />
      <Decor type="loop" class="hidden md:block w-24 absolute bottom-4 left-[2%] opacity-40 anim-wiggle" />
    </Fragment>
  )}
  <div class={`section pt-14 pb-8 md:pt-16 ${center ? "" : "max-w-3xl"}`}>
    <p class="eyebrow">{eyebrow}</p>
    <h1 class="mt-3 text-[clamp(2.3rem,6vw,4rem)] font-black leading-[1.02] text-[var(--color-text)]">
      <slot />
    </h1>
    {hasLead && (
      <p class={`mt-5 text-lg md:text-xl text-[var(--color-text-muted)] leading-relaxed max-w-2xl ${center ? "mx-auto" : ""}`}>
        <slot name="lead" />
      </p>
    )}
  </div>
</section>
