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';

interface IndustryItem {
    /**
     * Industry name
     */
    name: React.ReactNode;
    /**
     * Industry description shown on hover
     */
    description: React.ReactNode;
    /**
     * Image source URL
     */
    image: string;
    /**
     * Alt text for the image
     */
    imageAlt: string;
    /**
     * URL for the industry link
     */
    url: string;
    /**
     * Additional CSS classes for the item
     */
    className?: string;
}
interface IndustriesHoverRevealGridProps {
    /**
     * Section heading displayed above the grid
     */
    heading?: React.ReactNode;
    /**
     * Custom slot for heading (overrides heading prop)
     */
    headingSlot?: React.ReactNode;
    /**
     * Label shown before description on hover
     */
    industryLabel?: React.ReactNode;
    /**
     * Array of industry items to display in the grid
     */
    industries?: IndustryItem[];
    /**
     * Custom slot for industries (overrides industries array)
     */
    industriesSlot?: React.ReactNode;
    /**
     * Additional CSS classes for the section wrapper
     */
    className?: string;
    /**
     * Additional CSS classes for the container
     */
    containerClassName?: string;
    /**
     * Additional CSS classes for the heading
     */
    headingClassName?: string;
    /**
     * Additional CSS classes for the grid container
     */
    gridClassName?: string;
    /**
     * Additional CSS classes for individual items
     */
    itemClassName?: 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;
    /**
     * Optional Optix Flow configuration for image optimization
     */
    optixFlowConfig?: OptixFlowConfig;
    /** Optional Section ID */
    sectionId?: string;
}
/**
 * IndustriesHoverRevealGrid displays a responsive grid of industry cards with animated hover effects.
 *
 * Features a 1-2-4 column responsive grid layout where each card shows an industry image with
 * the industry name overlaid. On hover, a black overlay slides up from the bottom revealing
 * a detailed description, while a plus icon rotates 90 degrees. Ideal for showcasing multiple
 * industry sectors, service categories, or portfolio items with engaging hover interactions.
 *
 * @example
 * ```tsx
 * <IndustriesHoverRevealGrid
 *   heading="Our Industries"
 *   industryLabel="Overview"
 *   industries={[
 *     {
 *       name: "Healthcare",
 *       description: "Revolutionary medical solutions...",
 *       image: "/healthcare.jpg",
 *       imageAlt: "Healthcare technology",
 *       url: "/industries/healthcare"
 *     }
 *   ]}
 * />
 * ```
 */
declare function IndustriesHoverRevealGrid({ sectionId, heading, headingSlot, industryLabel, industries, industriesSlot, className, containerClassName, headingClassName, gridClassName, itemClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: IndustriesHoverRevealGridProps): React.JSX.Element;

export { IndustriesHoverRevealGrid, type IndustriesHoverRevealGridProps, type IndustryItem };
