import * as React from 'react';
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 './dynamic-icon.js';
import '@page-speed/icon';
import 'class-variance-authority';
import '@page-speed/pressable';
import '@opensite/hooks/usePlatformFromUrl';

/**
 * Image configuration for the gallery section.
 * Supports featured images that span full height and secondary images in a stacked layout.
 */
interface HeroFloatingImagesImage {
    /**
     * Image source URL
     */
    src: string;
    /**
     * Alt text for accessibility
     */
    alt: string;
    /**
     * Whether this is a featured image (displays larger/taller in the gallery)
     */
    featured?: boolean;
    /**
     * Additional CSS classes for the image
     */
    className?: string;
}
interface HeroFloatingImagesProps {
    /**
     * Brand logo configuration — renders centered above the heading.
     * 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;
    /**
     * Badge content displayed above the heading
     */
    badge?: React.ReactNode;
    /**
     * Badge icon
     */
    badgeIcon?: React.ReactNode;
    /**
     * Main heading content
     */
    heading?: React.ReactNode;
    /**
     * Description text below heading
     */
    description?: React.ReactNode;
    /**
     * Array of action configurations for CTA buttons
     */
    actions?: ActionConfig[];
    /**
     * Custom slot for rendering actions (overrides actions array)
     */
    actionsSlot?: React.ReactNode;
    /**
     * Array of images for the gallery section.
     * First image with `featured: true` (or first image if none marked) displays as the tall featured image.
     * Remaining images display in a stacked layout beside it.
     */
    images?: HeroFloatingImagesImage[];
    /**
     * Custom slot for rendering the gallery (overrides images array).
     * Use when you need complete control over the gallery layout.
     */
    imagesSlot?: React.ReactNode;
    /**
     * Icon name for the zoom indicator on gallery images.
     * Uses DynamicIcon format: "prefix/icon-name"
     * @default "lucide/zoom-in"
     */
    zoomIconName?: string;
    /**
     * Whether to enable lightbox functionality for gallery images.
     * When enabled, clicking an image opens it in a fullscreen lightbox.
     * @default true
     */
    enableLightbox?: boolean;
    /**
     * Background style for the section
     */
    background?: SectionBackground;
    /**
     * Additional CSS classes for the container
     */
    containerClassName?: string;
    /** Section spacing variant */
    spacing?: SectionSpacing;
    /**
     * Optional background pattern name
     */
    pattern?: PatternName;
    /**
     * Pattern overlay opacity (0-1)
     */
    patternOpacity?: number;
    /**
     * Additional CSS classes for the section wrapper
     */
    className?: string;
    /**
     * Additional CSS classes for the main grid container
     */
    gridClassName?: string;
    /**
     * Additional CSS classes for the content area (left side)
     */
    contentClassName?: string;
    /**
     * Additional CSS classes for the badge
     */
    badgeClassName?: string;
    /**
     * Additional CSS classes for the heading
     */
    headingClassName?: string;
    /**
     * Additional CSS classes for the description
     */
    descriptionClassName?: string;
    /**
     * Additional CSS classes for the actions container
     */
    actionsClassName?: string;
    /**
     * Additional CSS classes for the gallery container (right side)
     */
    galleryClassName?: string;
    /**
     * Additional CSS classes for the featured image wrapper
     */
    featuredImageClassName?: string;
    /**
     * Additional CSS classes for secondary image wrappers
     */
    secondaryImageClassName?: string;
    /**
     * Additional CSS classes for all images
     */
    imageClassName?: string;
    /**
     * Additional CSS classes for the zoom indicator overlay
     */
    zoomIndicatorClassName?: string;
    /**
     * OptixFlow image optimization configuration
     */
    optixFlowConfig?: OptixFlowConfig;
    /** Optional Section ID */
    sectionId?: string;
}
/**
 * HeroFloatingImages - A split-layout hero with flexible content and an interactive image gallery.
 *
 * Features a two-column layout: named hero content on the left and a gallery on the right
 * with a featured tall image and stacked secondary images.
 * Each image has a hover effect with zoom indicator and opens in a lightbox when clicked.
 *
 * @example
 * ```tsx
 * <HeroFloatingImages
 *   badge="Featured Work"
 *   heading="Your Headline Here"
 *   description="Your description..."
 *   actions={[{ label: "View Portfolio", href: "/portfolio", variant: "default" }]}
 *   images={[
 *     { src: "/featured.jpg", alt: "Featured work", featured: true },
 *     { src: "/work-1.jpg", alt: "Project 1" },
 *     { src: "/work-2.jpg", alt: "Project 2" },
 *   ]}
 * />
 * ```
 */
declare function HeroFloatingImages({ sectionId, logo, logoSlot, logoClassName, badge, badgeIcon, heading, description, actions, actionsSlot, images, imagesSlot, zoomIconName, enableLightbox, background, pattern, patternOpacity, className, gridClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, galleryClassName, featuredImageClassName, secondaryImageClassName, imageClassName, zoomIndicatorClassName, optixFlowConfig, containerClassName, spacing, }: HeroFloatingImagesProps): React.JSX.Element;

export { HeroFloatingImages, type HeroFloatingImagesProps };
