// Case study detail view — design engineering projects.
const { useEffect: useEffectCS } = React;

function CaseStudy({ projectId, onBack }) {
  const project = (window.WORK_PROJECTS || []).find(p => p.id === projectId);

  useEffectCS(() => { window.scrollTo(0, 0); }, [projectId]);

  if (!project) {
    return (
      <main className="lookbook">
        <a className="back-link" onClick={onBack} href="/">
          <Icon name="arrow-left" size={12} /> all projects
        </a>
        <p style={{ color: 'var(--fg-3)' }}>project not found</p>
      </main>
    );
  }

  return (
    <main className="lookbook">
      <a className="back-link" onClick={onBack} href="/">
        <Icon name="arrow-left" size={12} /> all projects
      </a>

      <header className="lb-head">
        {project.eyebrow && <p className="eyebrow">— {project.eyebrow}</p>}
        <h1>{project.title}</h1>
        {project.description && <p className="desc">{project.description}</p>}

        <dl className="lb-meta">
          <div><dt>COMPANY</dt><dd>{project.company}</dd></div>
          <div><dt>ROLE</dt>   <dd>{project.role   || '—'}</dd></div>
          <div><dt>WHEN</dt>   <dd>{project.year}</dd></div>
          {project.team && <div><dt>TEAM</dt><dd>{project.team}</dd></div>}
        </dl>
      </header>

      <div className="cs-sections">
        {(project.sections || []).map((s, i) => (
          <CaseStudySection key={i} section={s} />
        ))}
      </div>

      {project.links && project.links.length > 0 && (
        <div className="cs-links">
          <div className="section-label" style={{ marginBottom: '16px' }}>
            <span className="label">links</span>
          </div>
          <div className="cs-link-row">
            {project.links.map((l, i) => (
              <a key={i} href={l.url} target="_blank" rel="noopener" className="cs-link-chip">
                {l.label} <Icon name="arrow-right" size={10} />
              </a>
            ))}
          </div>
        </div>
      )}
    </main>
  );
}

function CaseStudySection({ section }) {
  if (section.type === 'text') {
    return (
      <div className="cs-section cs-text">
        {section.label && (
          <div className="section-label" style={{ marginBottom: '16px' }}>
            <span className="label">{section.label}</span>
          </div>
        )}
        <p className="cs-body">{section.body}</p>
      </div>
    );
  }
  if (section.type === 'image') {
    return (
      <div className="cs-section cs-image">
        <img src={section.src} alt={section.caption || ''} className="cs-img" loading="lazy" />
        {section.caption && <p className="cs-caption">{section.caption}</p>}
      </div>
    );
  }
  if (section.type === 'image-grid') {
    return (
      <div className="cs-section cs-image-grid">
        {section.images.map((img, i) => (
          <div key={i}>
            <img src={img.src} alt={img.caption || ''} className="cs-img" loading="lazy" />
            {img.caption && <p className="cs-caption">{img.caption}</p>}
          </div>
        ))}
      </div>
    );
  }
  if (section.type === 'figma') {
    return (
      <div className="cs-section cs-figma">
        {section.label && (
          <div className="section-label" style={{ marginBottom: '16px' }}>
            <span className="label">{section.label}</span>
          </div>
        )}
        <div className="cs-figma-wrap">
          <iframe src={section.url} allowFullScreen title={section.label || 'figma'} />
        </div>
      </div>
    );
  }
  if (section.type === 'metrics') {
    return (
      <div className="cs-section cs-metrics">
        {section.label && (
          <div className="section-label" style={{ marginBottom: '16px' }}>
            <span className="label">{section.label}</span>
          </div>
        )}
        <dl className="cs-metric-grid">
          {section.items.map((m, i) => (
            <div key={i} className="cs-metric">
              <dt>{m.value}</dt>
              <dd>{m.label}</dd>
            </div>
          ))}
        </dl>
      </div>
    );
  }
  return null;
}

window.CaseStudy = CaseStudy;