/**
 * UpgradePanel — Inline freemium upsell banner.
 *
 * Pure presentational component. When SUBSCRIPTIONS is enabled and no
 * onSignIn prop is provided, falls back to useClerkAuth().openSignIn.
 *
 * Props:
 *   title       (string)   — Panel heading
 *   description (string)   — Supporting copy
 *   features    (array)    — [{ icon, label }] feature list
 *   ctaLabel    (string)   — CTA button text (default: 'Sign Up Free')
 *   onSignIn    (func)     — Optional override for sign-in action
 */
var UpgradePanel = function (props) {
    var title       = props.title;
    var description = props.description;
    var features    = props.features;
    var ctaLabel    = props.ctaLabel || 'Sign Up Free';
    var onSignIn    = props.onSignIn;

    var auth = useClerkAuth();

    // Use caller-provided handler, or fall back to Clerk openSignIn
    var handleSignIn = onSignIn || auth.openSignIn;

    return (
        <div className="bg-gradient-to-br from-forest to-forest/90 rounded-xl p-5 text-white shadow-soft relative overflow-hidden">
            <span className="material-symbols-outlined absolute -right-3 -bottom-3 text-[80px] opacity-5">workspace_premium</span>
            <div className="relative z-10">
                <div className="flex items-center gap-2 mb-2">
                    <span className="material-symbols-outlined text-primary text-base">workspace_premium</span>
                    <span className="text-[10px] font-black text-primary uppercase tracking-widest">Premium Feature</span>
                </div>
                <h3 className="font-extrabold text-base mb-1">{title}</h3>
                <p className="text-sm text-accent/70 font-medium leading-relaxed mb-4">{description}</p>

                <div className="space-y-1.5 mb-4">
                    {features.map(function (f) {
                        return (
                            <div key={f.icon} className="flex items-center gap-2.5">
                                <span className="material-symbols-outlined text-primary text-sm">{f.icon}</span>
                                <span className="text-xs font-semibold text-accent/80">{f.label}</span>
                            </div>
                        );
                    })}
                </div>

                <button
                    onClick={handleSignIn}
                    className="w-full bg-primary text-white font-extrabold py-2.5 rounded-xl flex items-center justify-center gap-2 btn-nature hover:brightness-110 transition-all text-sm"
                >
                    <span className="material-symbols-outlined text-base">person_add</span>
                    {ctaLabel}
                </button>
                <button
                    onClick={handleSignIn}
                    className="w-full mt-1.5 text-accent/50 font-bold py-1.5 text-xs btn-nature hover:text-white transition-colors"
                >
                    Already have an account? Sign in
                </button>
            </div>
        </div>
    );
};

window.UpgradePanel = UpgradePanel;