// Project detail page. Reads ?id= from URL and renders that project.
const { useEffect } = React;
const D = window.PORTO_DATA;

const ArrowBack = (
  <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/>
  </svg>
);

function Detail() {
  const pathMatch = window.location.pathname.match(/\/projects\/([^/]+)/);
  const params = new URLSearchParams(window.location.search);
  const slug = (pathMatch && pathMatch[1]) || params.get('id') || D.projects[0].slug;
  const idx = D.projects.findIndex((p) => p.slug === slug);
  const p = D.projects[idx >= 0 ? idx : 0];
  const next = D.projects[(idx + 1) % D.projects.length];

  useEffect(() => {
    document.title = `${p.title} — ${D.identity.shortName}`;
  }, [p.title]);

  return (
    <div className="detail-shell">
      <a className="back-link" href="/#work">{ArrowBack} Kembali ke Work</a>

      <div className="detail-meta">{p.year} · {p.role}</div>
      <h1 className="detail-title">{p.title}</h1>
      <div className="detail-kicker">{p.kicker}</div>

      <p className="detail-summary">{p.summary}</p>

      <div className="detail-grid">
        <div>
          <h5>Role</h5>
          <p>{p.role}</p>
        </div>
        <div>
          <h5>Stack</h5>
          <div className="stack" style={{ marginTop: 0 }}>
            {p.stack.map((s) => <span key={s} className="stack-chip">{s}</span>)}
          </div>
        </div>
      </div>

      <section className="detail-section">
        <h3>System Diagram</h3>
        <pre className="diagram">{p.diagram.join('\n')}</pre>
        <div className="diagram-cap">// integrasi end-to-end</div>
      </section>

      <section className="detail-section">
        <h3>Highlights</h3>
        <ul className="bullets-rich">
          {p.highlights.map((h, i) => <li key={i}><span>{h}</span></li>)}
        </ul>
      </section>

      <section className="detail-section">
        <h3>Catatan Role</h3>
        <div className="prose">
          {p.role_detail.map((r, i) => <p key={i}>{r}</p>)}
        </div>
      </section>

      <a className="next-proj" href={`/projects/${next.slug}`}>
        <div>
          <div className="next-proj-label">Project berikutnya</div>
          <div className="next-proj-title">{next.title} →</div>
        </div>
      </a>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Detail />);