import Link from 'next/link';
import Header from '@/components/Header';
import Footer from '@/components/Footer';

export const metadata = {
  title: 'Billing | AV Beat Marketplace',
};

export default function BillingPage() {
  return (
    <div className="min-h-screen bg-[#0d0d0d] text-white">
      <Header />
      <div className="max-w-3xl mx-auto px-4 py-24">
        <div className="flex items-center gap-2 text-sm text-gray-500 mb-8">
          <Link href="/marketplace" className="hover:text-[#CC0000]">
            Marketplace
          </Link>
          <span>/</span>
          <Link href="/marketplace/account" className="hover:text-[#CC0000]">
            Account
          </Link>
          <span>/</span>
          <span className="text-white">Billing</span>
        </div>

        <h1 className="text-3xl font-black uppercase tracking-wide mb-4">Billing & Subscription</h1>

        {/* Coming soon banner */}
        <div className="bg-gradient-to-r from-[#CC0000]/20 to-transparent border border-[#CC0000]/30 rounded-2xl p-8 mb-10 text-center">
          <div className="text-4xl mb-4">💳</div>
          <h2 className="text-2xl font-bold mb-3">Payments Coming Soon</h2>
          <p className="text-gray-400 max-w-md mx-auto leading-relaxed">
            We&apos;re finalizing our payment integration. Pro and Featured subscriptions will be
            available shortly. Your free profile is already live and ready.
          </p>
        </div>

        {/* Plan comparison */}
        <h2 className="text-xl font-bold mb-6">Available Plans</h2>
        <div className="grid md:grid-cols-3 gap-6 mb-10">
          {[
            {
              name: 'Free',
              price: '$0',
              period: 'forever',
              current: true,
              features: [
                'Basic profile',
                'Appear in search',
                '3 gig responses/month',
                'Apply to unlimited jobs',
              ],
            },
            {
              name: 'Pro',
              price: '$9.99',
              period: '/month',
              current: false,
              highlight: true,
              features: [
                'Priority placement',
                'Unlimited gig responses',
                'Post jobs & gigs',
                'Profile analytics',
                'Pro Member badge',
              ],
            },
            {
              name: 'Studio / Vendor',
              price: '$29.99',
              period: '/month',
              current: false,
              features: [
                'Everything in Pro',
                'Company profile',
                'Up to 5 staff profiles',
                'Featured placement',
                'Priority lead routing',
              ],
            },
          ]?.map((plan) => (
            <div
              key={plan?.name}
              className={`rounded-xl p-6 border relative ${
                plan?.highlight
                  ? 'bg-[#CC0000]/10 border-[#CC0000]'
                  : 'bg-[#1a1a1a] border-white/10'
              }`}
            >
              {plan?.highlight && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[#CC0000] text-white text-xs font-bold px-3 py-1 rounded-full">
                  MOST POPULAR
                </div>
              )}
              {plan?.current && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-green-600 text-white text-xs font-bold px-3 py-1 rounded-full">
                  CURRENT PLAN
                </div>
              )}
              <div className="font-bold text-lg mb-1">{plan?.name}</div>
              <div className="text-3xl font-black text-[#CC0000] mb-4">
                {plan?.price}
                <span className="text-sm text-gray-400 font-normal">{plan?.period}</span>
              </div>
              <ul className="space-y-2 mb-6">
                {plan?.features?.map((f) => (
                  <li key={f} className="text-sm text-gray-300 flex items-center gap-2">
                    <span className="text-[#CC0000]">✓</span> {f}
                  </li>
                ))}
              </ul>
              <button
                disabled
                className="w-full py-2.5 rounded-lg font-bold text-sm bg-white/5 text-gray-500 cursor-not-allowed border border-white/10"
              >
                Coming Soon
              </button>
            </div>
          ))}
        </div>

        {/* Job post pricing */}
        <div className="bg-[#1a1a1a] border border-white/10 rounded-xl p-6 mb-6">
          <h3 className="font-bold text-lg mb-4">One-Time Listings (Coming Soon)</h3>
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div className="flex justify-between py-2 border-b border-white/5">
              <span className="text-gray-400">Standard Job Post</span>
              <span className="font-bold">$49</span>
            </div>
            <div className="flex justify-between py-2 border-b border-white/5">
              <span className="text-gray-400">Featured Job Post</span>
              <span className="font-bold">$99</span>
            </div>
            <div className="flex justify-between py-2 border-b border-white/5">
              <span className="text-gray-400">Job Pack (5 posts)</span>
              <span className="font-bold">$199</span>
            </div>
            <div className="flex justify-between py-2 border-b border-white/5">
              <span className="text-gray-400">Job Pack (10 posts)</span>
              <span className="font-bold">$349</span>
            </div>
          </div>
        </div>

        <div className="text-center">
          <Link
            href="/marketplace/account"
            className="text-[#CC0000] hover:underline text-sm"
          >
            ← Back to Account
          </Link>
        </div>
      </div>
      <Footer />
    </div>
  );
}