// ─────────────────────────────────────────────────────────
//  Selected Works Gallery — 6 case studies
// ─────────────────────────────────────────────────────────

const WORKS = [
  {
    id:'jk', cat:'Real estate · 2025',
    title:'JK Realtors — Premium digital showroom.',
    tag:'Featured',
    result:'0.4s · −61% bounce · 2.4× site-visit ratio',
    scene: 1,
    href: '#case',
    glyph: 'circles',
    featured: true,
  },
  {
    id:'vc', cat:'SaaS · 2026',
    title:'Vault Capital — Dashboard for VCs.',
    tag:'In flight',
    result:'Multi-tenant · 99.97% uptime',
    scene: 2,
    href: '#',
    glyph: 'grid',
  },
  {
    id:'me', cat:'Fashion · 2025',
    title:'Mehra Couture — Atelier commerce.',
    tag:'Shipped',
    result:'+38% AOV · 1.1s LCP',
    scene: 3,
    href: '#',
    glyph: 'wave',
  },
  {
    id:'au', cat:'Hospitality · 2025',
    title:'Auram Retreat — Booking immersive.',
    tag:'Shipped',
    result:'47% direct bookings ↑',
    scene: 4,
    href: '#',
    glyph: 'spiral',
  },
  {
    id:'ka', cat:'D2C · 2024',
    title:'Kassel & Co — Headless commerce.',
    tag:'Shipped',
    result:'4.2× conversion · 0.6s LCP',
    scene: 5,
    href: '#',
    glyph: 'triangle',
  },
  {
    id:'no', cat:'Studio playground · 2026',
    title:'Nocturne — Generative typography.',
    tag:'Experiment',
    result:'Open source',
    scene: 6,
    href: '#',
    glyph: 'lines',
  },
];

// Abstract scene generator — different glyph per work
function WorkScene({ glyph, scene, featured }) {
  return (
    <div className={`work-scene work-scene-${scene}`}>
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
        {glyph === 'circles' && (
          <>
            {[40, 80, 120, 160].map((r, i) => (
              <circle key={i} cx="200" cy="150" r={r} fill="none" stroke="#00F2FE" strokeWidth="0.6" opacity={1 - i*0.2}/>
            ))}
            <circle cx="200" cy="150" r="20" fill="#00F2FE" opacity="0.4"/>
          </>
        )}
        {glyph === 'grid' && (
          <>
            {Array.from({length:12}).map((_, i) =>
              Array.from({length:8}).map((_, j) => (
                <rect key={`${i}-${j}`} x={40 + i*30} y={30 + j*30} width="20" height="20" fill="none" stroke="#00F2FE" strokeWidth="0.4" opacity={0.3 + (i+j)/30}/>
              ))
            )}
          </>
        )}
        {glyph === 'wave' && (
          <>
            {[0, 20, 40, 60, 80, 100, 120].map((y, i) => (
              <path key={i} d={`M 0 ${100 + y} Q 100 ${60 + y}, 200 ${100 + y} T 400 ${100 + y}`} fill="none" stroke="#00F2FE" strokeWidth="0.5" opacity={1 - i*0.13}/>
            ))}
          </>
        )}
        {glyph === 'spiral' && (
          <>
            {Array.from({length: 80}).map((_, i) => {
              const angle = i * 0.4;
              const r = i * 1.8;
              return (
                <circle key={i} cx={200 + Math.cos(angle)*r} cy={150 + Math.sin(angle)*r} r="1.4" fill="#00F2FE" opacity={1 - i/100}/>
              );
            })}
          </>
        )}
        {glyph === 'triangle' && (
          <>
            {[1, 0.85, 0.7, 0.55, 0.4].map((s, i) => (
              <polygon key={i}
                points={`200,${30 + i*15} ${110 + i*10},${260 - i*8} ${290 - i*10},${260 - i*8}`}
                fill="none" stroke="#00F2FE" strokeWidth="0.6" opacity={s}/>
            ))}
          </>
        )}
        {glyph === 'lines' && (
          <>
            {Array.from({length: 30}).map((_, i) => (
              <line key={i}
                x1={20 + i*13} y1="20"
                x2={20 + i*13 + 20} y2="280"
                stroke="#00F2FE" strokeWidth="0.6"
                opacity={0.2 + Math.sin(i*0.4) * 0.4}/>
            ))}
          </>
        )}
      </svg>
    </div>
  );
}

function Works() {
  return (
    <section className="section shell" data-screen-label="Selected Works">
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
        <div>
          <div className="kicker">§Selected works · 2024 – 2026</div>
          <h2 style={{
            fontFamily:'var(--serif)', fontWeight:400,
            fontSize:'clamp(40px, 5vw, 76px)', lineHeight:1.0,
            letterSpacing:'-0.02em', margin:'18px 0 0', maxWidth:'18ch',
            textWrap:'balance',
          }}>
            Six of forty-seven.<br/>
            <span style={{fontStyle:'italic', color:'var(--accent)'}}>The shortlist.</span>
          </h2>
        </div>
        <div style={{
          fontFamily:'var(--mono)', fontSize:11,
          letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--muted)',
          textAlign:'right',
        }}>
          47 builds shipped<br/>
          across 6 verticals
        </div>
      </div>

      <div className="works-grid">
        {WORKS.map(w => (
          <a key={w.id}
             href={w.href}
             className={`work-card magnetic-trigger ${w.featured ? 'featured' : ''}`}>
            <div className="work-thumb">
              <WorkScene glyph={w.glyph} scene={w.scene} featured={w.featured}/>
              <span className="work-tag">{w.tag}</span>
              <span className="work-arrow">↗</span>
            </div>
            <div className="work-meta">
              <span className="work-cat">{w.cat}</span>
              <h4>{w.title}</h4>
              <span className="work-result">{w.result}</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

window.Works = Works;