---
/**
 * InterestHero.astro
 * ---------------------------------------------------------------------------
 * Shared header for every interest sub-page, implementing the spec's
 * per-interest template (Header: title + tagline; Overview: narrative). Uses the
 * warm "interest" surface tone via InterestLayout.
 *
 * The decorative icon and the tagline (in mono, as a pull quote) give each page
 * a consistent rhythm while the page supplies its own title + overview copy.
 *
 * An optional `image` prop renders a wide celestial-framed banner behind / above
 * the heading so each interest page leads with a vibe-matched photo. A faint
 * starfield + alchemical accent reinforces the esoteric mood.
 */
import Icon from '@components/Icon.astro';
import Reveal from '@components/motion/Reveal.astro';
import AnimatedBackground from '@components/hero/AnimatedBackground.tsx';
import StarBurst from '@components/mystic/StarBurst.astro';

interface Props {
  /** mdi icon used as the decorative mark. */
  icon: string;
  title: string;
  /** The italicized pull-quote tagline from the spec. */
  tagline: string;
  /** Back-to-hub breadcrumb label. */
  eyebrow?: string;
  /** Optional hero banner image (vibe-matched stock; swap for real photos). */
  image?: string;
  imageAlt?: string;
}

const {
  icon,
  title,
  tagline,
  eyebrow = 'Interests',
  image,
  imageAlt = '',
} = Astro.props;
---

<section class="relative overflow-hidden pb-8 pt-28 sm:pt-32">
  <!-- Full animated Milky Way field + stars (matches the Home/Interests hero).
       Carries the per-page morph name (one .vt-sky per page snapshot). -->
  <AnimatedBackground client:idle className="vt-sky" />

  <div class="container-prose relative z-10 flex flex-col items-start gap-6 py-8">
    <Reveal>
      <a
        href="/interests"
        class="inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.18em] transition-colors"
        style="color: var(--color-text-subtle);"
      >
        <Icon name="arrow-left" class="h-4 w-4" />
        {eyebrow}
      </a>
    </Reveal>

    {image && (
      <Reveal delay={40} class="w-full">
        <figure
          class="relative w-full overflow-hidden rounded-2xl border"
          style="border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);"
        >
          <img
            src={image}
            alt={imageAlt}
            loading="lazy"
            decoding="async"
            class="aspect-[21/9] w-full object-cover"
          />
          <StarBurst
            class="pointer-events-none absolute left-3 top-3 h-5 w-5 drop-shadow-[0_0_6px_color-mix(in_srgb,var(--color-accent)_60%,transparent)]"
            style="color: var(--color-accent);"
          />
        </figure>
      </Reveal>
    )}

    <Reveal delay={60}>
      <span
        class="inline-flex h-16 w-16 items-center justify-center rounded-2xl"
        style="background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent);"
        aria-hidden="true"
      >
        <Icon name={icon} class="h-8 w-8" />
      </span>
    </Reveal>

    <Reveal delay={120}>
      <h1 class="text-balance">{title}</h1>
    </Reveal>

    <Reveal delay={160}>
      <p
        class="max-w-2xl border-l-2 pl-5 font-sans text-lg italic sm:text-xl"
        style="border-color: var(--color-accent); color: var(--color-text);"
      >
        {tagline}
      </p>
    </Reveal>
  </div>
</section>