// Case study detail + About + Contact page sections

// ═══════════════════════════════════════════════════════════
// CASE STUDY DETAIL
// ═══════════════════════════════════════════════════════════
function CaseStudy({ slug, content }) {
  const w = WORKS.find(x => x.slug === slug);
  if (!w) return <div style={{padding:128, textAlign:'center'}}>Case study not found.</div>;
  const nextWork = WORKS[(WORKS.findIndex(x => x.slug === slug) + 1) % WORKS.length];
  const { challenge, approach, outcome, pullQuote, quoteAttrib, results } = content;

  return (
    <>
      {/* Hero */}
      <section style={{maxWidth:1440, margin:'0 auto', padding:'96px clamp(24px, 5vw, 96px) 64px'}}>
        <div style={{display:'flex', gap:12, flexWrap:'wrap', marginBottom:40, fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'#7A7874'}}>
          <span>{w.client}</span>
          <span style={{color:'#4A4A50'}}>/</span>
          <span>{w.year}</span>
          <span style={{color:'#4A4A50'}}>/</span>
          <span style={{color:'var(--ldo-accent-live, #C9A86A)'}}>{w.service}</span>
        </div>
        <h1 style={{fontSize:'clamp(56px, 8vw, 128px)', fontWeight:500, letterSpacing:'-0.035em', lineHeight:0.96, margin:0, textWrap:'balance', maxWidth:'14ch', color:'#F4F1EC'}}>{w.title}.</h1>
        <p style={{fontSize:22, lineHeight:1.5, color:'#B6B3AE', margin:'48px 0 0', maxWidth:720, textWrap:'pretty'}}>{w.lede}</p>
      </section>

      {/* Hero image */}
      <section style={{maxWidth:1440, margin:'0 auto', padding:'64px clamp(24px, 5vw, 96px)'}}>
        <div style={{borderRadius:4, overflow:'hidden', aspectRatio:'21/9', background:'#141416'}}>
          <img src={w.img} alt="" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
        </div>
      </section>

      {/* Stats bar */}
      <section style={{maxWidth:1440, margin:'0 auto', padding:'64px clamp(24px, 5vw, 96px) 96px',
                       borderTop:'1px solid rgba(244,241,236,0.08)', borderBottom:'1px solid rgba(244,241,236,0.08)'}}>
        <div style={{display:'grid', gridTemplateColumns:`repeat(${w.stats.length + 1}, 1fr)`, gap:32, padding:'32px 0'}}>
          <div>
            <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'#7A7874', fontWeight:500, marginBottom:14}}>— Engagement</div>
            <div style={{fontSize:18, color:'#F4F1EC', fontWeight:500, letterSpacing:'-0.01em'}}>{w.service}</div>
          </div>
          {w.stats.map((st, j) => (
            <div key={j}>
              <div style={{fontSize:'clamp(40px, 4.5vw, 72px)', fontWeight:500, letterSpacing:'-0.025em', color:'#F4F1EC', lineHeight:1}}>{st.big}</div>
              <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'#7A7874', fontWeight:500, marginTop:14}}>{st.small}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Challenge */}
      <CaseSection num="01" label="Challenge" title={challenge.title} html={challenge.html}/>

      {/* Approach */}
      <CaseSection num="02" label="Approach" title={approach.title} html={approach.html} pillars={approach.pillars}/>

      {/* Pull quote */}
      {pullQuote && (
        <section style={{background:'#141416', padding:'128px 0', margin:'64px 0'}}>
          <div style={{maxWidth:1200, margin:'0 auto', padding:'0 clamp(24px, 5vw, 96px)'}}>
            <div style={{fontSize:60, color:'var(--ldo-accent-live, #C9A86A)', lineHeight:1, marginBottom:24, fontFamily:'Georgia, serif'}}>&ldquo;</div>
            <blockquote style={{fontSize:'clamp(28px, 3.2vw, 48px)', lineHeight:1.25, fontWeight:500, letterSpacing:'-0.02em', color:'#F4F1EC', margin:0, textWrap:'balance'}}>
              {pullQuote}
            </blockquote>
            {quoteAttrib && <div style={{fontSize:13, letterSpacing:'.12em', textTransform:'uppercase', color:'#7A7874', fontWeight:500, marginTop:40}}>— {quoteAttrib}</div>}
          </div>
        </section>
      )}

      {/* Outcome */}
      <CaseSection num="03" label="Outcome" title={outcome.title} html={outcome.html}/>

      {/* Results bar */}
      {results && results.length > 0 && (
        <section style={{maxWidth:1440, margin:'0 auto', padding:'64px clamp(24px, 5vw, 96px) 128px'}}>
          <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--ldo-accent-live, #C9A86A)', fontWeight:500, marginBottom:48}}>— Key results</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))', gap:48, borderTop:'1px solid rgba(244,241,236,0.14)', paddingTop:48}}>
            {results.map((r, i) => (
              <div key={i}>
                <div style={{fontSize:'clamp(44px, 5vw, 80px)', fontWeight:500, letterSpacing:'-0.03em', lineHeight:1, color:'#F4F1EC'}}>{r.stat}</div>
                <div style={{fontSize:15, color:'#B6B3AE', lineHeight:1.5, marginTop:20, maxWidth:260}}>{r.label}</div>
              </div>
            ))}
          </div>
        </section>
      )}

      {/* Next case */}
      <section style={{borderTop:'1px solid rgba(244,241,236,0.08)'}}>
        <a href={`case-${nextWork.slug}.html`} style={{
          display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center',
          maxWidth:1440, margin:'0 auto', padding:'96px clamp(24px, 5vw, 96px)',
          textDecoration:'none', color:'inherit'
        }}>
          <div>
            <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', color:'#7A7874', fontWeight:500, marginBottom:20}}>Next case study</div>
            <h3 style={{fontSize:'clamp(32px, 4vw, 56px)', fontWeight:500, letterSpacing:'-0.025em', lineHeight:1.0, margin:0, color:'#F4F1EC'}}>{nextWork.title}. <span style={{color:'var(--ldo-accent-live, #C9A86A)', fontFamily:"'JetBrains Mono', monospace"}}>→</span></h3>
            <div style={{fontSize:13, color:'#7A7874', marginTop:24}}>{nextWork.client} · {nextWork.year}</div>
          </div>
          <div style={{aspectRatio:'16/10', borderRadius:4, overflow:'hidden'}}>
            <img src={nextWork.img} alt="" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
          </div>
        </a>
      </section>
    </>
  );
}

function CaseSection({ num, label, title, html, pillars }) {
  return (
    <section style={{maxWidth:1440, margin:'0 auto', padding:'96px clamp(24px, 5vw, 96px)'}}>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1.6fr', gap:96, alignItems:'start'}}>
        <div style={{position:'sticky', top:120}}>
          <div style={{fontFamily:"'JetBrains Mono', monospace", fontSize:13, color:'var(--ldo-accent-live, #C9A86A)', marginBottom:24}}>{num} / {label}</div>
          <h2 style={{fontSize:'clamp(32px, 4vw, 56px)', fontWeight:500, letterSpacing:'-0.025em', lineHeight:1.05, margin:0, color:'#F4F1EC', textWrap:'balance', maxWidth:'14ch'}}>{title}</h2>
        </div>
        <div>
          <div className="case-prose" dangerouslySetInnerHTML={{__html: html}}/>
          {pillars && pillars.length > 0 && (
            <div style={{marginTop:56, display:'grid', gap:28}}>
              {pillars.map((p, i) => (
                <div key={i} style={{display:'grid', gridTemplateColumns:'48px 1fr', gap:24, paddingTop:28, borderTop:'1px solid rgba(244,241,236,0.08)'}}>
                  <span style={{fontFamily:"'JetBrains Mono', monospace", fontSize:12, color:'var(--ldo-accent-live, #C9A86A)'}}>{String(i+1).padStart(2,'0')}</span>
                  <div>
                    <h4 style={{fontSize:20, fontWeight:500, letterSpacing:'-0.01em', margin:0, color:'#F4F1EC'}}>{p.title}</h4>
                    <p style={{fontSize:16, lineHeight:1.55, color:'#B6B3AE', margin:'10px 0 0'}}>{p.body}</p>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════
// ABOUT PAGE
// ═══════════════════════════════════════════════════════════
function AboutPage() {
  const principles = [
    { num:'01', title:'Diagnose before prescribing', body:"We don't arrive with answers. We start by understanding the real nature of the problem — its history, its stakeholders, and the systems that hold it in place. Too many engagements leap to solutions before the problem is properly framed." },
    { num:'02', title:'Prototype before committing', body:"Strategy documents don't survive first contact with delivery. We test our thinking in small, safe-to-fail experiments before asking an organisation to commit. Evidence beats rhetoric." },
    { num:'03', title:'Stay for the hard part', body:"Most consulting ends at the recommendation. Ours ends when the change has taken hold. That means working alongside delivery teams, coaching leaders through implementation, and measuring what actually changed." },
    { num:'04', title:'Build capability, not dependency', body:"The best engagements are ones where you need us less over time. We transfer knowledge, coach teams, and leave practices that continue working when we're gone." },
  ];

  return (
    <>
      <PageIntro eyebrow="About" title="A small senior practice for outsized problems." body="Founded to fill the critical gap between strategic intent and operational execution. Liminal Design Office helps senior leaders navigate the ambiguity of transformation with confidence, clarity, and capability."/>

      <section style={{maxWidth:1440, margin:'0 auto', padding:'64px clamp(24px, 5vw, 96px) 0'}}>
        <div style={{aspectRatio:'21/9', borderRadius:4, overflow:'hidden'}}>
          <img src="assets/about-photo.jpeg" alt="" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
        </div>
      </section>

      <section style={{maxWidth:1440, margin:'0 auto', padding:'128px clamp(24px, 5vw, 96px)',
                       display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:96}}>
        <div>
          <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'#7A7874'}}>— The practice</div>
          <h3 style={{fontSize:'clamp(32px, 4vw, 56px)', fontWeight:500, letterSpacing:'-0.025em', lineHeight:1.05, margin:'24px 0 0', color:'#F4F1EC', maxWidth:'11ch', textWrap:'balance'}}>Decades of experience, concentrated.</h3>
        </div>
        <div>
          <p style={{fontSize:20, lineHeight:1.6, color:'#F4F1EC', margin:0, textWrap:'pretty'}}>We bring the experience of decades leading design, transformation, and strategic change in enterprise — now concentrated in a small, senior team. Every engagement is led by a senior practitioner. We don't subcontract the hard thinking to junior consultants.</p>
          <p style={{fontSize:17, lineHeight:1.6, color:'#B6B3AE', margin:'28px 0 0', textWrap:'pretty'}}>Our clients are typically C-suite leaders, boards, and functional heads navigating transformation, governance, and long-horizon strategic questions across financial services, telecoms, media, FMCG, energy, and the public sector.</p>
          <p style={{fontSize:17, lineHeight:1.6, color:'#B6B3AE', margin:'28px 0 0', textWrap:'pretty'}}>We work in the liminal space — the in-between where most advisors are uncomfortable, and where the most valuable work happens.</p>
        </div>
      </section>

      <section style={{background:'#141416', padding:'128px 0'}}>
        <div style={{maxWidth:1440, margin:'0 auto', padding:'0 clamp(24px, 5vw, 96px)'}}>
          <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'var(--ldo-accent-live, #C9A86A)', marginBottom:32}}>— How we think</div>
          <h3 style={{fontSize:'clamp(48px, 6vw, 96px)', fontWeight:500, letterSpacing:'-0.03em', lineHeight:0.98, margin:'0 0 96px', color:'#F4F1EC', maxWidth:'14ch', textWrap:'balance'}}>Four principles, one discipline.</h3>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:64}}>
            {principles.map(p => (
              <div key={p.num} style={{borderTop:'1px solid rgba(244,241,236,0.14)', paddingTop:32}}>
                <div style={{fontFamily:"'JetBrains Mono', monospace", fontSize:13, color:'var(--ldo-accent-live, #C9A86A)', marginBottom:20}}>— {p.num}</div>
                <h4 style={{fontSize:28, fontWeight:500, letterSpacing:'-0.02em', margin:0, color:'#F4F1EC'}}>{p.title}</h4>
                <p style={{fontSize:16, lineHeight:1.6, color:'#B6B3AE', margin:'16px 0 0', maxWidth:480}}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{maxWidth:1440, margin:'0 auto', padding:'128px clamp(24px, 5vw, 96px)'}}>
        <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'#7A7874', marginBottom:32}}>— Where we've worked</div>
        <div style={{display:'flex', flexWrap:'wrap', gap:'32px 64px', paddingTop:32, borderTop:'1px solid rgba(244,241,236,0.08)'}}>
          {['Virgin Media', 'Lloyds Banking Group', 'BP', 'Sainsbury\'s', 'Unilever', 'BT', 'XR', 'UK Insurer (PE-Backed)', 'GSK/Haleon', 'Colgate-Palmolive', 'TUI', 'Natwest'].map(c => (
            <div key={c} style={{fontSize:22, fontWeight:500, letterSpacing:'-0.01em', color:'#F4F1EC'}}>{c}</div>
          ))}
        </div>
      </section>
    </>
  );
}

// ═══════════════════════════════════════════════════════════
// CONTACT PAGE
// ═══════════════════════════════════════════════════════════
function ContactPage() {
  return (
    <>
      <section style={{
        maxWidth:1440, margin:'0 auto',
        padding:'128px clamp(24px, 5vw, 96px) 96px'
      }}>
        <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'var(--ldo-accent-live, #C9A86A)', marginBottom:32}}>— Contact</div>
        <h1 style={{fontSize:'clamp(56px, 9vw, 144px)', fontWeight:500, letterSpacing:'-0.035em', lineHeight:0.94, margin:0, textWrap:'balance', maxWidth:'14ch', color:'#F4F1EC'}}>Start with a conversation.</h1>
        <p style={{fontSize:22, lineHeight:1.5, color:'#B6B3AE', margin:'48px 0 0', maxWidth:720}}>Share the context you're sitting in and we'll tell you — honestly — whether we're the right people for it and what a first engagement could look like.</p>
      </section>

      <section style={{maxWidth:1440, margin:'0 auto', padding:'64px clamp(24px, 5vw, 96px) 128px',
                       display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:96,
                       borderTop:'1px solid rgba(244,241,236,0.08)'}}>
        <div style={{paddingTop:64}}>
          <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'#7A7874', marginBottom:28}}>— Book a call</div>
          <a href="mailto:hello@liminaldesignoffice.com" style={{
            fontSize:'clamp(32px, 3.6vw, 52px)', fontWeight:500, letterSpacing:'-0.02em', color:'#F4F1EC',
            textDecoration:'none', display:'inline-block', lineHeight:1.1, borderBottom:'1px solid rgba(244,241,236,0.22)', paddingBottom:12
          }}>hello@liminaldesignoffice.com</a>
          <p style={{fontSize:16, lineHeight:1.6, color:'#B6B3AE', margin:'32px 0 40px', maxWidth:480}}>
            Email is best. Tell us about your organisation and the situation you're navigating. We typically reply within two working days.
          </p>
          <a href="https://calendly.com/liminaldesignoffice/liminal-introductions" style={{
            background:'#F4F1EC', color:'#0E0E0F', borderRadius:999, padding:'16px 28px', fontSize:15, fontWeight:500,
            textDecoration:'none', display:'inline-flex', gap:10, alignItems:'center'
          }}>Book directly <span style={{fontFamily:"'JetBrains Mono', monospace"}}>→</span></a>
        </div>

        <div style={{paddingTop:64, display:'flex', flexDirection:'column', gap:48}}>
          <div>
            <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'#7A7874', marginBottom:14}}>— Office</div>
            <div style={{fontSize:18, color:'#F4F1EC', lineHeight:1.6}}>London, United Kingdom</div>
            <div style={{fontSize:18, color:'#F4F1EC', lineHeight:1.6}}>Edinburgh, United Kingdom</div>
            <div style={{fontSize:15, color:'#B6B3AE', lineHeight:1.6, marginTop:6}}>Available for engagements internationally.</div>
          </div>
          <div>
            <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'#7A7874', marginBottom:14}}>— Press & speaking</div>
            <a href="mailto:press@liminaldesignoffice.com" style={{fontSize:18, color:'#F4F1EC'}}>press@liminaldesignoffice.com</a>
          </div>
          <div>
            <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'#7A7874', marginBottom:14}}>— Elsewhere</div>
            <div style={{display:'flex', flexDirection:'column', gap:10}}>
              <a href="https://www.linkedin.com/company/liminal-design-office/" style={{fontSize:16, color:'#F4F1EC'}}>LinkedIn <span style={{color:'#7A7874', marginLeft:4}}>↗</span></a>
              <a href="https://www.linkedin.com/company/liminal-design-office/posts/?feedView=articles" style={{fontSize:16, color:'#F4F1EC'}}>Writing <span style={{color:'#7A7874', marginLeft:4}}>↗</span></a>
            </div>
          </div>
        </div>
      </section>

      <section style={{maxWidth:1440, margin:'0 auto', padding:'0 clamp(24px, 5vw, 96px) 128px'}}>
        <div style={{fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:500, color:'#7A7874', marginBottom:32, paddingTop:64, borderTop:'1px solid rgba(244,241,236,0.08)'}}>— What to include</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:48}}>
          {[
            { h:'Your context', b:'What kind of organisation, and what situation is prompting the outreach. The more specific, the better.' },
            { h:'The question', b:'Not the solution you think you need. The underlying question you\'re grappling with.' },
            { h:'Horizons & constraints', b:'Timeframes, budgets, politics. We\'d rather know early whether we\'re the right fit.' },
          ].map((c, i) => (
            <div key={i}>
              <div style={{fontFamily:"'JetBrains Mono', monospace", fontSize:12, color:'var(--ldo-accent-live, #C9A86A)', marginBottom:14}}>0{i+1}</div>
              <h4 style={{fontSize:22, fontWeight:500, letterSpacing:'-0.01em', margin:0, color:'#F4F1EC'}}>{c.h}</h4>
              <p style={{fontSize:15, lineHeight:1.6, color:'#B6B3AE', margin:'14px 0 0'}}>{c.b}</p>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}

Object.assign(window, { CaseStudy, AboutPage, ContactPage });
