"use client";

export function FloatingHouse({ className = "" }: { className?: string }) {
    return (
        <div className={`animate-float ${className}`}>
            <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-primary/20">
                <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
            </svg>
        </div>
    );
}

export function RotatingKey({ className = "" }: { className?: string }) {
    return (
        <div className={`animate-pulse ${className}`}>
            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-primary/20 animate-[spin_4s_linear_infinite]">
                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z" />
            </svg>
        </div>
    );
}

export function GrowingBuilding({ className = "" }: { className?: string }) {
    return (
        <div className={`flex items-end gap-1 ${className}`}>
            <div className="w-3 bg-primary/20 rounded-t-sm animate-[height-grow_2s_ease-in-out_infinite]" style={{ height: '20px', animationDelay: '0s' }} />
            <div className="w-3 bg-primary/20 rounded-t-sm animate-[height-grow_2s_ease-in-out_infinite]" style={{ height: '35px', animationDelay: '0.2s' }} />
            <div className="w-3 bg-primary/20 rounded-t-sm animate-[height-grow_2s_ease-in-out_infinite]" style={{ height: '50px', animationDelay: '0.4s' }} />
            <div className="w-3 bg-primary/20 rounded-t-sm animate-[height-grow_2s_ease-in-out_infinite]" style={{ height: '30px', animationDelay: '0.6s' }} />

            <style jsx>{`
                @keyframes height-grow {
                    0%, 100% { transform: scaleY(1); }
                    50% { transform: scaleY(1.5); }
                }
            `}</style>
        </div>
    );
}

export function BlueprintGrid({ className = "" }: { className?: string }) {
    return (
        <div className={`absolute inset-0 pointer-events-none opacity-[0.03] ${className}`}
            style={{
                backgroundImage: `linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px)`,
                backgroundSize: '40px 40px'
            }}
        />
    );
}
