import React, { useState } from 'react'; import { Head, Link } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; import { CreditCard, CheckCircle2, AlertCircle, ArrowRight, Sparkles } from 'lucide-react'; export default function Subscription({ currentPlan, expiresAt, plans }) { const [selectedId, setSelectedId] = useState('premium'); const [showSuccess, setShowSuccess] = useState(false); const handleSelect = (id) => { setSelectedId(id); setShowSuccess(true); setTimeout(() => setShowSuccess(false), 4000); }; return (
{/* Current Status Banner */}
Current Active Plan
{currentPlan}
Renews automatically on {expiresAt}
Active & Verified
{showSuccess && (
Plan successfully updated! Mock PayTabs billing cycle applied.
)} {/* Pricing Grid */}

Available Subscription Tiers

Upgrade or change your plan anytime. Zero agency recruitment commissions.

{plans.map((plan) => { const isSelected = selectedId === plan.id; return (
{plan.popular && (
Most Popular Tier
)}

{plan.name}

{plan.price} / {plan.period}
    {plan.features.map(f => (
  • {f}
    • ))}
); })}
); }