/* modal.jsx — pricing / paywall modal */
(function () {
  const { useState } = React;
  const Icon = window.Icon;

  function Paywall({ open, onClose, onConfirm }) {
    const [plan, setPlan] = useState('monthly');
    if (!open) return null;

    const feat = (t) => React.createElement('li', null, React.createElement(Icon.check, null), t);

    return React.createElement('div', { className: 'overlay', onClick: onClose },
      React.createElement('div', { className: 'modal', onClick: (e) => e.stopPropagation() },
        React.createElement('div', { className: 'modal-head' },
          React.createElement('button', { className: 'modal-close', onClick: onClose }, React.createElement(Icon.x, null)),
          React.createElement('span', { className: 'modal-badge' }, React.createElement(Icon.lock, null), 'Resum3 Pro'),
          React.createElement('h2', { className: 'modal-title' }, 'Unlock full access'),
          React.createElement('p', { className: 'modal-sub' }, 'Full access requires Resum3 Pro. Get unlimited resume tailoring, cover letters, ATS evidence maps, recruiter skim view, missing-experience review, and interview prep.'),
        ),

        React.createElement('div', { className: 'plans' },
          React.createElement('button', { className: 'plan' + (plan === 'monthly' ? ' sel' : ''), onClick: () => setPlan('monthly') },
            React.createElement('div', { className: 'plan-tag' }, 'Full access'),
            React.createElement('div', { className: 'plan-radio' }),
            React.createElement('div', { className: 'plan-name' }, 'Resum3 Pro'),
            React.createElement('div', { className: 'plan-price' }, '$9', React.createElement('span', null, '/month')),
            React.createElement('ul', { className: 'plan-feats' },
              feat('Unlimited AI tailoring'), feat('ATS evidence maps'), feat('Cover letters and interview prep'), feat('Recruiter skim view'), feat('Cancel anytime')),
          ),
          React.createElement('button', { className: 'plan' + (plan === 'once' ? ' sel' : ''), onClick: () => setPlan('once') },
            React.createElement('div', { className: 'plan-radio' }),
            React.createElement('div', { className: 'plan-name' }, 'Single Packet'),
            React.createElement('div', { className: 'plan-price' }, '$5'),
            React.createElement('ul', { className: 'plan-feats' },
              feat('One job application'), feat('Resume + cover letter'), feat('ATS evidence map'), feat('Interview prep')),
          ),
        ),

        React.createElement('div', { className: 'modal-foot' },
          plan === 'monthly'
            ? React.createElement('button', { className: 'btn btn-primary btn-lg btn-block', onClick: () => onConfirm('monthly') }, React.createElement(Icon.bolt, null), 'Start Resum3 Pro · $9/month')
            : React.createElement('button', { className: 'btn btn-primary btn-lg btn-block', onClick: () => onConfirm('once') }, React.createElement(Icon.bolt, null), 'Buy One Tailoring · $5'),
          plan === 'monthly'
            ? React.createElement('button', { className: 'btn btn-soft btn-block', onClick: () => setPlan('once') }, 'I only need one application')
            : React.createElement('button', { className: 'btn btn-soft btn-block', onClick: () => setPlan('monthly') }, 'Unlock full access instead'),
          React.createElement('div', { className: 'modal-secure' }, React.createElement(Icon.lock, null), 'Secure checkout · direct help: joshpaul6506@gmail.com'),
        ),
      ),
    );
  }

  window.Paywall = Paywall;
})();