import React from "react";
import "./LsgBanner.scss";
import type { LsgButtonVariant } from "../LsgButton";
import type { LsgCtaAnalytics } from "../analytics/analyticsEvents";
export type LsgBannerLayout = "media-left" | "media-right" | "media-left-compact" | "media-right-compact" | "overlay" | "overlay-transparent" | "text-only";
/** Mirrors the AEM "Background color" style group on the banner policy. */
export type LsgBannerBackground = "white" | "light" | "primary" | "secondary" | "tertiary" | "dark" | "black";
/**
 * Mirrors the AEM "Accent color (where supported)" style group — same tokens as
 * the background. Only themes that draw a banner accent use it (currently T2/T3).
 */
export type LsgBannerAccent = LsgBannerBackground;
/** Mirrors the LSG Title / Text "colour" style groups (`cmp-title__colour-*`, `cmp-text__colour-*`). */
export type LsgBannerTextColour = LsgBannerBackground;
export type LsgBannerMobileMediaPosition = "top" | "bottom";
export type LsgBannerMediaType = "image" | "video";
export type LsgBannerHeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
export interface LsgBannerCta {
    label: string;
    href?: string;
    external?: boolean;
    /** LSG Button "CTA type" style — rendered as `button--{variant}` on the decoration div. */
    variant?: LsgButtonVariant;
    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
    /** Optional `vt_cta_click` overrides. */
    analytics?: LsgCtaAnalytics;
}
export interface LsgBannerProps {
    /** Mandatory banner title. */
    heading: string;
    /** Figma/AEM pre-title. `eyebrow` remains as a backwards-compatible alias. */
    preTitle?: string;
    eyebrow?: string;
    /** Optional body copy. `copy` remains as a backwards-compatible alias. */
    body?: string;
    copy?: string;
    /** Up to three CTAs. Theme/AEM policy may choose to expose fewer. */
    ctas?: LsgBannerCta[];
    /** Backwards-compatible single CTA alias. */
    cta?: LsgBannerCta;
    /** Title / Text style-system colours, as an author would pick them in AEM. */
    preTitleColour?: LsgBannerTextColour;
    headingColour?: LsgBannerTextColour;
    bodyColour?: LsgBannerTextColour;
    /** Image/video presentation controlled by the Banner authoring layout. */
    mediaType?: LsgBannerMediaType;
    imageUrl?: string;
    imageAlt?: string;
    /** Banner link (Teaser "Links" tab). Wraps the image only, never the content. */
    mediaHref?: string;
    mediaTarget?: "_self" | "_blank";
    videoUrl?: string;
    videoPoster?: string;
    videoControls?: boolean;
    videoAutoPlay?: boolean;
    videoMuted?: boolean;
    videoLoop?: boolean;
    /** Desktop visual layout matching the Figma Banner variants. */
    layout?: LsgBannerLayout;
    /** Mobile stack order for split/compact layouts. */
    mobileMediaPosition?: LsgBannerMobileMediaPosition;
    /**
     * Background colour, mirroring the AEM "Background color" style group.
     * Left undefined on purpose so no class is emitted and the banner keeps its
     * default light background. Each option carries its own legible foreground.
     */
    background?: LsgBannerBackground;
    /**
     * Accent colour (rules, borders, pre-title), mirroring the AEM "Accent color"
     * style group. Left undefined so the theme's primary accent is kept; themes
     * without a banner accent ignore it.
     */
    accent?: LsgBannerAccent;
    /** Defaults to h2, the level `_cq_template` gives the heading Title. */
    headingTag?: LsgBannerHeadingTag;
    className?: string;
}
export declare const LsgBanner: React.FC<LsgBannerProps>;