// Projects.jsx
const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;

const PROJECTS = [
  {
    id: 'siga',
    n: '01',
    name: '████',
    tag: 'Stealth',
    desc: 'Something new. Soon.',
    year: '2026',
    role: '—',
    stack: ['—'],
    state: 'soon',
    featured: true,
    href: '#now',
    glyphSvg: 'assets/siga-ico-logo.svg',
    redacted: true,
  },
  {
    id: 'vokter',
    n: '02',
    name: 'Vokter',
    tag: 'Web3 · Security',
    desc: 'Real-time wallet protection — flag malicious transactions before they sign.',
    year: '2025 — now',
    role: 'Founder, Design + Front-end',
    stack: ['Solana','Rust','Next.js','TS'],
    state: 'live',
    href: '#',
    glyphSvg: 'assets/vokter-logo-light-yellow.png',
  },
  {
    id: 'betly',
    n: '03',
    name: 'BetlyTrade',
    tag: 'Product · Trading',
    desc: 'Prediction market interface — designed for speed, not noise. Discontinued by the team.',
    year: '2025',
    role: 'Design + Build',
    stack: ['React','Viem','Tailwind'],
    state: 'discontinued',
    href: '#',
    glyphSvg: 'assets/betly-full-logo.png',
  },
  {
    id: 'thumbs',
    n: '04',
    name: 'Thumb Studio',
    tag: 'Tool · Content',
    desc: 'Self-built pipeline for YouTube thumbnails — Figma → ship.',
    year: '2024',
    role: 'Solo',
    stack: ['Figma','Photoshop'],
    state: 'live',
    href: '#',
    glyph: 'T',
  },
  {
    id: 'st-br',
    n: '05',
    name: 'Open-source',
    tag: 'Community',
    desc: 'Repos, snippets, building in public on GitHub.',
    year: '2024 — now',
    role: 'Maintainer',
    stack: ['Solana'],
    state: 'live',
    href: '#',
    glyph: 'S',
  },
  {
    id: 'misc',
    n: '06',
    name: 'Client work',
    tag: 'Freelance',
    desc: '40+ projects shipped on Upwork. Web, brand, product UI.',
    year: '2020 — now',
    role: 'Designer / Dev',
    stack: ['Various'],
    state: 'archive',
    href: '#work',
    glyph: '40+',
  },
];

// ─── Bento Layout ─────────────────────────────────────────────────────
function BentoGrid() {
  return (
    <div style={styP.bento}>
      {/* row 1 */}
      <ProjectCell p={PROJECTS[0]} span={{c:'1 / span 8', r:'1 / span 2'}} size="xl" />
      <ProjectCell p={PROJECTS[1]} span={{c:'9 / span 4', r:'1 / span 1'}} size="md" />
      <ProjectCell p={PROJECTS[2]} span={{c:'9 / span 4', r:'2 / span 1'}} size="md" />
      {/* row 2 */}
      <ProjectCell p={PROJECTS[3]} span={{c:'1 / span 4', r:'3 / span 1'}} size="md" />
      <ProjectCell p={PROJECTS[4]} span={{c:'5 / span 4', r:'3 / span 1'}} size="md" />
      <ProjectCell p={PROJECTS[5]} span={{c:'9 / span 4', r:'3 / span 1'}} size="md" />
    </div>
  );
}

// ─── List Layout ──────────────────────────────────────────────────────
function ListLayout() {
  const [hover, setHover] = useStateP(null);
  return (
    <div style={styP.list}
      onMouseLeave={() => setHover(null)}>
      {PROJECTS.map((p,i) => (
        <a key={p.id} href={p.href} style={styP.row}
          onMouseEnter={() => setHover(p.id)}
          className="proj-row">
          <div className="mono" style={styP.rowN}>{p.n}</div>
          <div style={styP.rowName}>
            <span style={p.redacted ? {fontFamily:'var(--mono)', letterSpacing:'-.02em'} : null}>{p.name}</span>
            <span className="mono" style={styP.rowState} data-state={p.state}>● {p.state}</span>
          </div>
          <div style={styP.rowDesc}>{p.desc}</div>
          <div className="mono" style={styP.rowTag}>{p.tag}</div>
          <div className="mono" style={styP.rowYear}>{p.year}</div>
          <div style={styP.rowArrow}>↗</div>
        </a>
      ))}
    </div>
  );
}

// ─── Marquee Layout (horizontal) ──────────────────────────────────────
function MarqueeLayout() {
  return (
    <div style={styP.scrollWrap}>
      <div style={styP.scroll}>
        {PROJECTS.map((p) => (
          <a key={p.id} href={p.href} style={styP.scrollItem} className="proj-rail">
            <div style={styP.scrollVisual}>
              <ProjectVisual p={p} />
            </div>
            <div style={{display:'flex',justifyContent:'space-between',marginTop:14}}>
              <div>
                <div style={{fontSize:24,letterSpacing:'-.02em',fontWeight:500}}>{p.name}</div>
                <div className="mono" style={{fontSize:11,color:'var(--ink-3)',marginTop:4,letterSpacing:'.04em'}}>{p.tag}</div>
              </div>
              <div style={{textAlign:'right'}}>
                <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'.04em'}}>{p.year}</div>
                <div className="mono" style={{fontSize:11,color:'var(--ink-2)',marginTop:4}}>{p.n} / 06</div>
              </div>
            </div>
          </a>
        ))}
        <div style={{flex:'0 0 var(--pad)'}}/>
      </div>
    </div>
  );
}

// ─── Project visual: typographic glyph treatment ──────────────────────
function ProjectVisual({ p }) {
  const ref = useRefP(null);
  useEffectP(() => {
    const el = ref.current; if (!el) return;
    let raf;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const mx = (e.clientX - r.left)/r.width - 0.5;
      const my = (e.clientY - r.top)/r.height - 0.5;
      el.style.setProperty('--mx', mx.toFixed(3));
      el.style.setProperty('--my', my.toFixed(3));
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);
  return (
    <div ref={ref} style={styP.visual} data-state={p.state}>
      {/* baseline grid */}
      <div style={styP.visualGrid} aria-hidden />
      {/* glyph */}
      <div style={{...styP.glyph,
        transform:'translate(calc(var(--mx,0) * 8px), calc(var(--my,0) * 8px))'}}
        className="proj-glyph">
        {p.glyphSvg ? (
          <img src={p.glyphSvg} alt={p.name} style={{maxWidth:'70%',maxHeight:'70%',objectFit:'contain',filter:'brightness(0) invert(1)'}} />
        ) : (
          p.glyph
        )}
      </div>
      {/* corner numerics */}
      <div className="mono" style={styP.visTL}>{p.n}_PRJ</div>
      <div className="mono" style={styP.visTR}>{p.year}</div>
      <div className="mono" style={styP.visBL}>{(p.stack||[]).join(' / ')}</div>
      <div className="mono" style={styP.visBR} data-state={p.state}>● {p.state.toUpperCase()}</div>
      {/* scanline shimmer on hover */}
      <div className="proj-scan" style={styP.scan} aria-hidden/>
    </div>
  );
}

// ─── Bento cell ───────────────────────────────────────────────────────
function ProjectCell({ p, span, size }) {
  const isXL = size === 'xl';
  return (
    <a href={p.href}
      style={{...styP.cell, gridColumn:span.c, gridRow:span.r, minHeight: isXL ? 540 : 260}}
      className="proj-cell">
      <div style={{...styP.cellMedia, flex: isXL ? '1 1 auto' : '1 1 auto', minHeight: 0}}>
        <ProjectVisual p={p} />
      </div>
      <div style={styP.cellMeta}>
        <div style={styP.cellMetaTop}>
          <div className="mono" style={styP.cellNum}>{p.n}</div>
          <div className="mono" style={styP.cellTag}>{p.tag}</div>
        </div>
        <div style={{display:'flex',alignItems:'baseline',justifyContent:'space-between',gap:16,marginTop:10}}>
          <div style={{...styP.cellName, fontSize: isXL ? 56 : 26}}>{p.name}</div>
          <div style={styP.cellArrow}>↗</div>
        </div>
        <div style={{...styP.cellDesc, maxWidth: isXL ? 520 : 'none', fontSize: isXL ? 16 : 13}}>{p.desc}</div>
        {p.featured && (
          <div style={styP.cellFeat}>
            <span className="mono" style={{fontSize:10,letterSpacing:'.08em',color:'var(--ink-3)'}}>FEATURED</span>
          </div>
        )}
      </div>
    </a>
  );
}

// ─── Section ──────────────────────────────────────────────────────────
function Projects({ layout = 'bento' }) {
  return (
    <section id="projects" style={{padding:'80px 0 0'}}>
      <div className="wrap">
        <div style={styP.head} className="reveal">
          <div>
            <div className="mono section-num">02 / WORK</div>
            <h2 className="section-title" style={{margin:'10px 0 0'}}>Projects</h2>
          </div>
          <div className="mono" style={styP.headRight}>
            <div>{PROJECTS.length} entries · 2024 — '26</div>
            <div style={{color:'var(--ink-3)',marginTop:4}}>Soon · Live · Discontinued · Archive</div>
          </div>
        </div>

        <div className="reveal" data-d="1">
          {layout === 'bento' && <BentoGrid />}
          {layout === 'list' && <ListLayout />}
          {layout === 'marquee' && <MarqueeLayout />}
        </div>
      </div>
    </section>
  );
}

const styP = {
  head:{display:'flex',alignItems:'flex-end',justifyContent:'space-between',
    padding:'0 0 24px',borderBottom:'1px solid var(--rule)',marginBottom:32,flexWrap:'wrap',gap:24},
  headRight:{fontSize:11,color:'var(--ink-2)',letterSpacing:'.04em',textAlign:'right'},

  // BENTO
  bento:{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(min(100%, 320px), 1fr))',
    gap:1, background:'var(--rule)', border:'1px solid var(--rule)',marginBottom:96},
  cell:{display:'flex',flexDirection:'column',background:'var(--bg)',padding:0,
    position:'relative',overflow:'hidden',cursor:'pointer',
    transition:'background .35s ease'},
  cellMedia:{position:'relative', flex:'1 1 auto', minHeight:240,
    borderBottom:'1px solid var(--rule)'},
  cellMeta:{padding:'18px 22px 22px',display:'flex',flexDirection:'column'},
  cellMetaTop:{display:'flex',justifyContent:'space-between',color:'var(--ink-3)',
    fontSize:11,letterSpacing:'.06em'},
  cellNum:{},
  cellTag:{textTransform:'uppercase'},
  cellName:{fontWeight:500,letterSpacing:'-.025em',lineHeight:1, fontSize: 32},
  cellArrow:{fontSize:18,color:'var(--ink-2)',transition:'transform .3s ease, color .3s'},
  cellDesc:{color:'var(--ink-2)',marginTop:10,lineHeight:1.5, fontSize: 14},
  cellFeat:{marginTop:14,paddingTop:12,borderTop:'1px solid var(--rule)'},

  // VISUAL
  visual:{position:'absolute',inset:0,overflow:'hidden',background:'var(--bg-2)',
    transition:'background .4s ease'},
  visualGrid:{position:'absolute',inset:0,opacity:.4,
    backgroundImage:`linear-gradient(var(--rule) 1px, transparent 1px),
      linear-gradient(90deg, var(--rule) 1px, transparent 1px)`,
    backgroundSize:'48px 48px'},
  glyph:{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center',
    fontFamily:'var(--sans)',fontSize:'clamp(100px, 18vw, 240px)',fontWeight:500,
    letterSpacing:'-.05em',color:'var(--ink)',
    transition:'transform .4s cubic-bezier(.2,.7,.2,1)',
    mixBlendMode:'normal'},
  visTL:{position:'absolute',top:14,left:16,fontSize:10,letterSpacing:'.08em',color:'var(--ink-2)'},
  visTR:{position:'absolute',top:14,right:16,fontSize:10,letterSpacing:'.08em',color:'var(--ink-3)'},
  visBL:{position:'absolute',bottom:14,left:16,fontSize:10,letterSpacing:'.06em',color:'var(--ink-3)',textTransform:'uppercase'},
  visBR:{position:'absolute',bottom:14,right:16,fontSize:10,letterSpacing:'.08em',color:'#7CFF6B',textTransform:'uppercase'},
  scan:{position:'absolute',left:0,right:0,height:1,background:'var(--ink)',top:'-2px',opacity:0,pointerEvents:'none'},

  // LIST
  list:{borderTop:'1px solid var(--rule)',marginBottom:96},
  row:{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(200px, 1fr))',gap:24,alignItems:'center',
    padding:'24px 12px',borderBottom:'1px solid var(--rule)',cursor:'pointer',position:'relative',
    transition:'background .2s ease, padding .25s ease'},
  rowN:{fontSize:11,color:'var(--ink-3)',letterSpacing:'.06em'},
  rowName:{fontSize:28,letterSpacing:'-.02em',display:'flex',alignItems:'baseline',gap:14},
  rowState:{fontSize:9,letterSpacing:'.08em',textTransform:'uppercase',color:'var(--ink-3)'},
  rowDesc:{color:'var(--ink-2)',fontSize:14,lineHeight:1.5},
  rowTag:{fontSize:11,color:'var(--ink-2)',letterSpacing:'.04em',textTransform:'uppercase'},
  rowYear:{fontSize:11,color:'var(--ink-3)',letterSpacing:'.04em'},
  rowArrow:{fontSize:18,color:'var(--ink-3)',textAlign:'right',transition:'transform .25s ease, color .25s ease'},

  // MARQUEE
  scrollWrap:{margin:'0 calc(-1 * var(--pad)) 96px',overflow:'auto hidden',scrollSnapType:'x mandatory',
    scrollbarWidth:'none'},
  scroll:{display:'flex',gap:24,padding:'0 var(--pad)',alignItems:'flex-start'},
  scrollItem:{flex:'0 0 clamp(360px, 42vw, 640px)',scrollSnapAlign:'start',display:'block',
    transition:'transform .35s ease'},
  scrollVisual:{position:'relative',aspectRatio:'4/3',background:'var(--bg-2)',
    border:'1px solid var(--rule)',overflow:'hidden'},
};

// Hover styles via CSS (avoid hand-rolling state for every cell)
if (!document.getElementById('proj-css')) {
  const s = document.createElement('style'); s.id = 'proj-css';
  s.textContent = `
    .proj-cell:hover{background:var(--bg-2)}
    .proj-cell:hover .proj-glyph{transform:translate(calc(var(--mx,0) * 8px), calc(var(--my,0) * 8px)) scale(1.06)}
    .proj-cell:hover .proj-scan{animation:scan 1.4s linear}
    @keyframes scan{0%{top:-2px;opacity:.7}100%{top:101%;opacity:0}}
    .proj-row:hover{background:rgba(245,245,240,.03);padding-left:20px;padding-right:20px}
    .proj-row:hover [style*="--ink-3"]{color:var(--ink-2)}
    .proj-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);transition:width .35s cubic-bezier(.2,.7,.2,1)}
    .proj-row:hover::before{width:3px}
    .proj-rail:hover .proj-glyph{transform:translate(calc(var(--mx,0) * 8px), calc(var(--my,0) * 8px)) scale(1.06)}
    [data-state="soon"] .proj-glyph,[data-state="soon"] + * [data-state="soon"]{color:var(--ink-3)!important}
  `;
  document.head.appendChild(s);
}

Object.assign(window, { Projects, PROJECTS });