function FitSizeAndGuide({product,size,setSize}){
  const tpl=FitStore.templateFor(product);
  const [open,setOpen]=React.useState(false);
  const hasMeasurements=FitStore.hasMeasurements(tpl);
  const [fitType,setFitType]=React.useState(tpl.fitTypes?tpl.fitTypes[1]||tpl.fitTypes[0]:null);
  React.useEffect(()=>{ if(open&&window.lucide)window.lucide.createIcons(); },[open]);
  return (
    <div style={{marginBottom:24}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
        <div style={{fontSize:12,letterSpacing:'var(--tracking-wide)',textTransform:'uppercase',color:'var(--text-muted)'}}>{tpl.hasSizeSelector?'Size':'Fit'}</div>
        <button onClick={()=>setOpen(true)} style={{background:'none',border:'none',padding:0,cursor:'pointer',fontSize:12,letterSpacing:'0.04em',textDecoration:'underline',color:'var(--gold-deep)'}}>{FitStore.titleFor(tpl)}</button>
      </div>
      <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
        {tpl.hasSizeSelector?tpl.sizes.map(s=>(
          <button key={s} onClick={()=>setSize(s)} style={{border:'1px solid '+(size===s?'var(--charcoal)':'var(--border-default)'),background:size===s?'var(--charcoal)':'transparent',color:size===s?'var(--ivory)':'var(--text-primary)',borderRadius:'var(--radius-md)',padding:'10px 16px',fontSize:13,cursor:'pointer'}}>{s}</button>
        )):(
          <div style={{border:'1px solid var(--border-default)',borderRadius:'var(--radius-md)',padding:'10px 16px',fontSize:13,color:'var(--text-primary)'}}>Free Size</div>
        )}
      </div>
      {open&&(
        <div onClick={()=>setOpen(false)} style={{position:'fixed',inset:0,background:'rgba(31,31,31,0.6)',zIndex:500,display:'flex',alignItems:'center',justifyContent:'center',padding:20,overflowY:'auto'}}>
          <div onClick={e=>e.stopPropagation()} style={{background:'var(--ivory)',borderRadius:'var(--radius-lg)',maxWidth:520,width:'100%',padding:'32px',boxShadow:'var(--shadow-card)',position:'relative',maxHeight:'88vh',overflowY:'auto'}}>
            <button onClick={()=>setOpen(false)} aria-label="Close" style={{position:'absolute',top:18,right:18,background:'none',border:'none',cursor:'pointer',color:'var(--text-muted)'}}><i data-lucide="x" style={{width:18,height:18}}></i></button>
            <div style={{fontSize:11,letterSpacing:'var(--tracking-widest)',textTransform:'uppercase',color:'var(--gold-deep)',marginBottom:8}}>{tpl.label}</div>
            <h3 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:24,margin:'0 0 20px',color:'var(--text-primary)'}}>{FitStore.titleFor(tpl)}</h3>
            {tpl.hasSizeSelector?(hasMeasurements?(
              <React.Fragment>
                {tpl.fitTypes&&(
                  <div style={{marginBottom:20}}>
                    <div style={{fontSize:11,letterSpacing:'0.06em',textTransform:'uppercase',color:'var(--text-muted)',marginBottom:8}}>Fit Type</div>
                    <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
                      {tpl.fitTypes.map(f=>(<button key={f} onClick={()=>setFitType(f)} style={{border:'1px solid '+(fitType===f?'var(--charcoal)':'var(--border-default)'),background:fitType===f?'var(--charcoal)':'transparent',color:fitType===f?'var(--ivory)':'var(--text-primary)',borderRadius:'var(--radius-pill)',padding:'6px 14px',fontSize:12,cursor:'pointer'}}>{f}</button>))}
                    </div>
                  </div>
                )}
                <div style={{overflowX:'auto'}}>
                  <table style={{width:'100%',borderCollapse:'collapse',fontSize:13}}>
                    <thead><tr>
                      <th style={{textAlign:'left',padding:'8px 10px',borderBottom:'1px solid var(--border-default)',color:'var(--text-muted)',fontWeight:500}}>Size</th>
                      {tpl.measureFields.map(f=>(<th key={f} style={{textAlign:'left',padding:'8px 10px',borderBottom:'1px solid var(--border-default)',color:'var(--text-muted)',fontWeight:500}}>{FitStore.MEASURE_LABELS[f]||f}</th>))}
                    </tr></thead>
                    <tbody>
                      {tpl.sizes.map((s,i)=>(
                        <tr key={s} style={{background:size===s?'var(--beige)':'none'}}>
                          <td style={{padding:'8px 10px',borderBottom:'1px solid var(--border-soft)',color:'var(--text-primary)'}}>{s}</td>
                          {tpl.measureFields.map(f=>(<td key={f} style={{padding:'8px 10px',borderBottom:'1px solid var(--border-soft)',color:'var(--text-secondary)'}}>{FitStore.measureValue(i,f)}</td>))}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                <div style={{fontSize:12,color:'var(--text-muted)',marginTop:14,lineHeight:1.6}}>Measurements are approximate and may vary slightly by ±0.5 inch due to handcrafted finishing.</div>
              </React.Fragment>
            ):(
              <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
                {tpl.sizes.map(s=>(<button key={s} onClick={()=>setSize(s)} style={{border:'1px solid '+(size===s?'var(--charcoal)':'var(--border-default)'),background:size===s?'var(--charcoal)':'transparent',color:size===s?'var(--ivory)':'var(--text-primary)',borderRadius:'var(--radius-md)',padding:'10px 18px',fontSize:13,cursor:'pointer'}}>{s}</button>))}
              </div>
            )):(
              <table style={{width:'100%',borderCollapse:'collapse',fontSize:14}}>
                <tbody>
                  {tpl.specFields.map(f=>(
                    <tr key={f}>
                      <td style={{padding:'10px 0',borderBottom:'1px solid var(--border-soft)',color:'var(--text-muted)',width:'40%'}}>{FitStore.FIELD_LABELS[f]||f}</td>
                      <td style={{padding:'10px 0',borderBottom:'1px solid var(--border-soft)',color:'var(--text-primary)'}}>{FitStore.specValue(product,f)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </div>
      )}
    </div>
  );
}
window.FitSizeAndGuide=FitSizeAndGuide;