/* global React, PROJECTS, Header, Footer, Btn, Tag, Reveal, Img */
const { useEffect: pUE } = React;

function ProjectScreen({ id, onNav }) {
  const p = PROJECTS.find(x => x.slug === id || x.id === id) || PROJECTS[0];
  const idx = PROJECTS.indexOf(p);
  const next = PROJECTS[(idx + 1) % PROJECTS.length];

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

  return (
    <div className="page-enter project-page">
      {/* Full-bleed cover */}
      <section className="project-cover" data-slug={p.slug}>
        <Img className="project-cover-bg" src={p.img || p.cover} alt={p.name} />
        <div className="project-cover-tint" />
<div className="project-cover-inner container">
          <a onClick={() => onNav('projects')} className="project-back">← Alle Cases</a>
          <Reveal as="h1" className="display h-1 project-title" scramble key={p.slug}>{p.name.replace(/\.$/, '')}</Reveal>
          <div className="project-cover-meta">
            <span>{p.industry}</span>
            <span>{p.timeline}</span>
            <span>/ {p.year}</span>
          </div>
        </div>
      </section>

      {/* Meta-bar */}
      <section className="project-bar">
        <div className="container">
          <div className="project-bar-grid">
            <div>
              <div className="project-bar-k">Branche</div>
              <div className="project-bar-v">{p.industry}</div>
            </div>
            <div>
              <div className="project-bar-k">Zeitraum</div>
              <div className="project-bar-v">{p.timeline}</div>
            </div>
            <div>
              <div className="project-bar-k">Jahr</div>
              <div className="project-bar-v">{p.year}</div>
            </div>
            <div>
              <div className="project-bar-k">Leistungen</div>
              <div className="project-bar-v">{p.services.join(' · ')}</div>
            </div>
          </div>
        </div>
      </section>

      {/* Intro */}
      <section className="section project-prose">
        <div className="container">
          <div className="split-2">
            <div className="l"><Tag>Einleitung</Tag><Reveal as="h2" className="display h-2">Worum es ging.</Reveal></div>
            <div className="r"><p className="project-lead">{p.intro}</p></div>
          </div>
        </div>
      </section>

      {/* Gallery */}
      {p.gallery && p.gallery.length > 0 && (
        <section className="project-gallery-sec">
          <div className="container project-gallery">
            {p.gallery.map((g, i) => {
              const ratio = g.ratio || '2 / 1';
              const parts = ratio.split('/').map(s => parseFloat(s.trim()));
              const isPortrait = parts[1] > parts[0];
              return (
                <figure key={i} className="project-shot" data-orientation={isPortrait ? 'portrait' : 'landscape'} style={{ aspectRatio: ratio }}>
                  <Img src={g.src} alt={`${p.name} ${i + 1}`} loading="lazy" />
                </figure>
              );
            })}
          </div>
        </section>
      )}

      {/* Challenge */}
      <section className="section project-prose">
        <div className="container">
          <div className="split-2">
            <div className="l"><Tag>Herausforderung</Tag><Reveal as="h2" className="display h-2">Die Aufgabe.</Reveal></div>
            <div className="r">
              {p.challenge.map((para, i) => <p key={i} className="project-body">{para}</p>)}
            </div>
          </div>
        </div>
      </section>

      {/* Fazit */}
      <section className="section project-prose" style={{ background: 'var(--card)' }}>
        <div className="container">
          <div className="split-2">
            <div className="l"><Tag>Fazit</Tag><Reveal as="h2" className="display h-2">Das Ergebnis.</Reveal></div>
            <div className="r">
              {p.fazit.map((para, i) => <p key={i} className="project-body">{para}</p>)}
              {p.liveUrl && (
                <div style={{ marginTop: 28 }}>
                  <a href={p.liveUrl} target="_blank" rel="noopener noreferrer">
                    <Btn>Live ansehen</Btn>
                  </a>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Next case */}
      <section className="project-next">
        <div className="container">
          <a onClick={() => onNav('project:' + next.slug)} className="project-next-link">
            <div>
              <div className="project-next-k">Nächster Case</div>
              <div className="display h-1 project-next-name">{next.name} →</div>
            </div>
          </a>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ProjectScreen });