import ComponentsPricingTableToggle from '@/components/pricing-table/components-pricing-table-toggle';
import { Metadata } from 'next';
import Link from 'next/link';
import React from 'react';

export const metadata: Metadata = {
    title: 'Pricing Table',
};

const PricingTable = () => {
    return (
        <div className="min-h-screen bg-[#111111] flex items-center justify-center p-4 relative overflow-hidden">

            {/* Background Glows */}

            {/* blue left */}
            <div className="absolute top-[180px] left-52 w-[100px] h-[100px] 
                bg-[#1d8be0] rounded-full blur-2xl opacity-[1.5] animate-zoomslow">
            </div>

            {/* green left */}
            <div className="absolute top-10 left-0 w-[60px] h-[60px] 
                bg-[#6cb655] rounded-full blur-2xl opacity-[1.5] animate-zoomslower">
            </div>

            {/* pink big left */}
            <div className="absolute -left-[80px] bottom-[140px] w-[100px] h-[200px] 
                bg-[#db21d9] blur-3xl opacity-1 animate-zoomslow">
            </div>

            {/* small pink under card */}
            <div className="absolute bottom-20 left-[440px] w-[60px] h-[60px] 
                bg-[#db21d9] rounded-full blur-xl opacity-80 -translate-x-1/2 translate-y-1/2">
            </div>

            {/* orange */}
            <div className="absolute top-[100px] right-[260px] w-[100px] h-[100px] 
                bg-[#f28f50] rounded-full blur-2xl opacity-80 animate-zoomfast">
            </div>

            {/* green right */}
            <div className="absolute top-10 right-0 w-[60px] h-[60px] 
                bg-[#6cb655] rounded-full blur-2xl opacity-[1.5] animate-zoomslower">
            </div>

            {/* purple right */}
            <div className="absolute bottom-20 right-[180px] w-[80px] h-[80px] 
                bg-[#783e8d] rounded-full blur-2xl opacity-80 animate-zoomslow">
            </div>

            {/* yellow bottom right */}
            <div className="absolute top-[280px] -right-[20px] w-[160px] h-[160px] 
                bg-[#f1b74d] rounded-full blur-2xl opacity-1 animate-zoomslower">
            </div>

            {/* ===== Main Content ===== */}
            <div className="relative z-10 w-full max-w-6xl text-white space-y-8">
                {/* Toggle Pricing Table */}
                <ComponentsPricingTableToggle />
            </div>
        </div>
    );
};

export default PricingTable;