// Project detail page
function Project({ slug, navigate }) {
  const p = PROJECTS.find(x => x.id === slug) || PROJECTS[0];
  const next = PROJECTS[(PROJECTS.findIndex(x => x.id === p.id) + 1) % PROJECTS.length];
  return (
    <main style={{paddingTop:'140px'}}>
      <section className="container" style={{paddingBottom:'64px'}}>
        <Reveal>
          <button onClick={()=>navigate('work')} className="eyebrow" style={{background:'none', border:'none', cursor:'pointer', color:'var(--ink-3)', padding:0, display:'inline-flex', alignItems:'center', gap:'10px'}}>
            ← All projects
          </button>
        </Reveal>
        <div style={{display:'grid', gridTemplateColumns:'1fr auto', gap:'40px', alignItems:'end', marginTop:'48px', borderBottom:'1px solid var(--rule)', paddingBottom:'48px'}}>
          <div>
            <Reveal delay={60}>
              <div className="eyebrow" style={{marginBottom:'16px'}}>{p.type} · {p.year}</div>
              <h1 className="serif" style={{fontSize:'clamp(72px, 9vw, 148px)', lineHeight:0.94, letterSpacing:'-0.03em', margin:0, fontWeight:300}}>
                {p.title}
              </h1>
              <div className="script" style={{fontSize:'clamp(32px, 3vw, 48px)', color:'var(--accent-2)', marginTop:'8px'}}>{p.city.toLowerCase()}</div>
            </Reveal>
          </div>
          <Reveal delay={120}>
            <div style={{display:'grid', gridTemplateColumns:'auto auto', columnGap:'48px', rowGap:'16px'}}>
              <Meta k="Service" v={p.type}/>
              <Meta k="Size" v={p.sqft}/>
              <Meta k="Year" v={p.year}/>
              <Meta k="Result" v={p.sold}/>
            </div>
          </Reveal>
        </div>
      </section>

      <section className="container" style={{paddingBottom:'96px'}}>
        <Reveal>
          <Placeholder label={p.cover.label} tint={p.cover.tint} ratio="16/9" parallax/>
        </Reveal>
      </section>

      <section className="container" style={{paddingBottom:'120px'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.6fr', gap:'80px'}}>
          <Reveal>
            <div className="eyebrow">The story</div>
          </Reveal>
          <Reveal delay={80}>
            <p className="serif" style={{fontSize:'clamp(28px, 2.8vw, 36px)', lineHeight:1.35, margin:0, fontWeight:300, letterSpacing:'-0.01em'}}>
              {p.blurb} The goal, as always, was not to decorate — it was to reveal what
              the house already wanted to be. <em>We listened first, styled second.</em>
            </p>
          </Reveal>
        </div>
      </section>

      {/* Gallery — editorial grid */}
      <section className="container" style={{paddingBottom:'160px'}}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:'24px', gridAutoRows:'160px'}}>
          {p.rooms.map((r, i) => {
            // Varied spans
            const patterns = [
              {c:'span 4', r:'span 3'},
              {c:'span 2', r:'span 2'},
              {c:'span 2', r:'span 3'},
              {c:'span 4', r:'span 2'},
              {c:'span 3', r:'span 2'},
              {c:'span 3', r:'span 3'},
            ];
            const sp = patterns[i % patterns.length];
            return (
              <Reveal key={i} delay={(i%3)*80} style={{gridColumn: sp.c, gridRow: sp.r}}>
                <Placeholder label={r.label} tint={r.tint} ratio="auto" style={{height:'100%'}}/>
              </Reveal>
            );
          })}
        </div>
      </section>

      {/* Pull quote */}
      <section style={{padding:'120px 0', background:'var(--bg-cream)'}}>
        <div className="container" style={{textAlign:'center'}}>
          <Reveal>
            <span className="script" style={{fontSize:'80px', color:'var(--accent-2)', lineHeight:1}}>"</span>
          </Reveal>
          <Reveal delay={80}>
            <p className="serif" style={{fontSize:'clamp(32px, 3.4vw, 48px)', lineHeight:1.28, margin:'0 auto', maxWidth:'900px', fontWeight:300, fontStyle:'italic', textWrap:'pretty'}}>
              It photographed like a magazine and sold like a dream. We couldn't
              have asked for a kinder outcome.
            </p>
          </Reveal>
          <Reveal delay={160}>
            <div className="eyebrow" style={{marginTop:'32px'}}>— Listing agent · {p.city}</div>
          </Reveal>
        </div>
      </section>

      {/* Next project */}
      <section style={{padding:'120px 0 160px'}}>
        <div className="container">
          <Reveal>
            <a href={`#/project/${next.id}`} onClick={(e)=>{e.preventDefault(); navigate(`project/${next.id}`);}} style={{
              display:'grid', gridTemplateColumns:'auto 1fr auto', gap:'40px', alignItems:'center', padding:'48px 0',
              borderTop:'1px solid var(--rule)', borderBottom:'1px solid var(--rule)', cursor:'pointer',
            }}>
              <div className="eyebrow">Next project</div>
              <h3 className="serif" style={{fontSize:'clamp(40px, 5vw, 72px)', margin:0, fontWeight:300, letterSpacing:'-0.02em'}}>
                <em style={{fontWeight:400}}>{next.title}</em>
                <span className="script" style={{fontSize:'0.5em', color:'var(--accent-2)', marginLeft:'16px'}}>{next.city.toLowerCase()}</span>
              </h3>
              <span style={{fontSize:'32px', color:'var(--ink-3)'}}>→</span>
            </a>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Project });