---
/**
 * InterestHero.astro
 * ---------------------------------------------------------------------------
 * Shared header for every interest sub-page. Compact hero on the animated
 * Milky Way field: a back-to-hub breadcrumb, a small icon mark, the title, and
 * the italic tagline.
 *
 * Tuned for the dark starfield: text uses bright cream tones (not the dim
 * --color-text-subtle/--color-text which vanish on the deep sky). The title is
 * h2-sized (the page is a sub-page, not Home) so it doesn't dominate. An
 * optional banner image sits above the heading.
 */
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" />

  {/* Two-column layout: text on the left, image on the right. Putting the image
      BESIDE the text (instead of stacked above it) means the hero height is
      driven by the text column and stays consistent across interest pages
      regardless of image presence. On small screens it stacks (image below). */}
  <div class="container-prose relative z-10 grid items-center gap-6 py-6 sm:grid-cols-[1.4fr_1fr]">
    {/* --- Left: text column --- */}
    <div class="flex flex-col items-start gap-4">
      <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-cream); opacity: 0.8;"
        >
          <Icon name="arrow-left" class="h-4 w-4" />
          {eyebrow}
        </a>
      </Reveal>

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

      <Reveal delay={100}>
        <h2
          class="font-sans font-bold tracking-tight"
          style="color: var(--color-cream); font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); line-height: 1.15;"
        >
          {title}
        </h2>
      </Reveal>

      <Reveal delay={140}>
        <p
          class="max-w-xl border-l-2 pl-4 font-sans text-base italic sm:text-lg"
          style="border-color: var(--color-accent); color: var(--color-cream); opacity: 0.92;"
        >
          {tagline}
        </p>
      </Reveal>
    </div>

    {/* --- Right: image column (only when an image is provided). A fixed
        aspect keeps every interest hero the same height. --- */}
    {image && (
      <Reveal delay={80} 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-[4/3] 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>
    )}
  </div>
</section>