/* global React, PORTFOLIO, ImgFrame, Tags */
// Project detail page — currently SolBand. Structured to take any
// project entry from PORTFOLIO.projects + matching detail object.

function ProjectDetail({ id, onBack }) {
  const data = PORTFOLIO[id]; // e.g. PORTFOLIO.solband
  const proj = PORTFOLIO.projects.find((p) => p.id === id);
  if (!data || !proj) {
    return (
      <main className="container" style={{ padding: "120px 0", textAlign: "center" }}>
        <span className="t-eyebrow" style={{ display: "block", marginBottom: 16 }}>Project · 404</span>
        <h1 className="t-section">Detail page coming soon.</h1>
        <p style={{ color: "var(--fg-2)", marginTop: 16 }}>
          This project is on the index but its case-study page is still being written.
        </p>
        <button className="btn" style={{ marginTop: 32 }} onClick={onBack}>
          ← Back to portfolio
        </button>
      </main>
    );
  }

  return (
    <main>
      <section className="proj-hero">
        <div className="container">
          <div className="crumbs">
            <button onClick={onBack} style={{ font: "inherit", color: "inherit" }}>← Index</button>
            <span className="sep">/</span>
            <span>Projects</span>
            <span className="sep">/</span>
            <span style={{ color: "var(--fg)" }}>{proj.title}</span>
          </div>

          <span className="t-eyebrow reveal" data-d="1" style={{ display: "block", marginBottom: 20 }}>
            {data.eyebrow}
          </span>

          <h1 className="reveal" data-d="2">
            <span style={{ color: "var(--accent)" }}>{data.title[0]}.</span>{" "}
            <span style={{ color: "var(--fg-2)" }}>{data.title[1]}</span>{" "}
            <span>{data.title[2]}</span>
          </h1>

          <p className="desc reveal" data-d="3">{data.desc}</p>

          <div className="row gap-3 reveal" data-d="4" style={{ marginTop: 40, flexWrap: "wrap" }}>
            <Tags items={proj.tags} />
          </div>

          <div className="proj-hero-img reveal" data-d="5" style={{ marginTop: 56 }}>
            <ImgFrame
              src={proj.img}
              alt={proj.imgAlt}
              caption="SolidWorks render · enclosure v3"
              ratio="16/9"
            />
          </div>
        </div>
      </section>

      {/* Meta strip */}
      <section>
        <div className="container">
          <div className="proj-meta">
            {data.meta.map((c, i) => (
              <div className="cell" key={i}>
                <span className="t-eyebrow">{c.label}</span>
                <h5>{c.title}</h5>
                <p>{c.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Content sections */}
      {data.sections.map((sec, i) => (
        <section className="proj-section" key={i}>
          <div className="container">
            <div className="head">
              <span className="t-eyebrow">{sec.eyebrow}</span>
              <h2>{sec.heading}</h2>
            </div>
            <div className="body">
              {sec.body.map((para, j) => <p key={j}>{para}</p>)}
            </div>

            {sec.images ? (
              <div className="proj-imgs two">
                {sec.images.map((im, k) => (
                  <ImgFrame
                    key={k}
                    src={im.src}
                    alt={im.alt}
                    caption={im.caption}
                  />
                ))}
              </div>
            ) : null}

            {sec.callouts ? (
              <div className="proj-callouts">
                {sec.callouts.map((c, k) => (
                  <div className="proj-callout" key={k}>
                    <span className="t-eyebrow">{c.label}</span>
                    <h4>{c.title}</h4>
                    <p>{c.desc}</p>
                  </div>
                ))}
              </div>
            ) : null}
          </div>
        </section>
      ))}

      {/* Next */}
      <section className="proj-section" style={{ paddingBottom: 0 }}>
        <div className="container">
          <div className="proj-next">
            <div>
              <span className="t-eyebrow" style={{ display: "block", marginBottom: 12 }}>Next Step</span>
              <h3>Ready to expand with more renders, build photos, and diagrams.</h3>
              <p style={{ color: "var(--fg-2)", marginTop: 16, maxWidth: "60ch" }}>
                This page is structured to grow with additional visuals, testing notes, and deeper process documentation as the work develops.
              </p>
            </div>
            <div className="row gap-4">
              <button className="btn" onClick={onBack}>
                <span aria-hidden="true">←</span> Back to portfolio
              </button>
              <a className="btn btn-primary" href="#contact" onClick={onBack}>
                Request More Detail <span className="arrow" aria-hidden="true">↗</span>
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ProjectDetail });