// 언론보도 / 외부 미디어 — fetches /api/media?featured=1, thumbnail grid → embed modal.
function PressModal({ item, onClose }) {
  const vertical = !!item.vertical;
  const isFile = item.provider === 'file' || /\.(mp4|webm|mov)($|\?)/i.test(item.embedUrl || '');
  React.useEffect(() => {
    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 (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(7,18,48,.82)', backdropFilter: 'blur(8px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: '100%', maxWidth: vertical ? 'min(400px, 46vh)' : 960, background: 'var(--bg)', borderRadius: 14, overflow: 'hidden', border: '1px solid var(--line)', boxShadow: '0 40px 100px -40px rgba(0,0,0,.6)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 18px', borderBottom: '1px solid var(--line)', background: 'var(--surface)' }}>
          <div style={{ fontWeight: 700, color: 'var(--navy)', fontSize: 15, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 }}>
            {item.source ? <span className="mono" style={{ color: 'var(--accent)', fontSize: 12, marginRight: 8 }}>{item.source}</span> : null}
            {item.title}
          </div>
          <div style={{ display: 'flex', gap: 10, flexShrink: 0, marginLeft: 12 }}>
            {item.linkUrl && <a href={item.linkUrl} target="_blank" rel="noreferrer" className="mono" style={{ fontSize: 11, color: 'var(--accent)', border: '1px solid var(--accent-edge)', background: 'var(--accent-soft)', borderRadius: 8, padding: '6px 12px', fontWeight: 600, textDecoration: 'none', whiteSpace: 'nowrap' }}>기사 원문 ↗</a>}
            <button onClick={onClose} aria-label="닫기" style={{ width: 32, height: 32, borderRadius: 8, border: '1px solid var(--line)', background: 'transparent', color: 'var(--fg-2)', cursor: 'pointer', fontSize: 18 }}>×</button>
          </div>
        </div>
        <div style={{ position: 'relative', width: '100%', aspectRatio: vertical ? '9 / 16' : '16 / 9', background: '#000' }}>
          {isFile ? (
            <video src={item.embedUrl} poster={item.thumbnail || undefined} controls autoPlay playsInline preload="metadata"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0, objectFit: 'contain', background: '#000' }} />
          ) : (
            <iframe src={item.embedUrl} title={item.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }} allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowFullScreen scrolling="no"></iframe>
          )}
        </div>
      </div>
    </div>);
}

function PressCard({ item, onOpen }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onOpen} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit', padding: 0,
        background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden',
        display: 'flex', flexDirection: 'column',
        transform: hover ? 'translateY(-4px)' : 'none',
        borderColor: hover ? 'var(--accent-edge)' : 'var(--line)',
        boxShadow: hover ? '0 18px 40px -22px color-mix(in srgb, var(--accent) 35%, transparent)' : 'none',
        transition: 'transform .3s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .3s'
      }}>
      <div style={{ position: 'relative', width: '100%', aspectRatio: '16 / 9', background: 'var(--bg-2)', overflow: 'hidden' }}>
        {item.thumbnail
          ? <img src={item.thumbnail} alt={item.title} loading="lazy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transform: hover ? 'scale(1.05)' : 'scale(1)', transition: 'transform .6s cubic-bezier(.2,.7,.2,1)' }} />
          : <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'linear-gradient(135deg, var(--accent-soft), transparent 60%)' }}><span className="mono" style={{ color: 'var(--fg-3)', fontSize: 11, letterSpacing: '.2em' }}>{item.source || 'MEDIA'}</span></div>}
        {/* play button — bottom-left corner so it never covers the subject */}
        <span style={{ position: 'absolute', bottom: 12, left: 12, display: 'flex' }}>
          <span style={{ width: 44, height: 44, borderRadius: '50%', background: hover ? 'var(--accent)' : 'rgba(7,18,48,.66)', backdropFilter: 'blur(4px)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transition: 'background .25s, transform .25s', transform: hover ? 'scale(1.08)' : 'scale(1)', boxShadow: '0 6px 20px rgba(0,0,0,.4)' }}>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="#fff" aria-hidden><path d="M8 5.5v13l11-6.5z" /></svg>
          </span>
        </span>
        {item.source && <span className="mono" style={{ position: 'absolute', top: 10, left: 10, fontSize: 10, letterSpacing: '.12em', color: '#fff', background: 'rgba(7,18,48,.6)', backdropFilter: 'blur(6px)', padding: '4px 9px', borderRadius: 999 }}>{item.source}</span>}
      </div>
      <div style={{ padding: '14px 16px 16px', display: 'flex', flexDirection: 'column', gap: 6, flex: 1 }}>
        <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-.01em', color: 'var(--fg)', lineHeight: 1.4, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{item.title}</div>
        <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)', letterSpacing: '.08em', marginTop: 'auto' }}>{(item.createdAt || '').slice(0, 10)}</div>
      </div>
    </button>);
}

function Press({ t }) {
  const [ref, seen] = useReveal();
  const [items, setItems] = React.useState([]);
  const [active, setActive] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/media?featured=1&limit=24').then((r) => r.json()).then((d) => setItems((d && d.data) || [])).catch(() => {});
  }, []);
  if (!items.length) return null;
  const p = t.press || {};
  return (
    <section id="press" ref={ref} style={{ padding: '12vh 28px', position: 'relative', background: 'var(--bg-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <SectionEyebrow num="05" label={p.eyebrow || 'PRESS'} />
        <h2 className={`reveal ${seen ? 'in' : ''}`} style={{ fontSize: 'clamp(28px, 3.2vw, 44px)', letterSpacing: '-.03em', lineHeight: 1.32, margin: '0 0 46px', maxWidth: 760 }}>
          {p.title || '언론보도 · 미디어'}
          {p.sub && <span style={{ display: 'block', color: 'var(--fg-3)', fontSize: '0.42em', marginTop: 16, fontWeight: 400, letterSpacing: '-.01em' }}>{p.sub}</span>}
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 20 }}>
          {items.map((m) => <PressCard key={m.id} item={m} onOpen={() => setActive(m)} />)}
        </div>
        <div style={{ marginTop: 28 }}>
          <a href="/press" className="mono" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12.5, letterSpacing: '.06em', color: 'var(--navy)', fontWeight: 700, border: '1px solid var(--line-strong)', borderRadius: 999, padding: '10px 18px' }}>
            {p.all || '전체 보도자료 보기'} <span aria-hidden>→</span>
          </a>
        </div>
      </div>
      {active && <PressModal item={active} onClose={() => setActive(null)} />}
    </section>);
}

window.Press = Press;