// app.jsx — tabbed scrollable presentation of the 4 variations

function Tabs() {
  const [active, setActive] = React.useState(() => {
    try { return localStorage.getItem('wf-active') || 'a'; } catch { return 'a'; }
  });
  React.useEffect(() => {
    try { localStorage.setItem('wf-active', active); } catch {}
  }, [active]);

  const tabs = [
    { id: 'a', label: 'A · Index Card',    C: VariationA },
    { id: 'b', label: 'B · Margin Notes',  C: VariationB },
    { id: 'c', label: 'C · Terminal Zine', C: VariationC },
    { id: 'd', label: 'D · Sticker Sheet', C: VariationD },
  ];
  const Current = tabs.find(t => t.id === active).C;

  return (
    <div style={{minHeight:'100vh', background:'#e8e2d2'}}>
      {/* sticky tab bar */}
      <div style={{
        position:'sticky', top:0, zIndex:50,
        background:'#e8e2d2',
        borderBottom:'1.5px solid var(--ink)',
        padding:'14px 24px',
        display:'flex', alignItems:'center', gap:18, flexWrap:'wrap'
      }}>
        <div className="hand-h1" style={{fontSize:22, marginRight:12}}>
          portfolio wireframes <span className="note" style={{fontSize:16, marginLeft:6}}>· 4 directions</span>
        </div>
        <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
          {tabs.map(t => (
            <button key={t.id}
              onClick={() => setActive(t.id)}
              className="arch"
              style={{
                padding:'6px 14px',
                border:'1.5px solid var(--ink)',
                background: active === t.id ? 'var(--violet)' : '#fffdf5',
                color: active === t.id ? '#fff' : 'var(--ink)',
                borderRadius:'6px 12px 8px 10px / 10px 6px 12px 8px',
                fontFamily:"'Architects Daughter', cursive",
                fontSize:15,
                cursor:'pointer',
                boxShadow: active === t.id ? '2px 2px 0 oklch(0.3 var(--v-chroma) var(--v-hue))' : '2px 2px 0 var(--ink)'
              }}>
              {t.label}
            </button>
          ))}
        </div>
        <div className="note" style={{marginLeft:'auto', fontSize:15}}>
          scroll ↓ · tap tweaks for violet hue
        </div>
      </div>

      {/* scrollable variation container */}
      <div style={{
        maxWidth: 960, margin:'0 auto',
        padding:'28px 20px 80px',
      }}>
        <div style={{
          background:'var(--paper)',
          border:'1.5px solid var(--ink)',
          borderRadius:'8px 14px 10px 12px / 10px 8px 14px 10px',
          boxShadow:'4px 6px 0 rgba(26,22,18,0.25)',
          overflow:'hidden',
        }}>
          <Current />
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Tabs />);