// How it works — 4 step walkthrough with a left rail and right preview
const STEPS = [
  {
    n: '01',
    title: 'Photograph your space',
    body: 'Snap your room from the corner. That photo becomes your canvas — products will sit on your actual floor, against your actual walls, under your actual light.',
    detail: 'Or pick a curated scene if you prefer.',
  },
  {
    n: '02',
    title: 'Clip products as you browse',
    body: 'See a chair you love on West Elm. Hit the clipper. It lands in your library — image, URL and name intact. Build a library across hundreds of sites without re-uploading anything.',
    detail: 'Background removal happens automatically on upload.',
  },
  {
    n: '03',
    title: 'Place, pin, link',
    body: 'Drag products onto your canvas. Resize. Layer. Drop a hotspot on each one. Add a name and the affiliate link you want it to fire. The whole flow takes minutes, not hours.',
    detail: 'Affiliate URL field unlocks on paid.',
  },
  {
    n: '04',
    title: 'Publish your room card',
    body: 'Hit publish. Your room becomes a hosted page at myrooms.design/room/your-slug. Share the URL, embed it on a blog, drop it in a newsletter. The card does the converting.',
    detail: 'Exports: link, static image, shopping list.',
  },
];

function HowItWorks(){
  const [active, setActive] = React.useState(0);

  // auto-cycle if user hasn't interacted
  const [touched, setTouched] = React.useState(false);
  React.useEffect(()=>{
    if(touched) return;
    const t = setInterval(()=> setActive(a => (a+1)%STEPS.length), 4200);
    return () => clearInterval(t);
  }, [touched]);

  const step = STEPS[active];

  return (
    <section id="how" style={{padding:'140px 0', borderTop:'1px solid var(--line)', background:'var(--bg-1)'}}>
      <div className="container">

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, marginBottom:72, alignItems:'end'}}>
          <div>
            <span className="mono eyebrow">How it works</span>
            <h2 className="serif" style={{
              margin:'24px 0 0', fontWeight:300,
              fontSize:'clamp(40px, 5.5vw, 76px)', lineHeight:1, letterSpacing:'-0.03em',
            }}>
              From a phone photo <br/>
              <span style={{fontStyle:'italic', color:'var(--ink-2)'}}>to a shoppable room.</span>
            </h2>
          </div>
          <p style={{margin:0, color:'var(--muted)', fontSize:15, lineHeight:1.7, maxWidth:420, justifySelf:'end'}}>
            Four steps. No design degree, no Photoshop, no scraping product catalogs.
            Most creators publish their first room card on day one.
          </p>
        </div>

        <div style={{
          display:'grid', gridTemplateColumns:'1.1fr 1fr',
          gap:64, alignItems:'stretch',
        }}>
          {/* steps list */}
          <div>
            {STEPS.map((s,i)=>{
              const isActive = i===active;
              return (
                <div key={s.n}
                  onMouseEnter={()=>{ setActive(i); setTouched(true); }}
                  onClick={()=>{ setActive(i); setTouched(true); }}
                  style={{
                    display:'grid', gridTemplateColumns:'80px 1fr', gap:24,
                    padding:'28px 0',
                    borderTop: i===0 ? '1px solid var(--line)' : 'none',
                    borderBottom:'1px solid var(--line)',
                    cursor:'pointer',
                    opacity: isActive ? 1 : 0.5,
                    transition:'opacity .25s ease',
                  }}>
                  <div className="serif" style={{
                    fontSize:32, fontWeight:300, fontStyle:'italic',
                    color: isActive ? 'var(--accent)' : 'var(--muted)',
                    letterSpacing:'-0.02em',
                  }}>{s.n}</div>
                  <div>
                    <h4 className="serif" style={{
                      margin:0, fontSize:26, fontWeight:400, letterSpacing:'-0.02em', lineHeight:1.15,
                    }}>{s.title}</h4>
                    <p style={{
                      margin:'12px 0 0', color:'var(--ink-2)',
                      fontSize:14.5, lineHeight:1.6, fontWeight:300,
                    }}>{s.body}</p>
                    <div className="mono" style={{marginTop:14, color:'var(--muted-2)'}}>{s.detail}</div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* mock preview */}
          <div style={{
            position:'sticky', top:120, alignSelf:'start',
            border:'1px solid var(--line)',
            background:'#0c0b0a',
            aspectRatio:'4/5',
            overflow:'hidden',
            display:'flex', flexDirection:'column',
          }}>
            {/* mock window chrome */}
            <div style={{
              display:'flex',alignItems:'center',gap:8,
              padding:'12px 14px', borderBottom:'1px solid var(--line)',
            }}>
              <span style={{width:8,height:8,borderRadius:99,background:'#3a342d'}}/>
              <span style={{width:8,height:8,borderRadius:99,background:'#3a342d'}}/>
              <span style={{width:8,height:8,borderRadius:99,background:'#3a342d'}}/>
              <span className="mono" style={{marginLeft:14, fontSize:10}}>myrooms.design · step {step.n}</span>
            </div>
            <div style={{flex:1, position:'relative'}}>
              {/* swappable previews per step */}
              <StepPreview step={active}/>
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}

function StepPreview({step}){
  const base = {position:'absolute', inset:0, padding:24, display:'flex', flexDirection:'column'};
  // 4 distinct visuals: floor plan, clipper grid, canvas, room card
  if(step===0){
    // Floor plan
    return (
      <div style={base}>
        <div className="mono" style={{marginBottom:12}}>01 / Floor plan</div>
        <div style={{
          flex:1, position:'relative',
          border:'1px solid var(--line)',
          background:`
            linear-gradient(rgba(245,238,225,0.05) 1px, transparent 1px) 0 0/24px 24px,
            linear-gradient(90deg, rgba(245,238,225,0.05) 1px, transparent 1px) 0 0/24px 24px,
            #161310
          `,
        }}>
          {/* walls */}
          <svg viewBox="0 0 400 400" preserveAspectRatio="none" style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
            <path d="M30 30 L370 30 L370 220 L260 220 L260 370 L30 370 Z"
              fill="none" stroke="var(--ink)" strokeWidth="2"/>
            {/* door swing */}
            <path d="M140 30 A30 30 0 0 1 170 60" fill="none" stroke="var(--accent)" strokeWidth="1"/>
            <line x1="140" y1="30" x2="170" y2="30" stroke="var(--bg-1)" strokeWidth="4"/>
            {/* window */}
            <line x1="270" y1="30" x2="340" y2="30" stroke="var(--accent)" strokeWidth="3"/>
            {/* furniture footprints */}
            <rect x="60" y="80" width="120" height="50" fill="none" stroke="var(--ink-2)" strokeDasharray="3 3"/>
            <text x="120" y="110" fill="var(--muted)" fontSize="10" textAnchor="middle" fontFamily="JetBrains Mono">SOFA</text>
            <rect x="220" y="80" width="60" height="40" fill="none" stroke="var(--ink-2)" strokeDasharray="3 3"/>
            <text x="250" y="105" fill="var(--muted)" fontSize="9" textAnchor="middle" fontFamily="JetBrains Mono">CHAIR</text>
            <rect x="80" y="160" width="80" height="30" fill="none" stroke="var(--ink-2)" strokeDasharray="3 3"/>
            <text x="120" y="180" fill="var(--muted)" fontSize="9" textAnchor="middle" fontFamily="JetBrains Mono">TABLE</text>
            <rect x="80" y="240" width="160" height="100" fill="none" stroke="var(--accent)" strokeDasharray="3 3"/>
            <text x="160" y="295" fill="var(--accent)" fontSize="10" textAnchor="middle" fontFamily="JetBrains Mono">RUG · 8×10</text>
          </svg>
        </div>
        <div className="mono" style={{marginTop:12, color:'var(--muted-2)'}}>
          14′ × 18′ — fits 5 furniture footprints with room to walk
        </div>
      </div>
    );
  }
  if(step===1){
    // Clipper grid
    const items = [
      { src:'https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?w=300&q=70&auto=format&fit=crop', name:'Boucle Chair', site:'cb2.com', price:'$1,299' },
      { src:'https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?w=300&q=70&auto=format&fit=crop', name:'Pendant Lamp', site:'schoolhouse.com', price:'$420' },
      { src:'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=300&q=70&auto=format&fit=crop', name:'Linen Sofa', site:'westelm.com', price:'$2,400' },
      { src:'https://images.unsplash.com/photo-1540574163026-643ea20ade25?w=300&q=70&auto=format&fit=crop', name:'Beni Rug', site:'etsy.com', price:'$880' },
      { src:'https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=300&q=70&auto=format&fit=crop', name:'Side Table', site:'soho.com', price:'$640' },
      { src:'https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=300&q=70&auto=format&fit=crop', name:'Linen Curtains', site:'rh.com', price:'$320' },
    ];
    return (
      <div style={base}>
        <div className="mono" style={{marginBottom:12}}>02 / Your library · 6 clips</div>
        <div style={{
          flex:1, display:'grid',
          gridTemplateColumns:'1fr 1fr', gap:10,
          overflow:'hidden',
        }}>
          {items.map((it,i)=>(
            <div key={i} style={{
              border:'1px solid var(--line)', background:'#16110d',
              padding:8, display:'flex', flexDirection:'column', gap:6,
            }}>
              <div style={{aspectRatio:'1/1', overflow:'hidden', background:'#1f1814'}}>
                <img src={it.src} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
              <div style={{fontSize:11}}>{it.name}</div>
              <div style={{display:'flex',justifyContent:'space-between',color:'var(--muted)',fontSize:10}}>
                <span>{it.site}</span><span>{it.price}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if(step===2){
    // Canvas
    return (
      <div style={base}>
        <div className="mono" style={{marginBottom:12}}>03 / Canvas · placing</div>
        <div style={{flex:1, position:'relative', overflow:'hidden', border:'1px solid var(--line)'}}>
          <img src="https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?w=900&q=70&auto=format&fit=crop"
               alt="" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',filter:'brightness(0.85)'}}/>
          {[
            {x:24,y:60,n:1},{x:62,y:48,n:2},{x:82,y:30,n:3}
          ].map((p,i)=>(
            <div key={i} style={{
              position:'absolute', left:`${p.x}%`, top:`${p.y}%`,
              transform:'translate(-50%,-50%)',
              width:22, height:22, borderRadius:999,
              background:'var(--accent)', color:'#1a0f08',
              display:'grid', placeItems:'center',
              fontFamily:'JetBrains Mono', fontSize:10, fontWeight:600,
              boxShadow:'0 4px 16px rgba(0,0,0,0.4)',
            }}>{String(p.n).padStart(2,'0')}</div>
          ))}
        </div>
        <div className="mono" style={{marginTop:12,color:'var(--muted-2)'}}>3 of 4 products pinned</div>
      </div>
    );
  }
  // step 3 - room card
  return (
    <div style={base}>
      <div className="mono" style={{marginBottom:12}}>04 / Room card · published</div>
      <div style={{flex:1, position:'relative', overflow:'hidden', border:'1px solid var(--line)'}}>
        <img src="https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?w=900&q=70&auto=format&fit=crop"
             alt="" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
        <div style={{
          position:'absolute',left:12,top:12,
          padding:'6px 10px',background:'rgba(12,11,10,0.7)',
          backdropFilter:'blur(8px)',border:'1px solid var(--line)',
        }}>
          <span className="mono" style={{fontSize:9, color:'var(--ink-2)'}}>myrooms.design/room/canyon-living</span>
        </div>
        <div style={{
          position:'absolute', left:12,right:12,bottom:12,
          padding:'10px 12px', background:'rgba(12,11,10,0.78)',
          backdropFilter:'blur(8px)', border:'1px solid var(--line)',
          display:'flex', justifyContent:'space-between', alignItems:'center',
        }}>
          <div>
            <div className="serif" style={{fontSize:14}}>The Canyon Living Room</div>
            <div style={{fontSize:10,color:'var(--muted)'}}>@ellaprice · 4 products</div>
          </div>
          <span className="mono" style={{fontSize:9, color:'var(--accent)'}}>● Live</span>
        </div>
      </div>
    </div>
  );
}

window.HowItWorks = HowItWorks;