// Mounted exclusively by DesktopExperience. Mobile keeps its original paper opening and haptics.
function DesktopEditorialCard({ entry, index }) {
  const card = React.useRef(null);
  const timer = React.useRef(null);
  const frame = React.useRef(null);
  const opening = React.useRef(false);
  const [pressed, setPressed] = React.useState(false);
  const clear = () => {
    cancelAnimationFrame(frame.current);
    frame.current = null;
    card.current?.style.removeProperty('--paper-x');
    card.current?.style.removeProperty('--paper-y');
    card.current?.style.removeProperty('--paper-rx');
    card.current?.style.removeProperty('--paper-ry');
  };
  React.useEffect(() => {
    const media = matchMedia('(prefers-reduced-motion: reduce)');
    const reset = () => clear();
    const cancel = event => {
      if (event.key !== 'Escape' || !opening.current) return;
      clearTimeout(timer.current);
      opening.current = false;
      setPressed(false);
    };
    media.addEventListener('change', reset);
    window.addEventListener('keydown', cancel);
    return () => { clearTimeout(timer.current); cancelAnimationFrame(frame.current); media.removeEventListener('change', reset); window.removeEventListener('keydown', cancel); };
  }, []);
  const move = event => {
    if (event.pointerType !== 'mouse' || opening.current || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const { clientX, clientY } = event;
    cancelAnimationFrame(frame.current);
    frame.current = requestAnimationFrame(() => {
      const rect = card.current.getBoundingClientRect();
      const x = (clientX - rect.left) / rect.width - .5;
      const y = (clientY - rect.top) / rect.height - .5;
      card.current.style.setProperty('--paper-x', `${x * 12}px`);
      card.current.style.setProperty('--paper-y', `${y * 10}px`);
      card.current.style.setProperty('--paper-rx', `${-y * 6}deg`);
      card.current.style.setProperty('--paper-ry', `${x * 8}deg`);
    });
  };
  const open = event => {
    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    event.preventDefault();
    if (opening.current) return;
    opening.current = true;
    setPressed(true);
    clear();
    timer.current = setTimeout(() => window.rtGo(`/ed/${entry.slug}`), 220);
  };
  return <div ref={card} className="dt-editorial-surface">
    <DesktopLink to={`/ed/${entry.slug}`} data-slug={entry.slug} className={`dt-editorial ${pressed ? 'is-opening' : ''}`} onPointerMove={move} onPointerLeave={clear} onClick={open}>
      <div className="dt-editorial-num">{dtNumber(index + 1)}</div>
      <div className="dt-editorial-copy"><div className="dt-kicker">{entry.topic} · {entry.published}</div><h2>{entry.title}</h2><p>{entry.excerpt}</p><span>{DT_COPY.ed.cta} <b aria-hidden="true">↗</b></span></div>
      <figure><img src={dtImage(entry)} alt="" loading="lazy"/><span className="dt-ed-photo-arrow" aria-hidden="true">↗</span></figure>
    </DesktopLink>
  </div>;
}

function DesktopEditorialIntro({ entry, index }) {
  const [visible, setVisible] = React.useState(() => !matchMedia('(prefers-reduced-motion: reduce)').matches);
  React.useEffect(() => {
    if (!visible) return;
    const dismiss = () => setVisible(false);
    const media = matchMedia('(prefers-reduced-motion: reduce)');
    const onPreference = () => { if (media.matches) dismiss(); };
    // Navigation is already complete. Any attempt to read dismisses the visual intro.
    const timeout = setTimeout(dismiss, 1200);
    window.addEventListener('wheel', dismiss, { passive: true });
    window.addEventListener('touchstart', dismiss, { passive: true });
    window.addEventListener('keydown', dismiss);
    window.addEventListener('resize', dismiss);
    media.addEventListener('change', onPreference);
    return () => {
      clearTimeout(timeout);
      window.removeEventListener('wheel', dismiss);
      window.removeEventListener('touchstart', dismiss);
      window.removeEventListener('keydown', dismiss);
      window.removeEventListener('resize', dismiss);
      media.removeEventListener('change', onPreference);
    };
  }, [visible]);
  if (!visible) return null;
  return <div className="dt-ed-intro" aria-hidden="true" onAnimationEnd={event => { if (event.animationName === 'dt-ed-leaf-right') setVisible(false); }}>
    {['left', 'right'].map(side => <div className={`dt-ed-intro-leaf dt-ed-intro-leaf--${side}`} key={side}><div className="dt-ed-imprint"><span className="dt-ed-imprint-brand">EDI<span>/</span>BARAK</span><span className="dt-ed-imprint-number">{dtNumber(index + 1)}</span><div className="dt-ed-imprint-title">{entry.title}</div><span className="dt-ed-imprint-topic">{entry.topic}</span><i/></div></div>)}
  </div>;
}