/* Projects section — cards grid, switchable styles.
   Detail overlay shows: hero image, lede, specs, capabilities, deep summary, embedded PDF. */

const { PROJECTS } = window.PORTFOLIO_DATA;

const Placeholder = ({ label }) =>
<div className="placeholder-svg">
    <span>{label || 'project image placeholder'}</span>
  </div>;

const ProjectHeroImg = ({ p }) =>
<div className="hero-img">
    {p.hero ?
  <img src={p.hero} alt={p.title} /> :
  <Placeholder label={`— ${p.title} — render pending`} />}
  </div>;

/* ---------- Filmstrip card ---------- */
const CardFilm = ({ p, onOpen }) =>
<article className="card-film" onClick={() => onOpen(p)}>
    <ProjectHeroImg p={p} />
    <div className="body">
      <div className="row1"><span>{p.index}</span><span>{p.year}</span></div>
      <h3>{p.title}</h3>
      <p>{p.blurb}</p>
      <div className="kicker">{p.kicker}</div>
      <div className="cta">Open detail <span className="arrow">→</span></div>
    </div>
  </article>;

/* ---------- Big card grid ---------- */
const CardBig = ({ p, onOpen }) =>
<article className="card-big" onClick={() => onOpen(p)}>
    <div className="row1" style={{
    display: 'flex', justifyContent: 'space-between',
    fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
    color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '.14em'
  }}>
      <span>{p.index}</span><span>{p.year}</span>
    </div>
    <ProjectHeroImg p={p} />
    <h3 style={{
    fontFamily: "'Newsreader', serif", fontWeight: 400, fontSize: 24,
    lineHeight: 1.1, letterSpacing: '-0.02em'
  }}>{p.title}</h3>
    <p style={{ color: 'var(--ink-soft)', fontSize: 13.5, lineHeight: 1.55 }}>{p.blurb}</p>
    <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, textTransform: 'uppercase', letterSpacing: '.14em', color: 'var(--ink-mute)' }}>{p.kicker}</span>
      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: 'var(--ink)' }}>→</span>
    </div>
  </article>;

/* ---------- Grid peek ---------- */
const CardPeek = ({ projects, onOpen }) => {
  const [main, ...rest] = projects;
  return (
    <div className="card-peek-wrap">
      <article className="card-peek-main" onClick={() => onOpen(main)}>
        <ProjectHeroImg p={main} />
        <div className="body">
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '.14em' }}>
            <span>{main.index}</span><span>{main.year}</span>
          </div>
          <h3 style={{ fontFamily: "'Newsreader', serif", fontWeight: 350, fontSize: 36, letterSpacing: '-0.025em', lineHeight: 1.02 }}>{main.title}</h3>
          <p style={{ color: 'var(--ink-soft)', fontSize: 14, lineHeight: 1.6 }}>{main.blurb}</p>
          <div style={{ marginTop: 16, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: 'uppercase', letterSpacing: '.14em', color: 'var(--ink)' }}>Open detail →</div>
        </div>
      </article>
      <div className="card-peek-side">
        {rest.map((p) =>
        <article key={p.id} className="card-peek-thumb" onClick={() => onOpen(p)}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '.14em' }}>
              <span>{p.index}</span><span>{p.year}</span>
            </div>
            <h4>{p.title}</h4>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '.12em' }}>{p.kicker}</div>
          </article>
        )}
      </div>
    </div>);
};

/* ---------- Detail overlay ---------- */
const ProjectOverlay = ({ p, onClose }) => {
  const [showPdf, setShowPdf] = React.useState(false);
  React.useEffect(() => {
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {window.removeEventListener('keydown', onKey);document.body.style.overflow = '';};
  }, [onClose]);

  return (
    <>
      <div className="overlay-back" onClick={onClose} />
      <section className="overlay-panel" role="dialog" aria-label={p.title}>
        <button className="overlay-close" onClick={onClose} aria-label="close">×</button>

        <div className="overlay-media">
          {showPdf && p.pdf ?
          <iframe
            src={`${p.pdf}#view=FitH`}
            title={`${p.title} — document`}
            className="overlay-pdf" /> :

          p.hero ?
          <img src={p.hero} alt={p.title} /> :

          <div className="placeholder">— render pending —</div>
          }
          {p.pdf &&
          <div className="overlay-media-tabs mono up">
              <button
              className={!showPdf ? 'active' : ''}
              onClick={() => setShowPdf(false)}>
              
                Render
              </button>
              <button
              className={showPdf ? 'active' : ''}
              onClick={() => setShowPdf(true)}>
              
                Document
              </button>
              <a href={p.pdf} target="_blank" rel="noreferrer">Open ↗</a>
            </div>
          }
        </div>

        <div className="overlay-body">
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '.14em' }}>
            <span>{p.index} · {p.kicker}</span>
            <span>{p.year} · {p.status}</span>
          </div>
          <h2>{p.title}</h2>
          <p className="lede">{p.blurb}</p>

          {p.specs && p.specs.length > 0 &&
          <div>
              <div className="ov-h mono up">Specifications</div>
              <div className="spec-grid">
                {p.specs.map((s, i) =>
              <div className="cell" key={i}>
                    <div className="k">{s.k}</div>
                    <div className="v">{s.v}</div>
                    <div className="s">{s.s}</div>
                  </div>
              )}
              </div>
            </div>
          }

          {p.summary && p.summary.length > 0 &&
          <div>
              <div className="ov-h mono up">Project summary</div>
              <div className="summary-list">
                {p.summary.map((s, i) =>
              <div className="summary-item" key={i}>
                    <h4>{s.h}</h4>
                    <div className="summary-body">
                      {s.b && <p>{s.b}</p>}
                      {s.list && s.list.length > 0 &&
                  <ul className="summary-substeps">
                          {s.list.map((it, j) =>
                    <li key={j}>
                              {it.k && <span className="ss-k mono up">{it.k}</span>}
                              <span className="ss-v">{it.v}</span>
                            </li>
                    )}
                        </ul>
                  }
                    </div>
                  </div>
              )}
              </div>
            </div>
          }

          {p.capabilities && p.capabilities.length > 0 &&
          <div>
              <div className="ov-h mono up">Capabilities</div>
              <ul className="caps-list">
                {p.capabilities.map((c, i) =>
              <li key={i}>
                    <span className="idx">{String(i + 1).padStart(2, '0')}</span>
                    <span>{c}</span>
                  </li>
              )}
              </ul>
            </div>
          }

          {p.pdf &&
          <div className="ov-pdf-cta">
              <div className="mono up label">Reference document</div>
              <a className="ov-pdf-link" href={p.pdf} target="_blank" rel="noreferrer">
                <span className="serif">{p.pdfLabel || 'Open full document'}</span>
                <span className="mono up">PDF ↗</span>
              </a>
            </div>
          }
        </div>
      </section>
    </>);
};

/* ---------- Section wrapper ---------- */
const ProjectsSection = ({ style, onOpen }) => {
  const stripRef = React.useRef(null);
  const scroll = (dir) => {
    const el = stripRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * (el.clientWidth * 0.85), behavior: 'smooth' });
  };

  return (
    <section className="section" id="work" data-screen-label="Projects">
      <div className="page">
        <div className="section-head">
          <div className="section-title">Selected <em>work</em></div>
          <div className="section-meta">Section 02 · {PROJECTS.length.toString().padStart(2, '0')} entries</div>
        </div>
        <p className="section-lede">Instruments and research platforms across ultrafast lasers, optics, and nanofabrication, built end-to-end from optical bench to control software. Click any entry for the full brief, specifications, and the source document.



        </p>

        {style === 'filmstrip' &&
        <>
            <div className="scroller-controls">
              <span>Filmstrip · scroll or drag</span>
              <div className="arrows">
                <button className="arrow-btn" onClick={() => scroll(-1)} aria-label="scroll left">←</button>
                <button className="arrow-btn" onClick={() => scroll(1)} aria-label="scroll right">→</button>
              </div>
            </div>
            <div className="filmstrip" ref={stripRef}>
              {PROJECTS.map((p) => <CardFilm key={p.id} p={p} onOpen={onOpen} />)}
            </div>
          </>
        }

        {style === 'cards' &&
        <div className="card-grid">
            {PROJECTS.map((p) => <CardBig key={p.id} p={p} onOpen={onOpen} />)}
          </div>
        }

        {style === 'peek' &&
        <CardPeek projects={PROJECTS} onOpen={onOpen} />
        }
      </div>
    </section>);
};

window.ProjectsSection = ProjectsSection;
window.ProjectOverlay = ProjectOverlay;