const { useState, useEffect, useRef, useCallback } = React;

    /* ───────────────────────────────────────────────
       TONES & DATA
    ─────────────────────────────────────────────── */
    const TONES = [
      ['#E8E2D6','#B8A890'],['#D6CFC2','#8E7E66'],['#DCD2C4','#6B5A48'],
      ['#D4D8D2','#7A8278'],['#C8CCD0','#6E7682'],['#E0D2CE','#A07868'],
      ['#D8CCC0','#705848'],['#CFCBC0','#54503E'],['#E2D8C8','#9C7A52'],
      ['#EFE7DA','#C9B89A'],['#C4BFB6','#3F3A33'],['#E5DDD0','#73604A'],
    ];

    const WORKS = [
      { id:1,  cat:'Wall Art',       filter:'Painting',         artist:'Anna Kovacs',  title:'Bloom Study, Cobalt',    medium:'Oil on linen',             dims:'90 × 90 cm',      ed:'1 of 1', price:'On enquiry', status:'Available',            tone:5,  get img(){ return window.__R('imgHero'); },              year:2025, city:'Budapest',   ratio:'1/1',  pos:'center 28%' },
      { id:2,  cat:'Wall Art',       filter:'Ink / Mixed Media', artist:'Marcus Veil',  title:'Phanther',               medium:'Mixed media on canvas',    dims:'120 × 90 cm',     ed:'1 of 1', price:'On enquiry', status:'Available',            tone:1,  get img(){ return window.__R('imgWall1'); },             year:2024, city:'Lisbon',     ratio:'4/3',  pos:'center 35%' },
      { id:3,  cat:'Wall Art',       filter:'Painting',         artist:'Yuki Tanaka',  title:'Veiled Forms',           medium:'Acrylic on board',         dims:'100 × 100 cm',    ed:'1 of 1', price:'On enquiry', status:'Reserved',             tone:11, get img(){ return window.__R('imgWall2'); },             year:2024, city:'Kyoto',      ratio:'4/5',  pos:'center center' },
      { id:4,  cat:'Wall Art',       filter:'Painting',         artist:'Marta Olsen',  title:'Plaster Field, Diptych', medium:'Plaster, raw pigment',     dims:'60 × 60 cm ea.', ed:'2 of 6', price:'On enquiry', status:'Available',            tone:6,  get img(){ return window.__R('imgWall3'); },             year:2025, city:'Oslo',       ratio:'4/5',  pos:'center 38%' },
      { id:5,  cat:'Art Furniture',  filter:'Art Furniture',    artist:'Adrian Wei',   title:'Totem Shelf I',          medium:'Cherry, brass, mirror',    dims:'H 180 W 110 cm',  ed:'1 of 3', price:'On enquiry', status:'Commission Available', tone:8,  get img(){ return window.__R('imgSculpt1'); },           year:2024, city:'Shanghai',   ratio:'4/5',  pos:'center center' },
      { id:6,  cat:'Art Furniture',  filter:'Art Furniture',    artist:'Clara Mies',   title:'Side Table, Vermilion',  medium:'Lacquered oak',            dims:'H 64 W 38 cm',    ed:'1 of 8', price:'On enquiry', status:'Made to Order',        tone:5,  get img(){ return window.__R('imgSculpt2'); },           year:2025, city:'Antwerp',    ratio:'4/5',  pos:'center 42%' },
      { id:7,  cat:'Art Furniture',  filter:'Art Furniture',    artist:'Jo Nakamura',  title:'Bentwood Armchair',      medium:'Steam-bent ash, cane',     dims:'H 86 W 60 cm',    ed:'1 of 6', price:'On enquiry', status:'Available',            tone:9,  get img(){ return window.__R('imgFurn1'); },             year:2024, city:'Osaka',      ratio:'4/5',  pos:'center 38%' },
      { id:8,  cat:'Art Furniture',  filter:'Art Furniture',    artist:'Halle Risør',  title:'Reading Stool',          medium:'Lacquered ash',            dims:'H 64 W 38 cm',    ed:'1 of 6', price:'On enquiry', status:'Sold',                 tone:5,  get img(){ return window.__R('imgFurn2'); },             year:2025, city:'Bergen',     ratio:'4/5',  pos:'center 42%' },
      { id:9,  cat:'Wall Art',       filter:'Ink / Mixed Media', artist:'Sven Holm',    title:'Still Life, Frame',      medium:'Pencil on paper, framed',  dims:'42 × 30 cm',      ed:'1 of 1', price:'On enquiry', status:'Private Collection',   tone:6,  get img(){ return window.__R('imgStudio'); },            year:2023, city:'Copenhagen', ratio:'4/5',  pos:'center 60%' },
      { id:10, cat:'Art Furniture',  filter:'Art Furniture',    artist:'Lena Brandt',  title:'Walnut Console',         medium:'Walnut, cane, brass',      dims:'H 80 W 140 cm',   ed:'1 of 3', price:'On enquiry', status:'Available',            tone:6,  get img(){ return window.__R('imgInterior1'); },         year:2024, city:'Berlin',     ratio:'4/5',  pos:'center 60%' },
      { id:11, cat:'Sculptural',     filter:'Sculpture',        artist:'Iben Søholm',  title:'Companions, No. 4',      medium:'Glazed earthenware',       dims:'H 22 W 20 cm',    ed:'1 of 1', price:'On enquiry', status:'Available',            tone:9,  get img(){ return window.__R('imgSculptCompanions'); }, year:2025, city:'Aarhus',     ratio:'3/4',  pos:'center 50%' },
      { id:12, cat:'Sculptural',     filter:'Sculpture',        artist:'Iben Søholm',  title:'Hen with Basket',        medium:'Hand-built stoneware',     dims:'H 26 W 22 cm',    ed:'1 of 1', price:'On enquiry', status:'Available',            tone:1,  get img(){ return window.__R('imgSculptHen'); },         year:2025, city:'Aarhus',     ratio:'3/4',  pos:'center 50%' },
      { id:13, cat:'Sculptural',     filter:'Sculpture',        artist:'Iben Søholm',  title:'Soft Forms — Group VIII',medium:'Pigmented ceramic, flocked finish', dims:'Variable, H 28–58 cm', ed:'Group of 6', price:'On enquiry', status:'Reserved', tone:2, get img(){ return window.__R('imgSculptGroup'); }, year:2025, city:'Aarhus', ratio:'3/4', pos:'center 45%' },
      { id:14, cat:'Art Furniture',  filter:'Art Furniture',    artist:'Mira Köhler',  title:'Bolster Lounge, Patchwork', medium:'Hand-tufted wool, bouclé, reclaimed pine', dims:'H 78 W 92 D 88 cm', ed:'1 of 4', price:'On enquiry', status:'Available',            tone:7,  get img(){ return window.__R('imgFurnStackedBolster'); }, year:2026, city:'Vienna',     ratio:'4/5',  pos:'center 50%' },
    ];

    const CATS    = ['All works','Wall Art','Sculptural','Art Furniture'];
    const FILTERS = ['All works','Painting','Ink / Mixed Media','Sculpture','Wall Installation','Art Furniture','Commission Available'];

    const ARTISTS = [
      { name:'Anna Kovacs',  city:'Budapest',   discipline:'Painting',       works:3, get img(){ return window.__R('imgHero'); },             pos:'center 28%' },
      { name:'Marcus Veil',  city:'Lisbon',     discipline:'Mixed media',    works:4, get img(){ return window.__R('imgWall1'); },            pos:'center 35%' },
      { name:'Marta Olsen',  city:'Oslo',       discipline:'Sculpture',      works:2, get img(){ return window.__R('imgWall3'); },            pos:'center 38%' },
      { name:'Clara Mies',   city:'Antwerp',    discipline:'Furniture',      works:5, get img(){ return window.__R('imgSculpt2'); },          pos:'center 42%' },
      { name:'Adrian Wei',   city:'Shanghai',   discipline:'Stone, relief',  works:3, get img(){ return window.__R('imgSculpt1'); },          pos:'center center' },
      { name:'Jo Nakamura',  city:'Osaka',      discipline:'Furniture',      works:2, get img(){ return window.__R('imgFurn1'); },            pos:'center 38%' },
      { name:'Iben Søholm',  city:'Aarhus',     discipline:'Ceramics',       works:3, get img(){ return window.__R('imgSculptGroup'); },      pos:'center 45%' },
    ];

    const JOURNAL = [
      { issue:'No. 04 · Winter 2025', get img(){ return window.__R('imgStudio'); },     pos:'center 60%', eye:'Studio Visit',  title:'In the workshop of Marta Olsen',       read:'6 min' },
      { issue:'No. 03 · Autumn 2025', get img(){ return window.__R('imgInterior1'); },  pos:'center 60%', eye:'Field Notes',   title:'On the quiet weight of objects',        read:'4 min' },
      { issue:'No. 02 · Summer 2025', get img(){ return window.__R('imgWall3'); },       pos:'center 38%', eye:'Conversation',  title:'Yuki Tanaka on cyanotype as memory',    read:'8 min' },
    ];

    const PROJECTS = [
      { name:'Maison Rive Gauche', loc:'Paris, 6e',    year:2024, scope:'Curation, commission, installation', get img(){ return window.__R('imgHero'); },         pos:'center 28%' },
      { name:'Studio Hjem',        loc:'Copenhagen',   year:2024, scope:'Curation, installation',             get img(){ return window.__R('imgInterior1'); },    pos:'center 60%' },
      { name:'Hotel Petit Verre',  loc:'Lyon',         year:2025, scope:'Curation, commission',               get img(){ return window.__R('imgInterior2'); },    pos:'center center' },
      { name:'Private Residence',  loc:'Singapore',    year:2025, scope:'Curation',                           get img(){ return window.__R('imgWall3'); },         pos:'center 38%' },
    ];

    Object.assign(window, { TONES, WORKS, CATS, FILTERS, ARTISTS, JOURNAL, PROJECTS });

    /* ───────────────────────────────────────────────
       ATOMS
    ─────────────────────────────────────────────── */
    function useBreakpoint() {
      const [w, setW] = useState(window.innerWidth);
      useEffect(() => {
        const h = () => setW(window.innerWidth);
        window.addEventListener('resize', h);
        return () => window.removeEventListener('resize', h);
      }, []);
      return { isMobile: w < 640, isTablet: w >= 640 && w < 1024, isDesktop: w >= 1024, w };
    }

    function ArtImg({ img, pos='center center', tone=0, style={}, ratio='4/5', dim=false, alt='' }) {
      const [a, b] = TONES[tone % TONES.length];
      return (
        <div style={{ width:'100%', aspectRatio:ratio, background: img ? '#EDEAE5' : `linear-gradient(165deg, ${a} 0%, ${b} 100%)`, position:'relative', overflow:'hidden', ...style }}>
          {img && <img src={img} alt={alt} style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:pos, display:'block' }} />}
          {dim && <div style={{ position:'absolute', inset:0, background:'rgba(26,26,26,0.22)' }} />}
        </div>
      );
    }

    const Eyebrow = ({ children, color, style: s }) => (
      <div style={{ fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing:'0.22em', textTransform:'uppercase', color: color||'var(--fg-tertiary)', ...s }}>{children}</div>
    );
    const Rule = ({ width=36, color='var(--border-mid)', style: s }) => (
      <div style={{ width, height:1, background:color, ...s }} />
    );
    const Ghost = ({ children, onClick, dark, arrow=true }) => (
      <button onClick={onClick} className="tin-ghost" style={{ background:'transparent', color: dark ? 'var(--color-ivory)':'var(--fg-primary)', border:'none', padding:'6px 0', fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing:'0.2em', textTransform:'uppercase', cursor:'pointer', display:'inline-flex', alignItems:'center', gap:12, borderBottom:`1px solid ${dark ? 'rgba(245,244,242,0.7)':'var(--fg-primary)'}` }}>
        {children}
        {arrow && <span aria-hidden style={{ fontFamily:'var(--font-sans)', letterSpacing:0, fontSize:'0.85rem' }}>→</span>}
      </button>
    );
    const Solid = ({ children, onClick, full, disabled, type }) => (
      <button onClick={onClick} disabled={disabled} type={type} className="tin-solid" style={{ background:'var(--color-ink)', color:'#fff', border:'none', padding:'15px 32px', width: full ? '100%':'auto', fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing:'0.2em', textTransform:'uppercase', cursor: disabled ? 'wait':'pointer', opacity: disabled ? 0.5:1, display:'inline-flex', alignItems:'center', justifyContent:'center', gap:14, transition:'background var(--dur-base) var(--ease-out)' }}>
        {children}
        <span aria-hidden style={{ letterSpacing:0 }}>→</span>
      </button>
    );
    const Outline = ({ children, onClick, dark }) => (
      <button onClick={onClick} style={{ background:'transparent', color: dark ? 'var(--color-ivory)':'var(--fg-primary)', border:`1px solid ${dark ? 'rgba(245,244,242,0.4)':'var(--border-mid)'}`, padding:'14px 28px', fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing:'0.2em', textTransform:'uppercase', cursor:'pointer' }}>{children}</button>
    );
    const SectionMark = ({ index, label, style: s }) => (
      <div style={{ display:'flex', alignItems:'center', gap:14, fontFamily:'var(--font-mono)', fontSize:'0.6875rem', color:'var(--fg-tertiary)', letterSpacing:'0.14em', ...s }}>
        <span style={{ color:'var(--color-coral)' }}>{index}</span>
        <span style={{ width:28, height:1, background:'var(--border-mid)' }} />
        <span style={{ textTransform:'uppercase', letterSpacing:'0.22em' }}>{label}</span>
      </div>
    );
    Object.assign(window, { ArtImg, Eyebrow, Rule, Ghost, Solid, Outline, SectionMark, useBreakpoint });

    /* ───────────────────────────────────────────────
       STATUS LABEL + WORK CARD
    ─────────────────────────────────────────────── */
    const STATUS_STYLES = {
      'Available':            { color:'#6B7A5E',              dot:'#8A9E78' },
      'Reserved':             { color:'#7A6B4E',              dot:'#B09060' },
      'Sold':                 { color:'#7A5A5A',              dot:'#B08080' },
      'Commission Available': { color:'var(--color-coral)',    dot:'var(--color-coral)' },
      'Private Collection':   { color:'var(--fg-tertiary)',   dot:'var(--color-greige)' },
      'Made to Order':        { color:'var(--fg-secondary)',  dot:'var(--color-taupe)' },
    };

    function StatusLabel({ status, lang, style: s }) {
      const st = STATUS_STYLES[status] || STATUS_STYLES['Available'];
      const lbl = lang === 'zh' ? (STATUS_ZH[status] || status) : status;
      return (
        <div style={{ display:'inline-flex', alignItems:'center', gap:6, fontFamily:'var(--font-mono)', fontSize:'0.625rem', letterSpacing: lang==='zh' ? '0.08em':'0.14em', textTransform: lang==='zh' ? 'none':'uppercase', color:st.color, ...s }}>
          <span style={{ width:5, height:5, borderRadius:'50%', background:st.dot, flexShrink:0 }} />
          {lbl}
        </div>
      );
    }

    function WorkCard({ work, onClick, airy, hideMeta, onInquire, lang='en' }) {
      const [hov, setHov] = useState(false);
      const [saved, setSaved] = useState(false);
      const isZh = lang === 'zh';
      const isSold = work.status === 'Sold' || work.status === 'Private Collection';
      const toggleSave = (e) => { e.stopPropagation(); setSaved(s => !s); };
      const handleInquire = (e) => { e.stopPropagation(); onInquire && onInquire(work); };
      return (
        <div onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ cursor:'pointer' }}>
          <div style={{ position:'relative', overflow:'hidden', marginBottom: airy ? 22:18 }}>
            <div style={{ transform: hov && !isSold ? 'scale(1.035)':'scale(1)', transition:'transform 700ms var(--ease-out)' }}>
              <ArtImg img={work.img} pos={work.pos} tone={work.tone} ratio={work.ratio||'4/5'} alt={work.title} />
            </div>
            {isSold && <div style={{ position:'absolute', inset:0, background:'rgba(248,248,248,0.38)' }} />}
            <button onClick={toggleSave} style={{ position:'absolute', top:12, right:12, width:32, height:32, background:'rgba(248,248,248,0.88)', backdropFilter:'blur(4px)', border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', opacity: hov||saved ? 1:0, transition:'opacity var(--dur-base) var(--ease-out)', color: saved ? 'var(--color-coral)':'var(--fg-primary)' }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill={saved ? 'currentColor':'none'} stroke="currentColor" strokeWidth="1.5"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
            </button>
            {!isSold && onInquire && (
              <button onClick={handleInquire} style={{ position:'absolute', bottom:0, left:0, right:0, background:'rgba(26,26,26,0.82)', backdropFilter:'blur(4px)', border:'none', cursor:'pointer', padding:'12px 0', fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing: isZh ? '0.08em':'0.2em', textTransform: isZh ? 'none':'uppercase', color:'var(--color-ivory)', opacity: hov ? 1:0, transition:'opacity var(--dur-fast) var(--ease-out)' }}>{isZh ? '咨询 →' : 'Inquire →'}</button>
            )}
          </div>
          {!hideMeta && (
            <div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:12, marginBottom:8 }}>
                <div style={{ minWidth:0 }}>
                  <div style={{ fontFamily:'var(--font-sans)', fontSize:'0.8125rem', color:'var(--fg-secondary)', fontStyle:'italic', marginBottom:5 }}>{work.artist}</div>
                  <div style={{ fontFamily:'var(--font-serif)', fontSize:'1.25rem', fontWeight:400, letterSpacing:'-0.005em', color:'var(--fg-primary)', lineHeight:1.2, marginBottom:6 }}>{work.title}</div>
                  <div style={{ fontFamily:'var(--font-mono)', fontSize:'0.6875rem', color:'var(--fg-tertiary)', letterSpacing:'0.04em' }}>{work.year} · {work.medium} · {work.dims}</div>
                </div>
              </div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:10 }}>
                <StatusLabel status={work.status} lang={lang} />
                <span style={{ fontFamily:'var(--font-mono)', fontSize:'0.75rem', color:'var(--fg-tertiary)', letterSpacing:'0.06em' }}>{isZh ? '价格面议' : work.price}</span>
              </div>
            </div>
          )}
        </div>
      );
    }
    Object.assign(window, { StatusLabel, WorkCard });

    /* ───────────────────────────────────────────────
       INQUIRY MODAL
    ─────────────────────────────────────────────── */
    function InquiryModal({ work, onClose, lang='en' }) {
      const [sent, setSent] = useState(false);
      const isZh = lang === 'zh';
      const [form, setForm] = useState({ name:'', email:'', phone:'', location:'', artwork: work ? work.title : '', budget:'', space:'', timeline:'', message:'' });
      const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
      const handleSubmit = (e) => { e.preventDefault(); setSent(true); };
      const inputStyle = { fontFamily:'var(--font-sans)', fontSize:'0.9375rem', padding:'11px 0', border:'none', borderBottom:'1px solid var(--border-mid)', background:'transparent', color:'var(--fg-primary)', outline:'none', width:'100%' };
      const F = ({ label, children }) => (
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          <Eyebrow>{label}</Eyebrow>
          {children}
        </div>
      );
      return (
        <div style={{ position:'fixed', inset:0, zIndex:600, background:'rgba(26,26,26,0.52)', backdropFilter:'blur(6px)', display:'flex', alignItems:'flex-end', justifyContent:'flex-end' }} onClick={onClose}>
          <div onClick={(e) => e.stopPropagation()} style={{ width:560, height:'100vh', background:'var(--bg-primary)', overflowY:'auto', display:'flex', flexDirection:'column', boxShadow:'-8px 0 60px rgba(26,26,26,0.18)' }}>
            <div style={{ padding:'48px 48px 32px', borderBottom:'1px solid var(--border-light)', position:'sticky', top:0, background:'var(--bg-primary)', zIndex:1 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
                <div>
                  <Eyebrow style={{ marginBottom:12, color:'var(--color-coral)' }}>{isZh ? '作品咨询' : 'Artwork Inquiry'}</Eyebrow>
                  {work && work.id ? (
                    <>
                      <h3 style={{ fontFamily:'var(--font-serif)', fontSize:'1.625rem', fontWeight:300, letterSpacing:'-0.012em', lineHeight:1.2, maxWidth:340 }}>{work.title}</h3>
                      <div style={{ fontFamily:'var(--font-sans)', fontSize:'0.875rem', color:'var(--fg-secondary)', fontStyle:'italic', marginTop:6 }}>{work.artist} · {work.medium}</div>
                    </>
                  ) : (
                    <h3 style={{ fontFamily:'var(--font-serif)', fontSize:'1.625rem', fontWeight:300, letterSpacing:'-0.012em' }}>{isZh ? '开启咨询' : 'Begin an inquiry'}</h3>
                  )}
                </div>
                <button onClick={onClose} style={{ background:'none', border:'none', cursor:'pointer', color:'var(--fg-tertiary)', fontSize:'1.125rem', padding:4, lineHeight:1 }}>✕</button>
              </div>
            </div>
            <div style={{ padding:'40px 48px 64px', flex:1 }}>
              {sent ? (
                <div style={{ display:'flex', flexDirection:'column', gap:20, paddingTop:24 }}>
                  <div style={{ width:48, height:48, background:'var(--color-coral)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><polyline points="20 6 9 17 4 12"/></svg>
                  </div>
                  <h3 style={{ fontFamily:'var(--font-serif)', fontSize:'1.75rem', fontWeight:300, letterSpacing:'-0.012em' }}>{isZh ? '咨询已收到。' : 'Inquiry received.'}</h3>
                  <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', lineHeight:1.75, color:'var(--fg-secondary)', maxWidth:380 }}>{isZh ? '我们的团队将在48小时内与您联系。' : 'Our team will respond within 48 hours with availability, pricing, and shipping options.'}</p>
                  <button onClick={onClose} style={{ background:'none', border:'none', cursor:'pointer', padding:0, fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing:'0.2em', textTransform: isZh ? 'none':'uppercase', color:'var(--fg-primary)', borderBottom:'1px solid var(--fg-primary)', paddingBottom:4, alignSelf:'flex-start' }}>{isZh ? '关闭 →' : 'Close →'}</button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} style={{ display:'flex', flexDirection:'column', gap:28 }}>
                  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20 }}>
                    <F label={isZh ? '姓名' : 'Name'}><input required placeholder={isZh ? '您的姓名' : 'Your name'} value={form.name} onChange={set('name')} style={inputStyle} /></F>
                    <F label={isZh ? '电子邮箱' : 'Email'}><input required type="email" placeholder={isZh ? '邮箱地址' : 'you@studio.com'} value={form.email} onChange={set('email')} style={inputStyle} /></F>
                  </div>
                  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20 }}>
                    <F label={isZh ? '电话（选填）' : 'Phone (optional)'}><input type="tel" placeholder={isZh ? '+86 000 0000 0000' : '+1 000 000 0000'} value={form.phone} onChange={set('phone')} style={inputStyle} /></F>
                    <F label={isZh ? '所在城市' : 'Location / City'}><input placeholder={isZh ? '上海、北京、伦敦……' : 'London, Paris, New York…'} value={form.location} onChange={set('location')} style={inputStyle} /></F>
                  </div>
                  <F label={isZh ? '感兴趣的作品' : 'Artwork of interest'}>
                    <input placeholder={work && work.id ? work.title : (isZh ? '作品名称或描述' : 'Title or describe the work')} value={form.artwork} onChange={set('artwork')} style={inputStyle} />
                  </F>
                  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20 }}>
                    <F label={isZh ? '预算范围' : 'Budget range'}>
                      <select value={form.budget} onChange={set('budget')} style={{ ...inputStyle, appearance:'none', cursor:'pointer' }}>
                        <option value="">{isZh ? '请选择…' : 'Select…'}</option>
                        {isZh ? (<><option>2万元以下</option><option>2万 – 5万元</option><option>5万 – 15万元</option><option>15万 – 40万元</option><option>40万元以上</option><option>可面议</option></>) : (<><option>Under €2,000</option><option>€2,000 – €5,000</option><option>€5,000 – €15,000</option><option>€15,000 – €40,000</option><option>€40,000+</option><option>Open / to discuss</option></>)}
                      </select>
                    </F>
                    <F label={isZh ? '计划时间' : 'Timeline'}>
                      <select value={form.timeline} onChange={set('timeline')} style={{ ...inputStyle, appearance:'none', cursor:'pointer' }}>
                        <option value="">{isZh ? '请选择…' : 'Select…'}</option>
                        {isZh ? (<><option>即刻</option><option>1个月内</option><option>1–3个月</option><option>3–6个月</option><option>6个月以上，不急</option></>) : (<><option>Immediate</option><option>Within 1 month</option><option>1–3 months</option><option>3–6 months</option><option>6+ months / no rush</option></>)}
                      </select>
                    </F>
                  </div>
                  <F label={isZh ? '作品用途' : 'Intended space'}>
                    <select value={form.space} onChange={set('space')} style={{ ...inputStyle, appearance:'none', cursor:'pointer' }}>
                      <option value="">{isZh ? '请选择…' : 'Select…'}</option>
                      {isZh ? (<><option>私人住宅</option><option>办公室 / 工作场所</option><option>酒店 / 餐厅</option><option>房地产开发项目</option><option>室内设计项目</option><option>其他</option></>) : (<><option>Private home</option><option>Office / workplace</option><option>Hospitality (hotel, restaurant)</option><option>Real estate development</option><option>Interior design project</option><option>Other</option></>)}
                    </select>
                  </F>
                  <F label={isZh ? '留言' : 'Message'}>
                    <textarea rows={4} placeholder={isZh ? '请描述空间、墙面，或您想要营造的氛围……' : "Tell us about the space, the wall, or the feeling you're after…"} value={form.message} onChange={set('message')} style={{ ...inputStyle, resize:'vertical' }} />
                  </F>
                  <div style={{ paddingTop:4 }}><Solid full type="submit">{isZh ? '提交咨询' : 'Inquire About This Work'}</Solid></div>
                  <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.8125rem', lineHeight:1.65, color:'var(--fg-tertiary)' }}>{isZh ? '我们的团队将就作品的可购性、定价及配送事宜与您私下确认。' : 'Our team will respond with availability, pricing, and shipping options. All transactions confirmed privately.'}</p>
                </form>
              )}
            </div>
          </div>
        </div>
      );
    }
    Object.assign(window, { InquiryModal });

    /* ───────────────────────────────────────────────
       NAV + FOOTER
    ─────────────────────────────────────────────── */
    function Nav({ page, setPage, lang, setLang }) {
      const [scrolled, setScrolled] = useState(false);
      const [menuOpen, setMenuOpen] = useState(false);
      const lastY = useRef(0);
      const { isMobile } = useBreakpoint();
      const navH = isMobile ? 64 : 88;

      useEffect(() => {
        const onScroll = () => { setScrolled(window.scrollY > 8); };
        window.addEventListener('scroll', onScroll, { passive:true });
        return () => window.removeEventListener('scroll', onScroll);
      }, []);
      useEffect(() => { setMenuOpen(false); }, [page]);

      const toggleLang = () => {
        const next = lang === 'en' ? 'zh' : 'en';
        window.__lang = next;
        try { localStorage.setItem('tin_lang', next); } catch(e) {}
        setLang(next);
      };
      const nl = NAV_LABELS[lang] || NAV_LABELS.en;
      const isZh = lang === 'zh';

      const desktopLink = (p, l) => (
        <button key={p} onClick={() => setPage(p)} style={{ background:'none', border:'none', cursor:'pointer', padding:'4px 0', fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing: isZh ? '0.12em':'0.22em', textTransform: isZh ? 'none':'uppercase', color: page===p ? 'var(--fg-primary)':'var(--fg-secondary)', borderBottom: page===p ? '1px solid var(--fg-primary)':'1px solid transparent', transition:'color var(--dur-base) var(--ease-out)' }}>{l}</button>
      );

      return (
        <>
          <header style={{ position:'fixed', top:0, left:0, right:0, zIndex:200, background: scrolled||menuOpen ? 'rgba(248,248,248,0.96)':'var(--bg-primary)', backdropFilter: scrolled ? 'blur(10px)':'none', borderBottom:'1px solid var(--border-light)', height:navH, display:'flex', alignItems:'center', justifyContent:'space-between', padding: isMobile ? '0 24px':'0 56px', transition:'background 200ms var(--ease-out)' }}>
            <button onClick={() => setPage('home')} style={{ background:'none', border:'none', cursor:'pointer', padding:0, display:'flex', alignItems:'center', flexShrink:0 }}>
              <img src={window.__R('imgLogo')} alt="The Infinite Nook" style={{ height: isMobile ? 28:36 }} />
            </button>
            {!isMobile && (
              <nav style={{ display:'flex', gap:48, flex:1, justifyContent:'center' }}>
                {desktopLink('gallery', nl.collection)}
                {desktopLink('about',   nl.studio)}
                {desktopLink('trade',   nl.trade)}
                {desktopLink('contact', nl.contact)}
              </nav>
            )}
            {!isMobile && (
              <nav style={{ display:'flex', gap:28, alignItems:'center' }}>
                <span style={{ width:1, height:14, background:'var(--border-mid)', opacity:0.5 }} />
                <button title="Saved" style={{ background:'none', border:'none', cursor:'pointer', padding:0, color:'var(--fg-secondary)' }}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
                </button>
                <button title="Search" style={{ background:'none', border:'none', cursor:'pointer', padding:0, color:'var(--fg-secondary)' }}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5"/></svg>
                </button>
                <button onClick={toggleLang} title={isZh ? 'Switch to English' : '切换至中文'} style={{ background:'none', border:'none', cursor:'pointer', padding:'3px 0', display:'flex', alignItems:'center', gap:6, borderBottom:'1px solid transparent' }}>
                  {isZh
                    ? <span style={{ fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--fg-primary)' }}>EN</span>
                    : <span style={{ fontFamily:'var(--font-sans)', fontSize:'0.75rem', fontWeight:500, letterSpacing:'0.28em', color:'var(--fg-primary)' }}>荟物间</span>
                  }
                </button>
              </nav>
            )}
            {isMobile && (
              <div style={{ display:'flex', gap:20, alignItems:'center' }}>
                <button onClick={toggleLang} style={{ background:'none', border:'none', cursor:'pointer', padding:'3px 0', fontFamily:'var(--font-sans)', fontSize:'0.75rem', fontWeight:500, letterSpacing:'0.18em', color:'var(--fg-primary)' }}>{isZh ? 'EN' : '荟'}</button>
                <button onClick={() => setMenuOpen(o => !o)} aria-label="Menu" style={{ background:'none', border:'none', cursor:'pointer', padding:'6px 0 6px 6px', display:'flex', flexDirection:'column', gap:5, alignItems:'flex-end' }}>
                  <span style={{ display:'block', height:1.5, background:'var(--fg-primary)', width:22, transform: menuOpen ? 'translateY(6.5px) rotate(45deg)':'none', transition:'transform 280ms var(--ease-out)' }} />
                  <span style={{ display:'block', width:16, height:1.5, background:'var(--fg-primary)', opacity: menuOpen ? 0:1, transition:'opacity 200ms' }} />
                  <span style={{ display:'block', height:1.5, background:'var(--fg-primary)', width:22, transform: menuOpen ? 'translateY(-6.5px) rotate(-45deg)':'none', transition:'transform 280ms var(--ease-out)' }} />
                </button>
              </div>
            )}
          </header>
          {isMobile && (
            <div style={{ position:'fixed', top:navH, left:0, right:0, bottom:0, background:'var(--bg-primary)', zIndex:190, transform: menuOpen ? 'translateX(0)':'translateX(100%)', transition:'transform 380ms var(--ease-out)', display:'flex', flexDirection:'column', padding:'40px 32px 48px', overflowY:'auto' }}>
              <nav style={{ display:'flex', flexDirection:'column' }}>
                {[['gallery', nl.collection],['about', nl.studio],['trade', nl.trade],['contact', nl.contact]].map(([p, l]) => (
                  <button key={p} onClick={() => { setPage(p); setMenuOpen(false); }} style={{ background:'none', border:'none', cursor:'pointer', padding:'22px 0', textAlign:'left', fontFamily:'var(--font-serif)', fontSize:'2rem', fontWeight:300, lineHeight:1, letterSpacing:'-0.01em', color: page===p ? 'var(--fg-primary)':'var(--fg-secondary)', borderBottom:'1px solid var(--border-light)' }}>{l}</button>
                ))}
              </nav>
            </div>
          )}
        </>
      );
    }

    function Footer({ setPage, lang }) {
      const isZh = lang === 'zh';
      const { isMobile } = useBreakpoint();
      const cols = isZh ? [
        { h:'浏览作品', links:[['gallery','全部作品'],['gallery','墙面艺术'],['gallery','立体装置'],['gallery','艺术家具']] },
        { h:'工作室',   links:[['about','关于我们'],['about','合作艺术家'],['about','专栏文章'],['trade','设计师合作']] },
        { h:'联系我们', links:[['contact','咨询'],['contact','预约参观'],['contact','媒体合作'],['contact','配送说明']] },
      ] : [
        { h:'Browse',  links:[['gallery','Collection'],['gallery','Wall Art'],['gallery','Sculptural'],['gallery','Art Furniture']] },
        { h:'Studio',  links:[['about','About'],['about','Artists'],['about','Editorial'],['trade','Trade & design']] },
        { h:'Contact', links:[['contact','Enquiries'],['contact','Visit by appointment'],['contact','Press'],['contact','Shipping']] },
      ];
      return (
        <footer style={{ borderTop:'1px solid var(--border-light)', background:'var(--bg-primary)' }}>
          <div style={{ padding: isMobile ? '64px 24px':'88px 56px', borderBottom:'1px solid var(--border-light)', display:'grid', gridTemplateColumns: isMobile ? '1fr':'1.1fr 1fr', gap: isMobile ? 40:80, alignItems:'center' }}>
            <div>
              <Eyebrow style={{ marginBottom:18 }}>{isZh ? '订阅我们的通讯' : 'Quietly, in your inbox'}</Eyebrow>
              <h3 style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.5rem':'clamp(1.625rem, 2.6vw, 2.25rem)', fontWeight:300, letterSpacing:'-0.018em', lineHeight:1.12, maxWidth:480 }}>{isZh ? '新作品上架、工作室探访，以及偶尔的一两句深思。' : 'New arrivals, studio visits, and the occasional considered word.'}</h3>
            </div>
            <form onSubmit={(e) => e.preventDefault()} style={{ display:'flex', gap:12, alignItems:'flex-end', borderBottom:'1px solid var(--border-mid)', paddingBottom:12 }}>
              <input placeholder={isZh ? '您的邮箱地址' : 'your@address.com'} style={{ flex:1, background:'transparent', border:'none', outline:'none', fontFamily:'var(--font-sans)', fontSize:'1rem', color:'var(--fg-primary)', padding:'8px 0' }} />
              <button type="submit" style={{ background:'transparent', border:'none', cursor:'pointer', fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing:'0.22em', textTransform: isZh ? 'none':'uppercase', color:'var(--fg-primary)', padding:'8px 0', whiteSpace:'nowrap' }}>{isZh ? '订阅 →' : 'Subscribe →'}</button>
            </form>
          </div>
          <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr 1fr':'1.4fr 1fr 1fr 1fr', gap: isMobile ? '40px 24px':48, padding: isMobile ? '48px 24px 40px':'80px 56px 56px' }}>
            <div style={{ gridColumn: isMobile ? '1 / -1':'auto' }}>
              <img src={window.__R('imgLogoFav')} alt="The Infinite Nook" style={{ height:42, marginBottom:24 }} />
              <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.875rem', lineHeight:1.7, color:'var(--fg-secondary)', maxWidth:320, marginBottom:28 }}>{isZh ? '荟物间是一家精选线上画廊，汇聚墙面艺术、立体装置与艺术家具。' : 'A curated gallery for wall art, sculptural objects, and art furniture — chosen for how they alter a space, not merely fill it.'}</p>
              <div style={{ fontFamily:'var(--font-sans)', fontSize:'0.75rem', letterSpacing:'0.28em', color:'var(--fg-primary)', fontWeight:500, marginBottom:6 }}>荟物间</div>
              <div style={{ fontFamily:'var(--font-mono)', fontSize:'0.6875rem', color:'var(--fg-tertiary)', letterSpacing:'0.08em' }}>{isZh ? '汇聚艺术，成就空间' : 'huì wù jiān — gathered artful space'}</div>
            </div>
            {cols.map((col) => (
              <div key={col.h}>
                <Eyebrow style={{ marginBottom:22 }}>{col.h}</Eyebrow>
                <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
                  {col.links.map(([p, l]) => (
                    <button key={l} onClick={() => setPage(p)} className="tin-footer-link" style={{ background:'none', border:'none', cursor:'pointer', padding:0, textAlign:'left', fontFamily:'var(--font-sans)', fontSize:'0.875rem', color:'var(--fg-secondary)', transition:'color var(--dur-base) var(--ease-out)' }}>{l}</button>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <div style={{ borderTop:'1px solid var(--border-light)', padding: isMobile ? '20px 24px':'22px 56px', display:'flex', flexDirection: isMobile ? 'column':'row', justifyContent:'space-between', alignItems: isMobile ? 'flex-start':'center', gap: isMobile ? 8:0, fontFamily:'var(--font-mono)', fontSize:'0.6875rem', letterSpacing:'0.1em', color:'var(--fg-tertiary)' }}>
            <span>© 2026 The Infinite Nook · 荟物间</span>
            <div style={{ display:'flex', gap: isMobile ? 20:36 }}>
              <span>{isZh ? '柏林 & 上海 · 预约参观' : 'By appointment · Berlin & Shanghai'}</span>
              <span>{isZh ? '欧元 · 中文' : 'EUR · English'}</span>
            </div>
          </div>
        </footer>
      );
    }
    Object.assign(window, { Nav, Footer });

    /* ───────────────────────────────────────────────
       HOME PAGE
    ─────────────────────────────────────────────── */
    function Home({ setPage, setWork, lang='en' }) {
      const heroRef = useRef(null);
      const isZh = lang === 'zh';
      const { isMobile, isTablet } = useBreakpoint();
      const navH = isMobile ? 64 : 88;

      useEffect(() => {
        const onScroll = () => {
          if (!heroRef.current) return;
          heroRef.current.style.transform = `translateY(${window.scrollY * 0.28}px)`;
        };
        window.addEventListener('scroll', onScroll, { passive:true });
        return () => window.removeEventListener('scroll', onScroll);
      }, []);

      const newArrivals = WORKS.slice(0, 4);
      return (
        <main style={{ paddingTop:navH }}>
          {/* HERO */}
          <section style={{ position:'relative', height:`calc(100vh - ${navH}px)`, minHeight: isMobile ? 500:640, overflow:'hidden' }}>
            <div ref={heroRef} style={{ position:'absolute', inset:'-8% 0', backgroundImage:`url(${window.__R('imgHero2')})`, backgroundSize:'cover', backgroundPosition:'center center', willChange:'transform' }} />
            <div style={{ position:'absolute', inset:0, background:'linear-gradient(135deg, rgba(26,26,26,0.18) 0%, transparent 60%)' }} />
            <div style={{ position:'absolute', left: isMobile ? 16:56, right: isMobile ? 16:'auto', bottom: isMobile ? 24:64, maxWidth: isMobile ? 'none':500, background:'rgba(248,248,248,0.94)', backdropFilter:'blur(12px)', WebkitBackdropFilter:'blur(12px)', padding: isMobile ? '32px 28px 28px':'52px 48px 44px' }}>
              <Eyebrow style={{ marginBottom: isMobile ? 16:28, color:'var(--color-coral)' }}>{isZh ? '2026年春季精选' : 'Spring Collection · 2026'}</Eyebrow>
              <h1 style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '2rem':'clamp(2.25rem, 4vw, 3.5rem)', fontWeight:300, lineHeight:1.04, letterSpacing: isZh ? '-0.01em':'-0.025em', color:'var(--fg-primary)', marginBottom: isMobile ? 14:24 }}>{isZh ? '让空间\n因作品而不同。' : 'Objects that\nalter a room.'}</h1>
              {!isMobile && <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', lineHeight:1.75, color:'var(--fg-secondary)', maxWidth:360, marginBottom:36 }}>{isZh ? '荟物间汇聚墙面艺术、立体装置与艺术家具，来自一批以沉静胜于喧嚣的艺术家与匠人。' : 'The Infinite Nook gathers wall art, sculptural objects, and art furniture from a quiet roster of artists and makers.'}</p>}
              <div style={{ display:'flex', gap: isMobile ? 16:24, alignItems:'center', marginTop: isMobile ? 20:0 }}>
                <Solid onClick={() => setPage('gallery')}>{isZh ? '浏览作品' : 'Browse'}</Solid>
                {!isMobile && <Ghost onClick={() => setPage('about')} arrow={false}>{isZh ? '了解我们' : 'Read more'}</Ghost>}
              </div>
            </div>
            {!isMobile && (
              <div style={{ position:'absolute', top:40, right:56, padding:'16px 20px', background:'rgba(248,248,248,0.88)', backdropFilter:'blur(8px)', textAlign:'right', maxWidth:280 }}>
                <Eyebrow style={{ marginBottom:8 }}>{isZh ? '当期展出' : 'Featured work'}</Eyebrow>
                <div style={{ fontFamily:'var(--font-serif)', fontSize:'1rem', fontWeight:400, color:'var(--fg-primary)', marginBottom:4, lineHeight:1.2 }}>{isZh ? '宗杨·农舍南烟，2025' : 'Village in Southern Haze, 2025'}</div>
                <div style={{ fontFamily:'var(--font-mono)', fontSize:'0.6875rem', color:'var(--fg-tertiary)', letterSpacing:'0.05em' }}>{isZh ? '水墨设色 · 荟物间收藏' : 'Ink & colour on paper · The Infinite Nook'}</div>
              </div>
            )}
          </section>

          {/* COLLECTIONS */}
          <section style={{ padding: isMobile ? '80px 24px 72px': isTablet ? '100px 40px 88px':'160px 56px 140px' }}>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr auto', alignItems:'end', marginBottom: isMobile ? 48:80, gap:24 }}>
              <div>
                <Eyebrow style={{ marginBottom:20 }}>{isZh ? '系列分类' : 'Collections'}</Eyebrow>
                <h2 style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.75rem':'clamp(2rem, 3.2vw, 2.75rem)', fontWeight:300, lineHeight:1.1, letterSpacing: isZh ? '-0.01em':'-0.018em', maxWidth:560 }}>{isZh ? '三个类别，\n一种策展声音。' : 'Three categories,\none curatorial voice.'}</h2>
              </div>
              {!isMobile && <Ghost onClick={() => setPage('gallery')}>{isZh ? '查看全部作品' : 'View all works'}</Ghost>}
            </div>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr': isTablet ? 'repeat(2,1fr)':'repeat(3,1fr)', gap: isMobile ? 40:48 }}>
              {[
                { label: isZh ? '墙面艺术':'Wall Art',    sub: isZh ? '绘画、版画及摄影作品':'Paintings, prints & photographic editions', img:WORKS[0].img, pos:'center 28%', count:5, ratio:'3/4' },
                { label: isZh ? '立体装置':'Sculptural',  sub: isZh ? '陶瓷与立体作品':'Ceramics & three-dimensional works', img:window.__R('imgSculptGroup'), pos:'center 45%', count:3, ratio:'3/4' },
                { label: isZh ? '艺术家具':'Art Furniture',sub: isZh ? '兼具功能与艺术意图的物件':'Functional objects made with artistic intention', img:WORKS[6].img, pos:'center 38%', count:5, ratio:'3/4' },
              ].map((c) => {
                const [hov, setHov] = useState(false);
                return (
                  <button key={c.label} onClick={() => setPage('gallery')} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} style={{ background:'none', border:'none', padding:0, textAlign:'left', cursor:'pointer' }}>
                    <div style={{ overflow:'hidden', marginBottom:28 }}>
                      <div style={{ transform: hov ? 'scale(1.035)':'scale(1)', transition:'transform 600ms var(--ease-out)' }}>
                        <ArtImg img={c.img} pos={c.pos} ratio={c.ratio} />
                      </div>
                    </div>
                    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:10 }}>
                      <h3 style={{ fontFamily:'var(--font-serif)', fontSize:'1.5rem', fontWeight:400, letterSpacing:'-0.005em' }}>{c.label}</h3>
                      <span style={{ fontFamily:'var(--font-mono)', fontSize:'0.6875rem', color:'var(--fg-tertiary)' }}>{String(c.count).padStart(2,'0')} {isZh ? '件':'works'}</span>
                    </div>
                    <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.875rem', lineHeight:1.7, color:'var(--fg-secondary)', maxWidth:280 }}>{c.sub}</p>
                  </button>
                );
              })}
            </div>
          </section>

          {/* STATEMENT */}
          <section style={{ padding: isMobile ? '72px 24px':'160px 56px', borderTop:'1px solid var(--border-light)', borderBottom:'1px solid var(--border-light)', display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center' }}>
            <Eyebrow style={{ marginBottom:32 }}>The Infinite Nook · 荟物间</Eyebrow>
            <h2 style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.625rem':'clamp(1.875rem, 3.4vw, 3rem)', fontWeight:300, lineHeight:1.2, letterSpacing: isZh ? '-0.01em':'-0.015em', color:'var(--fg-primary)', maxWidth:800, marginBottom:32 }}>{isZh ? '我们不相信空间需要被填满。一个房间只需一两件真正有存在感的作品，便已完整。' : "We don't believe in filling a room. We believe a room is finished when one or two things in it have presence."}</h2>
            <Rule style={{ marginBottom:28, width:44 }} />
            <p style={{ fontFamily:'var(--font-sans)', fontSize:'1rem', lineHeight:1.85, color:'var(--fg-secondary)', maxWidth:500 }}>{isZh ? '每一件作品的选择，都关乎它如何改变空间的静默：光线的质感、人的动线，以及房间被感知的方式。' : 'Every work is chosen for the way it changes the silence of a space — the quality of the light, the way you move through a room.'}</p>
          </section>

          {/* IN-SITU */}
          <section style={{ position:'relative', overflow:'hidden' }}>
            <div style={{ width:'100%', aspectRatio: isMobile ? '4/3':'21/9', backgroundImage:`url(${window.__R('imgInterior1')})`, backgroundSize:'cover', backgroundPosition:'center 60%' }} />
            <div style={{ position: isMobile ? 'relative':'absolute', left: isMobile ? 'auto':56, bottom: isMobile ? 'auto':56, background: isMobile ? 'var(--bg-primary)':'rgba(248,248,248,0.92)', backdropFilter: isMobile ? 'none':'blur(10px)', padding: isMobile ? '32px 24px':'36px 40px', maxWidth: isMobile ? 'none':400, borderTop: isMobile ? '1px solid var(--border-light)':'none' }}>
              <Eyebrow style={{ marginBottom:14 }}>{isZh ? '作品在场' : 'Works in place'}</Eyebrow>
              <h3 style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.375rem':'1.625rem', fontWeight:300, lineHeight:1.18, letterSpacing:'-0.01em', marginBottom:20 }}>{isZh ? '胡桃木控台柜，置于其室。柏林，2024年。' : 'A walnut console in its room. Berlin, 2024.'}</h3>
              <Ghost onClick={() => { setWork(WORKS[9]); setPage('detail'); }}>{isZh ? '查看作品' : 'See the piece'}</Ghost>
            </div>
          </section>

          {/* NEW ARRIVALS */}
          <section style={{ padding: isMobile ? '72px 24px': isTablet ? '100px 40px':'140px 56px' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:56, paddingBottom:20, borderBottom:'1px solid var(--border-light)', flexWrap:'wrap', gap:16 }}>
              <div>
                <Eyebrow style={{ marginBottom:12 }}>{isZh ? '近期上架' : 'Lately'}</Eyebrow>
                <h2 style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.75rem':'2rem', fontWeight:300, letterSpacing:'-0.015em' }}>{isZh ? '新入藏作品' : 'New arrivals'}</h2>
              </div>
              <Ghost onClick={() => setPage('gallery')}>{isZh ? '查看全部' : 'View all'}</Ghost>
            </div>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)': isTablet ? 'repeat(2,1fr)':'repeat(4,1fr)', gap: isMobile ? '32px 16px':40 }}>
              {newArrivals.map((w) => (
                <WorkCard key={w.id} work={w} airy lang={lang}
                  onClick={() => { setWork(w); setPage('detail'); }}
                  onInquire={(w) => { setWork(w); setPage('detail'); }} />
              ))}
            </div>
          </section>

          {/* TRADE TEASER */}
          <section style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 1fr', borderTop:'1px solid var(--border-light)' }}>
            <div style={{ padding: isMobile ? '64px 24px': isTablet ? '80px 40px':'120px 56px', display:'flex', flexDirection:'column', justifyContent:'center', borderRight: isMobile ? 'none':'1px solid var(--border-light)', borderBottom: isMobile ? '1px solid var(--border-light)':'none' }}>
              <Eyebrow style={{ marginBottom:28 }}>{isZh ? '设计师与项目合作' : 'Trade & design services'}</Eyebrow>
              <h2 style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.75rem':'clamp(1.75rem, 2.8vw, 2.5rem)', fontWeight:300, lineHeight:1.12, letterSpacing: isZh ? '-0.01em':'-0.018em', marginBottom:28, maxWidth:460 }}>{isZh ? '为室内设计师、建筑师\n及私人客户而设。' : 'For interior designers,\narchitects, and private clients.'}</h2>
              <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', lineHeight:1.75, color:'var(--fg-secondary)', maxWidth:440, marginBottom:40 }}>{isZh ? '我们为住宅、工作室及精品酒店提供艺术选配服务。' : 'We curate works for residences, studios, and quiet hospitality — sourcing pieces beyond the public collection, with bespoke commissioning available.'}</p>
              <div style={{ display:'flex', gap:24, flexWrap:'wrap' }}>
                <Solid onClick={() => setPage('trade')}>{isZh ? '了解合作服务' : 'Explore trade services'}</Solid>
                {!isMobile && <Ghost onClick={() => setPage('about')} arrow={false}>{isZh ? '我们的理念' : 'Our approach'}</Ghost>}
              </div>
            </div>
            <div style={{ background:'var(--color-charcoal)', padding: isMobile ? '56px 24px': isTablet ? '80px 40px':'120px 64px', display:'flex', flexDirection:'column', justifyContent:'center' }}>
              {[
                [isZh ? '策展遴选':'Curation',     isZh ? '以具体空间与客户为基准，从我们的艺术家名单中精心甄选。':'A focused selection drawn from our roster, calibrated to a specific room and brief.'],
                [isZh ? '委托创作':'Commission',   isZh ? '当合适的作品尚未存在，我们与艺术家共同创作。':'Bespoke works developed in conversation with our artists, sized and toned for the space.'],
                [isZh ? '安装服务':'Installation', isZh ? '由我们的团队负责配送、悬挂及照明顾问。':'Hanging, mounting, and lighting managed by our team, on-site.'],
              ].map(([h, b], i, a) => (
                <div key={h} style={{ display:'grid', gridTemplateColumns:'40px 1fr', gap:28, alignItems:'baseline', padding:'32px 0', borderBottom: i < a.length-1 ? '1px solid rgba(255,255,255,0.1)':'none' }}>
                  <div style={{ fontFamily:'var(--font-mono)', fontSize:'0.75rem', color:'var(--color-coral)', letterSpacing:'0.08em' }}>{String(i+1).padStart(2,'0')}</div>
                  <div>
                    <div style={{ fontFamily:'var(--font-serif)', fontSize:'1.375rem', fontWeight:400, color:'#fff', marginBottom:8 }}>{h}</div>
                    <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.875rem', lineHeight:1.75, color:'rgba(245,244,242,0.62)' }}>{b}</p>
                  </div>
                </div>
              ))}
              <div style={{ marginTop:40 }}>
                <Ghost onClick={() => setPage('trade')} dark>{isZh ? '开启项目合作' : 'Begin a project'}</Ghost>
              </div>
            </div>
          </section>

          {/* JOURNAL */}
          <section style={{ padding: isMobile ? '72px 24px 80px': isTablet ? '100px 40px 120px':'140px 56px 160px' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:64, flexWrap:'wrap', gap:16 }}>
              <div>
                <Eyebrow style={{ marginBottom:12 }}>{isZh ? '编辑专栏' : 'Editorial'}</Eyebrow>
                <h2 style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.75rem':'clamp(1.875rem, 2.8vw, 2.375rem)', fontWeight:300, letterSpacing:'-0.015em' }}>{isZh ? '来自日志' : 'From the journal'}</h2>
              </div>
              {!isMobile && <Ghost arrow={false}>{isZh ? '阅读全部' : 'Read all entries'}</Ghost>}
            </div>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr': isTablet ? 'repeat(2,1fr)':'repeat(3,1fr)', gap: isMobile ? 48:56 }}>
              {JOURNAL.map((j) => {
                const [hov, setHov] = useState(false);
                const eyeZh = { 'Studio Visit':'工作室探访','Field Notes':'现场笔记','Conversation':'对谈' };
                return (
                  <article key={j.title} style={{ cursor:'pointer' }} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}>
                    <div style={{ overflow:'hidden', marginBottom:28 }}>
                      <div style={{ transform: hov ? 'scale(1.03)':'scale(1)', transition:'transform 600ms var(--ease-out)' }}>
                        <ArtImg img={j.img} pos={j.pos} ratio="4/3" />
                      </div>
                    </div>
                    <div style={{ display:'flex', justifyContent:'space-between', fontFamily:'var(--font-mono)', fontSize:'0.6875rem', color:'var(--fg-tertiary)', marginBottom:14 }}>
                      <span>{j.issue}</span><span>{j.read}</span>
                    </div>
                    <Eyebrow style={{ marginBottom:12 }}>{isZh ? (eyeZh[j.eye]||j.eye) : j.eye}</Eyebrow>
                    <h3 style={{ fontFamily:'var(--font-serif)', fontSize:'1.5rem', fontWeight:400, lineHeight:1.22, letterSpacing:'-0.005em', marginBottom:18 }}>{j.title}</h3>
                    <Ghost arrow>{isZh ? '阅读' : 'Read'}</Ghost>
                  </article>
                );
              })}
            </div>
          </section>

          {/* QUIET CTA */}
          <section style={{ borderTop:'1px solid var(--border-light)', padding: isMobile ? '72px 24px':'140px 56px', display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center' }}>
            <h2 style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.625rem':'clamp(1.875rem, 3.2vw, 2.75rem)', fontWeight:300, lineHeight:1.18, letterSpacing: isZh ? '-0.01em':'-0.018em', maxWidth:660, marginBottom:36 }}>{isZh ? '精选的收藏，有意为之的克制。这也是我们的工作方式。' : 'The collection is small by intention. So is the way we work.'}</h2>
            <Ghost onClick={() => setPage('contact')}>{isZh ? '联系我们' : 'Get in touch'}</Ghost>
          </section>

          <Footer setPage={setPage} lang={lang} />
        </main>
      );
    }

    /* ───────────────────────────────────────────────
       GALLERY PAGE
    ─────────────────────────────────────────────── */
    function Gallery({ setPage, setWork, lang='en' }) {
      const [activeFilter, setActiveFilter] = useState('All works');
      const [inquireWork, setInquireWork] = useState(null);
      const isZh = lang === 'zh';
      const { isMobile, isTablet } = useBreakpoint();
      const px = isMobile ? 24 : isTablet ? 40 : 56;
      const navH = isMobile ? 64 : 88;

      const FILTERS_ZH = ['全部作品','绘画','水墨 / 综合媒介','雕塑装置','墙面装置','艺术家具','可委托创作'];
      const filterMap = { '全部作品':'All works','绘画':'Painting','水墨 / 综合媒介':'Ink / Mixed Media','雕塑装置':'Sculpture','墙面装置':'Wall Installation','艺术家具':'Art Furniture','可委托创作':'Commission Available' };
      const displayFilters = isZh ? FILTERS_ZH : FILTERS;
      const getEnFilter = (f) => isZh ? (filterMap[f]||f) : f;
      const filtered = (() => {
        const ef = getEnFilter(activeFilter);
        if (ef === 'All works') return WORKS;
        if (ef === 'Commission Available') return WORKS.filter(w => w.status === 'Commission Available');
        return WORKS.filter(w => w.filter === ef);
      })();

      return (
        <main style={{ paddingTop:navH }}>
          <section style={{ padding: isMobile ? `40px ${px}px 32px`:`80px ${px}px 56px` }}>
            <Eyebrow style={{ marginBottom:20 }}>{isZh ? '作品收藏' : 'The Collection'}</Eyebrow>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 1fr', gap: isMobile ? 24:64, alignItems:'end' }}>
              <h1 style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '2rem':'clamp(2.5rem, 4vw, 3.5rem)', fontWeight:300, lineHeight:1.04, letterSpacing:'-0.022em' }}>{isZh ? '精心遴选，\n有限而珍贵的作品。' : 'A small, considered\nroster of works.'}</h1>
              {!isMobile && <p style={{ fontFamily:'var(--font-sans)', fontSize:'1rem', lineHeight:1.75, color:'var(--fg-secondary)', maxWidth:440 }}>{isZh ? '所有作品均可直接咨询。定价、可购性、装裱及配送事宜均以私下确认。我们承诺在48小时内回复。' : 'Every work is available to enquire about directly. Pricing, availability, framing, and shipping are confirmed personally. We respond within 48 hours.'}</p>}
            </div>
          </section>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:`0 ${px}px`, height:52, borderTop:'1px solid var(--border-light)', borderBottom:'1px solid var(--border-light)', position:'sticky', top:navH, zIndex:100, background:'var(--bg-primary)', overflowX:'auto', WebkitOverflowScrolling:'touch', scrollbarWidth:'none' }}>
            <div style={{ display:'flex', gap: isMobile ? 20:32, flexShrink:0 }}>
              {displayFilters.map((f) => (
                <button key={f} onClick={() => setActiveFilter(f)} style={{ background:'none', border:'none', cursor:'pointer', fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing: isZh ? '0.08em':'0.2em', textTransform: isZh ? 'none':'uppercase', whiteSpace:'nowrap', color: activeFilter===f ? 'var(--fg-primary)':'var(--fg-tertiary)', borderBottom: activeFilter===f ? '1px solid var(--fg-primary)':'1px solid transparent', paddingBottom:2, transition:'color var(--dur-base)' }}>{f}</button>
              ))}
            </div>
            <span style={{ fontFamily:'var(--font-mono)', fontSize:'0.6875rem', color:'var(--fg-tertiary)', letterSpacing:'0.08em', flexShrink:0, paddingLeft:24 }}>{String(filtered.length).padStart(2,'0')} {isZh ? '件作品':'works'}</span>
          </div>
          <section style={{ padding: isMobile ? `40px ${px}px 80px`:`72px ${px}px 140px` }}>
            {filtered.length === 0 ? (
              <div style={{ padding:'80px 0', textAlign:'center', fontFamily:'var(--font-serif)', fontSize:'1.5rem', fontWeight:300, color:'var(--fg-tertiary)' }}>{isZh ? '此类别暂无作品。' : 'No works in this category at present.'}</div>
            ) : (
              <div style={{ display:'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)': isTablet ? 'repeat(2,1fr)':'repeat(3,1fr)', gap: isMobile ? '40px 16px':'72px 48px' }}>
                {filtered.map((w) => (
                  <WorkCard key={w.id} work={w} airy lang={lang}
                    onClick={() => { setWork(w); setPage('detail'); }}
                    onInquire={(work) => setInquireWork(work)} />
                ))}
              </div>
            )}
          </section>
          <section style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 1fr', borderTop:'1px solid var(--border-light)' }}>
            <div style={{ padding: isMobile ? `56px ${px}px`:`100px ${px}px`, borderRight: isMobile ? 'none':'1px solid var(--border-light)', borderBottom: isMobile ? '1px solid var(--border-light)':'none', display:'flex', flexDirection:'column', justifyContent:'center' }}>
              <Eyebrow style={{ marginBottom:24 }}>{isZh ? '委托创作' : 'Commission'}</Eyebrow>
              <h2 style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.75rem':'clamp(1.875rem, 3vw, 2.5rem)', fontWeight:300, lineHeight:1.1, letterSpacing:'-0.018em', marginBottom:24, maxWidth:460 }}>{isZh ? '为空间量身定制的\n委托创作。' : 'Commissioned works,\nshaped around a space.'}</h2>
              {!isMobile && <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', lineHeight:1.78, color:'var(--fg-secondary)', maxWidth:440, marginBottom:36 }}>{isZh ? '对于有特定尺幅、色调或材质需求的客户，我们与艺术家协作，以空间为起点，开展定制创作。' : 'For clients seeking a specific scale, palette, or material direction, we develop commissioned works in collaboration with our artists.'}</p>}
              <div style={{ marginTop: isMobile ? 28:0 }}>
                <Ghost onClick={() => setPage('trade')} arrow>{isZh ? '咨询委托创作' : 'Discuss a commission'}</Ghost>
              </div>
            </div>
            <div style={{ backgroundImage:`url(${window.__R('imgInteriorHero')})`, backgroundSize:'cover', backgroundPosition:'center 30%', minHeight: isMobile ? 260:480 }} />
          </section>
          <section style={{ padding: isMobile ? `64px ${px}px`:`100px ${px}px`, textAlign:'center', borderTop:'1px solid var(--border-light)', display:'flex', flexDirection:'column', alignItems:'center', gap:24 }}>
            <Eyebrow>{isZh ? '没有找到心仪的作品？' : "Don't see what you're looking for?"}</Eyebrow>
            <h2 style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.5rem':'clamp(1.75rem, 2.8vw, 2.375rem)', fontWeight:300, letterSpacing:'-0.018em', maxWidth:560 }}>{isZh ? '我们可为设计师及私人客户提供公开系列之外的选配服务。' : 'We source beyond the public collection for trade and private clients.'}</h2>
            <div style={{ display:'flex', gap:24, flexWrap:'wrap', justifyContent:'center' }}>
              <Solid onClick={() => setInquireWork({})}>{isZh ? '申请策展顾问服务' : 'Request Curatorial Support'}</Solid>
              <Ghost onClick={() => setPage('trade')} arrow={false}>{isZh ? '设计师合作咨询' : 'Trade enquiry'}</Ghost>
            </div>
          </section>
          <Footer setPage={setPage} lang={lang} />
          {inquireWork !== null && <InquiryModal work={inquireWork.id ? inquireWork : null} onClose={() => setInquireWork(null)} lang={lang} />}
        </main>
      );
    }

    /* ───────────────────────────────────────────────
       DETAIL PAGE
    ─────────────────────────────────────────────── */
    function Detail({ work, setPage, setWork, lang='en' }) {
      const [inquireOpen, setInquireOpen] = useState(false);
      const [saved, setSaved] = useState(false);
      const isZh = lang === 'zh';
      const { isMobile } = useBreakpoint();
      if (!work) return null;
      const related = WORKS.filter((w) => w.cat === work.cat && w.id !== work.id).slice(0, 3);
      const isSold  = work.status === 'Sold' || work.status === 'Private Collection';
      const metaKeys = isZh ? ['艺术家','年份','材质','尺寸','版次','状态'] : ['Artist','Year','Medium','Dimensions','Edition','Status'];
      const metaVals = [
        work.artist + (work.city ? ' · '+work.city : ''),
        String(work.year), work.medium, work.dims,
        work.ed + (isZh ? ' — 签名版' : ' — signed'),
        isZh ? (STATUS_ZH[work.status]||work.status) : work.status,
      ];
      const catZh = { 'Wall Art':'墙面艺术','Sculptural':'立体装置','Art Furniture':'艺术家具' };
      return (
        <main style={{ paddingTop:88 }}>
          <div style={{ padding:'18px 56px', borderBottom:'1px solid var(--border-light)', display:'flex', gap:12, alignItems:'center', flexWrap:'wrap' }}>
            {[[isZh ? '作品收藏':'Collection','gallery'],[isZh ? (catZh[work.cat]||work.cat):work.cat,'gallery']].map(([l,p],i) => (
              <React.Fragment key={l}>
                {i > 0 && <span style={{ color:'var(--fg-tertiary)', fontSize:'0.75rem' }}>·</span>}
                <button onClick={() => setPage(p)} style={{ background:'none', border:'none', cursor:'pointer', padding:0, fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--fg-tertiary)' }}>{l}</button>
              </React.Fragment>
            ))}
            <span style={{ color:'var(--fg-tertiary)', fontSize:'0.75rem' }}>·</span>
            <Eyebrow color="var(--fg-primary)">{work.title}</Eyebrow>
          </div>
          <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1.15fr 1fr', minHeight:680 }}>
            <div style={{ borderRight:'1px solid var(--border-light)', background:'var(--bg-surface)', display:'flex', alignItems:'center', justifyContent:'center', padding: isMobile ? '40px 24px':'80px', position:'relative' }}>
              <div style={{ width:'100%', maxWidth:460 }}>
                <div style={{ boxShadow:'10px 10px 0 var(--color-ink)' }}>
                  <ArtImg img={work.img} pos={work.pos} ratio={work.ratio||'4/5'} alt={work.title} dim={isSold} />
                </div>
              </div>
              {!isMobile && <div style={{ position:'absolute', right:28, top:'50%', transform:'translateY(-50%) rotate(90deg)', transformOrigin:'center center', fontFamily:'var(--font-mono)', fontSize:'0.625rem', color:'var(--fg-tertiary)', letterSpacing:'0.2em', textTransform:'uppercase', whiteSpace:'nowrap' }}>{isZh ? `版次 ${work.ed} · ${work.year}年` : `Edition ${work.ed} · ${work.year}`}</div>}
            </div>
            <div style={{ padding: isMobile ? '40px 24px':'80px 64px', display:'flex', flexDirection:'column', justifyContent:'center' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:16 }}>
                <Eyebrow>{isZh ? (catZh[work.cat]||work.cat) : work.cat}</Eyebrow>
                <StatusLabel status={work.status} lang={lang} />
              </div>
              <h1 style={{ fontFamily:'var(--font-serif)', fontSize:'clamp(2rem, 3.2vw, 2.75rem)', fontWeight:300, lineHeight:1.06, letterSpacing:'-0.022em', marginBottom:8 }}>{work.title}</h1>
              <div style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', color:'var(--fg-secondary)', fontStyle:'italic', marginBottom:48 }}>{isZh ? `作者：${work.artist}` : `by ${work.artist}`}</div>
              <div style={{ borderTop:'1px solid var(--border-light)', marginBottom:32 }}>
                {metaKeys.map((k, i) => (
                  <div key={k} style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', padding:'14px 0', borderBottom:'1px solid var(--border-light)', gap:24 }}>
                    <Eyebrow>{k}</Eyebrow>
                    <span style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', color:'var(--fg-primary)', textAlign:'right' }}>{metaVals[i]}</span>
                  </div>
                ))}
              </div>
              <div style={{ fontFamily:'var(--font-mono)', fontSize:'1rem', color:'var(--fg-tertiary)', letterSpacing:'0.04em', marginBottom:28 }}>{isZh ? '价格面议' : 'Pricing on enquiry'}</div>
              {!isSold ? (
                <div style={{ display:'flex', flexDirection:'column', gap:12, marginBottom:32 }}>
                  <button onClick={() => setInquireOpen(true)} style={{ background:'var(--color-ink)', color:'#fff', border:'none', padding:'16px 0', cursor:'pointer', fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing: isZh ? '0.08em':'0.2em', textTransform: isZh ? 'none':'uppercase', display:'flex', alignItems:'center', justifyContent:'center', gap:12 }}>{isZh ? '咨询此作品 →' : 'Inquire About This Work →'}</button>
                  <div style={{ display:'flex', gap:10 }}>
                    <button onClick={() => setInquireOpen(true)} style={{ flex:1, background:'transparent', color:'var(--fg-primary)', border:'1px solid var(--border-mid)', padding:'13px 0', cursor:'pointer', fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing: isZh ? '0.08em':'0.18em', textTransform: isZh ? 'none':'uppercase' }}>{isZh ? '询问可购性' : 'Request Availability'}</button>
                    <button onClick={() => setSaved(s => !s)} style={{ background:'transparent', color: saved ? 'var(--color-coral)':'var(--fg-primary)', border:`1px solid ${saved ? 'var(--color-coral)':'var(--border-mid)'}`, padding:'13px 20px', cursor:'pointer', fontSize:'0.875rem', transition:'all var(--dur-base)' }}>{saved ? '♥' : '♡'}</button>
                  </div>
                  {work.status === 'Commission Available' && (
                    <button onClick={() => setInquireOpen(true)} style={{ background:'transparent', color:'var(--color-coral)', border:'1px solid var(--color-coral)', padding:'13px 0', cursor:'pointer', fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing: isZh ? '0.08em':'0.18em', textTransform: isZh ? 'none':'uppercase' }}>{isZh ? '咨询委托创作' : 'Discuss a Commission'}</button>
                  )}
                </div>
              ) : (
                <div style={{ padding:'20px 24px', border:'1px solid var(--border-light)', marginBottom:32, fontFamily:'var(--font-sans)', fontSize:'0.875rem', lineHeight:1.65, color:'var(--fg-tertiary)' }}>
                  {isZh ? `此作品${STATUS_ZH[work.status]||work.status}。` : `This work is ${work.status.toLowerCase()}.`}{' '}
                  <button onClick={() => setPage('trade')} style={{ background:'none', border:'none', cursor:'pointer', padding:0, fontFamily:'var(--font-sans)', fontSize:'0.875rem', color:'var(--fg-primary)', borderBottom:'1px solid var(--fg-primary)' }}>{isZh ? '咨询类似委托创作 →' : 'Discuss a similar commission →'}</button>
                </div>
              )}
              <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.8125rem', lineHeight:1.75, color:'var(--fg-tertiary)', paddingTop:24, borderTop:'1px solid var(--border-light)' }}>{isZh ? '所有交易在确认作品可购性、装裱、配送及安装细节后以私下形式完成。' : 'Purchases are confirmed privately after availability, framing, shipping, and installation details are reviewed. Secure payment links or invoices are provided after confirmation.'}</p>
            </div>
          </div>
          <section style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 1fr', borderTop:'1px solid var(--border-light)' }}>
            <div style={{ backgroundImage:`url(${window.__R('imgExtra')})`, backgroundSize:'cover', backgroundPosition:'center 42%', minHeight:420 }} />
            <div style={{ padding: isMobile ? '48px 24px':'80px 64px', display:'flex', flexDirection:'column', justifyContent:'center', borderLeft: isMobile ? 'none':'1px solid var(--border-light)', background:'var(--bg-surface)', borderTop: isMobile ? '1px solid var(--border-light)':'none' }}>
              <Eyebrow style={{ marginBottom:22 }}>{isZh ? '关于此作品' : 'About the work'}</Eyebrow>
              <p style={{ fontFamily:'var(--font-sans)', fontSize:'1.0625rem', lineHeight:1.8, color:'var(--fg-secondary)', maxWidth:440, marginBottom:36 }}>{isZh ? '收藏中的每件作品，均以其如何改变空间而非填满空间为标准遴选。可预约参观，亦可在住宅或酒店项目中试挂，再作决定。' : 'Each work is chosen for how it changes a room — not merely fills it. Works can be viewed by appointment and placed on approval for residential or hospitality projects.'}</p>
              <Ghost onClick={() => setPage('about')} arrow={false}>{isZh ? '了解我们的艺术家' : 'About our artists'}</Ghost>
            </div>
          </section>
          {related.length > 0 && (
            <section style={{ borderTop:'1px solid var(--border-light)', padding: isMobile ? '64px 24px 80px':'88px 56px 120px' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:48, paddingBottom:18, borderBottom:'1px solid var(--border-light)' }}>
                <h3 style={{ fontFamily:'var(--font-serif)', fontSize:'1.75rem', fontWeight:300, letterSpacing:'-0.012em' }}>{isZh ? `更多${catZh[work.cat]||work.cat}作品` : `More in ${work.cat}`}</h3>
                <Ghost onClick={() => setPage('gallery')}>{isZh ? '查看全部' : 'View category'}</Ghost>
              </div>
              <div style={{ display:'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)':'repeat(3,1fr)', gap: isMobile ? '32px 16px':48 }}>
                {related.map((w) => (
                  <WorkCard key={w.id} work={w} airy lang={lang}
                    onClick={() => { setWork(w); setPage('detail'); window.scrollTo({ top:0 }); }}
                    onInquire={(w) => { setWork(w); setInquireOpen(true); }} />
                ))}
              </div>
            </section>
          )}
          <Footer setPage={setPage} lang={lang} />
          {inquireOpen && <InquiryModal work={work} onClose={() => setInquireOpen(false)} lang={lang} />}
        </main>
      );
    }

    /* ───────────────────────────────────────────────
       ABOUT PAGE
    ─────────────────────────────────────────────── */
    function About({ setPage, lang='en' }) {
      const isZh = lang === 'zh';
      const { isMobile, isTablet } = useBreakpoint();
      const px = isMobile ? 24 : isTablet ? 40 : 56;
      const navH = isMobile ? 64 : 88;
      const values = isZh ? [
        ['01','克制','我们刻意保持收藏的精简。每件入藏的作品，都因其内在分量而存在——而非为了填满页面。'],
        ['02','恒久','收藏中没有任何作品是短暂意义上的装饰。这些都是为长存、为意义而造之物。'],
        ['03','亲密','所有咨询均由我们亲自处理。我们了解每一位艺术家，也了解每一件作品。这里没有算法。'],
      ] : [
        ['01','Restraint','We keep the collection small. Every work is here because it merits presence — not because we needed to fill a page.'],
        ['02','Longevity','Nothing in the collection is decorative in a temporary sense. These are objects made to last and to matter.'],
        ['03','Intimacy','Enquiries are handled personally. We know each artist. We know each piece. There is no algorithm here.'],
      ];
      return (
        <main style={{ paddingTop:navH }}>
          <section style={{ padding:`${isMobile ? 64:120}px ${px}px 0` }}>
            <Eyebrow style={{ marginBottom: isMobile ? 24:32 }}>{isZh ? '工作室 · 荟物间' : 'The Studio · 荟物间'}</Eyebrow>
            <h1 style={{ fontFamily:'var(--font-serif)', fontSize:'clamp(2rem, 5vw, 4.5rem)', fontWeight:300, lineHeight:1.05, letterSpacing:'-0.025em', maxWidth:940, marginBottom: isMobile ? 40:64 }}>{isZh ? '一个让艺术品各得其所的空间。' : 'A gathered space for objects that earn their place.'}</h1>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 1fr', gap: isMobile ? 28:80, maxWidth:960, marginBottom: isMobile ? 56:96 }}>
              <p style={{ fontFamily:'var(--font-sans)', fontSize:'1.0625rem', lineHeight:1.8, color:'var(--fg-secondary)' }}>{isZh ? '荟物间是一家精选画廊，汇聚墙面艺术、立体装置与艺术家具。收藏刻意保持精简——入选的艺术家与匠人，其创作以沉静胜于喧嚣。' : 'The Infinite Nook is a curated gallery for wall art, sculptural works, and art furniture. The collection is small by intention — a roster of artists and makers whose practice values quiet over spectacle.'}</p>
              <p style={{ fontFamily:'var(--font-sans)', fontSize:'1.0625rem', lineHeight:1.8, color:'var(--fg-secondary)' }}>{isZh ? '品牌名称——无论中文"荟物间"还是英文"The Infinite Nook"——描述的是同一件事：一个汇聚艺术之物的空间。' : 'The name — in English and in Chinese, 荟物间 — describes the same thing: a gathered space for artful objects. A room where what you choose to keep says something about how you live.'}</p>
            </div>
          </section>
          <section style={{ padding:`0 ${px}px` }}>
            <div style={{ width:'100%', aspectRatio: isMobile ? '4/3':'16/7', backgroundImage:`url(${window.__R('imgStudio')})`, backgroundSize:'cover', backgroundPosition:'center 55%' }} />
          </section>
          <section style={{ padding:`${isMobile ? 64:120}px ${px}px`, borderTop:'1px solid var(--border-light)', display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 2fr', gap: isMobile ? 32:80 }}>
            <div>
              <Eyebrow style={{ marginBottom:22 }}>{isZh ? '我们的实践' : 'Our practice'}</Eyebrow>
              <h2 style={{ fontFamily:'var(--font-serif)', fontSize:'clamp(1.625rem, 2.8vw, 2.375rem)', fontWeight:300, lineHeight:1.18, letterSpacing:'-0.012em', maxWidth:320 }}>{isZh ? '三件我们坚持的事。' : 'Three things we hold to.'}</h2>
            </div>
            <div>
              {values.map(([num, h, b], i, a) => (
                <div key={num} style={{ display:'grid', gridTemplateColumns: isMobile ? '40px 1fr':'60px 1fr', gap: isMobile ? 20:40, padding:`${isMobile ? 24:36}px 0`, alignItems:'baseline', borderTop:'1px solid var(--border-light)', borderBottom: i===a.length-1 ? '1px solid var(--border-light)':'none' }}>
                  <div style={{ fontFamily:'var(--font-mono)', fontSize:'0.75rem', color:'var(--fg-tertiary)', letterSpacing:'0.1em' }}>{num}</div>
                  <div>
                    <div style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.375rem':'1.625rem', fontWeight:400, marginBottom:14 }}>{h}</div>
                    <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', lineHeight:1.75, color:'var(--fg-secondary)', maxWidth:560 }}>{b}</p>
                  </div>
                </div>
              ))}
            </div>
          </section>
          <section style={{ padding:`0 ${px}px ${isMobile ? 80:140}px`, borderTop:'1px solid var(--border-light)' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', padding:`${isMobile ? 32:48}px 0 ${isMobile ? 40:64}px` }}>
              <div>
                <Eyebrow style={{ marginBottom:16 }}>{isZh ? '艺术家名单' : 'The roster'}</Eyebrow>
                <h2 style={{ fontFamily:'var(--font-serif)', fontSize:'clamp(1.625rem, 2.8vw, 2.375rem)', fontWeight:300, letterSpacing:'-0.018em' }}>{isZh ? '入藏艺术家' : 'Artists in the collection'}</h2>
              </div>
            </div>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr 1fr': isTablet ? 'repeat(2,1fr)':'repeat(3,1fr)', gap: isMobile ? 24:48 }}>
              {ARTISTS.map((a) => {
                const [hov, setHov] = useState(false);
                return (
                  <div key={a.name} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}>
                    <div style={{ overflow:'hidden', marginBottom:22 }}>
                      <div style={{ transform: hov ? 'scale(1.03)':'scale(1)', transition:'transform 600ms var(--ease-out)' }}>
                        <ArtImg img={a.img} pos={a.pos} ratio="1/1" />
                      </div>
                    </div>
                    <div style={{ fontFamily:'var(--font-serif)', fontSize:'1.25rem', fontWeight:400, letterSpacing:'-0.005em', marginBottom:6 }}>{a.name}</div>
                    <div style={{ fontFamily:'var(--font-sans)', fontSize:'0.8125rem', color:'var(--fg-secondary)', fontStyle:'italic', marginBottom:8 }}>{a.city}</div>
                    <Eyebrow>{a.discipline}</Eyebrow>
                  </div>
                );
              })}
            </div>
          </section>
          <Footer setPage={setPage} lang={lang} />
        </main>
      );
    }

    /* ───────────────────────────────────────────────
       CONTACT PAGE — forms fixed with fetch to Tally
    ─────────────────────────────────────────────── */
    /*
      Contact forms are now native Tally embeds (iframe pointing at
      https://tally.so/embed/<id>). This is the ONLY method Tally
      officially supports for accepting submissions from a third-party
      site — custom POSTs to /r/<id> do not record responses.

      To wire your own forms:
        1. Create a form at https://tally.so
        2. Publish it, open Share → Embed → copy the form ID from the URL
           (https://tally.so/embed/XXXXXX → ID = XXXXXX)
        3. Replace the IDs below.
    */
    const TALLY_GENERAL_ID = 'Me8bVM';
    const TALLY_ARTIST_ID  = '0QoPoN';

    /* Loads tally.so/widgets/embed.js once, then upgrades any
       <iframe data-tally-src> on the page to a live embed. */
    function loadTallyEmbeds() {
      const upgrade = () => {
        if (window.Tally && typeof window.Tally.loadEmbeds === 'function') {
          window.Tally.loadEmbeds();
        } else {
          document.querySelectorAll('iframe[data-tally-src]:not([src])')
            .forEach((el) => { el.src = el.dataset.tallySrc; });
        }
      };
      if (window.Tally) { upgrade(); return; }
      const existing = document.querySelector('script[src="https://tally.so/widgets/embed.js"]');
      if (existing) { existing.addEventListener('load', upgrade); return; }
      const s = document.createElement('script');
      s.src = 'https://tally.so/widgets/embed.js';
      s.onload = upgrade; s.onerror = upgrade;
      document.body.appendChild(s);
    }

    /* React wrapper around a Tally iframe.
       Handles the embed.js upgrade, listens for the official
       Tally.FormSubmitted postMessage, and reports success up. */
    function TallyEmbed({ formId, onSubmitted, height = 640, lang = 'en' }) {
      const iframeRef = React.useRef(null);
      React.useEffect(() => { loadTallyEmbeds(); }, [formId]);
      React.useEffect(() => {
        function onMsg(e) {
          const d = e && e.data;
          if (typeof d !== 'string') return;
          if (d.indexOf('Tally.FormSubmitted') === -1) return;
          try {
            const payload = JSON.parse(d).payload;
            if (payload && payload.formId === formId && onSubmitted) onSubmitted(payload);
          } catch (err) { /* ignore */ }
        }
        window.addEventListener('message', onMsg);
        return () => window.removeEventListener('message', onMsg);
      }, [formId, onSubmitted]);

      const src = `https://tally.so/embed/${formId}?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1`;
      return (
        <iframe
          ref={iframeRef}
          data-tally-src={src}
          loading="lazy"
          width="100%"
          height={height}
          frameBorder="0"
          marginHeight="0"
          marginWidth="0"
          title={lang === 'zh' ? '联系表单' : 'Contact form'}
          style={{ width:'100%', border:'none', background:'transparent', display:'block' }}
        />
      );
    }

    function ContactField({ label, children }) {
      return (
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          <Eyebrow>{label}</Eyebrow>
          {children}
        </div>
      );
    }

    function Contact({ setPage, lang='en' }) {
      const [contactSent, setContactSent] = useState(false);
      const [artistSent,  setArtistSent]  = useState(false);
      const [tab, setTab] = useState('contact');
      const isZh = lang === 'zh';
      const { isMobile, isTablet } = useBreakpoint();
      const px = isMobile ? 24 : isTablet ? 40 : 56;
      const navH = isMobile ? 64 : 88;

      return (
        <main style={{ paddingTop:navH }}>
          <section style={{ padding:`${isMobile ? 64:100}px ${px}px ${isMobile ? 48:72}px`, borderBottom:'1px solid var(--border-light)', maxWidth:1000 }}>
            <Eyebrow style={{ marginBottom:28 }}>{isZh ? '联系我们' : 'Contact'}</Eyebrow>
            <h1 style={{ fontFamily:'var(--font-serif)', fontSize:'clamp(2.5rem, 4.4vw, 4rem)', fontWeight:300, lineHeight:1.02, letterSpacing:'-0.025em', marginBottom:32, maxWidth:720 }}>{isZh ? '从一个房间、一面墙，\n或一种感受开始。' : 'Begin with a room,\na wall, or a feeling.'}</h1>
            <p style={{ fontFamily:'var(--font-sans)', fontSize:'1.0625rem', lineHeight:1.75, color:'var(--fg-secondary)', maxWidth:560 }}>{isZh ? '无论您正在寻找一件单独的作品、一项定制委托，还是为更大空间寻求策展方向，我们诚挚欢迎有思考深度的咨询。' : 'Whether you are seeking a single work, a custom commission, or a curatorial direction for a larger space, we welcome thoughtful inquiries.'}</p>
          </section>

          {/* Tab switcher */}
          <div style={{ display:'flex', gap:0, borderBottom:'1px solid var(--border-light)', padding:`0 ${px}px`, overflowX:'auto' }}>
            {[['contact', isZh ? '一般咨询':'General Inquiry'],['artist', isZh ? '艺术家投递':'Artist Submission']].map(([t, l]) => (
              <button key={t} onClick={() => setTab(t)} style={{ background:'none', border:'none', cursor:'pointer', padding:'20px 0', marginRight:48, fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing: isZh ? '0.1em':'0.2em', textTransform: isZh ? 'none':'uppercase', color: tab===t ? 'var(--fg-primary)':'var(--fg-tertiary)', borderBottom: tab===t ? '2px solid var(--fg-primary)':'2px solid transparent', transition:'color var(--dur-base)' }}>{l}</button>
            ))}
          </div>

          {/* General contact form */}
          {tab === 'contact' && (
            <section style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 1fr', minHeight: isMobile ? 'auto':640 }}>
              <div style={{ borderRight: isMobile ? 'none':'1px solid var(--border-light)', borderBottom: isMobile ? '1px solid var(--border-light)':'none', padding: isMobile ? `56px ${px}px`:`80px 64px`, display:'flex', flexDirection:'column', justifyContent:'center' }}>
                {contactSent ? (
                  <div style={{ display:'flex', flexDirection:'column', gap:18 }}>
                    <div style={{ width:48, height:48, background:'var(--color-coral)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <h3 style={{ fontFamily:'var(--font-serif)', fontSize:'1.75rem', fontWeight:300, letterSpacing:'-0.012em' }}>{isZh ? '消息已发送。' : 'Message received.'}</h3>
                    <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', lineHeight:1.75, color:'var(--fg-secondary)', maxWidth:360 }}>{isZh ? '我们将在48小时内与您联系。' : "We'll be in touch within 48 hours."}</p>
                  </div>
                ) : (
                  <div style={{ width:'100%', maxWidth:560 }}>
                    <TallyEmbed formId={TALLY_GENERAL_ID} lang={lang} height={isMobile ? 720 : 640} onSubmitted={() => setContactSent(true)} />
                  </div>
                )}
              </div>
              <div style={{ padding: isMobile ? `56px ${px}px`:`80px 64px`, display:'flex', flexDirection:'column', justifyContent:'center', gap:44 }}>
                {(isZh ? [
                  { label:'电子邮箱',  body:'info@theinfinitenook.group' },
                  { label:'响应时间',  body:'所有咨询均由我们亲自处理，48小时内回复。' },
                  { label:'所在地',    body:'德国柏林 · 夏洛滕堡\n中国上海 · 徐汇区' },
                  { label:'工作室到访',body:'仅限预约参观，谢绝直接来访。' },
                  { label:'设计师合作',body:'如需专属支持，请访问合作咨询页面。' },
                  { label:'媒体合作',  body:'press@theinfinitenook.group' },
                ] : [
                  { label:'Email',        body:'info@theinfinitenook.group' },
                  { label:'Response',     body:'All enquiries are answered personally within 48 hours.' },
                  { label:'Locations',    body:'Berlin · Charlottenburg\nShanghai · Xuhui District' },
                  { label:'Studio visits',body:'By appointment only. We are not a walk-in space.' },
                  { label:'Trade',        body:'For designers and architects — visit our Trade page for dedicated support.' },
                  { label:'Press',        body:'press@theinfinitenook.group' },
                ]).map((v) => (
                  <div key={v.label}>
                    <Eyebrow style={{ marginBottom:12 }}>{v.label}</Eyebrow>
                    <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', lineHeight:1.75, color:'var(--fg-secondary)', whiteSpace:'pre-line', maxWidth:360 }}>{v.body}</p>
                  </div>
                ))}
                <Ghost onClick={() => setPage('trade')} arrow>{isZh ? '设计师合作服务' : 'Trade & Design services'}</Ghost>
              </div>
            </section>
          )}

          {/* Artist submission form */}
          {tab === 'artist' && (
            <section style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 1fr', minHeight: isMobile ? 'auto':640 }}>
              <div style={{ padding: isMobile ? `56px ${px}px`:`80px 64px`, borderRight: isMobile ? 'none':'1px solid var(--border-light)', borderBottom: isMobile ? '1px solid var(--border-light)':'none', display:'flex', flexDirection:'column', justifyContent:'center' }}>
                <Eyebrow style={{ marginBottom:24 }}>{isZh ? '致艺术家' : 'For Artists'}</Eyebrow>
                <h2 style={{ fontFamily:'var(--font-serif)', fontSize:'clamp(2rem, 3.2vw, 2.75rem)', fontWeight:300, lineHeight:1.08, letterSpacing:'-0.02em', marginBottom:28, maxWidth:440 }}>{isZh ? '一个精选的\n艺术家网络。' : 'A selective network\nof artists and makers.'}</h2>
                <p style={{ fontFamily:'var(--font-sans)', fontSize:'1rem', lineHeight:1.8, color:'var(--fg-secondary)', maxWidth:460, marginBottom:48 }}>{isZh ? '荟物间正在构建一个精选的艺术家网络，其创作围绕氛围感、材质敏感性与当代室内美学展开。' : 'The Infinite Nook is building a selective network of artists whose work speaks to atmosphere, material sensitivity, cultural memory, and contemporary interiors.'}</p>
                <div style={{ display:'flex', flexDirection:'column', gap:16, paddingTop:32, borderTop:'1px solid var(--border-light)' }}>
                  {(isZh ? ['绘画','水墨及纸本创作','综合媒介','雕塑与物件','艺术家具','场域创作'] : ['Painting','Ink & works on paper','Mixed media','Sculpture & objects','Art furniture','Site-responsive']).map((m) => (
                    <div key={m} style={{ display:'flex', gap:14, alignItems:'center' }}>
                      <span style={{ width:4, height:4, background:'var(--color-coral)', borderRadius:'50%', flexShrink:0 }} />
                      <span style={{ fontFamily:'var(--font-sans)', fontSize:'0.875rem', color:'var(--fg-secondary)' }}>{m}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div style={{ padding: isMobile ? `56px ${px}px`:`80px 64px`, display:'flex', flexDirection:'column', justifyContent:'center' }}>
                {artistSent ? (
                  <div style={{ display:'flex', flexDirection:'column', gap:18 }}>
                    <div style={{ width:48, height:48, background:'var(--color-coral)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <h3 style={{ fontFamily:'var(--font-serif)', fontSize:'1.75rem', fontWeight:300, letterSpacing:'-0.012em' }}>{isZh ? '作品集已收到。' : 'Portfolio received.'}</h3>
                    <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', lineHeight:1.75, color:'var(--fg-secondary)', maxWidth:380 }}>{isZh ? '我们每季度评审一次作品集，并主动联系与项目方向契合的艺术家。' : 'We review portfolios quarterly and reach out to artists whose practice aligns with the programme.'}</p>
                  </div>
                ) : (
                  <div style={{ width:'100%', maxWidth:560 }}>
                    <h3 style={{ fontFamily:'var(--font-serif)', fontSize:'1.625rem', fontWeight:300, letterSpacing:'-0.012em', marginBottom:20 }}>{isZh ? '提交作品集' : 'Submit a portfolio'}</h3>
                    <TallyEmbed formId={TALLY_ARTIST_ID} lang={lang} height={isMobile ? 900 : 820} onSubmitted={() => setArtistSent(true)} />
                    <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.8125rem', lineHeight:1.65, color:'var(--fg-tertiary)', marginTop:18 }}>{isZh ? '我们每季度评审作品集，并主动联系符合项目方向的艺术家——恕不逐一回复。' : 'We review portfolios quarterly and reach out when your practice aligns — we are unable to respond to every submission individually.'}</p>
                  </div>
                )}
              </div>
            </section>
          )}
          <Footer setPage={setPage} lang={lang} />
        </main>
      );
    }

    /* ───────────────────────────────────────────────
       TRADE PAGE
    ─────────────────────────────────────────────── */
    function TradeField({ label, children }) {
      return (
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          <Eyebrow>{label}</Eyebrow>
          {children}
        </div>
      );
    }

    function Trade({ setPage, lang='en' }) {
      const [formSent, setFormSent] = useState(false);
      const isZh = lang === 'zh';
      const { isMobile, isTablet } = useBreakpoint();
      const px = isMobile ? 24 : isTablet ? 40 : 56;
      const navH = isMobile ? 64 : 88;
      const [form, setForm] = useState({ name:'', studio:'', email:'', projectType:'', location:'', timeline:'', budget:'', services:[], message:'' });
      const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
      const toggleService = (s) => { const arr = form.services.includes(s) ? form.services.filter(x=>x!==s) : [...form.services, s]; setForm({ ...form, services:arr }); };
      const inputStyle = { fontFamily:'var(--font-sans)', fontSize:'0.9375rem', padding:'12px 0', border:'none', borderBottom:'1px solid var(--border-mid)', background:'transparent', color:'var(--fg-primary)', outline:'none', width:'100%' };
      const SERVICES_EN = ['Art sourcing','Custom commission','Art curation','Art furniture','Wall installation','Artist collaboration'];
      const SERVICES_ZH = ['艺术选配','定制委托','策展顾问','艺术家具','墙面安装','艺术家合作'];
      const services = isZh ? SERVICES_ZH : SERVICES_EN;
      const steps = isZh
        ? ['分享空间信息','确定尺幅、色调与方向','匹配合适的艺术家','审阅方案与时间表','完成创作并交付']
        : ['Share the space','Define scale, palette, and direction','Match with an artist','Review proposal and timeline','Complete production and delivery'];

      return (
        <main style={{ paddingTop:navH }}>
          <section style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 1fr', minHeight: isMobile ? 'auto':`calc(100vh - ${navH}px)`, borderBottom:'1px solid var(--border-light)' }}>
            <div style={{ padding: isMobile ? `64px ${px}px`:'100px 64px', display:'flex', flexDirection:'column', justifyContent:'center', borderRight: isMobile ? 'none':'1px solid var(--border-light)', borderBottom: isMobile ? '1px solid var(--border-light)':'none' }}>
              <Eyebrow style={{ marginBottom:28, color:'var(--color-coral)' }}>{isZh ? '设计师与项目合作' : 'Trade & Design Services'}</Eyebrow>
              <h1 style={{ fontFamily:'var(--font-serif)', fontSize:'clamp(2.5rem, 4.2vw, 3.875rem)', fontWeight:300, lineHeight:1.02, letterSpacing:'-0.026em', marginBottom:32, maxWidth:520 }}>{isZh ? '为室内空间、酒店项目与审慎营造的场所提供艺术顾问服务。' : 'Art advisory for interiors, hospitality, and considered spaces.'}</h1>
              <p style={{ fontFamily:'var(--font-sans)', fontSize:'1.0625rem', lineHeight:1.78, color:'var(--fg-secondary)', maxWidth:480, marginBottom:48 }}>{isZh ? '我们与设计师、收藏家、开发商及酒店团队合作，为空间挑选、委托及策划能带来氛围感、材质温度与文化深度的作品。' : 'We work with designers, collectors, developers, and hospitality teams to source, commission, and curate works that bring atmosphere, materiality, and cultural depth into a space.'}</p>
              <div style={{ display:'flex', gap:10, flexWrap:'wrap', marginBottom:52 }}>
                {(isZh ? ['贸易定价','委托创作','试挂服务','安装支持','私人选品'] : ['Trade pricing','Commission','On approval','Installation','Private sourcing']).map((b) => (
                  <div key={b} style={{ padding:'7px 16px', border:'1px solid var(--border-mid)', fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing: isZh ? '0.08em':'0.16em', textTransform: isZh ? 'none':'uppercase', color:'var(--fg-secondary)' }}>{b}</div>
                ))}
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: isMobile ? 16:36, paddingTop:40, borderTop:'1px solid var(--border-light)' }}>
                {(isZh ? [['38+','已完成项目'],['12','服务国家'],['1天','响应时间']] : [['38+','Projects completed'],['12','Countries'],['1 day','Response time']]).map(([n,l]) => (
                  <div key={n} style={{ minWidth:0 }}>
                    <div style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.75rem':'2.5rem', fontWeight:300, color:'var(--color-coral)', letterSpacing:'-0.025em', lineHeight:1, marginBottom:8 }}>{n}</div>
                    <div style={{ fontFamily:'var(--font-sans)', fontSize:'0.8125rem', color:'var(--fg-secondary)' }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ backgroundImage:`url(${window.__R('imgInteriorHero')})`, backgroundSize:'cover', backgroundPosition:'center 30%', minHeight: isMobile ? 320:'auto' }} />
          </section>

          <section style={{ padding:`${isMobile ? 80:140}px ${px}px`, borderBottom:'1px solid var(--border-light)' }}>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 2fr', gap: isMobile ? 32:80 }}>
              <div>
                <Eyebrow style={{ marginBottom:22 }}>{isZh ? '服务内容' : 'Services'}</Eyebrow>
                <h2 style={{ fontFamily:'var(--font-serif)', fontSize:'clamp(1.75rem, 2.8vw, 2.375rem)', fontWeight:300, lineHeight:1.18, letterSpacing:'-0.015em', maxWidth:280 }}>{isZh ? '我们如何与设计行业合作。' : 'How we work with the trade.'}</h2>
              </div>
              <div>
                {(isZh ? [
                  ['01','艺术策展','以具体空间与客户为基准，从我们的艺术家名单中精心甄选。'],
                  ['02','委托创作','当合适的作品尚未存在，我们与艺术家协作，依照空间定制尺幅、材质与色调。'],
                  ['03','试挂服务','精选作品可先送至现场试放，待决策后再确认。我们负责物流与保险。'],
                  ['04','安装服务','由我们的团队负责配送、悬挂及照明顾问——每件作品以应有的用心落位。'],
                  ['05','贸易定价','注册合作伙伴可享受公开系列的贸易价格，并优先获取非公开作品。'],
                ] : [
                  ['01','Art Curation','We build a considered selection from our roster — calibrated against your brief, the room, and the client.'],
                  ['02','Commission','When the right work does not yet exist, we bring it into being — to dimension, material, and palette.'],
                  ['03','On Approval','Selected works can travel to site before a decision. We manage logistics and insurance.'],
                  ['04','Installation','Our team handles delivery, hanging, and lighting consultancy — every piece placed with care.'],
                  ['05','Trade Pricing','Registered partners receive trade pricing across the public collection, plus access to unlisted works.'],
                ]).map(([n,h,b],i,a) => (
                  <div key={n} style={{ display:'grid', gridTemplateColumns: isMobile ? '40px 1fr':'56px 1fr', gap: isMobile ? 16:36, padding:`${isMobile ? 24:36}px 0`, alignItems:'baseline', borderTop:'1px solid var(--border-light)', borderBottom: i===a.length-1 ? '1px solid var(--border-light)':'none' }}>
                    <div style={{ fontFamily:'var(--font-mono)', fontSize:'0.75rem', color:'var(--fg-tertiary)', letterSpacing:'0.1em' }}>{n}</div>
                    <div>
                      <div style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.375rem':'1.625rem', fontWeight:400, marginBottom:12 }}>{h}</div>
                      <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', lineHeight:1.75, color:'var(--fg-secondary)', maxWidth:580 }}>{b}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </section>

          <section style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 1fr', borderBottom:'1px solid var(--border-light)', background:'var(--bg-surface)' }}>
            <div style={{ backgroundImage:`url(${window.__R('imgWall3')})`, backgroundSize:'cover', backgroundPosition:'center 38%', minHeight: isMobile ? 320:560 }} />
            <div style={{ padding: isMobile ? `64px ${px}px`:'100px 64px', display:'flex', flexDirection:'column', justifyContent:'center', borderLeft: isMobile ? 'none':'1px solid var(--border-light)', borderTop: isMobile ? '1px solid var(--border-light)':'none' }}>
              <Eyebrow style={{ marginBottom:26 }}>{isZh ? '委托创作' : 'Commission'}</Eyebrow>
              <h2 style={{ fontFamily:'var(--font-serif)', fontSize:'clamp(2rem, 3vw, 2.75rem)', fontWeight:300, lineHeight:1.1, letterSpacing:'-0.02em', marginBottom:28, maxWidth:460 }}>{isZh ? '为空间量身创作的\n定制之作。' : 'Commissioned works,\nshaped around a space.'}</h2>
              <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', lineHeight:1.8, color:'var(--fg-secondary)', maxWidth:460, marginBottom:44 }}>{isZh ? '对于有特定尺幅、色调、材质方向或文化参照需求的客户，荟物间与遴选艺术家协作开展委托创作。每个委托项目都从对空间、氛围以及作品所应承担的情感角色的深度对话开始。' : 'For clients seeking a specific scale, palette, material direction, or cultural reference, The Infinite Nook develops commissioned works in collaboration with selected artists. Each commission begins with a conversation around the room, the atmosphere, and the emotional role the work should play.'}</p>
              <div style={{ display:'flex', flexDirection:'column', gap:0, marginBottom:44 }}>
                {steps.map((step, i) => (
                  <div key={i} style={{ display:'flex', gap:20, alignItems:'baseline', padding:'16px 0', borderTop:'1px solid var(--border-light)' }}>
                    <span style={{ fontFamily:'var(--font-mono)', fontSize:'0.625rem', color:'var(--color-coral)', letterSpacing:'0.1em', flexShrink:0 }}>0{i+1}</span>
                    <span style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', color:'var(--fg-secondary)' }}>{step}</span>
                  </div>
                ))}
              </div>
            </div>
          </section>

          <section style={{ padding:`${isMobile ? 64:120}px ${px}px`, borderBottom:'1px solid var(--border-light)' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: isMobile ? 40:64 }}>
              <div>
                <Eyebrow style={{ marginBottom:14 }}>{isZh ? '精选项目' : 'Selected projects'}</Eyebrow>
                <h2 style={{ fontFamily:'var(--font-serif)', fontSize: isMobile ? '1.75rem':'2.25rem', fontWeight:300, letterSpacing:'-0.018em' }}>{isZh ? '走入世界的作品' : 'Work in the world'}</h2>
              </div>
            </div>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'repeat(2,1fr)', gap: isMobile ? 40:48 }}>
              {PROJECTS.map((p, i) => {
                const [hov, setHov] = useState(false);
                return (
                  <div key={p.name} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}>
                    <div style={{ overflow:'hidden', marginBottom:24 }}>
                      <div style={{ transform: hov ? 'scale(1.02)':'scale(1)', transition:'transform 600ms var(--ease-out)' }}>
                        <ArtImg img={p.img} pos={p.pos} ratio={i%2===0 ? '4/3':'16/10'} />
                      </div>
                    </div>
                    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:10 }}>
                      <h3 style={{ fontFamily:'var(--font-serif)', fontSize:'1.5rem', fontWeight:400, letterSpacing:'-0.005em' }}>{p.name}</h3>
                      <span style={{ fontFamily:'var(--font-mono)', fontSize:'0.7rem', color:'var(--fg-tertiary)' }}>{p.year}</span>
                    </div>
                    <Eyebrow style={{ marginBottom:8 }}>{p.loc}</Eyebrow>
                    <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.875rem', color:'var(--fg-secondary)' }}>{p.scope}</p>
                  </div>
                );
              })}
            </div>
          </section>

          <section id="trade-form" style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 1.1fr' }}>
            <div style={{ padding: isMobile ? `64px ${px}px`:'100px 64px', borderRight: isMobile ? 'none':'1px solid var(--border-light)', borderBottom: isMobile ? '1px solid var(--border-light)':'none', background:'var(--bg-surface)', display:'flex', flexDirection:'column', justifyContent:'center' }}>
              <Eyebrow style={{ marginBottom:28 }}>{isZh ? '合作账户' : 'Trade account'}</Eyebrow>
              <h2 style={{ fontFamily:'var(--font-serif)', fontSize:'clamp(2rem, 3.2vw, 2.75rem)', fontWeight:300, lineHeight:1.1, letterSpacing:'-0.02em', marginBottom:28, maxWidth:420 }}>{isZh ? '开启项目合作或申请贸易账户。' : 'Begin a project or apply for trade access.'}</h2>
              <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', lineHeight:1.78, color:'var(--fg-secondary)', maxWidth:400, marginBottom:48 }}>{isZh ? '请告诉我们您的实践背景与项目情况。我们将在一个工作日内回复。' : "Tell us about your practice and project. We respond within one business day with next steps and trade pricing."}</p>
              {[
                [isZh ? '响应时间':'Response time', isZh ? '1个工作日':'1 business day'],
                [isZh ? '贸易定价':'Trade pricing',  isZh ? '首次确认订单起生效':'Applied from first confirmed order'],
                [isZh ? '到访':'Visits',             isZh ? '柏林与上海 · 预约参观':'Berlin & Shanghai — by appointment'],
                [isZh ? '联系邮箱':'Contact',        'info@thenifinitenook.group'],
              ].map(([k,v]) => (
                <div key={k} style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', padding:'16px 0', borderBottom:'1px solid var(--border-light)' }}>
                  <Eyebrow>{k}</Eyebrow>
                  <span style={{ fontFamily:'var(--font-sans)', fontSize:'0.875rem', color:'var(--fg-primary)', maxWidth:240, textAlign:'right' }}>{v}</span>
                </div>
              ))}
            </div>
            <div style={{ padding: isMobile ? `64px ${px}px`:'100px 64px' }}>
              {formSent ? (
                <div style={{ display:'flex', flexDirection:'column', gap:20, paddingTop:24 }}>
                  <div style={{ width:48, height:48, background:'var(--color-coral)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><polyline points="20 6 9 17 4 12"/></svg>
                  </div>
                  <h3 style={{ fontFamily:'var(--font-serif)', fontSize:'2rem', fontWeight:300, letterSpacing:'-0.015em' }}>{isZh ? '感谢您的申请。' : 'Thank you.'}</h3>
                  <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.9375rem', lineHeight:1.75, color:'var(--fg-secondary)', maxWidth:400 }}>{isZh ? '我们将在一个工作日内与您联系。' : "We'll be in touch within one business day to discuss your project."}</p>
                  <Ghost onClick={() => setPage('gallery')} arrow>{isZh ? '浏览作品收藏' : 'Browse the collection'}</Ghost>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setFormSent(true); }} style={{ display:'flex', flexDirection:'column', gap:26 }}>
                  <Eyebrow style={{ marginBottom:4 }}>{isZh ? '开始合作咨询' : 'Start a Trade Inquiry'}</Eyebrow>
                  <h3 style={{ fontFamily:'var(--font-serif)', fontSize:'1.75rem', fontWeight:300, letterSpacing:'-0.015em', marginBottom:8 }}>{isZh ? '请介绍您的项目。' : 'Tell us about your project.'}</h3>
                  <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 1fr', gap:20 }}>
                    <TradeField label={isZh ? '姓名':'Name'}><input required placeholder={isZh ? '您的姓名':'Your name'} value={form.name} onChange={set('name')} style={inputStyle} /></TradeField>
                    <TradeField label={isZh ? '公司 / 工作室':'Company / Studio'}><input placeholder={isZh ? '工作室名称':'Studio name'} value={form.studio} onChange={set('studio')} style={inputStyle} /></TradeField>
                  </div>
                  <TradeField label={isZh ? '电子邮箱':'Email'}><input required type="email" placeholder="you@studio.com" value={form.email} onChange={set('email')} style={inputStyle} /></TradeField>
                  <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr':'1fr 1fr', gap:20 }}>
                    <TradeField label={isZh ? '项目类型':'Project type'}>
                      <select value={form.projectType} onChange={set('projectType')} style={{ ...inputStyle, appearance:'none', cursor:'pointer' }}>
                        <option value="">{isZh ? '请选择…':'Select…'}</option>
                        {isZh ? <><option>室内设计</option><option>建筑设计</option><option>房地产开发</option><option>酒店项目</option><option>私人收藏</option><option>其他</option></> : <><option>Interior design</option><option>Architecture</option><option>Real estate</option><option>Hospitality</option><option>Private collection</option><option>Other</option></>}
                      </select>
                    </TradeField>
                    <TradeField label={isZh ? '所在地':'Location'}><input placeholder={isZh ? '城市，国家':'City, country'} value={form.location} onChange={set('location')} style={inputStyle} /></TradeField>
                  </div>
                  <TradeField label={isZh ? '所需服务':'Services needed'}>
                    <div style={{ display:'flex', flexWrap:'wrap', gap:8, paddingTop:4 }}>
                      {services.map((s) => (
                        <button type="button" key={s} onClick={() => toggleService(s)} style={{ padding:'7px 14px', border:`1px solid ${form.services.includes(s) ? 'var(--color-ink)':'var(--border-mid)'}`, background: form.services.includes(s) ? 'var(--color-ink)':'transparent', color: form.services.includes(s) ? '#fff':'var(--fg-secondary)', fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing: isZh ? '0.08em':'0.14em', textTransform: isZh ? 'none':'uppercase', cursor:'pointer', transition:'all var(--dur-fast)' }}>{s}</button>
                      ))}
                    </div>
                  </TradeField>
                  <TradeField label={isZh ? '项目说明':'Message'}>
                    <textarea required rows={4} placeholder={isZh ? '请描述空间、项目概况及您希望实现的目标……' : "Describe the space, the brief, and what you're hoping to achieve…"} value={form.message} onChange={set('message')} style={{ ...inputStyle, resize:'vertical' }} />
                  </TradeField>
                  <div style={{ marginTop:8 }}><Solid type="submit">{isZh ? '提交合作申请' : 'Start a Trade Inquiry'}</Solid></div>
                  <p style={{ fontFamily:'var(--font-sans)', fontSize:'0.8125rem', lineHeight:1.65, color:'var(--fg-tertiary)' }}>{isZh ? '所有信息均严格保密。我们将在一个工作日内回复。' : 'All information is kept confidential. We respond within one business day.'}</p>
                </form>
              )}
            </div>
          </section>
          <Footer setPage={setPage} lang={lang} />
        </main>
      );
    }

    /* ───────────────────────────────────────────────
       TWEAKS PANEL (language toggle)
    ─────────────────────────────────────────────── */
    const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
      "language": "en"
    }/*EDITMODE-END*/;

    /* ───────────────────────────────────────────────
       ROOT APP
    ─────────────────────────────────────────────── */
    function App() {
      const [page, setPage]   = useState('home');
      const [work, setWork]   = useState(null);
      const [lang, setLang]   = useState(window.__lang || 'en');
      const [tweakOpen, setTweakOpen] = useState(false);

      // Scroll to top on page change
      useEffect(() => { window.scrollTo({ top:0, behavior:'instant' }); }, [page]);

      // Tweaks panel protocol
      useEffect(() => {
        const handler = (e) => {
          const t = e?.data?.type;
          if (t === '__activate_edit_mode')   setTweakOpen(true);
          if (t === '__deactivate_edit_mode') setTweakOpen(false);
        };
        window.addEventListener('message', handler);
        window.parent.postMessage({ type: '__edit_mode_available' }, '*');
        return () => window.removeEventListener('message', handler);
      }, []);

      const isZh = lang === 'zh';

      const switchLang = (newLang) => {
        window.__lang = newLang;
        try { localStorage.setItem('tin_lang', newLang); } catch(e) {}
        setLang(newLang);
        window.parent.postMessage({ type:'__edit_mode_set_keys', edits:{ language: newLang } }, '*');
      };

      const setPageAndWork = (p) => { setPage(p); };

      return (
        <>
          <Nav page={page} setPage={setPageAndWork} lang={lang} setLang={setLang} />

          {page === 'home'    && <Home    setPage={setPageAndWork} setWork={setWork} lang={lang} />}
          {page === 'gallery' && <Gallery setPage={setPageAndWork} setWork={setWork} lang={lang} />}
          {page === 'detail'  && <Detail  work={work} setPage={setPageAndWork} setWork={setWork} lang={lang} />}
          {page === 'about'   && <About   setPage={setPageAndWork} lang={lang} />}
          {page === 'trade'   && <Trade   setPage={setPageAndWork} lang={lang} />}
          {page === 'contact' && <Contact setPage={setPageAndWork} lang={lang} />}

          {/* Tweaks Panel */}
          {tweakOpen && (
            <div style={{ position:'fixed', right:16, bottom:16, zIndex:9000, width:240, background:'rgba(250,249,247,0.92)', backdropFilter:'blur(20px)', border:'0.5px solid rgba(255,255,255,0.6)', borderRadius:14, boxShadow:'0 12px 40px rgba(0,0,0,0.18)', fontFamily:'var(--font-sans)', fontSize:'12px', overflow:'hidden' }}>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 8px 10px 14px', borderBottom:'1px solid rgba(0,0,0,0.06)' }}>
                <b style={{ fontSize:'12px', fontWeight:600, letterSpacing:'0.01em' }}>Tweaks</b>
                <button onClick={() => { setTweakOpen(false); window.parent.postMessage({ type:'__edit_mode_dismissed' }, '*'); }} style={{ background:'transparent', border:'none', cursor:'pointer', color:'rgba(41,38,27,0.55)', width:22, height:22, borderRadius:6, fontSize:13, lineHeight:1 }}>✕</button>
              </div>
              <div style={{ padding:'12px 14px 16px', display:'flex', flexDirection:'column', gap:12 }}>
                <div style={{ fontSize:'10px', fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase', color:'rgba(41,38,27,0.45)' }}>Language</div>
                <div style={{ display:'flex', gap:8 }}>
                  {[['en','English'],['zh','中文']].map(([l, label]) => (
                    <button key={l} onClick={() => switchLang(l)} style={{ flex:1, padding:'8px 0', border:`1px solid ${lang===l ? 'var(--color-ink)':'var(--border-mid)'}`, background: lang===l ? 'var(--color-ink)':'transparent', color: lang===l ? '#fff':'var(--fg-secondary)', fontFamily:'var(--font-sans)', fontSize:'0.6875rem', fontWeight:500, letterSpacing:'0.1em', cursor:'pointer', transition:'all 140ms' }}>{label}</button>
                  ))}
                </div>
                <div style={{ fontSize:'10px', color:'rgba(41,38,27,0.4)', lineHeight:1.5 }}>
                  Switch the site language. The nav toggle also works at any time.
                </div>
              </div>
            </div>
          )}
        </>
      );
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);