import { MenuTextureButton } from "./MenuTextureButton";

type Props = {
  eyebrow: string;
  title: string;
  subtitle: string;
};

/** Texte d’accueil affiché sous le héros (mode image seule), au-dessus du menu. */
export function HeroIntro({ eyebrow, title, subtitle }: Props) {
  return (
    <section
      aria-labelledby="hero-intro-title"
      className="border-b border-chocolat/8 bg-cream"
    >
      <div className="mx-auto max-w-6xl px-4 py-12 text-center sm:px-6 sm:py-16">
        <p className="mb-3 text-sm font-semibold uppercase tracking-[0.2em] text-gaufre">
          {eyebrow}
        </p>
        <h1
          id="hero-intro-title"
          className="mx-auto mb-4 max-w-3xl text-4xl font-bold leading-tight tracking-tight text-chocolat sm:text-5xl md:text-6xl"
        >
          {title}
        </h1>
        <p className="mx-auto mb-10 max-w-xl text-lg text-chocolat">{subtitle}</p>
        <div className="flex flex-wrap justify-center gap-4">
          <MenuTextureButton href="/#menu">Voir le menu</MenuTextureButton>
          <MenuTextureButton href="/#ou-me-trouver">
            Où me trouver
          </MenuTextureButton>
        </div>
      </div>
    </section>
  );
}
