// HomePage.jsx — Esther Chan

function NeuralCanvas() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const c = ref.current, ctx = c.getContext('2d');
    let raf, W, H, nodes = [];
    const N = 80, CONN = 155;
    function resize() { W = c.width = c.offsetWidth; H = c.height = c.offsetHeight; }
    function init() {
      nodes = Array.from({length: N}, () => ({
        x: Math.random()*W, y: Math.random()*H,
        vx: (Math.random()-.5)*.25, vy: (Math.random()-.5)*.25,
        r: Math.random()*1.4+.4, p: Math.random()*Math.PI*2
      }));
    }
    function draw() {
      ctx.clearRect(0,0,W,H);
      const g = ctx.createRadialGradient(W*.5,H*.5,0,W*.5,H*.5,W*.6);
      g.addColorStop(0,'rgba(255,138,76,.13)'); g.addColorStop(1,'rgba(255,138,76,0)');
      ctx.fillStyle = g; ctx.fillRect(0,0,W,H);
      for (let i=0;i<nodes.length;i++) {
        const a = nodes[i];
        a.x+=a.vx; a.y+=a.vy; a.p+=.011;
        if(a.x<0||a.x>W) a.vx*=-1;
        if(a.y<0||a.y>H) a.vy*=-1;
        for (let j=i+1;j<nodes.length;j++) {
          const b=nodes[j], dx=a.x-b.x, dy=a.y-b.y, d=Math.sqrt(dx*dx+dy*dy);
          if(d<CONN) {
            const al=(1-d/CONN)*.38;
            ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y);
            ctx.strokeStyle=d<CONN*.4?`rgba(255,138,76,${al*.9})`:`rgba(255,255,255,${al})`;
            ctx.lineWidth=.7; ctx.stroke();
          }
        }
      }
      for (const n of nodes) {
        const p=.5+.5*Math.sin(n.p);
        ctx.beginPath(); ctx.arc(n.x,n.y,n.r,0,Math.PI*2);
        ctx.fillStyle=`rgba(255,255,255,${.5+.35*p})`; ctx.fill();
      }
      raf = requestAnimationFrame(draw);
    }
    resize(); init(); raf=requestAnimationFrame(draw);
    window.addEventListener('resize',()=>{resize();init();});
    return ()=>cancelAnimationFrame(raf);
  },[]);
  return <canvas ref={ref} style={{position:'absolute',inset:0,width:'100%',height:'100%',pointerEvents:'none'}} />;
}

function FadeSection({ children, style, delay=0 }) {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  React.useEffect(()=>{
    const el = ref.current;
    if(!el) return;
    const obs = new IntersectionObserver(([e])=>{
      if(e.isIntersecting){ setVis(true); obs.disconnect(); }
    },{ threshold:0.08 });
    obs.observe(el);
    return ()=>obs.disconnect();
  },[]);
  return (
    <div ref={ref} style={{
      opacity: vis?1:0,
      transform: vis?'translateY(0)':'translateY(28px)',
      transition:`opacity .85s ease ${delay}s, transform .85s ease ${delay}s`,
      ...style,
    }}>{children}</div>
  );
}

function CountUp({ target, suffix, duration=1800 }) {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  const [started, setStarted] = React.useState(false);
  React.useEffect(()=>{
    const el = ref.current;
    if(!el) return;
    const obs = new IntersectionObserver(([e])=>{
      if(e.isIntersecting){ setStarted(true); obs.disconnect(); }
    },{ threshold:0.5 });
    obs.observe(el);
    return ()=>obs.disconnect();
  },[]);
  React.useEffect(()=>{
    if(!started) return;
    let start = null, raf;
    function tick(ts) {
      if(!start) start = ts;
      const p = Math.min((ts-start)/duration, 1);
      const ease = 1 - Math.pow(1-p, 3);
      setVal(Math.round(ease * target));
      if(p < 1) raf = requestAnimationFrame(tick);
    }
    raf = requestAnimationFrame(tick);
    return ()=>cancelAnimationFrame(raf);
  },[started]);
  return <span ref={ref} style={{color:'#ff8a4c'}}>{val}{suffix}</span>;
}

function FanCard({ project, index, total, navigate }) {
  const [hov, setHov] = React.useState(false);
  const mid = (total - 1) / 2;
  const rotate = (index - mid) * 8;
  const translateY = Math.abs(index - mid) * 18;

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

  const shapes = {
    circle: <><circle cx="150" cy="110" r="70" fill="none" stroke="rgba(255,255,255,.07)" strokeWidth="1"/><circle cx="150" cy="110" r="40" fill="none" stroke="rgba(255,255,255,.09)" strokeWidth="1"/><circle cx="150" cy="110" r="10" fill="rgba(255,138,76,.30)"/></>,
    lines: <>{[0,1,2,3,4,5].map(i=><line key={i} x1={i*60} y1="0" x2={i*60} y2="220" stroke="rgba(255,255,255,.07)" strokeWidth="1"/>)}<line x1="0" y1="110" x2="300" y2="110" stroke="rgba(255,138,76,.25)" strokeWidth="1"/></>,
    grid: <>{[0,1,2,3].map(i=><line key={'h'+i} x1="0" y1={i*73} x2="300" y2={i*73} stroke="rgba(255,255,255,.06)" strokeWidth="1"/>)}{[0,1,2,3,4,5].map(i=><line key={'v'+i} x1={i*60} y1="0" x2={i*60} y2="220" stroke="rgba(255,255,255,.06)" strokeWidth="1"/>)}<circle cx="150" cy="110" r="5" fill="rgba(255,138,76,.40)"/></>,
    dots: <>{[0,1,2].map(r=>[0,1,2,3,4].map(c=><circle key={r+'-'+c} cx={40+c*55} cy={60+r*55} r="3" fill="rgba(255,255,255,.12)"/>))}<circle cx="150" cy="110" r="18" fill="none" stroke="rgba(255,138,76,.35)" strokeWidth="1.5"/></>,
  };

  return (
    <div
      onClick={()=>navigate('project', project.slug)}
      onMouseEnter={()=>setHov(true)}
      onMouseLeave={()=>setHov(false)}
      style={{
        position:'relative',
        width:'clamp(180px,22vw,280px)',
        flexShrink:0,
        transform: hov
          ? `rotate(${rotate}deg) translateY(${translateY-24}px) scale(1.06)`
          : `rotate(${rotate}deg) translateY(${translateY}px) scale(1)`,
        transformOrigin:'bottom center',
        transition:'transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease',
        cursor:'pointer',
        zIndex: hov ? 10 : total - Math.abs(index - Math.round(mid)),
      }}
    >
      <div style={{
        borderRadius:'8px', overflow:'hidden',
        border: hov ? '1px solid rgba(255,138,76,.40)' : '1px solid rgba(255,255,255,.08)',
        boxShadow: hov ? '0 24px 60px rgba(0,0,0,.7), 0 0 32px rgba(255,138,76,.12)' : '0 8px 32px rgba(0,0,0,.5)',
        background:'#0f0f0f',
        transition:'border-color .3s, box-shadow .3s',
      }}>
        {/* cover image or SVG fallback */}
        {coverImage
          ? <div style={{position:'relative',overflow:'hidden',height:'220px'}}>
              <img
                src={coverImage.url}
                alt={project.title}
                style={{
                  width:'100%', height:'100%', objectFit:'cover', objectPosition:'top',
                  display:'block',
                  transition:'transform .4s ease, filter .4s ease',
                  transform: hov ? 'scale(1.05)' : 'scale(1)',
                  filter: hov ? 'brightness(0.65)' : 'brightness(0.50)',
                }}
              />
              {/* bottom fade */}
              <div style={{position:'absolute',bottom:0,left:0,right:0,height:'50%',background:'linear-gradient(to top, rgba(10,10,10,.95) 0%, transparent 100%)',pointerEvents:'none'}}/>
            </div>
          : <svg viewBox="0 0 300 220" style={{width:'100%',display:'block'}}>
              <rect width="300" height="220" fill="#0f0f0f"/>
              {shapes[project.shape]}
              <defs>
                <linearGradient id={`fg-${project.slug}`} x1="0" y1="0" x2="0" y2="1">
                  <stop offset="40%" stopColor="#0a0a0a" stopOpacity="0"/>
                  <stop offset="100%" stopColor="#0a0a0a" stopOpacity=".9"/>
                </linearGradient>
              </defs>
              <rect width="300" height="220" fill={`url(#fg-${project.slug})`}/>
            </svg>
        }
        <div style={{padding:'12px 16px 16px',background:'#0a0a0a'}}>
          <div style={{fontSize:'15px',fontWeight:300,color:'#fff',letterSpacing:'-.01em',lineHeight:1.3,marginBottom:'4px'}}>{project.title}</div>
          <div style={{fontSize:'12px',fontWeight:500,letterSpacing:'.14em',textTransform:'uppercase',color:'rgba(255,138,76,.70)',opacity:hov?1:0.5,transition:'opacity .3s'}}>View →</div>
        </div>
      </div>
    </div>
  );
}

function HomePage({ navigate, aboutRef }) {
  const [mounted, setMounted] = React.useState(false);
  const [breathe, setBreathe] = React.useState(0);

  React.useEffect(()=>{
    const t=setTimeout(()=>setMounted(true),80);
    return ()=>clearTimeout(t);
  },[]);

  React.useEffect(()=>{
    let raf, start = null;
    function tick(ts) {
      if(!start) start = ts;
      setBreathe((ts - start) / 1000);
      raf = requestAnimationFrame(tick);
    }
    raf = requestAnimationFrame(tick);
    return ()=>cancelAnimationFrame(raf);
  },[]);

  const fi=(delay=0)=>({
    opacity: mounted?1:0,
    transform: mounted?'translateY(0)':'translateY(18px)',
    transition:`opacity .85s ease ${delay}s, transform .85s ease ${delay}s`,
  });

  const floatY = Math.sin(breathe * 0.6) * 10;
  const floatX = Math.sin(breathe * 0.4) * 5;
  const floatScale = 1 + Math.sin(breathe * 0.5) * 0.012;

  const capabilities = [
    'Human-centered AI design','Conversational interface design','UX research',
    'Product design','Service & systems thinking','Interactive prototyping',
    'Design systems','Visual design','Brand identity',
    'Service blueprint','User journey',
  ];

  const stats = [
    { target:3,  suffix:'+', label:'Years of experience' },
    { target:10, suffix:'+', label:'Projects completed'  },
    { target:4,  suffix:'',  label:'Consulting clients'  },
  ];

  const clients = [
    { name:'BunnyBnb',     img:'Bunny_Bnb.png'   },
    { name:'CASA Staging', img:'CASA staging.png' },
    { name:'Selah Studio', img:'Selah.png'        },
    { name:'Ladder Gate',  img:'LadderGate.png'   },
  ];

  const projects = (window.PROJECTS_DATA || []).slice(0,4);

  return (
    <div style={{background:'#080808'}}>

      {/* ═══ HERO ═══ */}
      <div style={{position:'relative',height:'100vh',minHeight:'600px',overflow:'hidden'}}>
        <NeuralCanvas />
        <div style={{position:'absolute',inset:0,pointerEvents:'none',background:'radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(8,8,8,.55) 100%)'}}/>

        <div style={{position:'absolute',top:'clamp(80px,13vh,140px)',left:'clamp(32px,5vw,72px)',zIndex:1,pointerEvents:'none',...fi(.1)}}>
          <span style={{fontSize:'clamp(100px,17vw,240px)',fontWeight:300,letterSpacing:'-.04em',color:'#fff',lineHeight:1,display:'block'}}>Esther</span>
        </div>

        <div style={{position:'absolute',bottom:'0',left:'50%',transform:`translate(calc(-62% + ${floatX}px), ${floatY}px) scale(${floatScale})`,zIndex:2,pointerEvents:'none',width:'clamp(560px,72vw,1000px)'}}>
          <img src="portrait.png" alt="Esther Chan" style={{width:'100%',display:'block',filter:'grayscale(15%) contrast(1.05)',mixBlendMode:'luminosity'}}/>
          <div style={{position:'absolute',bottom:0,left:0,right:0,height:'18%',background:'linear-gradient(to top, #080808 0%, transparent 100%)',pointerEvents:'none'}}/>
        </div>

        <div style={{position:'absolute',bottom:'clamp(40px,7vh,80px)',right:'clamp(16px,3vw,48px)',zIndex:3,pointerEvents:'none',...fi(.2)}}>
          <span style={{fontSize:'clamp(100px,17vw,240px)',fontWeight:300,letterSpacing:'-.04em',color:'rgba(255,255,255,.15)',lineHeight:1,display:'block'}}>Chan</span>
        </div>

        <div style={{position:'absolute',top:'80px',left:0,right:0,display:'flex',justifyContent:'center',zIndex:5,...fi(.05)}}>
          <span style={{fontSize:'12px',fontWeight:500,letterSpacing:'.32em',textTransform:'uppercase',color:'rgba(255,255,255,.22)'}}>
            UI/UX Design&nbsp;&nbsp;·&nbsp;&nbsp;Graphic Design&nbsp;&nbsp;·&nbsp;&nbsp;Creative Direction
          </span>
        </div>

        <div style={{position:'absolute',bottom:'clamp(40px,7vh,72px)',left:'clamp(32px,5vw,72px)',zIndex:4}}>
          <p style={{...fi(.35),fontSize:'clamp(13px,1.5vw,18px)',fontWeight:300,lineHeight:1.65,color:'rgba(255,255,255,.35)',maxWidth:'380px',margin:'0 0 24px'}}>
            Product Designer crafting AI-native experiences<br/>at the intersection of form and intelligence.
          </p>
          <div style={{...fi(.5),display:'flex',gap:'32px',alignItems:'center'}}>
            <span onClick={()=>navigate('projects')} style={{fontSize:'12px',fontWeight:500,letterSpacing:'.22em',textTransform:'uppercase',color:'#ff8a4c',cursor:'pointer',transition:'text-shadow .2s'}}
              onMouseEnter={e=>e.currentTarget.style.textShadow='0 0 24px rgba(255,138,76,.7)'}
              onMouseLeave={e=>e.currentTarget.style.textShadow='none'}>
              View Selected Works →
            </span>
            <span style={{fontSize:'12px',fontWeight:500,letterSpacing:'.28em',textTransform:'uppercase',color:'rgba(255,255,255,.22)'}}>· Available for work</span>
          </div>
        </div>

        <div style={{position:'absolute',bottom:'32px',right:'48px',zIndex:4,...fi(.9),display:'flex',flexDirection:'column',alignItems:'center',gap:'8px'}}>
          <div style={{width:'1px',height:'40px',background:'linear-gradient(to bottom, rgba(255,138,76,.7), transparent)'}}/>
          <span style={{fontSize:'12px',fontWeight:500,letterSpacing:'.3em',textTransform:'uppercase',color:'rgba(255,255,255,.22)',writingMode:'vertical-rl'}}>Scroll</span>
        </div>
      </div>

      {/* ═══ ABOUT ═══ */}
      <div
        ref={el=>{ if(el && aboutRef) aboutRef.current=el; }}
        id="about-section"
        style={{position:'relative',background:'#080808',overflow:'hidden',borderTop:'1px solid rgba(255,255,255,.05)',padding:'clamp(72px,10vw,120px) clamp(32px,6vw,80px) clamp(72px,10vw,120px)'}}
      >
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'clamp(40px,6vw,80px)',alignItems:'start'}}>
          <div>
            <FadeSection delay={0}>
              <h2 style={{fontSize:'clamp(24px,3.2vw,48px)',fontWeight:300,lineHeight:1.20,letterSpacing:'-.02em',color:'#fff',margin:'0 0 clamp(16px,2vw,24px)',maxWidth:'620px'}}>
                UX/Product Designer focused on{' '}
                <em style={{color:'#ff8a4c',fontStyle:'normal'}}>research-led solutions</em>{' '}
                for complex digital systems.
              </h2>
            </FadeSection>
            <FadeSection delay={0.1}>
              <p style={{fontSize:'clamp(14px,1.4vw,17px)',fontWeight:300,lineHeight:1.80,color:'rgba(255,255,255,.35)',maxWidth:'480px',margin:'0 0 clamp(44px,6vw,64px)'}}>
                I combine HCI thinking and visual design to create accessible,
                human-centered experiences across AI-driven systems, digital
                products, and interaction design.
              </p>
            </FadeSection>
            <FadeSection delay={0.18} style={{marginBottom:'clamp(32px,4vw,48px)'}}>
              <div style={{fontSize:'12px',fontWeight:500,letterSpacing:'.30em',textTransform:'uppercase',color:'rgba(255,255,255,.22)',marginBottom:'16px'}}>Capabilities</div>
              <div style={{display:'flex',flexWrap:'wrap',gap:'10px 18px',maxWidth:'560px'}}>
                {capabilities.map(s=>(
                  <span key={s} style={{fontSize:'clamp(13px,1.2vw,15px)',fontWeight:300,lineHeight:1.5,cursor:'default',color:'rgba(255,255,255,.35)',transition:'color .2s'}}
                    onMouseEnter={e=>e.currentTarget.style.color='#ff8a4c'}
                    onMouseLeave={e=>e.currentTarget.style.color='rgba(255,255,255,.35)'}
                  >{s}</span>
                ))}
              </div>
            </FadeSection>
            <FadeSection delay={0.24} style={{marginBottom:'clamp(32px,4vw,48px)'}}>
              <div style={{fontSize:'12px',fontWeight:500,letterSpacing:'.30em',textTransform:'uppercase',color:'rgba(255,255,255,.22)',marginBottom:'14px'}}>Tools</div>
              <div style={{display:'flex',flexWrap:'wrap',gap:'8px'}}>
                {['Figma','Cursor','Claude','Framer','Adobe CC'].map(t=>(
                  <span key={t} style={{fontSize:'12px',fontWeight:500,letterSpacing:'.10em',textTransform:'uppercase',color:'rgba(255,255,255,.35)',border:'1px solid rgba(255,255,255,.22)',borderRadius:'2px',padding:'5px 12px',transition:'border-color .2s, color .2s',cursor:'default'}}
                    onMouseEnter={e=>{e.currentTarget.style.borderColor='rgba(255,138,76,.40)';e.currentTarget.style.color='rgba(255,138,76,.88)';}}
                    onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(255,255,255,.22)';e.currentTarget.style.color='rgba(255,255,255,.35)';}}
                  >{t}</span>
                ))}
              </div>
            </FadeSection>
            <FadeSection delay={0.30} style={{marginBottom:'clamp(32px,4vw,48px)'}}>
              <div style={{fontSize:'12px',fontWeight:500,letterSpacing:'.30em',textTransform:'uppercase',color:'rgba(255,255,255,.22)',marginBottom:'12px'}}>Previously</div>
              <p style={{fontSize:'clamp(13px,1.3vw,15px)',fontWeight:300,color:'rgba(255,255,255,.35)',lineHeight:1.8,maxWidth:'560px',margin:0}}>
                {['NewtonRussell','DistinctionCoding','MOMENTANÉE','RiCCO Engineering','Sushi Bros'].map((co,i,arr)=>(
                  <React.Fragment key={co}>
                    <span style={{transition:'color .2s',cursor:'default'}}
                      onMouseEnter={e=>e.currentTarget.style.color='rgba(255,255,255,.75)'}
                      onMouseLeave={e=>e.currentTarget.style.color=''}
                    >{co}</span>
                    {i<arr.length-1&&<span style={{color:'rgba(255,255,255,.22)'}}>&nbsp;&nbsp;·&nbsp;&nbsp;</span>}
                  </React.Fragment>
                ))}
              </p>
            </FadeSection>
            <FadeSection delay={0.36}>
              <div style={{display:'flex',alignItems:'baseline',gap:'32px',flexWrap:'wrap'}}>
                <span style={{fontSize:'15px',fontWeight:300,letterSpacing:'.08em',color:'rgba(255,255,255,.22)'}}>Sydney — Brisbane City</span>
                <span onClick={()=>navigate('contact')} style={{fontSize:'12px',fontWeight:500,letterSpacing:'.22em',textTransform:'uppercase',color:'#ff8a4c',cursor:'pointer',transition:'text-shadow .2s'}}
                  onMouseEnter={e=>e.currentTarget.style.textShadow='0 0 20px rgba(255,138,76,.65)'}
                  onMouseLeave={e=>e.currentTarget.style.textShadow='none'}
                >Get in touch →</span>
              </div>
            </FadeSection>
          </div>

          <div style={{display:'flex',flexDirection:'column',justifyContent:'center',gap:'clamp(32px,5vw,56px)',paddingTop:'clamp(16px,4vw,48px)'}}>
            {stats.map((s,i)=>(
              <FadeSection key={s.label} delay={0.2+i*0.15}>
                <div style={{borderLeft:'1px solid rgba(255,138,76,.30)',paddingLeft:'clamp(20px,3vw,36px)'}}>
                  <div style={{fontSize:'clamp(52px,7vw,96px)',fontWeight:200,letterSpacing:'-.04em',lineHeight:1,marginBottom:'10px'}}>
                    <CountUp target={s.target} suffix={s.suffix} duration={1600} />
                  </div>
                  <div style={{fontSize:'12px',fontWeight:400,letterSpacing:'.18em',textTransform:'uppercase',color:'rgba(255,255,255,.35)'}}>
                    {s.label}
                  </div>
                </div>
              </FadeSection>
            ))}
          </div>
        </div>
      </div>

      {/* ═══ CLIENTS ═══ */}
      <div style={{borderTop:'1px solid rgba(255,255,255,.05)',padding:'clamp(64px,8vw,96px) clamp(32px,6vw,80px)',background:'#080808'}}>
        <FadeSection delay={0} style={{marginBottom:'clamp(32px,4vw,52px)'}}>
          <div style={{fontSize:'12px',fontWeight:500,letterSpacing:'.30em',textTransform:'uppercase',color:'rgba(255,255,255,.22)',marginBottom:'10px'}}>Consulting</div>
          <div style={{fontSize:'clamp(22px,3vw,38px)',fontWeight:300,letterSpacing:'-.02em',color:'#fff',lineHeight:1.2}}>
            UX Design Consulting<br/>for Local Business Owners
          </div>
        </FadeSection>
        <div style={{display:'flex',gap:'clamp(24px,4vw,40px)',flexWrap:'wrap',alignItems:'center'}}>
          {clients.map((cl,i)=>(
            <FadeSection key={cl.name} delay={0.15+i*0.10}>
              <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'12px'}}>
                <div style={{width:'clamp(120px,15vw,180px)',height:'clamp(70px,9vw,100px)',background:'rgba(255,255,255,.04)',border:'1px solid rgba(255,255,255,.08)',borderRadius:'4px',display:'flex',alignItems:'center',justifyContent:'center',padding:'16px 24px',transition:'border-color .3s, background .3s'}}
                  onMouseEnter={e=>{e.currentTarget.style.borderColor='rgba(255,138,76,.30)';e.currentTarget.style.background='rgba(255,138,76,.04)';}}
                  onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(255,255,255,.08)';e.currentTarget.style.background='rgba(255,255,255,.04)';}}
                >
                  <img src={cl.img} alt={cl.name} style={{maxWidth:'100%',maxHeight:'100%',objectFit:'contain'}}/>
                </div>
                <span style={{fontSize:'12px',fontWeight:400,letterSpacing:'.08em',color:'rgba(255,255,255,.35)'}}>{cl.name}</span>
              </div>
            </FadeSection>
          ))}
        </div>
      </div>

      {/* ═══ FEATURED WORK ═══ */}
      <div style={{borderTop:'1px solid rgba(255,255,255,.06)',padding:'72px 48px 120px',background:'#080808'}}>
        <FadeSection delay={0} style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:'64px'}}>
          <div>
            <div style={{fontSize:'12px',fontWeight:500,letterSpacing:'.30em',textTransform:'uppercase',color:'rgba(255,255,255,.22)',marginBottom:'8px'}}>Featured</div>
            <div style={{fontSize:'clamp(28px,4vw,48px)',fontWeight:300,letterSpacing:'-.02em',color:'#fff',lineHeight:1}}>Selected Projects</div>
          </div>
          <span onClick={()=>navigate('projects')} style={{fontSize:'12px',fontWeight:500,letterSpacing:'.20em',textTransform:'uppercase',color:'rgba(255,255,255,.35)',cursor:'pointer',transition:'color .2s'}}
            onMouseEnter={e=>e.currentTarget.style.color='#ff8a4c'}
            onMouseLeave={e=>e.currentTarget.style.color='rgba(255,255,255,.35)'}
          >All work →</span>
        </FadeSection>

        <div style={{display:'flex',justifyContent:'center',alignItems:'flex-end',gap:'clamp(8px,2vw,20px)',paddingBottom:'40px',paddingTop:'20px'}}>
          {projects.map((p,i)=>(
            <FanCard key={p.slug} project={p} index={i} total={projects.length} navigate={navigate} />
          ))}
        </div>
      </div>

    </div>
  );
}

Object.assign(window, { HomePage });