function WorksIndex(props){
  const D=window.MP_DATA;const nav=props.nav;
  const [open,setOpen]=React.useState(null);
  return (
    <section className="k-sec k-pagehead">
      <div className="k-head">
        <M.Heading size="display" font="serif" as="h1" className="k-h1">{T('works.title')[0]}<em>{T('works.title')[1]}</em>{T('works.title')[2]}</M.Heading>
      </div>
      <ul className="k-tiles" style={{marginTop:'var(--space-7)'}}>
        {D.works.map(function(w){const on=open===w.id;return (
          <li key={w.id} className={'k-tile'+(on?' is-open':'')}>
            <a href={'#work/'+w.id} className="k-tile__a" aria-label={w.title+(w.year?', '+w.year:'')}
              onClick={function(e){e.preventDefault();if(matchMedia('(hover: none)').matches&&!on){setOpen(w.id);return;}nav('work',w.id);}}>
              <img src={w.cover} alt={w.coverAlt} loading="lazy" />
              <span className="k-tile__info" aria-hidden="true">
                {w.year?<span className="k-exh__date">{w.year}</span>:null}
                <span className="k-exh__t">{w.title}</span>
                {w.category?<span className="k-exh__sub">{w.category}</span>:null}
                {w.materials?<span className="k-exh__venue">{w.materials}</span>:null}
              </span>
            </a>
          </li>);})}
      </ul>
      <div className="k-widx" aria-labelledby="k-widx-h">
        <div className="hx-sechead"><h2 id="k-widx-h" className="hx-mono hx-mono--ink" style={{margin:0}}>{T('works.index')}</h2><span className="hx-mono">{T('works.count').replace('{n}',D.works.length)}</span></div>
        {D.works.map(function(x,i){return (
          <a key={x.id} className="hx-row" href={'#work/'+x.id} onClick={function(e){e.preventDefault();nav('work',x.id);}}>
            <span className="hx-mono">{String(i+1).padStart(2,'0')}</span>
            <span className="hx-row__t">{x.title}</span>
            <span className="hx-mono hx-row__c">{x.category}</span>
            <span className="hx-mono">{x.year}</span>
          </a>);})}
      </div>
    </section>
  );
}
function WorkDetail(props){
  const D=window.MP_DATA;const nav=props.nav;
  const i=Math.max(0,D.works.findIndex(function(w){return w.id===props.id;}));
  const w=D.works[i];const prev=D.works[(i-1+D.works.length)%D.works.length];const next=D.works[(i+1)%D.works.length];
  const link=function(x){return {title:x.title,image:x.cover,href:'#work/'+x.id,onClick:function(e){e.preventDefault();nav('work',x.id);}};};
  const cover=<M.ImageSequence layout="vertical" items={[{src:w.cover,alt:w.coverAlt,ratio:'4/5',priority:true,index:'Fig. 01',caption:w.title+(w.year?', '+w.year:'')}]} />;
  return (<article>
    <div className="k-sec k-pagehead">
      <M.ProjectIntro crumbs={[{label:T('work.crumb'),href:'#works',onClick:function(e){e.preventDefault();nav('works');}},{label:w.title}]} title={w.title} lead={w.short} authorship={w.pending?undefined:w.authorship} authorshipLabel={w.authorshipLabel}
        meta={[{label:T('work.year'),value:w.year},{label:T('work.category'),value:w.category},{label:T('work.materials'),value:w.materials},{label:T('work.colour'),value:w.colour},{label:T('work.dimensions'),value:w.dimensions}].filter(function(m){return m.value;})} />
    </div>
    {w.dark?<section data-theme="dark" className="k-bgap k-dark"><div className="k-sec">{cover}</div></section>:<div className="k-sec k-bgap">{cover}</div>}
    {w.body&&w.body.length?<div className="k-sec k-bgap"><div className="k-two"><div className="k-two__a"><M.Eyebrow index="—" marker="step">{T('work.about')}</M.Eyebrow></div><div className="k-two__b"><M.Prose>{w.body.map(function(p,j){return <p key={j}>{p}</p>;})}</M.Prose></div></div></div>:null}
    {w.images.length?<div className="k-sec k-gap"><M.ImageSequence layout={w.sequence} items={w.images.map(function(im,j){return Object.assign({index:'Fig. '+String(j+2).padStart(2,'0')},im);})} /></div>:null}
    {w.context?<div className="k-sec k-gap"><div className="k-two"><div className="k-two__a"><M.Eyebrow index="—" marker="step">{T('work.exhibited')}</M.Eyebrow><p style={{marginTop:16,fontFamily:'var(--font-serif)',fontSize:19,lineHeight:1.45,maxWidth:'30ch'}}>{w.context.caption}</p></div><div className="k-two__b"><M.Figure src={w.context.image} alt={w.context.alt} ratio="4/5" caption={T('work.exhView')} /></div></div></div>:null}
    <div className="k-sec k-gap"><div className="k-two"><div className="k-two__a"><M.Eyebrow index="—" marker="step">{T('work.credits')}</M.Eyebrow></div><div className="k-two__b"><M.CreditList items={w.credits} /></div></div></div>
    <div className="k-sec k-gap"><M.ProjectPager prev={link(prev)} next={link(next)} /></div>
  </article>);
}
Object.assign(window,{WorksIndex:WorksIndex,WorkDetail:WorkDetail});