/* ============================================================
   Project detail + About pages
   ============================================================ */
const { useEffect } = React;

function ProjectDetail({ id, lang, t, nav }) {
  const idx = PROJECTS.findIndex((p) => p.id === id);
  const proj = PROJECTS[idx] || PROJECTS[0];
  const next = PROJECTS[(idx + 1) % PROJECTS.length];

  useEffect(() => { window.scrollTo(0, 0); }, [id]);

  return (
    <div className="proj">
      <aside className="proj__side">
        <BackButton onClick={() => nav("/")} label={t.backHome} />
        <h1 className="proj__title">{proj.name}</h1>
        <p className="proj__desc">{proj.desc[lang].split('\n').map((line, i) => {
          if (!line) return <br key={i} />;
          const parts = line.split(/(\*[^*]+\*)/g);
          const rendered = parts.map((p, j) =>
            p.startsWith('*') && p.endsWith('*')
              ? <em key={j}>{p.slice(1, -1)}</em>
              : p
          );
          return <React.Fragment key={i}>{rendered}<br /></React.Fragment>;
        })}</p>

        <dl className="proj__meta">
          <div className="proj__row"><dt>{t.type}</dt><dd>{proj.type[lang]}</dd></div>
          {proj.credits && <div className="proj__row proj__row--credits"><dt>{t.credits}</dt><dd>{proj.credits}</dd></div>}
        </dl>

        {proj.mission && (
          <div className="proj__mission">
            <p className="eyebrow proj__mission-label">{t.mission}</p>
            <div className="proj__pills">
              {proj.mission.map((m) => (
                <span key={m} className="proj__pill">{m}</span>
              ))}
            </div>
          </div>
        )}

        <button className="proj__next" onClick={() => nav("/project/" + next.id)}>
          <span className="eyebrow">{t.nextProject}</span>
          <span className="proj__nextname">{next.name} →</span>
        </button>
      </aside>

      <main className="proj__gallery">
        {(proj.images || []).map((src, i) => (
          <Reveal key={src} fromRight delay={i * 60}>
            <img src={src} alt={proj.name + " " + (i + 1)} className="proj__masonry-img" />
          </Reveal>
        ))}
      </main>
    </div>
  );
}

function About({ lang, t, nav }) {
  useEffect(() => { window.scrollTo(0, 0); }, []);
  return (
    <div className="about">
      <BackButton onClick={() => nav("/")} label={t.backHome} />
      <Reveal>
        <h1 className="about__title">{t.aboutTitle1}<br />{t.aboutTitle2}</h1>
        <p className="about__lede">{t.aboutLede}</p>
        <div className="about__socials"><Socials names={["linkedin"]} /></div>
      </Reveal>
      <Reveal delay={80}>
        <Placeholder tone="1" parallax className="about__img" label={NAME} />
      </Reveal>
      <Reveal delay={60}>
        <div className="about__body">
          <p>{t.aboutBody1}</p>
          <p>{t.aboutBody2}</p>
        </div>
      </Reveal>
    </div>
  );
}

Object.assign(window, { ProjectDetail, About });