/* eslint-disable */
/* cityform — Product page (v1 density · v3 brand)
   Rich configurator + spec table + related grid. 9 cm uniform per §7.1
   but offering customisation density (lid finish, label, quantity, gift). */

function ProductPage({ go, id, t, addToCart }) {
  const item = window.CATALOG.find(x => x.id === id) || window.CATALOG[0];
  // 3D is available when the live catalogue gave us a GLB or a generated STL.
  // (Offline data.js has neither → tab hidden, photos-only, no regression.)
  const has3D = !!(item.model_glb || item.stl_url);
  const [tab, setTab] = React.useState(has3D ? 'object3d' : 'hero'); // object3d | hero | 3q | lifestyle | graphic | packaging | collection
  // Related-product nav keeps ProductPage mounted; re-pick a sane default
  // when the city changes so a stale 'object3d' tab can't blank the frame.
  React.useEffect(() => { setTab(has3D ? 'object3d' : 'hero'); }, [item.id]);
  const [finish, setFinish] = React.useState('mist');   // mist | bone
  const [label, setLabel] = React.useState('default');  // default | custom | none
  const [customLine, setCustomLine] = React.useState('');
  const [qty, setQty] = React.useState(1);
  const [gift, setGift] = React.useState(false);
  const inDev = !item.accent && item.status === 'soon';

  // Real OSM geometry for the Plan view (same source as Make Yours). Falls
  // back to procedural tile if the backend is unreachable or out of England.
  const [area, setArea] = React.useState(null);
  const [mapState, setMapState] = React.useState('loading'); // loading | ready | error
  React.useEffect(() => {
    const lat = Math.abs(item.coords.lat) * (item.coords.ns === 'S' ? -1 : 1);
    const lng = Math.abs(item.coords.lng) * (item.coords.ew === 'W' ? -1 : 1);
    const ctrl = new AbortController();
    setArea(null);
    setMapState('loading');
    fetch('/api/storefront/area_preview', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ lat, lng }),
      signal: ctrl.signal,
    })
      .then(r => r.ok ? r.json() : Promise.reject(r.status))
      .then(d => { setArea(d); setMapState(d && d.in_england ? 'ready' : 'error'); })
      .catch(e => {
        if (e && e.name === 'AbortError') return;
        console.warn('[plan view] area_preview failed:', e);
        setMapState('error');
      });
    return () => ctrl.abort();
  }, [item.id]);

  const finishes = [
    { id:'mist',  label:'PETG · Mist',  sub:'as photographed', swatch:'#E1E5E0' },
    { id:'bone',  label:'PETG · Bone',  sub:'+£6 · lighter',   swatch:'#F7F8F6' },
  ];
  const labels = [
    { id:'default', l:'Default sticker',  sub:item.landmark ? item.landmark : 'Awaiting' },
    { id:'custom',  l:'Custom inscription', sub:'one line, max 22 chars' },
    { id:'none',    l:'No sticker',       sub:'blank Mist lid' },
  ];

  const tabs = [
    ...(has3D ? [{ id:'object3d', name:'3D Object' }] : []),
    { id:'hero',       name:'Hero'            },
    { id:'3q',         name:'Three-quarter'   },
    { id:'lifestyle',  name:'Lifestyle'       },
    { id:'graphic',    name:'City Mark'       },
    { id:'packaging',  name:'Packaging'       },
    { id:'collection', name:'Collection grid' },
  ].map((tb, i) => ({ id: tb.id, label: `${String(i + 1).padStart(2, '0')} ${tb.name}` }));

  const finishAdd = finish === 'bone' ? 6 : 0;
  const giftAdd = gift ? 8 : 0;
  const unit = (item.price || 95) + finishAdd + giftAdd;
  const total = unit * qty;

  return (
    <div style={{ background:'var(--mist)' }}>
      {/* Breadcrumb */}
      <div className="container" style={{ paddingTop:24, fontSize:12, color:'var(--stone)' }}>
        <button onClick={() => go('home')}>cityform</button>
        <span style={{ margin:'0 8px' }}>/</span>
        <button onClick={() => go('atlas')}>collection</button>
        <span style={{ margin:'0 8px' }}>/</span>
        <span style={{ color:'var(--stone)' }}>{item.region.toLowerCase()}</span>
        <span style={{ margin:'0 8px' }}>/</span>
        <span style={{ color:'var(--ink)' }}>{item.name.toLowerCase()}</span>
      </div>

      <div className="container" style={{ paddingTop:32, paddingBottom:64 }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:56 }}>
          {/* GALLERY */}
          <div>
            <ProductGalleryFrame tab={tab} item={item} t={t}/>
            <div style={{ display:'grid', gridTemplateColumns:`repeat(${tabs.length}, 1fr)`, gap:8, marginTop:14 }}>
              {tabs.map(thisTab => (
                <button key={thisTab.id} onClick={() => setTab(thisTab.id)}
                  style={{
                    padding:'10px 8px', textAlign:'left',
                    border:`1px solid ${tab === thisTab.id ? 'var(--ink)' : 'var(--line)'}`,
                    background: tab === thisTab.id ? 'var(--bone)' : 'transparent',
                  }}>
                  <div style={{ fontSize:9, letterSpacing:'0.22em', fontWeight:500, color: tab === thisTab.id ? 'var(--ink)' : 'var(--stone)' }}>
                    {thisTab.label.split(' ')[0]}
                  </div>
                  <div style={{ fontSize:11, marginTop:4, fontWeight:500, color: tab === thisTab.id ? 'var(--ink)' : 'var(--stone)' }}>
                    {thisTab.label.split(' ').slice(1).join(' ')}
                  </div>
                </button>
              ))}
            </div>

            {/* Plan view */}
            <div style={{ marginTop:32, border:'1px solid var(--line)' }}>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 20px', background:'var(--bone)', borderBottom:'1px solid var(--line)' }}>
                <div className="label">Plan view · 1.00 × 1.00 km</div>
                <div className="caption" style={{ fontSize:11 }}>
                  {item.coords.lat.toFixed(4)}° {item.coords.ns} · {Math.abs(item.coords.lng).toFixed(4)}° {item.coords.ew}
                </div>
              </div>
              <div style={{ height:340, position:'relative' }}>
                {mapState === 'ready' && area
                  ? <StyledMap seed={item.id} area={area} cropM={1000}/>
                  : (
                    <div style={{
                      width:'100%', height:'100%', display:'flex',
                      alignItems:'center', justifyContent:'center',
                      background:'var(--mist)',
                    }}>
                      <div className="label" style={{ color:'var(--stone)' }}>
                        {mapState === 'loading' ? 'Loading plan…' : 'Plan unavailable for this location'}
                      </div>
                    </div>
                  )}
              </div>
            </div>
          </div>

          {/* BUY COLUMN */}
          <div style={{ position:'sticky', top:96, alignSelf:'flex-start' }}>
            <div className="label">
              {inDev ? 'In development · ' : 'Now shipping · '}
              {item.region}
            </div>
            <h1 className="h1" style={{ fontSize:72, marginTop:14 }}>{item.name}</h1>
            {item.landmark && (
              <div style={{ marginTop:14, display:'flex', alignItems:'center', gap:12 }}>
                <span style={{ width:14, height:14, background: item.accent ? `var(--${item.accent})` : 'var(--stone)' }}/>
                <span className="label">{item.landmark.toUpperCase()}</span>
              </div>
            )}
            <p className="body" style={{ marginTop:24, fontSize:16, color:'var(--stone)', lineHeight:1.6 }}>
              {item.blurb}
            </p>

            {/* The City Mark */}
            <div style={{ marginTop:32, display:'flex', justifyContent:'center' }}>
              {item.accent ? (
                <CitySticker city={item} size={320}/>
              ) : (
                <div style={{ width:320, aspectRatio:'1/1', background:'var(--bone)', border:'1px dashed var(--line-strong)',
                  display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column', padding:'8%' }}>
                  <span className="label" style={{ fontSize:9 }}>STICKER</span>
                  <div className="h3" style={{ fontSize:22, fontWeight:600, marginTop:14, textAlign:'center' }}>
                    {item.status === 'soon' ? 'Awaiting signature' : 'Commission sticker'}
                  </div>
                  <p className="body" style={{ fontSize:12, color:'var(--stone)', marginTop:8, maxWidth:240, textAlign:'center' }}>
                    {item.spec}
                  </p>
                </div>
              )}
            </div>

            {/* Configurator */}
            {!inDev && (
              <>
                {/* Format note */}
                <div style={{ marginTop:36 }}>
                  <div style={{ display:'flex', justifyContent:'space-between', marginBottom:12 }}>
                    <div className="label">Format</div>
                    <div style={{ fontSize:11, color:'var(--stone)', fontVariantNumeric:'tabular-nums', letterSpacing:'0.06em' }}>9.0 × 9.0 × 1.6 cm</div>
                  </div>
                  <div style={{ padding:'16px 18px', background:'var(--bone)', border:'1px solid var(--ink)' }}>
                    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:14 }}>
                      <div>
                        <div className="h3" style={{ fontSize:18, fontWeight:600 }}>9 cm · 1:11000</div>
                        <div className="body" style={{ fontSize:12, color:'var(--stone)', marginTop:4 }}>The collection is one size, by design.</div>
                      </div>
                      <span style={{ fontSize:14, fontVariantNumeric:'tabular-nums' }}>£{item.price || 95}</span>
                    </div>
                  </div>
                </div>

                {/* Lid finish */}
                <div style={{ marginTop:28 }}>
                  <div className="label" style={{ marginBottom:12 }}>Lid finish</div>
                  <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:8 }}>
                    {finishes.map(b => (
                      <button key={b.id} onClick={() => setFinish(b.id)}
                        style={{
                          display:'flex', alignItems:'center', gap:12, padding:'14px',
                          border:`1px solid ${finish === b.id ? 'var(--ink)' : 'var(--line)'}`,
                          background: finish === b.id ? 'var(--bone)' : 'transparent',
                          textAlign:'left',
                        }}>
                        <div style={{ width:32, height:32, background:b.swatch, border:'1px solid var(--line-strong)' }}/>
                        <div>
                          <div style={{ fontSize:13, fontWeight:600 }}>{b.label}</div>
                          <div style={{ fontSize:11, color:'var(--stone)' }}>{b.sub}</div>
                        </div>
                      </button>
                    ))}
                  </div>
                </div>

                {/* Label */}
                <div style={{ marginTop:28 }}>
                  <div className="label" style={{ marginBottom:12 }}>Sticker</div>
                  <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8 }}>
                    {labels.map(opt => (
                      <button key={opt.id} onClick={() => setLabel(opt.id)}
                        style={{
                          padding:'12px', textAlign:'left',
                          border:`1px solid ${label === opt.id ? 'var(--ink)' : 'var(--line)'}`,
                          background: label === opt.id ? 'var(--bone)' : 'transparent',
                        }}>
                        <div style={{ fontSize:12, fontWeight:600 }}>{opt.l}</div>
                        <div style={{ fontSize:10, color:'var(--stone)', marginTop:4, lineHeight:1.4 }}>{opt.sub}</div>
                      </button>
                    ))}
                  </div>
                  {label === 'custom' && (
                    <input value={customLine}
                      onChange={e => setCustomLine(e.target.value.toUpperCase().slice(0,22))}
                      placeholder="ONE LINE, MAX 22 CHARS"
                      style={{
                        width:'100%', marginTop:10, padding:'12px 14px',
                        border:'1px solid var(--ink)', background:'var(--bone)',
                        fontFamily:'Inter, sans-serif', fontSize:13, fontWeight:500,
                        letterSpacing:'0.22em', textTransform:'uppercase',
                      }}/>
                  )}
                </div>

                {/* Gift wrap + Quantity */}
                <div style={{ marginTop:28, display:'grid', gridTemplateColumns:'1fr auto', gap:18, alignItems:'center' }}>
                  <button onClick={() => setGift(g => !g)}
                    style={{
                      display:'flex', alignItems:'center', gap:12, padding:'14px',
                      border:`1px solid ${gift ? 'var(--ink)' : 'var(--line)'}`,
                      background: gift ? 'var(--bone)' : 'transparent',
                      textAlign:'left',
                    }}>
                    <span style={{
                      width:16, height:16, border:'1.5px solid var(--ink)',
                      background: gift ? 'var(--ink)' : 'transparent',
                      color:'var(--mist)', fontSize:10, display:'flex', alignItems:'center', justifyContent:'center',
                    }}>{gift ? '✓' : ''}</span>
                    <div>
                      <div style={{ fontSize:13, fontWeight:600 }}>Gift packaging</div>
                      <div style={{ fontSize:11, color:'var(--stone)' }}>Insert card in your hand, +£8</div>
                    </div>
                  </button>
                  <div style={{ display:'flex', alignItems:'center', gap:8, border:'1px solid var(--line)', padding:'4px' }}>
                    <button onClick={() => setQty(q => Math.max(1, q - 1))} style={{ padding:'8px 10px', color:'var(--stone)' }}>{Icon.minus}</button>
                    <span style={{ fontSize:14, fontWeight:600, fontVariantNumeric:'tabular-nums', minWidth:20, textAlign:'center' }}>{qty}</span>
                    <button onClick={() => setQty(q => Math.min(item.stock || 10, q + 1))} style={{ padding:'8px 10px', color:'var(--stone)' }}>{Icon.plus}</button>
                  </div>
                </div>
              </>
            )}

            {/* Stock & cart */}
            <div style={{ marginTop:36, paddingTop:24, borderTop:'1px solid var(--line)' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:18 }}>
                <div className="h1" style={{ fontSize:42 }}>{inDev ? '—' : `£${total}`}</div>
                <div className="label" style={{ color: inDev ? 'var(--stone)' : item.stock <= 3 ? 'var(--vermilion)' : 'var(--ink)' }}>
                  {inDev ? 'NOT YET SHIPPING' : item.stock <= 3 ? `ONLY ${item.stock} LEFT` : 'IN STOCK · SHIPS IN 7 DAYS'}
                </div>
              </div>
              <div style={{ display:'flex', gap:10 }}>
                {item.stock > 0 ? (
                  <button className="btn btn-primary" style={{ flex:1 }}
                    onClick={() => { addToCart({ ...item, qty }); go('cart'); }}>
                    Add to bag &nbsp;{Icon.arrow}
                  </button>
                ) : (
                  <button className="btn btn-primary" style={{ flex:1 }} disabled>
                    Sold
                  </button>
                )}
              </div>
              <div className="body" style={{ marginTop:14, fontSize:12, color:'var(--stone)' }}>
                {item.stock > 0
                  ? 'Made to order in Sheffield. Shipping is chosen and payment taken securely at checkout (Stripe).'
                  : 'This model is currently sold out.'}
              </div>
            </div>

            {/* AR Quick Look — reuses the commission-flow component; the
                /api/ar/usdz/<output_id>.usdz route resolves any manifest
                output, so a published catalogue city is AR-previewable too. */}
            {window.ARQuickLook && item.output_id && (
              <window.ARQuickLook outputId={item.output_id}/>
            )}

            {/* Voice block */}
            <div style={{ marginTop:32, padding:'18px 20px', background:'var(--bone)', borderLeft:'2px solid var(--ink)' }}>
              <p style={{ fontSize:13, fontWeight:500, lineHeight:1.6, color:'var(--ink)' }}>
                "{item.name}. A 9 cm crop centred on {item.landmark || (item.type.toLowerCase() === 'topography' ? 'the summit' : 'the city centre')}. 1:11000 from open survey data."
              </p>
              <div className="label" style={{ marginTop:10, fontSize:9 }}>FROM THE LISTING</div>
            </div>
          </div>
        </div>
      </div>

      {/* Full specification */}
      <section style={{ background:'var(--bone)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)' }}>
        <div className="container" style={{ paddingTop:64, paddingBottom:64 }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 2fr', gap:64, alignItems:'flex-start' }}>
            <div>
              <div className="label">Specification</div>
              <h2 className="h1" style={{ fontSize:48, marginTop:14 }}>The data,<br/>the dimensions.</h2>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'14px 48px' }}>
              {[
                ['Subject',          item.name],
                ['Landmark',         item.landmark || 'Awaiting / commission'],
                ['Signature',        item.accent ? window.ACCENTS[item.accent].name : '—'],
                ['Coordinates',      `${item.coords.lat.toFixed(4)}° ${item.coords.ns} · ${Math.abs(item.coords.lng).toFixed(4)}° ${item.coords.ew}`],
                ['Crop area',        '1.00 × 1.00 km'],
                ['Scale',            '1:11000'],
                ['Model dimensions', '9.0 × 9.0 × 1.6 cm'],
                ['Lid',              'PETG · Mist · 121 mm square'],
                ['Sticker',          '80 mm square · Mist with Ink edge · One landmark, one colour'],
                ['Data sources',     'EA LIDAR (OGL v3) · OpenStreetMap (ODbL)'],
                ['Made in',          'Sheffield, UK'],
                ['Lead time',        inDev ? 'Waitlist' : '7 days · made to order'],
              ].map(([k, v]) => (
                <div key={k} style={{ display:'flex', borderBottom:'1px dotted var(--line-strong)', paddingBottom:10, gap:18 }}>
                  <span className="label" style={{ width:140, flexShrink:0 }}>{k}</span>
                  <span style={{ fontSize:13.5 }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Related */}
      <div className="container" style={{ paddingTop:64, paddingBottom:96 }}>
        <div className="label" style={{ marginBottom:24 }}>Also from the collection</div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24 }}>
          {window.CATALOG.filter(x => x.id !== item.id && x.accent).slice(0, 4).map(x => (
            <ProductCard key={x.id} item={x} onClick={() => go('product', x.id)}/>
          ))}
        </div>
      </div>

      <Footer go={go}/>
    </div>
  );
}

/* ────────────────────────────── Gallery frame — Etsy template six views */
function ProductGalleryFrame({ tab, item, t }) {
  const accentVar = item.accent ? `var(--${item.accent})` : 'var(--stone)';

  if (tab === 'object3d') {
    const fallbackImg = (item.photos && item.photos[0]) || item.photo;
    const _sLat = item.coords.ns === 'S' ? -item.coords.lat : item.coords.lat;
    const _sLng = item.coords.ew === 'W' ? -item.coords.lng : item.coords.lng;
    const label3d = {
      title: (item.name || '').toUpperCase(),
      subline: '',
      coord: window.fmtCoord
        ? window.fmtCoord(_sLat, _sLng)
        : `${item.coords.lat.toFixed(3)}° ${item.coords.ns} · ${Math.abs(item.coords.lng).toFixed(3)}° ${item.coords.ew}`,
      showCoords: true,
    };
    // GLB preferred (rotating model, v2-only component) → generated STL on
    // its real base + tag (works in v1 & v2) → fall through to the photo.
    if (window.Model3DViewer && item.model_glb) {
      return (
        <div style={{
          aspectRatio:'1/1', background:'var(--mist)', border:'1px solid var(--line)',
          position:'relative', overflow:'hidden',
        }}>
          <window.Model3DViewer url={item.model_glb} fallback={fallbackImg} label={label3d} height="100%"/>
          <div style={{ position:'absolute', bottom:18, left:18, pointerEvents:'none' }} className="label">01 · 3D MODEL</div>
        </div>
      );
    }
    if (window.STLViewer && item.stl_url) {
      return (
        <div style={{
          aspectRatio:'1/1', background:'var(--mist)', border:'1px solid var(--line)',
          position:'relative', overflow:'hidden',
        }}>
          <window.STLViewer url={item.stl_url}/>
          <div style={{ position:'absolute', bottom:18, left:18, zIndex:2, pointerEvents:'none' }} className="label">01 · 3D MODEL · ON BASE</div>
        </div>
      );
    }
    // No 3D source resolved — show the hero photo rather than a blank frame.
    return (
      <div style={{
        aspectRatio:'1/1', background:'var(--mist)', border:'1px solid var(--line)',
        display:'flex', alignItems:'center', justifyContent:'center', padding:'6%', position:'relative',
      }}>
        <img src={fallbackImg} alt={item.name}
          style={{ width:'92%', maxHeight:'92%', objectFit:'contain', filter:'grayscale(0.45) contrast(1.05)', mixBlendMode:'multiply' }}/>
        <div style={{ position:'absolute', bottom:18, left:18 }} className="label">01 · TOP-DOWN</div>
      </div>
    );
  }

  if (tab === 'hero') {
    return (
      <div style={{
        aspectRatio:'1/1', background:'var(--mist)', border:'1px solid var(--line)',
        display:'flex', alignItems:'center', justifyContent:'center', padding:'6%', position:'relative',
      }}>
        <img src={(item.photos && item.photos[0]) || item.photo} alt={item.name}
          style={{
            width:'92%', maxHeight:'92%', objectFit:'contain',
            filter:'grayscale(0.45) contrast(1.05)',
            mixBlendMode:'multiply',
          }}/>
        <div style={{ position:'absolute', bottom:18, left:18 }} className="label">01 · TOP-DOWN</div>
      </div>
    );
  }
  if (tab === '3q') {
    return (
      <div style={{
        aspectRatio:'1/1', background:'#0F1216', border:'1px solid var(--ink)',
        display:'flex', alignItems:'center', justifyContent:'center', padding:'6%', position:'relative',
      }}>
        <img src={(item.photos && item.photos[1]) || item.photo} alt={item.name}
          style={{ width:'95%', maxHeight:'95%', objectFit:'cover',
            filter:'grayscale(0.65) contrast(1.05) brightness(0.92)' }}/>
        <div style={{ position:'absolute', bottom:18, left:18, color:'var(--mist)' }} className="label">02 · THREE-QUARTER</div>
      </div>
    );
  }
  if (tab === 'lifestyle') {
    if (item.photos && item.photos[2]) {
      return (
        <div style={{
          aspectRatio:'1/1', background:'var(--bone)', border:'1px solid var(--line)',
          display:'flex', alignItems:'center', justifyContent:'center', position:'relative', overflow:'hidden',
        }}>
          <img src={item.photos[2]} alt={item.name}
            style={{ width:'100%', height:'100%', objectFit:'cover' }}/>
          <div style={{ position:'absolute', bottom:18, left:18 }} className="label">03 · ON A SHELF</div>
        </div>
      );
    }
    return (
      <div style={{
        aspectRatio:'1/1', background:'var(--bone)', border:'1px solid var(--line)',
        position:'relative', overflow:'hidden',
      }}>
        <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style={{ width:'100%', height:'100%' }}>
          <rect x="0" y="0" width="100" height="58" fill="var(--mist)"/>
          <rect x="0" y="60" width="100" height="40" fill="#D8DCD7"/>
          <rect x="0" y="58" width="100" height="2" fill="var(--ink)" opacity="0.85"/>
          {/* books */}
          <rect x="14" y="46" width="2" height="12" fill="var(--ink)"/>
          <rect x="16.5" y="48" width="3" height="10" fill="#9BA09B"/>
          <rect x="20" y="44" width="1.6" height="14" fill="var(--ink)"/>
          <rect x="22" y="50" width="4" height="8" fill="#B8BDB7"/>
          {/* model */}
          <g transform="translate(58, 48)">
            <rect x="0" y="0" width="20" height="10" fill="var(--mist)" stroke="var(--ink)" strokeWidth="0.4"/>
            <rect x="2" y="1.5" width="16" height="6" fill="#CDD2CD" stroke="var(--ink)" strokeWidth="0.25"/>
            <rect x="6" y="3" width="8" height="3.5" fill="var(--mist)" stroke="var(--ink)" strokeWidth="0.15"/>
            <rect x="8.5" y="4.2" width="3" height="1.6" fill={accentVar}/>
          </g>
          <rect x="78" y="20" width="20" height="36" fill="#EDF0EC" opacity="0.6"/>
        </svg>
        <div style={{ position:'absolute', bottom:18, left:18 }} className="label">03 · ON A SHELF</div>
      </div>
    );
  }
  if (tab === 'graphic') {
    if (item.photos && item.photos[3]) {
      return (
        <div style={{
          aspectRatio:'1/1', background:'var(--mist)', border:'1px solid var(--line)',
          display:'flex', alignItems:'center', justifyContent:'center', position:'relative', overflow:'hidden',
        }}>
          <img src={item.photos[3]} alt={item.name}
            style={{ width:'100%', height:'100%', objectFit:'cover' }}/>
          <div style={{ position:'absolute', bottom:18, left:18 }} className="label">04 · CITY MARK</div>
        </div>
      );
    }
    return (
      <div style={{
        aspectRatio:'1/1', background:'var(--mist)', border:'1px solid var(--line)',
        display:'flex', alignItems:'center', justifyContent:'center', padding:'12%', position:'relative',
      }}>
        {item.accent ? (
          <CitySticker city={item} size={420}/>
        ) : (
          <div style={{ textAlign:'center' }}>
            <div className="h1" style={{ fontSize:60 }}>{item.name}</div>
            <div className="label" style={{ marginTop:20 }}>COMMISSION · STICKER BESPOKE</div>
          </div>
        )}
        <div style={{ position:'absolute', bottom:18, left:18 }} className="label">04 · CITY MARK</div>
      </div>
    );
  }
  if (tab === 'packaging') {
    if (item.photos && item.photos[4]) {
      return (
        <div style={{
          aspectRatio:'1/1', background:'var(--mist)', border:'1px solid var(--line)',
          display:'flex', alignItems:'center', justifyContent:'center', position:'relative', overflow:'hidden',
        }}>
          <img src={item.photos[4]} alt={item.name}
            style={{ width:'100%', height:'100%', objectFit:'cover' }}/>
          <div style={{ position:'absolute', bottom:18, left:18 }} className="label">05 · PACKAGING ARCHITECTURE</div>
        </div>
      );
    }
    return (
      <div style={{
        aspectRatio:'1/1', background:'var(--mist)', border:'1px solid var(--line)',
        position:'relative', display:'grid', gridTemplateColumns:'1fr 1fr', gap:2, padding:14,
      }}>
        <div style={{ background:'#B4A78E', padding:'14% 18%', display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
          <div className="wordmark" style={{ fontSize:18, color:'var(--ink)' }}>cityform</div>
          <div className="label" style={{ fontSize:9 }}>OUTER · KRAFT</div>
        </div>
        <div style={{ background:'var(--bone)', padding:'12%', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'space-between' }}>
          {item.accent && <CitySticker city={item} size={140}/>}
          <div className="label" style={{ fontSize:9 }}>LID · 80MM STICKER</div>
        </div>
        <div style={{ background:'#D5D9D3', padding:'14%', display:'flex', flexDirection:'column', justifyContent:'flex-end' }}>
          <div style={{ width:'70%', aspectRatio:'1/1', background:'var(--bone)', alignSelf:'center', border:'1px solid var(--ink)' }}/>
          <div className="label" style={{ fontSize:9, marginTop:8 }}>LID LIFTED</div>
        </div>
        <div style={{ background:'var(--mist)', padding:'14%', display:'flex', flexDirection:'column', justifyContent:'flex-end' }}>
          <div style={{ width:'80%', aspectRatio:'1/1', background:'#CDD2CD', alignSelf:'center', position:'relative', border:'1px solid var(--ink)' }}>
            <div style={{ position:'absolute', inset:'15% 15% 30% 15%', background:'var(--bone)', border:'1px solid var(--ink)', opacity:0.9 }}/>
          </div>
          <div className="label" style={{ fontSize:9, marginTop:8 }}>MODEL REVEALED</div>
        </div>
        <div style={{ position:'absolute', bottom:18, left:18 }} className="label">05 · PACKAGING ARCHITECTURE</div>
      </div>
    );
  }
  if (tab === 'collection') {
    const twelve = window.CATALOG.filter(c => c.featured).slice(0, 12);
    return (
      <div style={{
        aspectRatio:'1/1', background:'var(--mist)', border:'1px solid var(--line)',
        padding:'8%', position:'relative',
      }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gridTemplateRows:'repeat(3, 1fr)', gap:'4%', height:'100%' }}>
          {twelve.map(c => (
            <div key={c.id} style={{
              background:'var(--bone)', border:`1px solid ${c.id === item.id ? 'var(--ink)' : 'var(--line)'}`,
              display:'flex', alignItems:'center', justifyContent:'center', position:'relative',
            }}>
              {c.landmarkId ? (
                <Landmark id={c.landmarkId} color={`var(--${c.accent})`} size={36}/>
              ) : (
                <span style={{ fontSize:7, letterSpacing:'0.22em', color:'var(--stone)', fontWeight:500 }}>SOON</span>
              )}
              <div style={{ position:'absolute', bottom:4, left:4, right:4, textAlign:'center', fontSize:8, fontWeight:600 }}>{c.name}</div>
            </div>
          ))}
        </div>
        <div style={{ position:'absolute', bottom:18, left:18 }} className="label">06 · COLLECTION GRID</div>
      </div>
    );
  }
  return null;
}

Object.assign(window, { ProductPage, ProductGalleryFrame });