// agilEspresso v2 — Shots list + modal

const { useState: useS4, useEffect: useE4, useRef: useR4 } = React;

function V2Shots({ onOpen }) {
  const list = typeof SHOTS !== 'undefined' ? SHOTS : [];
  const ref = useR4(null);
  useE4(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08 });
    ref.current.querySelectorAll('.v2-reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <section className="v2-section" id="shots" ref={ref}>
      <div className="v2-section-head v2-reveal">
        <div>
          <div className="v2-section-label">shots · 09</div>
          <h2 className="v2-section-title">
            Teoriyi azalt,<br/><em>sprint</em>'e dön.
          </h2>
        </div>
        <p className="v2-section-sub">
          Her biri ~60 saniye. Pratik örneklerle, gerçek takımlardan.
          Tıklayıp hemen oku.
        </p>
      </div>
      <div className="v2-shots-stack">
        {list.map((s, i) => {
          const strength = Math.round((s.strength || 0.5) * 10);
          return (
            <div
              key={s.id}
              className="v2-shot-row v2-reveal"
              style={{ transitionDelay: `${i * 40}ms` }}
              onClick={() => onOpen(s)}
              data-cursor="hover"
            >
              <span className="v2-shot-num">{String(s.id).padStart(2, '0')}</span>
              <h3 className="v2-shot-title">{s.title}</h3>
              <span className="v2-shot-cat">{s.category}</span>
              <span className="v2-shot-meta">
                <span>{s.pull}</span>
                <span>·</span>
                <span>{s.readSec}sn</span>
                <span className="v2-shot-strength" aria-label={`şiddet ${strength}/10`}>
                  {Array.from({ length: 10 }).map((_, k) => (
                    <span key={k} className={k < strength ? 'on' : ''} />
                  ))}
                </span>
              </span>
              <span className="v2-shot-arrow">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <path d="M5 10h10m-4-4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </span>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function V2ShotModal({ shot, onClose }) {
  useE4(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  const onBack = (e) => { if (e.target === e.currentTarget) onClose(); };

  return (
    <div className="v2-modal-backdrop" onClick={onBack}>
      <article className="v2-modal">
        <button className="v2-modal-close" onClick={onClose} aria-label="Kapat" data-cursor="hover">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
        </button>
        <div className="v2-modal-eyebrow">
          <span>{shot.number}</span>
          <span>·</span>
          <span>{shot.category}</span>
          <span>·</span>
          <span>{shot.readSec}sn · {shot.pull}</span>
        </div>
        <h2 className="v2-modal-title">{shot.title}</h2>
        <div className="v2-modal-body">
          <p style={{ fontSize: 19, color: 'var(--fg)', fontFamily: 'var(--f-serif)', fontStyle: 'italic' }}>{shot.tldr}</p>
          {(shot.body || '').split('\n\n').map((p, i) => {
            if (p.startsWith('## ')) return <h4 key={i}>{p.replace('## ', '')}</h4>;
            return <p key={i}>{p}</p>;
          })}
        </div>
      </article>
    </div>
  );
}

Object.assign(window, { V2Shots, V2ShotModal });