// Work page — filterable portfolio + case study detail

const { useState: useStateW } = React;

function WorkPage({ t, go }) {
  const [filter, setFilter] = useStateW('All');
  const [active, setActive] = useStateW(null);

  const list = filter === 'All' ? WORK : WORK.filter(w => w.category === filter);

  if (active) {
    const w = WORK.find(x => x.id === active);
    return <CaseStudy w={w} t={t} go={go} onBack={()=>setActive(null)} />;
  }

  return (
    <div className="page-enter">
      <section className="section" style={{background:'var(--noir)', paddingTop:'clamp(96px, 10vw, 140px)', paddingBottom:'clamp(40px, 5vw, 64px)'}}>
        <div className="container">
          <div className="eyebrow mono muted" style={{marginBottom:14}}><span className="bar" /> {t.nav.work}</div>
          <h1 className="display" style={{fontSize:'clamp(56px, 9vw, 140px)', color:'#fff', margin:0}}>
            Built for the<br/>
            <span style={{color:'var(--brand)'}}>front row.</span>
          </h1>
          <p style={{maxWidth:560, marginTop:24, fontSize:18, lineHeight:1.5, color:'var(--muted-inv)'}}>
            A selection of corporate, government and live-entertainment productions. Imagery and project metadata published only with rights clearance.
          </p>
        </div>
      </section>

      <section style={{background:'var(--noir)', padding:'24px var(--pad-x)', borderTop:'1px solid rgba(255,255,255,0.08)', borderBottom:'1px solid rgba(255,255,255,0.08)', position:'sticky', top: 0, zIndex: 20, backdropFilter:'blur(10px)', background:'rgba(11,11,13,0.86)'}}>
        <div style={{display:'flex', gap:8, flexWrap:'wrap', alignItems:'center'}}>
          <span className="mono" style={{color:'var(--muted-inv)', marginInlineEnd:16}}>Filter</span>
          {CATEGORIES.map(c => (
            <button key={c} onClick={()=>setFilter(c)}
              style={{
                padding:'8px 14px', borderRadius:0, fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase',
                background: filter === c ? 'var(--brand)' : 'transparent',
                color: filter === c ? '#fff' : 'var(--text-inv)',
                border: '1px solid ' + (filter === c ? 'var(--brand)' : 'rgba(255,255,255,0.2)'),
                cursor:'default',
              }}>{c}</button>
          ))}
          <span style={{marginInlineStart:'auto', fontSize:13, color:'var(--muted-inv)'}}>{list.length} {list.length === 1 ? 'project' : 'projects'}</span>
        </div>
      </section>

      <section style={{background:'var(--noir)', padding:'48px var(--pad-x) 96px'}}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(12, 1fr)', gap:24}}>
          {list.map((w, i) => {
            // Pattern repeats every 5: [12-wide hero, 7+5 pair, 5+7 pair]
            const mod = i % 5;
            const span = mod === 0 ? 12 : (mod === 1 ? 7 : (mod === 2 ? 5 : (mod === 3 ? 5 : 7)));
            const ratio = span === 12 ? '21/9' : (span === 7 ? '4/3' : '3/4');
            const maxH = span === 12 ? 520 : (span === 7 ? 480 : 520);
            return (
              <button key={w.id} onClick={()=>setActive(w.id)} className="card-hover"
                style={{gridColumn:`span ${span}`, background:'transparent', border:0, padding:0, color:'inherit', textAlign:'left', cursor:'default'}}>
                <div className="img-wrap" style={{position:'relative', aspectRatio: ratio, maxHeight: maxH, overflow:'hidden'}}>
                  <img src={w.image} alt={w.title} className="cover" />
                  {w.isStock && <StockFlag />}
                  <div style={{position:'absolute', top:14, right:14, padding:'5px 10px', border:'1px solid rgba(255,255,255,0.4)', background:'rgba(11,11,13,0.6)', fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase', color:'#fff', backdropFilter:'blur(8px)'}}>
                    {w.category}
                  </div>
                </div>
                <div style={{marginTop:14, display:'flex', alignItems:'baseline', justifyContent:'space-between', gap:12}}>
                  <div>
                    <div className="display" style={{fontSize:'clamp(18px, 1.6vw, 28px)', color:'#fff', lineHeight:1.05}}>{w.title}</div>
                    <div style={{marginTop:8, fontSize:13, color:'var(--muted-inv)'}}>{w.client} · {w.location}</div>
                  </div>
                  <div className="mono" style={{color:'var(--brand)', whiteSpace:'nowrap'}}>{w.year}</div>
                </div>
              </button>
            );
          })}
        </div>
      </section>

      <section style={{background:'var(--ink-2)', padding:'48px var(--pad-x)', borderTop:'1px solid rgba(255,255,255,0.08)'}}>
        <div style={{display:'flex', alignItems:'flex-start', gap:18, maxWidth: 920}}>
          <div style={{flexShrink:0, width:36, height:36, border:'1px solid var(--brand)', color:'var(--brand)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--display)', fontSize:16}}>i</div>
          <p style={{fontSize:13, lineHeight:1.6, color:'var(--muted-inv)', margin:0}}>
            <b style={{color:'#fff'}}>Rights notice.</b> All published imagery is shipped only with photographer credit and client permission. Project metadata (scale, client name, year) appears only where verified. Festival imagery flagged "Stock · placeholder" is sector-appropriate reference and will be swapped for rights-cleared client media before launch.
          </p>
        </div>
      </section>
    </div>
  );
}

function CaseStudy({ w, t, go, onBack }) {
  return (
    <div className="page-enter">
      <section style={{position:'relative', minHeight:'72vh', display:'flex', alignItems:'flex-end', overflow:'hidden', background:'var(--noir)'}}>
        <div style={{position:'absolute', inset:0}}>
          <img src={w.image} alt="" className="cover ken" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}} />
          <div style={{position:'absolute',inset:0, background:'linear-gradient(180deg, rgba(11,11,13,0.4) 0%, rgba(11,11,13,0.96) 100%)'}} />
          {w.isStock && <StockFlag />}
        </div>
        <div className="container" style={{position:'relative', zIndex:1, paddingTop: 120, paddingBottom: 56, width:'100%'}}>
          <button onClick={onBack} className="mono" style={{background:'transparent', border:0, color:'var(--muted-inv)', padding:0, marginBottom:24, cursor:'default'}}>
            ← Back to {t.nav.work}
          </button>
          <div className="mono" style={{color:'var(--brand)', marginBottom:14}}>{w.category}</div>
          <h1 className="display" style={{fontSize:'clamp(48px, 8vw, 120px)', color:'#fff', margin:0}}>{w.title}</h1>
        </div>
      </section>

      <section className="section section-light" style={{paddingTop:'clamp(48px, 5vw, 72px)', paddingBottom: 0}}>
        <div className="container" style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24, paddingBottom:48, borderBottom:'1px solid var(--line)'}}>
          {[['Client', w.client], ['Location', w.location], ['Year', w.year], ['Scale', w.scale]].map(([k,v])=>(
            <div key={k}>
              <div className="mono" style={{color:'var(--muted)', marginBottom:8}}>{k}</div>
              <div style={{fontSize:18, color:'var(--ink)', fontWeight:500}}>{v || '—'}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="section section-light" style={{paddingTop:'clamp(48px, 5vw, 72px)'}}>
        <div className="container" style={{display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:64}}>
          <div>
            <div className="mono" style={{color:'var(--brand)', marginBottom:16}}>Brief</div>
            <p style={{fontSize:17, lineHeight:1.6, color:'var(--ink)', margin:0}}>
              {w.blurb}
            </p>
          </div>
          <div>
            <div className="mono" style={{color:'var(--brand)', marginBottom:16}}>The work</div>
            <p style={{fontSize:17, lineHeight:1.6, color:'var(--ink)', margin:0}}>
              Detailed narrative — concept, production, delivery — appears here once the client clears photographer credits and confirms measurable outcomes. The Done Events case-study template captures category, client/venue, location, year, scale, and credit line per image.
            </p>
            <p style={{marginTop:14, fontSize:13, color:'var(--muted)', fontFamily:'var(--mono)', letterSpacing:'0.1em', textTransform:'uppercase'}}>
              {t.misc.confirm}
            </p>
          </div>
        </div>
      </section>

      <section className="section section-light" style={{paddingTop: 32}}>
        <div className="container" style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:16}}>
          <div className="img-wrap" style={{aspectRatio:'16/9', position:'relative', overflow:'hidden'}}>
            <img src={w.image} className="cover" alt="" />
            {w.isStock && <StockFlag />}
          </div>
          <div style={{display:'grid', gap:16, gridTemplateRows:'1fr 1fr'}}>
            <div className="img-wrap" style={{position:'relative', overflow:'hidden'}}>
              <img src={M.stock.stageRig} className="cover" alt="" />
              <StockFlag />
            </div>
            <div className="img-wrap" style={{position:'relative', overflow:'hidden'}}>
              <img src={M.stock.confAudience} className="cover" alt="" />
              <StockFlag />
            </div>
          </div>
        </div>
      </section>

      <section className="section section-light">
        <div className="container" style={{textAlign:'center'}}>
          <div className="mono" style={{color:'var(--muted)', marginBottom:14}}>Plan something similar</div>
          <h3 className="display" style={{fontSize:'clamp(36px, 5vw, 64px)', color:'var(--ink)', margin:'0 0 28px'}}>
            Let's build the<br/><span style={{color:'var(--brand)'}}>next one together.</span>
          </h3>
          <button onClick={()=>go('contact')} className="btn btn-primary btn-arrow">{t.cta.proposal} <span className="arr">→</span></button>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { WorkPage });