// THINKLAB — page components (v2 with real data)

const { useState: _us, useEffect: _ue, useRef: _ur, useMemo: _um } = React;

// —— HOME ———————————————————————————————————————————————
function HomePage({ onNav, onProject }) {
  const projects = window.TLAB_PROJECTS;
  const heroIdx = [0, 1, 11, 12, 22];
  const heroSlides = heroIdx.map(i => projects[i]).filter(Boolean);
  const [hi, setHi] = _us(0);
  _ue(() => {
    const t = setInterval(() => setHi(i => (i+1) % heroSlides.length), 6000);
    return () => clearInterval(t);
  }, [heroSlides.length]);

  const idxList = projects.slice(0, 8);
  const [active, setActive] = _us(0);

  return (
    <div className="tl-page">
      <section className="tl-hero">
        <div className="bg">
          {heroSlides.map((p,i) => (
            <div key={p.id} className={`slide ${i===hi?'on':''}`}>
              <img src={p.img} alt={p.en} />
            </div>
          ))}
        </div>
        <div className="frame">
          <div className="topline">
            <span>2026 · SELECTED WORK</span>
            <span className="div"></span>
            <span>台灣 · 上海</span>
          </div>
          <div className="stage">
            <div>
              <div style={{fontFamily:'var(--tl-font-mono)',fontSize:11,letterSpacing:'.18em',opacity:.78,marginBottom:24,textTransform:'uppercase'}}>
                Featured · 0{hi+1} / 0{heroSlides.length}
              </div>
              <h1>
                <span>{heroSlides[hi].en}</span>
                {heroSlides[hi].cjk && <span className="cjk">{heroSlides[hi].cjk}</span>}
              </h1>
            </div>
            <div className="credit">
              <b>Project</b>
              {heroSlides[hi].location} · {heroSlides[hi].year}<br/>
              {heroSlides[hi].program} · {heroSlides[hi].programCjk}<br/>
              {heroSlides[hi].status} {heroSlides[hi].statusCjk}
              <div style={{marginTop:18,paddingTop:14,borderTop:'1px solid rgba(255,255,255,.3)'}}>
                <a onClick={() => onProject(heroSlides[hi].id)} style={{cursor:'pointer',fontSize:11,letterSpacing:'.22em',textTransform:'uppercase',color:'#fff',borderBottom:'1px solid rgba(255,255,255,.55)',paddingBottom:4}}>View project →</a>
              </div>
            </div>
          </div>
          <div className="footline">
            <div className="counter"><b>0{hi+1}</b> / 0{heroSlides.length}</div>
            <div className="scroll-cue">SCROLL TO EXPLORE&nbsp;·&nbsp;↓</div>
            <div></div>
            <div className="arrows">
              <button onClick={() => setHi(i => (i-1+heroSlides.length)%heroSlides.length)}>←</button>
              <button onClick={() => setHi(i => (i+1)%heroSlides.length)}>→</button>
            </div>
          </div>
        </div>
      </section>

      <Reveal as="section" className="tl-statement">
        <div className="num">§ 00 · ETHOS</div>
        <div className="body">
          We design <em>between</em> the global and the local — buildings that arrive as foreigners and stay as neighbours.
          <span className="cjk">建築之於我們，是於全球視野與在地經驗之間，靜靜安放的一封來信。</span>
        </div>
        <div className="meta">
          <b>Practice</b> Architecture<br/>
          <b>Offices</b> 高雄 · 屏東 · 上海<br/>
          <b>Disciplines</b> 06<br/>
          <b>Projects</b> 30 selected<br/>
          <b>Awards</b> 03 international
        </div>
      </Reveal>

      <section className="tl-index">
        <div className="head">
          <div className="tl-secrule">
            <span className="num">§ 01 · SELECTED WORK</span>
            <h2>Index<span className="cjk">作品索引</span></h2>
            <span className="right">Eight projects from thirty selected — hover any line to preview, click to enter.</span>
          </div>
        </div>
        <div className="list">
          {idxList.map((p,i) => (
            <div key={p.id} className={`row ${i===active?'is-active':''}`}
                 onMouseEnter={() => setActive(i)}
                 onClick={() => onProject(p.id)}>
              <span className="no">{p.no}</span>
              <span className="name">
                {p.en}{p.cjk && <span className="cjk">{p.cjk}</span>}
              </span>
              <span className="place">{p.location} · {p.year}</span>
              <span className="arr">→</span>
            </div>
          ))}
        </div>
        <aside className="preview">
          {idxList.map((p,i) => (
            <div key={p.id} className={`layer ${i===active?'on':''}`}>
              <img src={p.img} alt={p.en} />
            </div>
          ))}
          <div className="pmeta">
            <span>{idxList[active].cat} · {idxList[active].catCjk}</span>
            <span>{idxList[active].status}</span>
          </div>
        </aside>
      </section>

      <Reveal as="section" className="tl-disc">
        {window.TLAB_DISCIPLINES.map((d,i) => (
          <div key={d.en} className="cell" onClick={() => onNav('projects')}>
            <div className="top">
              <span className="num">§ 02·{String(i+1).padStart(2,'0')}</span>
              <span className="count">{String(d.count).padStart(2,'0')} works</span>
            </div>
            <div className="name">{d.en}<span className="cjk">{d.cjk}</span></div>
          </div>
        ))}
      </Reveal>

      <Reveal as="section" className="tl-awards">
        <div className="tl-secrule">
          <span className="num">§ 03 · RECOGNITION</span>
          <h2>Awards<span className="cjk">獎項</span></h2>
          <span className="right">2024 — TRAA, ADA, and the National Golden Award for Architecture.</span>
        </div>
        <div className="list">
          {window.TLAB_AWARDS.map((a,i) => (
            <div className="row" key={i}>
              <span className="yr">{a.year}</span>
              <span className="nm">{a.name}<span className="cjk">{a.cjk}</span></span>
              <span className="ct">{a.cat}</span>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  );
}

// —— PROJECTS INDEX —————————————————————————————————————
function ProjectsPage({ onProject, density }) {
  const all = window.TLAB_PROJECTS;
  const cats = ['All', 'Architecture', 'Built', 'Concept', 'Award', 'Ground-Up', 'Interior'];
  const [cat, setCat] = _us('All');
  const [view, setView] = _us('grid');
  const list = cat === 'All' ? all : all.filter(p => (p.cats || []).includes(cat));

  return (
    <div className="tl-page">
      <div style={{height:80}}></div>
      <div className="tl-pgrid" style={{paddingTop:64}}>
        <div className="head">
          <div className="tl-secrule">
            <span className="num">§ PROJECTS · 作品</span>
            <h2>Selected Work<span className="cjk">作品集</span></h2>
            <span className="right">Thirty selected projects across architecture, concept, interior, and built work.</span>
          </div>
        </div>
        <div className="filter">
          <span className="lbl">Filter · 篩選</span>
          {cats.map(c => (
            <button key={c} className={`chip ${cat===c?'on':''}`} onClick={() => setCat(c)}>
              {c === 'All' ? 'All / 全部' : c}
            </button>
          ))}
          <div className="view">
            <button className={view==='grid'?'on':''} onClick={()=>setView('grid')}>Grid</button>
            <button className={view==='list'?'on':''} onClick={()=>setView('list')}>Index</button>
          </div>
        </div>
      </div>
      <div className={`tl-pgrid ${density==='compact'?'dense':''} ${view==='list'?'list-view':''}`} style={{paddingTop:0}}>
        {list.map(p => (
          <a key={p.id} className="card" onClick={() => onProject(p.id)}>
            <div className="img">
              <span className="num">{p.no} / {String(all.length).padStart(2,'0')}</span>
              <span className="stamp">{p.status}</span>
              <img src={p.img} alt={p.en} />
            </div>
            <div className="body">
              <div className="cat">{p.cat} · {p.catCjk}</div>
              <div className="ttl">{p.en}{p.cjk && <span className="cjk">{p.cjk}</span>}</div>
              <div className="yr">{p.location?.split(',')[0].toUpperCase()} · {p.year}</div>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}

// —— PROJECT DETAIL ————————————————————————————————————
function ProjectDetail({ id, onProject, onNav }) {
  const all = window.TLAB_PROJECTS;
  const p = all.find(x => x.id === id) || all[0];
  const idx = all.findIndex(x => x.id === p.id);
  const next = all[(idx+1) % all.length];
  const prev = all[(idx-1+all.length) % all.length];
  const others = all.filter(x => x.id !== p.id).slice(0,3).map(x => x.img);

  return (
    <div className="tl-page">
      <section className="tl-detail-hero">
        <img src={p.img} alt={p.en} />
        <div className="frame">
          <div className="breadcrumb">
            <a onClick={() => onNav('projects')}>Projects</a> &nbsp;/&nbsp; {p.cat} &nbsp;/&nbsp; {p.no}
          </div>
          <h1>
            {p.en}{p.cjk && <span className="cjk">{p.cjk}</span>}
          </h1>
          <div className="meta-row">
            <div><div className="key">Location 地點</div><div className="val">{p.location} {p.locationCjk}</div></div>
            <div><div className="key">Program 功能</div><div className="val">{p.program} {p.programCjk}</div></div>
            <div><div className="key">Year 年份</div><div className="val">{p.year}</div></div>
            <div><div className="key">Status 狀態</div><div className="val">{p.status} {p.statusCjk}</div></div>
          </div>
        </div>
      </section>

      <Reveal as="section" className="tl-detail-body">
        <div className="num">§ NOTE</div>
        <div className="lede">
          A {p.program?.toLowerCase()} by THINKLAB — composed in the language of climate, light and ground.
          <span className="cjk">由之物建築事務所所作之{p.programCjk || '建築'}——以氣候、光線與土地的語言所譜成。</span>
        </div>
        <div className="meta-block">
          <div className="row"><b>Studio</b><span>THINKLAB · 之物建築</span></div>
          <div className="row"><b>Location</b><span>{p.location} {p.locationCjk}</span></div>
          <div className="row"><b>Year</b><span>{p.year}</span></div>
          <div className="row"><b>Status</b><span>{p.status} {p.statusCjk}</span></div>
          <div className="row"><b>Program</b><span>{p.program} {p.programCjk}</span></div>
          <div className="row"><b>Tags</b><span>{(p.cats||[]).join(' · ')}</span></div>
        </div>
      </Reveal>

      <Reveal as="section" className="tl-detail-gallery">
        <figure className="g-l"><img src={others[0]} alt="" /></figure>
        <div className="g-r">
          <div><img src={others[1]} alt="" /></div>
          <div><img src={others[2]} alt="" /></div>
        </div>
      </Reveal>

      <Reveal as="section" className="tl-detail-fullbleed">
        <img src={p.img} alt={p.en} />
      </Reveal>

      <nav className="tl-detail-next">
        <a onClick={() => onProject(prev.id)}>
          <div className="key">← Previous · {prev.no}</div>
          <div className="ttl">{prev.en}{prev.cjk && <span className="cjk">{prev.cjk}</span>}</div>
        </a>
        <a className="right" onClick={() => onProject(next.id)} style={{textAlign:'right'}}>
          <div className="key">Next · {next.no} →</div>
          <div className="ttl">{next.en}{next.cjk && <span className="cjk">{next.cjk}</span>}</div>
        </a>
      </nav>
    </div>
  );
}

// —— FIRM ————————————————————————————————————————————————
function FirmPage() {
  return (
    <div className="tl-page">
      <div style={{height:80}}></div>
      <header className="tl-firm-hero">
        <div className="num">§ FIRM · 之物</div>
        <h1>THINKLAB<span className="cjk">之物建築事務所</span></h1>
        <div className="meta">
          <b style={{color:'var(--tl-ink)'}}>Practice</b><br/>
          Kaohsiung &nbsp;·&nbsp; 高雄<br/>
          Pingtung &nbsp;·&nbsp; 屏東<br/>
          Shanghai &nbsp;·&nbsp; 上海
        </div>
      </header>

      <Reveal as="section" className="tl-firm-essay">
        <div className="num">§ ETHOS</div>
        <div className="col">
          <p>THINKLAB is an award-winning architectural practice composed of architects, designers and inventors working across architecture, urban complexes, product design, art, R&amp;D and real-estate development. The studio operates between Taiwan and China.</p>
          <p>Our work merges international innovation with the experience of the local market — using the latest technology to create distinctive aesthetics and humanistic content. The innovations across many of our projects have been recognised by international and regional juries — the Taiwan Residential Architecture Award (TRAA), the ADA Award for Emerging Architects, and the National Golden Award for Architecture.</p>
          <p>The work is concrete, material, and slow. We build with brick, concrete, basalt, timber. We believe the most contemporary architecture is the one that, fifty years from now, looks as if it had always been there.</p>
        </div>
        <div className="col cjk-col">
          <p>之物建築 THINKLAB Architects 是一家屢獲殊榮的設計公司，由建築師、設計師與發明家所組成，致力於先進建築、城市綜合體、產品設計、藝術品、技術研發與地產開發等領域。事務所於台灣與上海運作。</p>
          <p>我們的設計旨在融合國際創新視野與在地市場經驗，以最新科技創造獨特的美學與人文內涵。許多專案的創新獲得了第九屆台灣住宅建築獎（TRAA）、第七屆 ADA 新銳建築獎、以及第二十五屆國家建築金獎等國內外的肯定。</p>
          <p>我們以磚、混凝土、玄武岩與木為材，相信最當代的建築，是五十年後仍像本來就在那裡的那一種。</p>
        </div>
      </Reveal>

      <Reveal as="section" className="tl-firm-team" style={{paddingTop:80}}>
        <div className="tl-secrule">
          <span className="num">§ AWARDS · 獎項</span>
          <h2>Recognition<span className="cjk">獲獎</span></h2>
          <span className="right">Selected international &amp; regional honours from 2024.</span>
        </div>
        <div style={{borderTop:'1px solid var(--tl-ink)', marginTop:48}}>
          {window.TLAB_AWARDS.map((a,i) => (
            <div key={i} style={{display:'grid', gridTemplateColumns:'120px 1fr auto', gap:32, padding:'28px 0', borderBottom:'1px solid var(--tl-line)', alignItems:'baseline'}}>
              <span style={{fontFamily:'var(--tl-font-mono)', fontSize:14}}>{a.year}</span>
              <span style={{fontSize:22}}>{a.name}<span className="cjk" style={{color:'var(--tl-stone)', fontSize:'.65em', marginLeft:14}}>{a.cjk}</span></span>
              <span style={{fontFamily:'var(--tl-font-mono)', fontSize:11, color:'var(--tl-stone)', letterSpacing:'.12em', textTransform:'uppercase'}}>{a.cat}</span>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  );
}

// —— CONTACT ————————————————————————————————————————————
function ContactPage() {
  return (
    <div className="tl-page">
      <div style={{height:80}}></div>
      <section className="tl-contact">
        <div className="num">§ CONTACT · 聯繫</div>
        <div>
          <h1>Hello.<span className="cjk">您好。</span></h1>
          <p className="lede">For new commissions, press, or speaking enquiries — write to the studio or reach the office nearest to you.</p>
          <div style={{marginTop:48,fontFamily:'var(--tl-font-mono)',fontSize:13,letterSpacing:'.06em',lineHeight:1.9,color:'var(--tl-graphite)'}}>
            <b style={{color:'var(--tl-ink)'}}>STUDIO</b><br/>
            <a href="mailto:LK@tlabarc.com" style={{borderBottom:'1px solid var(--tl-line)',paddingBottom:2}}>LK@tlabarc.com</a><br/>
            <a href="mailto:tzuyiarch@gmail.com" style={{borderBottom:'1px solid var(--tl-line)',paddingBottom:2}}>tzuyiarch@gmail.com</a>
          </div>
        </div>
        <div className="offices">
          <div className="o">
            <h3>Pingtung<span className="cjk">屏東</span></h3>
            <p><b>Address</b> 屏東縣屏東市公益街 37 號<br/>No. 37, Gongyi Street, Pingtung City</p>
          </div>
          <div className="o">
            <h3>Shanghai<span className="cjk">上海</span></h3>
            <p><b>Address</b> 上海市長寧區鎮寧路 9 號<br/>9 Zhen Ning Lu, Changning Rd., Shanghai</p>
          </div>
          <div className="o">
            <h3>New Jersey<span className="cjk">紐澤西</span></h3>
            <p><b>Address</b> 280 Marin Blvd<br/>Jersey City, NJ · USA</p>
          </div>
        </div>
      </section>
    </div>
  );
}

// —— LAB (real entries from tlabarc.com /lab/) —————————————
function LabPage({ onProject }) {
  // 10 real lab entries — exact match to live tlabarc.com /lab/ ALL view
  const labEntries = [
    { id:'30573', no:'L·10', en:'THINKLAB Skilltree', cjk:'之物技能樹', kind:'DATA · RESEARCH', year:'2025', tag:'Internal tool',
      img:'assets/lab/30573.jpg' },
    { id:'30500', no:'L·09', en:'UBIKESCAPE', cjk:'蔓地景', kind:'DATA · URBAN', year:'2024', tag:'Urban research',
      img:'assets/lab/30500.jpg' },
    { id:'30366', no:'L·08', en:'Pre-design Yield Analysis · Rongtian Lot', cjk:'前期坪效分析 · 榮田段', kind:'REAL ESTATE', year:'2025', tag:'基本設計研究',
      img:'assets/lab/30366.jpg' },
    { id:'30283', no:'L·07', en:'Online Model', cjk:'線上模型', kind:'REAL ESTATE', year:'2025', tag:'基本設計研究',
      img:'assets/lab/30283.jpg' },
    { id:'30272', no:'L·06', en:'Pre-design Yield Analysis', cjk:'前期坪效分析', kind:'REAL ESTATE', year:'2025', tag:'基本設計研究',
      img:'assets/lab/30272.jpg' },
    { id:'30252', no:'L·05', en:'Concrete Body Analysis', cjk:'混凝土軀體分析', kind:'REAL ESTATE', year:'2025', tag:'基本設計研究',
      img:'assets/lab/30252.jpg' },
    { id:'30233', no:'L·04', en:'REAL ESTATE PROJECT', cjk:'地產項目', kind:'REAL ESTATE', year:'2025', tag:'基本設計研究',
      img:'assets/lab/30233.jpg' },
    { id:'30077', no:'L·03', en:'PROJECT DESIGN RESEARCH', cjk:'設計研究', kind:'RESEARCH', year:'2025', tag:'基本設計研究',
      img:'assets/lab/30077.jpg' },
    { id:'29995', no:'L·02', en:'Mapping of Real Estate · Chaozhou', cjk:'潮州地產地圖 · 2024/12/31', kind:'DATA · URBAN', year:'2024', tag:'Urban research',
      img:'assets/lab/29995.jpg' },
    { id:'27145', no:'L·01', en:'Tensioned Form-works for Concrete Shell', cjk:'張力式混凝土殼模板', kind:'COMPUTATION · CONSTRUCTION', year:'2020', tag:'Material research',
      img:'assets/lab/27145.jpg' },
  ];

  return (
    <div className="tl-page tl-lab">
      <div style={{height:80}}></div>
      <header className="tl-firm-hero">
        <div className="num">§ LAB · 實驗室</div>
        <h1>The Lab<span className="cjk">研發部</span></h1>
        <div className="meta">
          <b style={{color:'var(--tl-ink)'}}>10 ENTRIES</b><br/>2020 — 2025<br/>Studio research arm
        </div>
      </header>

      <section className="tl-firm-essay" style={{paddingBottom:80}}>
        <div className="num">§ ABOUT</div>
        <div className="col">
          <p style={{fontSize:22,fontWeight:300,lineHeight:1.5,color:'var(--tl-ink)'}}>
            The Lab is the studio's research arm — methods for reading a site, computing a pro-forma, casting a shell. Real-estate computation, urban data, structural research, and one fabricated patent.
          </p>
        </div>
        <div className="col cjk-col">
          <p>實驗室是事務所的研究分支——讀基地、算坪效、灌殼。地產運算、都市資料、結構研究，與一項已獲專利的製造工法。</p>
        </div>
      </section>

      <section className="tl-pgrid" style={{paddingTop:0}}>
        {labEntries.map(e => (
          <a key={e.id} className="card">
            <div className="img">
              <span className="num">{e.no}</span>
              <span className="stamp">{e.kind}</span>
              <img src={e.img} alt={e.en} />
            </div>
            <div className="body">
              <div className="cat">{e.tag}</div>
              <div className="ttl">{e.en}<span className="cjk">{e.cjk}</span></div>
              <div className="yr">{e.year}</div>
            </div>
          </a>
        ))}
      </section>

      <section className="tl-lab-foot">
        <div className="num">§ NOTE</div>
        <p>Every Lab entry begins as an internal memo. We publish those that survive a project.</p>
      </section>
    </div>
  );
}

// —— ART (Palace jewelry — real content from tlabarc.com /palace-2/) ——
function ArtPage({ onProject }) {
  // Palace is a single conceptual project: applying architectural spatial aesthetics to jewelry design
  const palaceImages = [
    'assets/art/palace_1.jpg',
    'assets/art/palace_2.jpg',
    'assets/art/palace_3.jpg',
    'assets/art/palace_4.jpg',
  ];

  return (
    <div className="tl-page tl-art">
      <div style={{height:80}}></div>
      <header className="tl-firm-hero">
        <div className="num">§ ART · 藝術</div>
        <h1>PALACE<span className="cjk">宮殿珠寶</span></h1>
        <div className="meta">
          <b style={{color:'var(--tl-ink)'}}>JEWELRY</b><br/>建築美學 × 珠寶設計<br/>Digital fabrication
        </div>
      </header>

      {/* Hero artwork */}
      <section style={{padding:'0 64px 64px'}}>
        <figure style={{aspectRatio:'16/9', overflow:'hidden', background:'var(--tl-mist)'}}>
          <img src={palaceImages[0]} alt="Palace jewelry" style={{width:'100%', height:'100%', objectFit:'cover'}} />
        </figure>
      </section>

      <section className="tl-firm-essay" style={{paddingBottom:80}}>
        <div className="num">§ NOTE</div>
        <div className="col">
          <p style={{fontSize:22,fontWeight:300,lineHeight:1.5,color:'var(--tl-ink)'}}>
            Palace is the pioneer of unfolding an architectural aesthetic — once non-achievable in jewelry design — into wearable form. Each piece is a microcosm: complex artistic elements fused into the structure, skin and space of a miniature "palace."
          </p>
        </div>
        <div className="col cjk-col">
          <p>Palace 將建築的空間美感應用到珠寶設計中。我們相信一件珠寶本身就是一個微觀領域，複雜的藝術元素在這裡融合在一起，成為微觀「宮殿」的結構、皮膚和空間。</p>
          <p>我們從經典的幾何規則中學習，並以現代感重新詮釋。每個曲率都是使用數位製造技術精確設計和實現的——不受材料的限制，珠寶設計的未來取決於拓撲的改革。</p>
        </div>
      </section>

      {/* Gallery */}
      <section style={{padding:'0 64px 64px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:32}}>
        {palaceImages.slice(1).map((img, i) => (
          <figure key={i} style={{aspectRatio:'4/5', overflow:'hidden', background:'var(--tl-mist)'}}>
            <img src={img} alt={`Palace ${i+2}`} style={{width:'100%', height:'100%', objectFit:'cover'}} />
          </figure>
        ))}
      </section>

      <section className="tl-art-cta">
        <div className="num">§ ENQUIRIES</div>
        <p>For acquisition, custom orders, or exhibition enquiries: <a href="mailto:LK@tlabarc.com">LK@tlabarc.com</a></p>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, ProjectsPage, ProjectDetail, FirmPage, ContactPage, LabPage, ArtPage });