/* ============================================================
   Digital Odyssey, Work / Case Studies page
   ============================================================ */

const FILTERS = ['All', 'Healthcare', 'Professional Photography', 'Child Care', 'Fire Safety & ELV Systems', 'B2B Tech & Robotics'];

function CaseModal({ c, onClose, onNav }) {
  React.useEffect(()=>{
    if(!c) return;
    const onKey = e => { if(e.key==='Escape') onClose(); if(e.key==='ArrowRight') onNav(1); if(e.key==='ArrowLeft') onNav(-1); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow='hidden';
    return ()=>{ window.removeEventListener('keydown', onKey); document.body.style.overflow=''; };
  }, [c]);
  if (!c) return null;
  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, zIndex:200, background:'rgba(4,8,20,.7)', backdropFilter:'blur(8px)', display:'flex', alignItems:'flex-start', justifyContent:'center', overflowY:'auto', padding:'40px 20px' }}>
      <div onClick={e=>e.stopPropagation()} style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--radius-xl)', maxWidth:880, width:'100%', overflow:'hidden', boxShadow:'0 40px 100px rgba(0,0,0,.5)' }}>
        <div style={{ position:'relative' }}>
          <CaseCover c={c} height={240} />
          <button onClick={onClose} aria-label="Close" style={{ position:'absolute', top:16, right:16, width:42, height:42, borderRadius:9999, border:'none', cursor:'pointer', background:'rgba(6,10,24,.55)', backdropFilter:'blur(6px)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Icon name="x" size={20} color="#fff" />
          </button>
        </div>
        <div style={{ padding:'36px clamp(24px,5vw,48px) 44px' }}>
          <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14, flexWrap:'wrap' }}>
            <span className="eyebrow" style={{ color:'var(--cyan-deep)' }}>{c.industry}</span>
            <span style={{ color:'var(--text-3)' }}>·</span>
            <span className="do-caption">{c.services.join(' · ')}</span>
          </div>
          <h2 className="do-display-sm" style={{ margin:'0 0 8px' }}>{c.client}</h2>
          <p className="do-body-lg" style={{ margin:'0 0 32px' }}>{c.tagline || `${c.summary}.`}</p>

          <div className="grid-3" style={{ background:'var(--surface-inset)', borderRadius:'var(--radius-lg)', padding:'28px 24px', margin:'0 0 36px' }}>
            {c.metrics.map(([v,l])=>(
              <div key={l} style={{ textAlign:'center' }}>
                <div style={{ fontFamily:'var(--font-mono)', fontWeight:500, fontSize:'clamp(28px,4vw,40px)', color: c.accent||'var(--cyan-deep)', letterSpacing:'-1px' }}>{v}</div>
                <div className="do-body-sm" style={{ marginTop:4 }}>{l}</div>
              </div>
            ))}
          </div>

          {[['Challenge', c.challenge, 'target'],['Strategy', c.strategy, 'compass'],['Execution', `We ran ${c.services.join(', ')} as a single program, shared tracking, weekly optimization, and one dashboard the whole team could see.`, 'rocket'],['Result', `${c.metrics[0][0]} ${c.metrics[0][1].toLowerCase()} and a growth engine the team now trusts to scale.`, 'trending-up']].map(([t,b,icon])=>(
            <div key={t} style={{ display:'flex', gap:18, padding:'18px 0', borderTop:'1px solid var(--border)' }}>
              <div style={{ width:42, height:42, borderRadius:12, background:'var(--chip-bg)', border:'1px solid var(--border)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <Icon name={icon} size={19} color="var(--cyan-deep)" />
              </div>
              <div>
                <div className="do-title-sm" style={{ marginBottom:6 }}>{t}</div>
                <p className="do-body-md" style={{ margin:0 }}>{b}</p>
              </div>
            </div>
          ))}

          <div style={{ display:'flex', gap:12, marginTop:32, flexWrap:'wrap' }}>
            <Button href="contact.html" variant="cyan" icon="arrow-right">Start a project like this</Button>
            <Button onClick={()=>onNav(1)} variant="outline" icon="arrow-right">Next case</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

function WorkApp() {
  useReveal();
  const [filter, setFilter] = React.useState('All');
  const [active, setActive] = React.useState(null);
  React.useEffect(()=>{
    const id = window.location.hash.replace('#','');
    if (id) { const found = CASES.find(c=>c.id===id); if(found) setActive(found); }
  }, []);
  const shown = filter==='All' ? CASES : CASES.filter(c=>c.industry===filter);
  const navCase = (dir) => {
    const idx = CASES.findIndex(c=>c.id===active.id);
    setActive(CASES[(idx+dir+CASES.length)%CASES.length]);
  };

  return (
    <>
      <TopNav active="work" />
      <main>
        <PageHero eyebrow="Selected work" title="Proof, not promises."
          body="Every engagement is measured. Here is a sample of what that looks like, across healthcare, retail and professional services.">
          <div style={{ display:'flex', gap:'24px 40px', flexWrap:'wrap' }}>
            {[['4.6x','Avg ROAS'],['312%','Median lead growth'],['120+','Brands scaled']].map(([v,l])=>(
              <div key={l}>
                <div style={{ fontFamily:'var(--font-mono)', fontWeight:500, fontSize:32, color:'var(--cyan)', letterSpacing:'-1px' }}>{v}</div>
                <div style={{ fontFamily:'var(--font-sans)', fontSize:13, color:'rgba(255,255,255,.6)' }}>{l}</div>
              </div>
            ))}
          </div>
        </PageHero>

        <section className="section">
          <Container>
            <div className="reveal" style={{ display:'flex', alignItems:'center', gap:12, flexWrap:'wrap', marginBottom:40 }}>
              <Icon name="filter" size={18} color="var(--text-3)" />
              {FILTERS.map(f=>(
                <button key={f} onClick={()=>setFilter(f)}
                  style={{ fontFamily:'var(--font-sans)', fontWeight:600, fontSize:14, padding:'10px 18px', borderRadius:'var(--radius-pill)', cursor:'pointer',
                    border:'1px solid', borderColor: filter===f?'transparent':'var(--border)',
                    background: filter===f?'var(--grad-energy)':'transparent', color: filter===f?'#04122b':'var(--text-2)', transition:'all .18s ease' }}>
                  {f}
                </button>
              ))}
            </div>
            <div className="grid-3" key={filter}>
              {shown.map((c,i)=><CaseCard key={c.id} c={c} index={i} onOpen={setActive} />)}
            </div>
          </Container>
        </section>

        <section className="section" style={{ background:'var(--page-soft)' }}>
          <Container>
            <SectionHead eyebrow="Client voices" title="The results, in their words." align="center" />
            <TestimonialCarousel items={TESTIMONIALS} />
          </Container>
        </section>

        <CtaBand title="Your case study is the next one." body="Bring us a goal and a deadline. We'll bring the strategy, the creative and the receipts." />
      </main>
      <Footer />
      <CaseModal c={active} onClose={()=>setActive(null)} onNav={navCase} />
    </>
  );
}

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