// 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 [isMobile, setIsMobile] = React.useState(
    () => typeof window !== 'undefined' && window.innerWidth < 640
  );
  React.useEffect(() => {
    const h = () => setIsMobile(window.innerWidth < 640);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);

  const tabs = [
    { id: 'a', label: 'A · Index Card',    short: 'A·Index',    C: VariationA },
    { id: 'b', label: 'B · Margin Notes',  short: 'B·Margin',   C: VariationB },
    { id: 'c', label: 'C · Terminal Zine', short: 'C·Terminal', C: VariationC },
    { id: 'd', label: 'D · Sticker Sheet', short: 'D·Sticker',  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: isMobile ? '8px 10px' : '14px 24px',
      }}>
        <div style={{
          display:'flex', alignItems:'center',
          gap: isMobile ? 6 : 18,
          overflowX:'auto',
          WebkitOverflowScrolling:'touch',
          scrollbarWidth:'none',
          msOverflowStyle:'none',
        }}>
          {!isMobile && (
            <div className="hand-h1" style={{fontSize:20, marginRight:8, flexShrink:0}}>
              portfolio <span className="note" style={{fontSize:14, marginLeft:4}}>· 4 directions</span>
            </div>
          )}

          <div style={{display:'flex', gap: isMobile ? 5 : 8, flexShrink:0}}>
            {tabs.map(t => (
              <button
                key={t.id}
                onClick={() => setActive(t.id)}
                className="arch"
                style={{
                  padding: isMobile ? '5px 10px' : '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: isMobile ? 12 : 15,
                  cursor:'pointer',
                  whiteSpace:'nowrap',
                  boxShadow: active === t.id
                    ? '2px 2px 0 oklch(0.3 var(--v-chroma) var(--v-hue))'
                    : '2px 2px 0 var(--ink)',
                }}>
                {isMobile ? t.short : t.label}
              </button>
            ))}
          </div>

          {!isMobile && (
            <div className="note" style={{marginLeft:'auto', fontSize:15, flexShrink:0}}>
              scroll ↓ · tap tweaks for violet hue
            </div>
          )}
        </div>
      </div>

      {/* scrollable variation container */}
      <div style={{
        maxWidth:960, margin:'0 auto',
        padding: isMobile ? '10px 8px 60px' : '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 />);