import * as React from 'react';
import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
import { O as OptixFlowConfig } from './blocks-DyouPohq.js';
import 'react/jsx-runtime';
import 'class-variance-authority';
import '@page-speed/pressable';
import '@opensite/hooks/usePlatformFromUrl';

/**
 * Item configuration for service hover carousel.
 */
interface ServiceHoverCarouselItem {
    /**
     * Unique identifier for the item
     */
    id: string;
    /**
     * Title of the service
     */
    title: React.ReactNode;
    /**
     * Price display text
     */
    price: React.ReactNode;
    /**
     * Primary image source URL
     */
    image: string;
    /**
     * Alt text for the primary image
     */
    imageAlt?: string;
    /**
     * Hover image source URL
     */
    hoverImage: string;
    /**
     * Alt text for the hover image
     */
    hoverImageAlt?: string;
    /**
     * Tag/badge text
     */
    tag: React.ReactNode;
    /**
     * Link URL for the item
     */
    href?: string;
    /**
     * Additional CSS classes for the item
     */
    className?: string;
}
interface ServiceHoverCarouselProps {
    /**
     * Main heading content
     */
    heading?: React.ReactNode;
    /**
     * Array of service items to display
     */
    items?: ServiceHoverCarouselItem[];
    /**
     * Custom slot for rendering items (overrides items array)
     */
    itemsSlot?: React.ReactNode;
    /**
     * Custom slot for rendering the header
     */
    headerSlot?: React.ReactNode;
    /**
     * Text displayed before the price
     */
    pricePrefix?: React.ReactNode;
    /**
     * Additional CSS classes for the section
     */
    className?: string;
    /**
     * Additional CSS classes for the heading
     */
    headingClassName?: string;
    /**
     * Additional CSS classes for the controls container
     */
    controlsClassName?: string;
    /**
     * Additional CSS classes for the carousel wrapper
     */
    carouselClassName?: string;
    /**
     * Additional CSS classes for the carousel content
     */
    carouselContentClassName?: string;
    /**
     * Additional CSS classes for each carousel item
     */
    itemClassName?: string;
    /**
     * Additional CSS classes for each image
     */
    imageClassName?: string;
    /**
     * Additional CSS classes for each badge
     */
    badgeClassName?: string;
    /**
     * Additional CSS classes for the progress bar
     */
    progressClassName?: string;
    /**
     * Background style for the section
     */
    background?: SectionBackground;
    /**
     * Vertical spacing for the section
     */
    spacing?: SectionSpacing;
    /**
     * Optional background pattern name or URL
     */
    pattern?: PatternName | undefined;
    /**
     * Pattern overlay opacity (0-1)
     */
    patternOpacity?: number;
    /**
     * Additional CSS classes for the pattern overlay
     */
    patternClassName?: string;
    /**
     * OptixFlow image optimization configuration
     */
    optixFlowConfig?: OptixFlowConfig;
    /** Optional Section ID */
    sectionId?: string;
}
/**
 * ServiceHoverCarousel displays service cards with hover image swap effect.
 *
 * Features a header with title and navigation buttons, followed by a carousel
 * of portrait cards. Each card shows a primary image that swaps to a secondary
 * image on hover, with a badge tag overlay and title/price below. Includes a
 * progress bar indicator at the bottom. Ideal for showcasing services, products,
 * or portfolio items with before/after or alternate view imagery.
 *
 * @example
 * ```tsx
 * <ServiceHoverCarousel
 *   heading="Our Services"
 *   items={[
 *     {
 *       id: "1",
 *       title: "Web Development",
 *       price: "$1,500",
 *       image: "/images/service-1.jpg",
 *       hoverImage: "/images/service-1-hover.jpg",
 *       tag: "Custom Solutions"
 *     }
 *   ]}
 * />
 * ```
 */
declare function ServiceHoverCarousel({ sectionId, heading, items, itemsSlot, headerSlot, pricePrefix, className, headingClassName, controlsClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, badgeClassName, progressClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: ServiceHoverCarouselProps): React.JSX.Element;

export { ServiceHoverCarousel, type ServiceHoverCarouselItem, type ServiceHoverCarouselProps };
