// ProjectsPage.jsx — Esther Chan

function CardVisual({ slug, shape, hovered, coverUrl }) {
  if (coverUrl) {
    return (
      <div style={{position:'absolute',inset:0,overflow:'hidden'}}>
        <img
          src={coverUrl}
          alt={slug}
          style={{
            width:'100%', height:'100%', objectFit:'cover',
            objectPosition:'top',
            transition:'transform 0.5s ease',
            transform: hovered ? 'scale(1.04)' : 'scale(1)',
            filter: hovered ? 'brightness(0.7)' : 'brightness(0.55)',
          }}
        />
      </div>
    );
  }
  return (
    <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"
      style={{position:'absolute',inset:0,width:'100%',height:'100%',transition:'opacity 0.5s ease',opacity:hovered?1:0.85}}>
      <defs>
        <radialGradient id={`glow-${slug}`} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#ff8a4c" stopOpacity={hovered?"0.22":"0.08"}/>
          <stop offset="100%" stopColor="#ff8a4c" stopOpacity="0"/>
        </radialGradient>
        <linearGradient id={`fade-${slug}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="30%" stopColor="#080808" stopOpacity="0"/>
          <stop offset="100%" stopColor="#080808" stopOpacity="0.92"/>
        </linearGradient>
      </defs>
      <rect width="400" height="300" fill="#111"/>
      {shape==="circle"&&<><circle cx="200" cy="150" r="110" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/><circle cx="200" cy="150" r="70" fill="none" stroke="rgba(255,255,255,0.10)" strokeWidth="1"/><circle cx="200" cy="150" r="35" fill="none" stroke="rgba(255,255,255,0.10)" strokeWidth="1"/><circle cx="200" cy="150" r="12" fill="rgba(255,138,76,0.25)"/></>}
      {shape==="lines"&&<>{[0,1,2,3,4,5,6,7].map(i=><line key={i} x1={i*56} y1="0" x2={i*56} y2="300" stroke="rgba(255,255,255,0.07)" strokeWidth="1"/>)}<line x1="0" y1="150" x2="400" y2="150" stroke="rgba(255,138,76,0.30)" strokeWidth="1"/><line x1="0" y1="148" x2="400" y2="148" stroke="rgba(255,138,76,0.10)" strokeWidth="3"/></>}
      {shape==="grid"&&<>{[0,1,2,3,4,5].map(i=><line key={"h"+i} x1="0" y1={i*60} x2="400" y2={i*60} stroke="rgba(255,255,255,0.07)" strokeWidth="1"/>)}{[0,1,2,3,4,5,6,7].map(i=><line key={"v"+i} x1={i*57} y1="0" x2={i*57} y2="300" stroke="rgba(255,255,255,0.07)" strokeWidth="1"/>)}<circle cx="200" cy="150" r="5" fill="rgba(255,138,76,0.4)"/></>}
      {shape==="dots"&&<>{[0,1,2,3,4,5].map(row=>[0,1,2,3,4,5,6,7].map(col=><circle key={`${row}-${col}`} cx={col*57+28} cy={row*50+25} r="2" fill="rgba(255,255,255,0.12)"/>))}<circle cx="200" cy="150" r="4" fill="rgba(255,138,76,0.5)"/></>}
      {shape==="diagonal"&&<>{[-3,-2,-1,0,1,2,3,4,5,6,7].map(i=><line key={i} x1={i*70} y1="0" x2={i*70+300} y2="300" stroke="rgba(255,255,255,0.07)" strokeWidth="1"/>)}<line x1="0" y1="0" x2="400" y2="300" stroke="rgba(255,138,76,0.20)" strokeWidth="1.5"/></>}
      {shape==="rays"&&<>{[0,1,2,3,4,5,6,7,8,9,10,11].map(i=>{const a=(i/12)*Math.PI*2;return<line key={i} x1="200" y1="150" x2={200+Math.cos(a)*250} y2={150+Math.sin(a)*250} stroke="rgba(255,255,255,0.07)" strokeWidth="1"/>;})}<circle cx="200" cy="150" r="10" fill="rgba(255,138,76,0.35)"/><circle cx="200" cy="150" r="4" fill="rgba(255,138,76,0.8)"/></>}
      <rect width="400" height="300" fill={`url(#glow-${slug})`}/>
      <rect width="400" height="300" fill={`url(#fade-${slug})`}/>
    </svg>
  );
}

function MediaBadges({ project }) {
  const badges = [];
  const check = (arr, label) => arr && arr.some(x => x.url && x.url.trim() !== '') && badges.push(label);
  check(project.links,  'Prototype');
  check(project.videos, 'Video');
  check(project.pdfs,   'PDF');
  if (badges.length === 0) return null;
  return (
    <div style={{display:'flex',gap:'6px',flexWrap:'wrap',marginTop:'10px'}}>
      {badges.map(b=>(
        <span key={b} style={{fontSize:'9px',fontWeight:500,letterSpacing:'0.14em',textTransform:'uppercase',color:'rgba(255,138,76,0.7)',border:'1px solid rgba(255,138,76,0.25)',borderRadius:'2px',padding:'2px 7px'}}>{b}</span>
      ))}
    </div>
  );
}

function ProjectCard({ project, index, navigate }) {
  const [hovered, setHovered] = React.useState(false);
  const isLarge = project.size === 'large';

  const coverImage = (project.images || []).find(function(img) {
    return img.type === 'cover' && img.url && img.url.trim() !== '';
  });

  return (
    <div
      style={{position:'relative',overflow:'hidden',borderRadius:'2px',border:hovered?'1px solid rgba(255,138,76,0.35)':'1px solid rgba(255,255,255,0.07)',background:'#0a0a0a',cursor:'pointer',transition:'border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease',transform:hovered?'scale(1.015)':'scale(1)',boxShadow:hovered?'0 8px 48px rgba(255,138,76,0.12), 0 2px 16px rgba(0,0,0,0.6)':'0 2px 12px rgba(0,0,0,0.4)',height:isLarge?'420px':'300px'}}
      onMouseEnter={()=>setHovered(true)}
      onMouseLeave={()=>setHovered(false)}
      onClick={()=>navigate('project',project.slug)}
    >
      <CardVisual
        slug={project.slug}
        shape={project.shape}
        hovered={hovered}
        coverUrl={coverImage ? coverImage.url : null}
      />
      <div style={{position:'absolute',top:'20px',left:'22px',zIndex:3,fontSize:'10px',fontWeight:500,letterSpacing:'0.28em',textTransform:'uppercase',color:hovered?'rgba(255,138,76,0.9)':'rgba(255,255,255,0.25)',transition:'color 0.3s ease'}}>{project.category}</div>
      <div style={{position:'absolute',top:'18px',right:'22px',zIndex:3,fontSize:'11px',fontWeight:300,letterSpacing:'0.1em',color:'rgba(255,255,255,0.12)',fontVariantNumeric:'tabular-nums'}}>{String(index+1).padStart(2,'0')}</div>
      <div style={{position:'absolute',inset:0,zIndex:2,background:hovered?'linear-gradient(to top, rgba(8,8,8,0.96) 35%, rgba(8,8,8,0.15) 100%)':'linear-gradient(to top, rgba(8,8,8,0.88) 30%, rgba(8,8,8,0.05) 100%)',transition:'background 0.35s ease',display:'flex',flexDirection:'column',justifyContent:'flex-end',padding:'28px'}}>
        <div style={{display:'flex',flexWrap:'wrap',gap:'6px',marginBottom:'12px',opacity:hovered?1:0,transform:hovered?'translateY(0)':'translateY(8px)',transition:'opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s'}}>
          {project.tags.map(tag=>(
            <span key={tag} style={{fontSize:'10px',fontWeight:500,letterSpacing:'0.12em',textTransform:'uppercase',color:'rgba(255,255,255,0.45)',border:'1px solid rgba(255,255,255,0.12)',borderRadius:'2px',padding:'3px 8px'}}>{tag}</span>
          ))}
        </div>
        <div style={{fontSize:isLarge?'clamp(22px,2.5vw,32px)':'clamp(18px,2vw,24px)',fontWeight:300,lineHeight:1.15,color:'#fff',letterSpacing:'-0.01em',marginBottom:'10px'}}>{project.title}</div>
        <div style={{fontSize:'13px',fontWeight:400,lineHeight:1.65,color:'rgba(255,255,255,0.55)',maxWidth:'480px',opacity:hovered?1:0,transform:hovered?'translateY(0)':'translateY(6px)',transition:'opacity 0.35s ease 0.08s, transform 0.35s ease 0.08s',marginBottom:'10px'}}>{project.description}</div>
        <div style={{opacity:hovered?1:0,transition:'opacity 0.35s ease 0.1s'}}><MediaBadges project={project}/></div>
        <div style={{marginTop:'14px',fontSize:'11px',fontWeight:500,letterSpacing:'0.2em',textTransform:'uppercase',color:'#ff8a4c',opacity:hovered?1:0,transform:hovered?'translateX(0)':'translateX(-6px)',transition:'opacity 0.3s ease 0.12s, transform 0.3s ease 0.12s'}}>View project →</div>
      </div>
    </div>
  );
}

function CategorySection({ label, items, startIndex, navigate }) {
  return (
    <div style={{marginBottom:'80px'}}>
      <div style={{display:'flex',alignItems:'center',gap:'20px',padding:'0 48px',marginBottom:'40px'}}>
        <div style={{fontSize:'10px',fontWeight:500,letterSpacing:'0.3em',textTransform:'uppercase',color:'rgba(255,255,255,0.22)',whiteSpace:'nowrap'}}>{label}</div>
        <div style={{flex:1,height:'1px',background:'rgba(255,255,255,0.06)'}}></div>
        <div style={{fontSize:'10px',fontWeight:300,color:'rgba(255,255,255,0.18)',fontVariantNumeric:'tabular-nums'}}>{String(items.length).padStart(2,'0')}</div>
      </div>
      <div style={{padding:'0 48px',display:'grid',gridTemplateColumns:'repeat(12, 1fr)',gap:'20px',alignItems:'start'}}>
        {items.map((project,i)=>{
          const layouts=[{gridColumn:'1 / 8'},{gridColumn:'7 / 13',marginTop:'60px'},{gridColumn:'2 / 7',marginTop:'20px'},{gridColumn:'6 / 13'}];
          return(
            <div key={project.slug} style={layouts[i%layouts.length]}>
              <ProjectCard project={project} index={startIndex+i} navigate={navigate}/>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function ProjectsPage({ navigate }) {
  var _mounted = React.useState(false);
  var mounted = _mounted[0];
  var setMounted = _mounted[1];

  React.useEffect(function() {
    setMounted(false);
    var t = setTimeout(function() { setMounted(true); }, 80);
    return function() { clearTimeout(t); };
  }, []);

  function fi(delay) {
    return {
      opacity: mounted ? 1 : 0,
      transform: mounted ? 'translateY(0px)' : 'translateY(24px)',
      transition: 'opacity 0.85s ease ' + delay + 's, transform 0.85s ease ' + delay + 's',
    };
  }

  var allProjects = window.PROJECTS_DATA || [];
  var uiux    = allProjects.filter(function(p) { return p.category === 'UI/UX'; });
  var graphic = allProjects.filter(function(p) { return p.category === 'Graphic Design'; });

  return React.createElement('div', { style: { paddingTop: '56px', minHeight: '100vh', background: '#080808' } },

    React.createElement('div', { style: { padding: '64px 48px 72px' } },

      React.createElement('div', {
        style: Object.assign({}, fi(0.05), {
          fontSize: '10px', fontWeight: 500, letterSpacing: '0.3em',
          textTransform: 'uppercase', color: 'rgba(255,255,255,0.22)', marginBottom: '16px'
        })
      }, 'Work'),

      React.createElement('h1', {
        style: Object.assign({}, fi(0.15), {
          fontSize: 'clamp(72px,10vw,140px)', fontWeight: 300,
          lineHeight: 0.88, letterSpacing: '-0.02em', color: '#fff', margin: 0
        })
      }, 'selected'),

      React.createElement('h1', {
        style: Object.assign({}, fi(0.27), {
          fontSize: 'clamp(72px,10vw,140px)', fontWeight: 300,
          lineHeight: 0.88, letterSpacing: '-0.02em',
          color: 'rgba(255,255,255,0.25)', margin: '0 0 32px'
        })
      }, 'works'),

      React.createElement('p', {
        style: Object.assign({}, fi(0.38), {
          marginTop: '32px', fontSize: '14px', fontWeight: 300,
          color: 'rgba(255,255,255,0.35)', letterSpacing: '0.05em', textTransform: 'uppercase'
        })
      }, 'Experimental digital products & visual systems')
    ),

    React.createElement('div', {
      style: Object.assign({}, fi(0.45), {
        height: '1px', background: 'rgba(255,255,255,0.06)', margin: '0 48px 72px'
      })
    }),

    React.createElement(CategorySection, { label: 'UI/UX Projects', items: uiux,    startIndex: 0,           navigate: navigate }),
    React.createElement(CategorySection, { label: 'Graphic Design',  items: graphic, startIndex: uiux.length, navigate: navigate })
  );
}

Object.assign(window, { ProjectsPage });