import { ArrowLeft } from 'lucide-react';
import { Link } from 'react-router-dom';

export default function Facility3DViewerPage() {
    return (
        <div className="h-screen w-full flex flex-col items-center justify-center bg-gray-950 text-white relative p-4">
            <div className="absolute top-0 left-0 right-0 p-4 z-10 flex items-center justify-between">
                <Link to="/metrc" className="btn btn-ghost btn-sm text-white flex gap-2">
                    <ArrowLeft size={16} /> Back
                </Link>
            </div>

            <div className="max-w-md text-center bg-gray-900 border border-gray-800 p-8 rounded-xl shadow-2xl">
                <h1 className="text-3xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-accent to-purple-500">
                    Facility 3D Viewer
                </h1>
                <div className="bg-gray-800 py-8 px-4 rounded-lg mb-6 border border-gray-700 border-dashed">
                    <p className="text-gray-400 font-mono text-sm mb-2">System Maintenance</p>
                    <p className="text-lg">3D Visualization Engine is currently undergoing upgrades.</p>
                    <p className="text-sm text-gray-500 mt-2">Please check back later.</p>
                </div>

                <Link to="/metrc" className="btn btn-primary w-full">
                    Return to Compliance Dashboard
                </Link>
            </div>
        </div>
    );
}