import * as React from 'react';
import { ImageSliderImage } from './image-slider.js';
import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
import { L as LogoConfig } from './types-hJ2R0GoH.js';
import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DyouPohq.js';
import 'react/jsx-runtime';
import 'class-variance-authority';
import '@page-speed/pressable';
import '@opensite/hooks/usePlatformFromUrl';
import './dynamic-icon.js';
import '@page-speed/icon';

/**
 * Configuration for a single panel in the {@link HeroTechCarousel} block.
 *
 * Each panel renders as a full-height column on desktop and as a stacked,
 * content-fit row on mobile. Every visual element is optional so panels can
 * range from purely visual (background only) to fully populated (logo +
 * title + content + actions).
 *
 * @example
 * ```tsx
 * const item: HeroPanelItem = {
 *   logo: { src: "/logo.svg", alt: "Brand" },
 *   title: "Item title",
 *   content: "Short supporting copy",
 *   actions: [{ label: "Get Started", href: "/start" }],
 *   backgroundMedia: [
 *     { src: "/bg-1.jpg", alt: "" },
 *     { src: "/bg-2.jpg", alt: "" },
 *   ],
 * };
 * ```
 */
interface HeroPanelItem {
    /**
     * Brand logo configuration — renders above the announcement badge.
     * LOGO MEDIA ONLY. Do not use photos, hero images, or video assets.
     */
    logo?: LogoConfig;
    /**
     * Custom slot for logo (overrides logo prop)
     */
    logoSlot?: React.ReactNode;
    /**
     * Additional CSS classes for the logo container
     */
    logoClassName?: string;
    /**
     * Optional panel title.
     */
    title?: React.ReactNode | string;
    /**
     * Optional supporting content rendered below the title.
     */
    content?: React.ReactNode | string;
    /**
     * Optional action buttons / links rendered at the bottom of the panel.
     */
    actions?: ActionConfig[];
    /**
     * Optional background media for the panel.
     *
     * - `0` items → no background, panel renders on the section background.
     * - `1` item  → static background image.
     * - `2+` items → autoplaying image carousel via {@link ImageSlider}.
     */
    backgroundMedia?: ImageSliderImage[];
    /**
     * Autoplay interval (ms) for this panel's background carousel.
     * Falls back to the block-level `backgroundAutoplayIntervalMs` when omitted.
     */
    backgroundAutoplayIntervalMs?: number;
    /**
     * Optional id for the panel element (for anchor links / analytics).
     */
    id?: string;
    /**
     * Additional CSS classes for this panel's outer wrapper.
     */
    className?: string;
    /**
     * Additional CSS classes for the panel's content layer (above the background).
     */
    contentClassName?: string;
    /**
     * Additional CSS classes for the panel's title element.
     */
    titleClassName?: string;
    /**
     * Additional CSS classes for the panel's content paragraph.
     */
    textClassName?: string;
    /**
     * Additional CSS classes for the panel's actions wrapper.
     */
    actionsClassName?: string;
    /**
     * Additional CSS classes applied to the panel's background overlay.
     * Useful for tuning legibility per-panel (e.g. `bg-black/60`).
     */
    overlayClassName?: string;
    /**
     * Per-panel OptixFlow override. Falls back to the block-level config.
     */
    optixFlowConfig?: OptixFlowConfig;
}
interface HeroTechCarouselProps {
    /**
     * Panels rendered side-by-side on desktop and stacked on mobile.
     * Capped at {@link HERO_TECH_CAROUSEL_MAX_ITEMS} (4) — additional entries are ignored.
     */
    items?: HeroPanelItem[];
    /**
     * Default autoplay interval (ms) used when a panel has 2+ background media
     * items and does not specify its own `backgroundAutoplayIntervalMs`.
     * @default 5000
     */
    backgroundAutoplayIntervalMs?: number;
    /**
     * Background style for the section.
     */
    background?: SectionBackground;
    /**
     * Vertical spacing for the section. Defaults to `none` so panels can fill
     * the full viewport on desktop without padding.
     */
    spacing?: SectionSpacing;
    /**
     * Optional background pattern name applied to the section.
     */
    pattern?: PatternName | undefined;
    /**
     * Pattern overlay opacity (0-1).
     */
    patternOpacity?: number;
    /**
     * Additional CSS classes for the section.
     */
    className?: string;
    /**
     * Additional CSS classes for the section container.
     */
    containerClassName?: string;
    /**
     * Additional CSS classes for the panels wrapper (the flex/grid track).
     */
    panelsClassName?: string;
    /**
     * Default classes shared by every panel content layer (title/content/actions).
     * Per-panel `contentClassName` is appended after this.
     */
    panelContentClassName?: string;
    /**
     * Block-level OptixFlow image optimization configuration. Applies to all
     * panels unless a panel provides its own `optixFlowConfig`.
     */
    optixFlowConfig?: OptixFlowConfig;
    /** Optional Section ID */
    sectionId?: string;
}
/**
 * Hero block that renders 1–4 side-by-side panels on desktop and stacks them
 * vertically on mobile. Each panel can include a logo, title, supporting copy,
 * actions, and an optional background image or autoplaying image carousel.
 *
 * - Desktop: full-bleed `100vw` width, `100dvh` height, panels share the row equally.
 * - Mobile: panels stack vertically with content-fit height and modern padding.
 *
 * @example
 * ```tsx
 * <HeroTechCarousel
 *   items={[
 *     {
 *       logo: { src: "/logos/insurance.svg", alt: "InsuranceSite" },
 *       title: "InsuranceSite",
 *       content: "Built for modern brokers",
 *       actions: [{ label: "Get Started", href: "/insurance" }],
 *       backgroundMedia: [
 *         { src: "/img/insurance-1.jpg", alt: "" },
 *         { src: "/img/insurance-2.jpg", alt: "" },
 *       ],
 *     },
 *     // ... up to 4 items
 *   ]}
 * />
 * ```
 */
declare function HeroTechCarousel({ sectionId, items, backgroundAutoplayIntervalMs, background, spacing, pattern, patternOpacity, className, containerClassName, panelsClassName, panelContentClassName, optixFlowConfig, }: HeroTechCarouselProps): React.JSX.Element;

export { HeroTechCarousel, type HeroTechCarouselProps };
