/**
 * ProUpsell — shown when a Pro-only screen is accessed without the Pro addon.
 * No functional Pro code lives here — this is purely a pointer to the separate plugin.
 */
export default function ProUpsell({ feature, description, highlights = [] }) {
  const upgradeUrl = window.rescueFill?.upgradeUrl || 'https://themefreex.com/rescuefill-pro';

  return (
    <div className="max-w-3xl mx-auto animate-fade-in">
      <div className="bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 border-2 border-indigo-200 rounded-3xl p-12 text-center">
        <div className="text-6xl mb-5">⚡</div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-3">{feature}</h2>
        <p className="text-slate-600 mb-8 max-w-lg mx-auto text-sm leading-relaxed">
          {description || `${feature} is available in the RescueFill Pro addon — a separate plugin you install alongside this one.`}
        </p>

        {highlights.length > 0 && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8 text-left">
            {highlights.map(({ icon, title, desc }) => (
              <div key={title} className="flex gap-3 bg-white rounded-2xl p-4 border border-indigo-100">
                <span className="text-2xl flex-shrink-0">{icon}</span>
                <div>
                  <p className="font-bold text-slate-900 text-sm">{title}</p>
                  <p className="text-slate-500 text-xs mt-0.5 leading-relaxed">{desc}</p>
                </div>
              </div>
            ))}
          </div>
        )}

        <a href={upgradeUrl} target="_blank" rel="noopener noreferrer"
          className="inline-flex items-center justify-center gap-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-extrabold px-10 py-4 rounded-2xl transition-all shadow-lg hover:shadow-xl text-base">
          ⚡ Get RescueFill Pro
        </a>
        <p className="mt-4 text-xs text-slate-400">Separate plugin · Install alongside the free version · GPL licensed</p>
      </div>
    </div>
  );
}