import type { ReactNode } from "react";
import { OrganicBlob } from "@/components/OrganicBlob";
import { ImagePlaceholder } from "@/components/ImagePlaceholder";
import type { ImageMood } from "@/lib/angebote";

type HeroProps = {
  eyebrow?: string;
  title: string;
  children?: ReactNode;
  actions?: ReactNode;
  mood?: ImageMood;
  imageSrc?: string;
  imageAlt?: string;
};

export function Hero({ eyebrow, title, children, actions, mood = "rose", imageSrc, imageAlt }: HeroProps) {
  return (
    <section className="relative overflow-hidden pb-20 pt-16 sm:pb-28 sm:pt-24">
      <OrganicBlob tone="rose" className="-right-24 -top-24 h-[28rem] w-[28rem]" />
      <OrganicBlob tone="cream" className="-left-32 bottom-0 h-96 w-96" />

      <div className="relative mx-auto grid max-w-6xl gap-14 px-6 sm:px-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-center lg:px-12">
        <div className="animate-fade-up">
          {eyebrow && (
            <p className="mb-5 text-xs font-medium uppercase tracking-[0.24em] text-anouma-plum">
              {eyebrow}
            </p>
          )}
          <h1 className="text-balance font-serif text-5xl font-medium leading-[1.08] text-anouma-plum sm:text-6xl lg:text-7xl">
            {title}
          </h1>
          {children && (
            <div className="mt-7 max-w-xl text-lg leading-relaxed text-anouma-plum sm:text-xl">
              {children}
            </div>
          )}
          {actions && <div className="mt-9 flex flex-wrap gap-4">{actions}</div>}
        </div>

        <div className="relative mx-auto aspect-[4/5] w-full max-w-md animate-fade-in [animation-delay:200ms] lg:max-w-none">
          <ImagePlaceholder
            mood={mood}
            label="Anouma — warme, naturverbundene Begleitung"
            src={imageSrc}
            alt={imageAlt}
            priority
            className="h-full w-full"
          />
        </div>
      </div>
    </section>
  );
}