"use client";

import { FunnelIcon } from '@heroicons/react/24/outline';

export default function FunisPage() {
    return (
        <div className="p-6 h-full flex items-center justify-center">
            <div className="text-center max-w-md">
                <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-purple-600">
                    <FunnelIcon className="h-10 w-10 text-white" />
                </div>
                <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                    Funis de Vendas
                </h1>
                <p className="text-gray-600 dark:text-gray-400 mb-4">
                    Esta funcionalidade está em desenvolvimento
                </p>
                <div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
                    <div className="flex gap-1">
                        <span className="animate-bounce inline-block h-2 w-2 rounded-full bg-blue-600" style={{ animationDelay: '0ms' }}></span>
                        <span className="animate-bounce inline-block h-2 w-2 rounded-full bg-blue-600" style={{ animationDelay: '150ms' }}></span>
                        <span className="animate-bounce inline-block h-2 w-2 rounded-full bg-blue-600" style={{ animationDelay: '300ms' }}></span>
                    </div>
                    <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
                        Em breve
                    </span>
                </div>
            </div>
        </div>
    );
}