/* Shared previewable font picker — used by every page's Tweaks panel.
   Every family here is free on Google Fonts. Load AFTER tweaks-panel.jsx. */
(function(){
  const FONT_SETS = {
    "Cormorant + Spectral": { kind:'Serif', display:'"Cormorant Garamond", Georgia, serif', body:'"Spectral", Georgia, serif' },
    "Newsreader":           { kind:'Serif', display:'"Newsreader", Georgia, serif',           body:'"Newsreader", Georgia, serif' },
    "Fraunces + Archivo":   { kind:'Serif/Sans', display:'"Fraunces", Georgia, serif',         body:'"Archivo", system-ui, sans-serif' },
    "Space Grotesk":        { kind:'Sans',  display:'"Space Grotesk", system-ui, sans-serif',  body:'"Space Grotesk", system-ui, sans-serif' },
    "Hanken Grotesk":       { kind:'Sans',  display:'"Hanken Grotesk", system-ui, sans-serif', body:'"Hanken Grotesk", system-ui, sans-serif' },
    "Archivo":              { kind:'Sans',  display:'"Archivo", system-ui, sans-serif',        body:'"Archivo", system-ui, sans-serif' },
  };

  // apply a chosen set to the document root
  function applyFontSet(name){
    const set = FONT_SETS[name] || FONT_SETS["Cormorant + Spectral"];
    const r = document.documentElement.style;
    r.setProperty('--font-display', set.display);
    r.setProperty('--font-body', set.body);
    return set;
  }

  // a previewable picker: each row is rendered in its own typeface
  function FontPicker({ value, onChange, sample }){
    const names = Object.keys(FONT_SETS);
    return React.createElement('div', { style:{ display:'flex', flexDirection:'column', gap:'7px' } },
      names.map(name => {
        const set = FONT_SETS[name];
        const on = value === name;
        return React.createElement('button', {
          key:name,
          onClick:()=>onChange(name),
          style:{
            textAlign:'left', cursor:'pointer', width:'100%',
            padding:'11px 13px', borderRadius:'8px',
            border:'1px solid ' + (on ? 'var(--tw-accent, #bd5a3d)' : 'rgba(0,0,0,.14)'),
            background: on ? 'rgba(189,90,61,.07)' : 'rgba(0,0,0,.015)',
            transition:'border-color .2s, background .2s',
            display:'flex', flexDirection:'column', gap:'4px'
          }
        },
          React.createElement('span', {
            style:{ fontFamily:set.display, fontSize:'22px', lineHeight:1, color:'#1c1a16',
              fontWeight: set.kind==='Sans' ? 600 : 600 }
          }, sample || 'Portfolio'),
          React.createElement('span', {
            style:{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:'10px' }
          },
            React.createElement('span', {
              style:{ fontFamily:set.body, fontSize:'12px', color:'#6f685c' }
            }, 'The quick brown fox'),
            React.createElement('span', {
              style:{ fontFamily:'ui-monospace, monospace', fontSize:'8.5px', letterSpacing:'.12em',
                textTransform:'uppercase', color: on ? 'var(--tw-accent,#bd5a3d)' : '#9a9286',
                border:'1px solid currentColor', borderRadius:'20px', padding:'2px 7px', whiteSpace:'nowrap' }
            }, set.kind)
          )
        );
      })
    );
  }

  window.FONT_SETS = FONT_SETS;
  window.applyFontSet = applyFontSet;
  window.FontPicker = FontPicker;
})();