// ui_kits/website/PostModal.jsx
// Lightweight "click a card → article overlay" — for the click-through demo.
//
// `post` arrives already-resolved (BlogGrid calls resolvePost before opening),
// so title/excerpt/date are plain strings, and categoryLabel is the localized
// display name for the category pill.

const postStyles = {
  scrim: {
    position: 'fixed', inset: 0, background: 'rgba(15,15,15,0.55)',
    backdropFilter: 'blur(2px)', zIndex: 100,
    display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
    overflowY: 'auto', padding: '60px 24px',
  },
  panel: {
    background: '#fff', maxWidth: 780, width: '100%',
    borderRadius: 16, overflow: 'hidden',
    boxShadow: '0 30px 80px rgba(0,0,0,0.3)',
  },
  hero: {
    height: 280,
    display: 'flex', alignItems: 'flex-end',
    padding: 32,
    position: 'relative',
  },
  close: {
    position: 'absolute', top: 16, right: 16,
    width: 36, height: 36, borderRadius: '50%',
    background: 'rgba(255,255,255,0.9)', border: 'none', cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-sans)', fontSize: 20, color: '#151414',
  },
  body: { padding: '40px 56px 56px' },
  meta: {
    fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700,
    letterSpacing: '0.18em', textTransform: 'uppercase', color: '#fff',
    opacity: 0.92,
  },
  title: {
    fontFamily: 'var(--font-serif)', fontWeight: 700,
    fontSize: 36, lineHeight: 1.2, color: '#fff', margin: '8px 0 0',
    textShadow: '0 2px 12px rgba(0,0,0,0.3)',
  },
  lede: {
    fontFamily: 'var(--font-serif)', fontStyle: 'italic',
    fontSize: 22, lineHeight: 1.4, color: '#383838',
    borderLeft: '2px solid var(--brand-leaf)', paddingLeft: 18,
    margin: '0 0 28px',
  },
  para: { fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.75, color: 'var(--color-fg)', margin: '0 0 18px' },
  disclaimer: {
    marginTop: 32, padding: '14px 16px',
    background: 'var(--wbu-color-yellow-500)',
    border: '1px solid var(--wbu-color-yellow-200)',
    borderRadius: 8,
    fontFamily: 'var(--font-sans)', fontSize: 13,
    color: 'var(--wbu-color-yellow-0)',
    fontStyle: 'italic',
  },
  authorRow: { display: 'flex', alignItems: 'center', gap: 12, marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--color-divider)' },
  authorAv: {
    width: 44, height: 44, borderRadius: '50%',
    background: 'var(--brand-leaf)', color: '#fff',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 18,
  },
};

const CATEGORY_HERO = {
  Health:     'linear-gradient(135deg, #A3D0B8, #2E6F5A)',
  Beauty:     'linear-gradient(135deg, #EFC5BE, #B8847B)',
  Nutrition:  'linear-gradient(135deg, #F2D391, #C99342)',
  Exercise:   'linear-gradient(135deg, #A3BEDA, #4E78A6)',
  Therapies:  'linear-gradient(135deg, #D5C1EE, #8A75BC)',
};

function PostModal({ post, onClose }) {
  const tr = useT();
  if (!post) return null;
  React.useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);

  const catLabel = post.categoryLabel || post.category;
  const lede = post.excerpt || tr('post.lede.default');

  return (
    <div style={postStyles.scrim} onClick={onClose}>
      <div style={postStyles.panel} onClick={(e) => e.stopPropagation()}>
        <div style={{ ...postStyles.hero, background: CATEGORY_HERO[post.category] || CATEGORY_HERO.Health }}>
          <button style={postStyles.close} onClick={onClose}>×</button>
          <div>
            <div style={postStyles.meta}>{catLabel} · {post.date} · {post.readMinutes} {tr('pod.minLabel')}</div>
            <h1 style={postStyles.title}>{post.title}</h1>
          </div>
        </div>

        <div style={postStyles.body}>
          <p style={postStyles.lede}>{lede}</p>
          <p style={postStyles.para}>{tr('post.body.1')}</p>
          <p style={postStyles.para}>{tr('post.body.2')}</p>
          <div style={postStyles.disclaimer}>{tr('post.disclaimer')}</div>
          <div style={postStyles.authorRow}>
            <div style={postStyles.authorAv}>P</div>
            <div>
              <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, color: '#151414' }}>{post.author}</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: '#767574' }}>{tr('post.author.role')}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PostModal = PostModal;