// Card detail modal — flip upright/reversed + 6 tabbed readings
const { useState: uM, useEffect: eM } = React;

const TABS = [
  { key: 'general', label: 'General' },
  { key: 'love', label: 'Love' },
  { key: 'career', label: 'Career' },
  { key: 'health', label: 'Health' },
  { key: 'spirituality', label: 'Spirit' },
  { key: 'advice', label: 'Advice' },
];

window.CardModal = function CardModal({ card, onClose }) {
  const [reversed, setReversed] = uM(false);
  const [tab, setTab] = uM('general');
  const reading = reversed ? card.reversed : card.upright;

  eM(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey); };
  }, [onClose]);

  return React.createElement('div', {
    className: 'modal-backdrop',
    onClick: (e) => { if (e.target.classList.contains('modal-backdrop')) onClose(); }
  },
    React.createElement('div', { className: 'modal', role: 'dialog' },
      React.createElement('button', { className: 'modal-close', onClick: onClose, 'aria-label': 'Close' }, '×'),
      React.createElement('div', { className: 'modal-card-wrap' },
        React.createElement('div', { className: 'modal-card' + (reversed ? ' reversed' : '') },
          React.createElement('div', { className: 'card-face' },
            React.createElement('div', { className: 'card-art' }, React.createElement(window.CardArt, { card })),
            React.createElement('div', { className: 'card-name' }, card.name),
            React.createElement('div', { className: 'card-number' }, card.number)
          )
        ),
        React.createElement('button', { className: 'flip-toggle', onClick: () => setReversed(r => !r) },
          reversed ? '↻ Upright' : '↺ Reversed'
        ),
        React.createElement('span', { className: 'yesno-badge' }, 'Yes/No: ' + card.yesno)
      ),
      React.createElement('div', { className: 'modal-content' },
        React.createElement('span', { className: 'position-tag' }, reversed ? 'Reversed' : 'Upright'),
        React.createElement('h2', null, card.name),
        React.createElement('div', { className: 'meta-row' },
          React.createElement('span', { className: 'meta-chip' }, React.createElement('strong', null, 'Element:'), card.element),
          React.createElement('span', { className: 'meta-chip' }, React.createElement('strong', null, 'Planet:'), card.planet),
          React.createElement('span', { className: 'meta-chip' }, React.createElement('strong', null, 'Zodiac:'), card.zodiac),
          React.createElement('span', { className: 'meta-chip' }, React.createElement('strong', null, 'Number:'), card.numerology)
        ),
        React.createElement('p', { className: 'keywords' }, card.keywords.map(k => '✦ ' + k).join('   ')),
        React.createElement('div', { className: 'tabs' },
          TABS.map(t => React.createElement('button', {
            key: t.key, className: 'tab' + (tab === t.key ? ' active' : ''),
            onClick: () => setTab(t.key)
          }, t.label))
        ),
        React.createElement('div', { className: 'tab-content', key: tab + (reversed ? 'R' : 'U') },
          reading[tab]
        )
      )
    )
  );
};