// Project detail modal — shared across variants

const ProjectModal = ({ project, lang, onClose }) => {
  const D = window.PORTFOLIO_DATA;
  const t = D.meta[lang];
  const [img, setImg] = React.useState(0);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, []);

  if (!project) return null;
  const css = `
    .pm-back { position: fixed; inset: 0; background: rgba(5,5,7,0.92); z-index: 1000; overflow-y: auto; backdrop-filter: blur(8px); animation: pmFade .25s; }
    @keyframes pmFade { from { opacity: 0; } to { opacity: 1; } }
    .pm-shell { max-width: 1200px; margin: 40px auto; background: #0e0e10; color: #ece8df; border: 1px solid #26241f; font-family: 'Inter', sans-serif; }
    .pm-close { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; background: rgba(14,14,16,0.95); border-bottom: 1px solid #26241f; z-index: 5; backdrop-filter: blur(8px); }
    .pm-close-btn { background: transparent; border: 1px solid #2e2a23; color: #ece8df; padding: 8px 14px; cursor: pointer; font: inherit; font-size: 12px; border-radius: 4px; }
    .pm-close-btn:hover { background: #d4b364; color: #0a0a0b; border-color: #d4b364; }
    .pm-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #d4b364; }
    .pm-hero { aspect-ratio: 16/8; background: #1a1916 center/cover; overflow: hidden; }
    .pm-hero img { width: 100%; height: 100%; object-fit: cover; }
    .pm-body { padding: 48px; display: grid; grid-template-columns: 2fr 1fr; gap: 48px; }
    .pm-title { font-family: 'Cormorant Garamond', serif; font-size: 64px; line-height: 1; margin: 0 0 16px; font-weight: 400; }
    .pm-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #807866; margin-bottom: 32px; }
    .pm-desc { font-size: 18px; line-height: 1.6; color: #c4bfb0; margin: 0 0 24px; }
    .pm-side { padding-top: 8px; }
    .pm-side dt { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #807866; margin-bottom: 4px; }
    .pm-side dd { margin: 0 0 18px; font-size: 14px; }
    .pm-side a.link { color: #d4b364; text-decoration: none; border-bottom: 1px solid #4a4538; }
    .pm-side a.link:hover { border-color: #d4b364; }
    .pm-gal { padding: 0 48px 48px; }
    .pm-gal-main { aspect-ratio: 16/9; background: #1a1916 center/cover; margin-bottom: 12px; overflow: hidden; }
    .pm-gal-main img { width: 100%; height: 100%; object-fit: cover; }
    .pm-gal-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
    .pm-gal-thumb { aspect-ratio: 16/9; background: #1a1916 center/cover; cursor: pointer; opacity: 0.6; transition: opacity .2s; overflow: hidden; }
    .pm-gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .pm-gal-thumb.active, .pm-gal-thumb:hover { opacity: 1; outline: 1px solid #d4b364; }
    @media (max-width: 800px) {
      .pm-body { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
      .pm-title { font-size: 40px; }
      .pm-gal { padding: 0 24px 24px; }
      .pm-shell { margin: 0; }
    }
  `;

  return (
    <div className="pm-back" onClick={onClose}>
      <style>{css}</style>
      <div className="pm-shell" onClick={(e) => e.stopPropagation()}>
        <div className="pm-close">
          <span className="pm-tag">{t.featured_label} / {project.title}</span>
          <button className="pm-close-btn" onClick={onClose}>✕ ESC</button>
        </div>
        <div className="pm-hero"><img src={project.hero} alt={project.title} /></div>
        <div className="pm-body">
          <div>
            <div className="pm-meta">{project.tag[lang]} · {project.studio} · {project.year}</div>
            <h2 className="pm-title">{project.title}</h2>
            <p className="pm-desc">{project.desc[lang]}</p>
          </div>
          <dl className="pm-side">
            <dt>{t.role_label}</dt><dd>{project.role[lang]}</dd>
            <dt>Stack</dt><dd>{project.stack.join(" · ")}</dd>
            <dt>{t.year_label}</dt><dd>{project.year}</dd>
            <dt>{lang === "pl" ? "Studio" : "Studio"}</dt><dd>{project.studio}</dd>
            {project.team && (<><dt>{lang === "pl" ? "Zespół" : "Team"}</dt><dd>{project.team[lang]}</dd></>)}
            {project.links && project.links.length > 0 && (<><dt>{lang === "pl" ? "Linki" : "Links"}</dt><dd>{project.links.map((l, i) => (<div key={i} style={{ marginBottom: 4 }}><a className="link" href={l.url} target="_blank" rel="noreferrer">{lang === "pl" ? l.labelPl : l.labelEn} ↗</a></div>))}</dd></>)}
          </dl>
        </div>
        {project.gallery && project.gallery.length > 0 && (
          <div className="pm-gal">
            <div className="pm-gal-main"><img src={project.gallery[img]} alt="" /></div>
            <div className="pm-gal-thumbs">
              {project.gallery.map((g, i) => (
                <div key={i} className={"pm-gal-thumb " + (i === img ? "active" : "")} onClick={() => setImg(i)}><img src={g} alt="" /></div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

window.ProjectModal = ProjectModal;