// Project detail page
function ProjectDetail({ projectId, lang, onBack, onOpen }) {
  const project = window.PROJECTS.find(p => p.id === projectId);
  if (!project) {
    return (
      <section className="section container">
        <h2>Not found</h2>
        <a className="btn btn-ghost" onClick={onBack} style={{ marginTop: 20 }}><Icon name="arrow-l" size={14} /> Back</a>
      </section>
    );
  }

  React.useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [projectId]);

  const related = window.PROJECTS.filter(p => p.id !== projectId && p.kind === project.kind).slice(0, 3);

  return (
    <div className="page">
      <div className="container" style={{ paddingTop: 28 }}>
        <a className="detail-back" onClick={onBack}>
          <Icon name="arrow-l" size={14} /> {lang === 'es' ? 'Volver al portfolio' : 'Back to portfolio'}
        </a>
      </div>

      <section className="detail-hero">
        <div className="container">
          <div className="detail-hero-grid">
            <div>
              <div className="detail-kicker">[ {String(window.PROJECTS.indexOf(project) + 1).padStart(2, '0')} / {project.kind === 'game' ? 'GAME' : 'APP'} ]</div>
              <h1 className="detail-title">{project.title}<span style={{ color: 'var(--accent)' }}>.</span></h1>
              <p className="detail-lede">{project.description[lang]}</p>
              <div className="badges">
                {project.stores.map((s, i) => (
                  <a key={i} className="badge" href="#">
                    <div className="b-icon"><Icon name={window.storeIcon(s.key)} size={20} /></div>
                    <div>
                      <span className="b-sub">{s.sub[lang]}</span>
                      <span className="b-store">{s.name}</span>
                    </div>
                  </a>
                ))}
              </div>
            </div>
            <div className="detail-key-art">
              <KeyArt project={project} />
            </div>
          </div>

          <div className="detail-meta-strip">
            <div className="meta-cell">
              <div className="k">{lang === 'es' ? 'Plataformas' : 'Platforms'}</div>
              <div className="v" style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                {project.platforms.map(p => <span key={p} style={{ color: 'var(--fg)' }}><Icon name={p} size={18} /></span>)}
              </div>
            </div>
            <div className="meta-cell">
              <div className="k">{lang === 'es' ? 'Lanzamiento' : 'Released'}</div>
              <div className="v">{project.year}</div>
            </div>
            <div className="meta-cell">
              <div className="k">{lang === 'es' ? 'Versión' : 'Version'}</div>
              <div className="v">{project.version}</div>
            </div>
            <div className="meta-cell">
              <div className="k">{lang === 'es' ? 'Motor' : 'Engine'}</div>
              <div className="v">{project.engine}</div>
            </div>
          </div>
        </div>
      </section>

      {/* Trailer */}
      <section className="detail-section" style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="detail-section-head reveal">
            <div>
              <div className="section-label mono" style={{ marginBottom: 14 }}><span className="idx">[ A ]</span> <span>{lang === 'es' ? 'Trailer' : 'Trailer'}</span></div>
              <h2>{lang === 'es' ? 'Míralo en' : 'See it in'} <span className="hollow" style={{ WebkitTextStroke: '1.5px var(--fg)', color: 'transparent', fontStyle: 'italic', fontWeight: 400 }}>movimiento</span><span style={{ color: 'var(--accent)' }}>.</span></h2>
            </div>
          </div>
          <div className="trailer-box reveal">
            <KeyArt project={project} variant={2} />
            <div className="play-btn"><Icon name="play" size={28} /></div>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="detail-section" style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="detail-section-head reveal">
            <div>
              <div className="section-label mono" style={{ marginBottom: 14 }}><span className="idx">[ B ]</span> <span>{lang === 'es' ? 'Características' : 'Features'}</span></div>
              <h2>{lang === 'es' ? 'Lo que lo hace' : 'What makes it'} <span className="hollow" style={{ WebkitTextStroke: '1.5px var(--fg)', color: 'transparent', fontStyle: 'italic', fontWeight: 400 }}>{lang === 'es' ? 'especial' : 'special'}</span><span style={{ color: 'var(--accent)' }}>.</span></h2>
            </div>
          </div>
          <div className="feature-grid">
            {project.features.map((f, i) => (
              <div key={i} className="feature reveal">
                <div className="feature-num">0{i + 1} — Feature</div>
                <h3>{f.t[lang]}</h3>
                <p>{f.d[lang]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Gallery */}
      <section className="detail-section" style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="detail-section-head reveal">
            <div>
              <div className="section-label mono" style={{ marginBottom: 14 }}><span className="idx">[ C ]</span> <span>{lang === 'es' ? 'Galería' : 'Gallery'}</span></div>
              <h2>{lang === 'es' ? 'Capturas' : 'Screenshots'}<span style={{ color: 'var(--accent)' }}>.</span></h2>
            </div>
            <div className="mono" style={{ color: 'var(--fg-dim)' }}>{lang === 'es' ? 'Selecciona una para ampliar' : 'Click to enlarge'}</div>
          </div>
          <div className="gallery">
            <div className="shot wide reveal"><KeyArt project={project} variant={3} /></div>
            <div className="shot normal reveal"><KeyArt project={project} variant={4} /></div>
            <div className="shot normal reveal"><KeyArt project={project} variant={5} /></div>
            <div className="shot normal reveal"><KeyArt project={project} variant={6} /></div>
            <div className="shot wide reveal"><KeyArt project={project} variant={7} /></div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-block">
        <div className="container">
          <div className="mono" style={{ color: 'var(--accent)', marginBottom: 20 }}>[ {lang === 'es' ? 'LLEVÁTELO' : 'TAKE IT HOME'} ]</div>
          <h2>
            {project.kind === 'game'
              ? (lang === 'es' ? 'Juega ' : 'Play ')
              : (lang === 'es' ? 'Descarga ' : 'Download ')}
            <span className="hollow" style={{ WebkitTextStroke: '1.5px var(--fg)', color: 'transparent', fontStyle: 'italic', fontWeight: 400 }}>{project.title}</span><span style={{ color: 'var(--accent)' }}>.</span>
          </h2>
          <div className="badges" style={{ justifyContent: 'center' }}>
            {project.stores.map((s, i) => (
              <a key={i} className="badge" href="#">
                <div className="b-icon"><Icon name={window.storeIcon(s.key)} size={20} /></div>
                <div>
                  <span className="b-sub">{s.sub[lang]}</span>
                  <span className="b-store">{s.name}</span>
                </div>
              </a>
            ))}
          </div>
          <div style={{ marginTop: 40 }}>
            <a className="btn btn-ghost" onClick={onBack}><Icon name="arrow-l" size={14} /> {lang === 'es' ? 'Volver al portfolio' : 'Back to portfolio'}</a>
          </div>
        </div>
      </section>

      {/* Related */}
      {related.length > 0 && (
        <section className="section" style={{ paddingTop: 40 }}>
          <div className="container">
            <div className="section-head reveal">
              <div>
                <div className="section-label mono"><span className="idx">[ D ]</span> <span>{lang === 'es' ? 'También podría interesarte' : 'You might also like'}</span></div>
                <h2 style={{ marginTop: 18 }}>{lang === 'es' ? 'Más' : 'More'} <span className="hollow" style={{ WebkitTextStroke: '1.5px var(--fg)', color: 'transparent', fontStyle: 'italic', fontWeight: 400 }}>{project.kind === 'game' ? (lang === 'es' ? 'videojuegos' : 'games') : 'apps'}</span><span style={{ color: 'var(--accent)' }}>.</span></h2>
              </div>
            </div>
            <div className="projects-grid">
              {related.map(p => <ProjectCard key={p.id} project={p} lang={lang} onOpen={onOpen} size="third" />)}
            </div>
          </div>
        </section>
      )}
    </div>
  );
}

window.ProjectDetail = ProjectDetail;