// Octopak website — Selected work (/work)
const { Button } = window.OctopakDesignSystem_bc06ed;
const { PH, Carousel, ClosingCTA } = window;
const { CASE_STUDIES } = window;

function WorkView({ onNavigate }) {
  return (
    <div>
      <section className="page-head">
        <div className="octo-container">
          <p className="octo-eyebrow">Selected work</p>
          <h1 className="page-head__title">Selected work.</h1>
          <p className="page-head__lead">Packaging we've made for brands who care what it looks like in a customer's hands.</p>
        </div>
      </section>

      <section className="section">
        <div className="octo-container">
          <div className="work-grid">
            {CASE_STUDIES.map((c, i) => (
              <article className="case-card" key={c.slug}>
                <Carousel id={`work-${c.slug}`} radius={0} style={{ aspectRatio: "4 / 3" }}
                  slides={c.photos || [{ src: c.heroImage || `assets/photos/work-${c.slug}.webp`, placeholder: "Customised work, hero photo" }]} />
                <div className="case-card__body">
                  <p className="case-card__brand">{c.brand}</p>
                  <h3 className="case-card__headline">{c.headline ? c.headline : <PH>One-line case study headline. TBD.</PH>}</h3>
                  {c.description && <p className="case-card__desc">{c.description}</p>}
                </div>
              </article>
            ))}
            {/* Closing invitation — keeps the grid deliberate rather than truncated
                while the roster grows. Remove once there are enough real studies. */}
            <article className="case-card case-card--invite">
              <div className="case-card__body">
                <p className="case-card__brand">Next</p>
                <h3 className="case-card__headline">Your packaging could sit here.</h3>
                <p className="case-card__desc">
                  We take on a small number of custom projects at a time, so the work stays
                  considered. Tell us what you're making and we'll tell you honestly whether we're
                  the right fit.
                </p>
                <Button variant="secondary" onClick={() => onNavigate("contact")}>
                  Start a project
                </Button>
              </div>
            </article>
          </div>
        </div>
      </section>

      <ClosingCTA onNavigate={onNavigate} title="Want your brand here next?"
        sub="Tell us what you're making and we'll tell you honestly whether we're the right fit." />
    </div>
  );
}

Object.assign(window, { WorkView });