/* Detail page renderer — takes project slug + custom case-study sections */

const { Titlebar, Statusbar, ProjectThumb } = window;
const PROJECTS = window.PORTFOLIO_PROJECTS;

function getProject(slug) {
  return PROJECTS.find(p => p.slug === slug);
}

function getNeighbors(slug) {
  const i = PROJECTS.findIndex(p => p.slug === slug);
  return {
    prev: i > 0 ? PROJECTS[i - 1] : PROJECTS[PROJECTS.length - 1],
    next: i < PROJECTS.length - 1 ? PROJECTS[i + 1] : PROJECTS[0],
  };
}

function DetailHero({ p, lede }) {
  const titleParts = p.italWord ? p.title.split(p.italWord) : [p.title];
  return (
    <section className="detail-hero" data-screen-label="Hero">
      <div>
        <div className="crumbs">
          <a href="../index.html">~/portfolio</a> / <a href="../projects.html">projects</a> / <b style={{color:'var(--ink)'}}>{p.slug}</b>
        </div>
        <div className="eyebrow" style={{marginBottom: 14, color: p.accent}}>
          {p.num} / 07 &nbsp;·&nbsp; {p.role} &nbsp;·&nbsp; {p.year}
        </div>
        <h1>
          {titleParts[0]}
          {p.italWord && <span className="ital" style={{color: p.accent}}>{p.italWord}</span>}
          {titleParts[1]}
        </h1>
        <p className="lede">{lede || p.summary}</p>
      </div>
      <div className="specs">
        <div className="spec"><div className="k">Role</div><div className="v">{p.role}</div></div>
        <div className="spec"><div className="k">Year</div><div className="v">{p.year}</div></div>
        <div className="spec"><div className="k">Company</div><div className="v">{p.company}</div></div>
        <div className="spec"><div className="k">Status</div><div className="v"><span className="pill" style={{color: p.accent, borderColor: p.accent, background: p.accentSoft}}><span className="dot" style={{background: p.accent, boxShadow: `0 0 0 3px ${p.accentSoft}`}}/>Shipped</span></div></div>
        <div className="spec" style={{gridColumn:'1 / -1'}}>
          <div className="k">Stack</div>
          <div className="v" style={{display:'flex', gap: 6, flexWrap:'wrap', marginTop: 6}}>
            {p.tags.map(t => <span key={t} className="tag">{t}</span>)}
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroVisual({ p }) {
  return (
    <div className="viz" style={{height: 360, padding: 0, marginBottom: 56}}>
      <span className="label" style={{zIndex:2}}>cover · {p.slug}</span>
      <ProjectThumb vibe={p.thumbVibe} accent={p.accent} accentSoft={p.accentSoft} title={p.title}/>
    </div>
  );
}

function NextNav({ slug }) {
  const { prev, next } = getNeighbors(slug);
  return (
    <nav className="next-nav" aria-label="Project navigation">
      <a href={prev.href.replace('projects/','')}>
        <div className="lbl">← Previous</div>
        <div className="nm">{prev.title}</div>
      </a>
      <a href={next.href.replace('projects/','')} className="right">
        <div className="lbl">Next →</div>
        <div className="nm">{next.title}</div>
      </a>
    </nav>
  );
}

function Section({ num, title, italWord, children }) {
  const parts = italWord ? title.split(italWord) : [title];
  return (
    <section className="section">
      <div className="section-label" style={{marginBottom: 14}}>
        <span><span className="num">●</span> {num}</span>
        <span className="line"/>
      </div>
      <h2>
        {parts[0]}
        {italWord && <span className="ital">{italWord}</span>}
        {parts[1]}
      </h2>
      {children}
    </section>
  );
}

function DetailPage({ slug, lede, children }) {
  const p = getProject(slug);
  if (!p) return <div>Project not found</div>;

  // Set theme accent to project accent for this page
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', p.accent);
  }, [p]);

  return (
    <div className="shell">
      <Titlebar active="" path={`projects/${p.slug}`}/>
      <main>
        <div className="page">
          <DetailHero p={p} lede={lede}/>
          <HeroVisual p={p}/>
          {children}
          <NextNav slug={slug}/>
        </div>
      </main>
      <Statusbar extra={`viewing: ${p.slug}`}/>
    </div>
  );
}

window.DetailPage = DetailPage;
window.Section = Section;
window.getProject = getProject;