// Explore preview — sample room cards
const ROOMS = [
  { img:'https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=900&q=80&auto=format&fit=crop',
    title:'The Canyon Living Room', author:'@ellaprice', products:4, tag:'Living', size:'wide' },
  { img:'https://images.unsplash.com/photo-1540574163026-643ea20ade25?w=900&q=80&auto=format&fit=crop',
    title:'Slow Sunday Bedroom', author:'@morgan.calmhouse', products:6, tag:'Bedroom' },
  { img:'https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?w=900&q=80&auto=format&fit=crop',
    title:'Brooklyn Galley', author:'@studio.kove', products:3, tag:'Kitchen' },
  { img:'https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=900&q=80&auto=format&fit=crop',
    title:'Cane & Travertine', author:'@junipersouth', products:5, tag:'Living' },
  { img:'https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?w=900&q=80&auto=format&fit=crop',
    title:'A Reader’s Corner', author:'@theshelfshow', products:4, tag:'Office', size:'wide' },
  { img:'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=900&q=80&auto=format&fit=crop',
    title:'Plaster & Linen', author:'@halehouse', products:7, tag:'Living' },
  { img:'https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=900&q=80&auto=format&fit=crop',
    title:'Pacific Heights Foyer', author:'@hd.editor', products:3, tag:'Entry' },
];

function RoomCard({room}){
  const [hover, setHover] = React.useState(false);
  return (
    <a href="#" onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)} style={{
      display:'block', position:'relative',
      gridColumn: room.size==='wide' ? 'span 2' : 'span 1',
      aspectRatio: room.size==='wide' ? '16/10' : '4/5',
      overflow:'hidden', background:'#1a1714',
      border:'1px solid var(--line)',
    }}>
      <img src={room.img} alt="" style={{
        width:'100%', height:'100%', objectFit:'cover',
        transform: hover ? 'scale(1.04)' : 'scale(1)',
        filter: 'saturate(0.92) brightness(0.92)',
        transition:'transform .6s ease',
      }}/>
      {/* gradient */}
      <div style={{
        position:'absolute', inset:0, pointerEvents:'none',
        background:'linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.7))',
      }}/>
      {/* sample hotspot dots */}
      {[{x:30,y:60},{x:62,y:45},{x:82,y:35}].map((p,i)=>(
        <span key={i} style={{
          position:'absolute', left:`${p.x}%`, top:`${p.y}%`,
          width:10,height:10, borderRadius:99,
          background:'var(--accent)',
          boxShadow:'0 0 0 4px rgba(217,119,87,0.18)',
          transform: 'translate(-50%,-50%)',
          opacity: hover ? 1 : 0.7,
          transition:'opacity .2s ease',
        }}/>
      ))}
      {/* tag */}
      <span className="mono" style={{
        position:'absolute', top:14, left:14,
        padding:'4px 8px',
        background:'rgba(12,11,10,0.6)', backdropFilter:'blur(8px)',
        border:'1px solid var(--line)',
        fontSize:10, color:'var(--ink-2)',
      }}>{room.tag}</span>
      {/* footer */}
      <div style={{
        position:'absolute', left:16, right:16, bottom:16,
        display:'flex', justifyContent:'space-between', alignItems:'end',
        color:'var(--ink)',
      }}>
        <div>
          <div className="serif" style={{fontSize:20, letterSpacing:'-0.01em', lineHeight:1.15}}>{room.title}</div>
          <div style={{fontSize:12, color:'var(--ink-2)', marginTop:4}}>
            {room.author} <span style={{color:'var(--muted-2)'}}>· {room.products} products</span>
          </div>
        </div>
        <span style={{
          width:34,height:34, borderRadius:99,
          border:'1px solid var(--line)',
          background:'rgba(12,11,10,0.6)', backdropFilter:'blur(8px)',
          display:'grid', placeItems:'center',
          transform: hover ? 'translateX(2px)' : 'none',
          transition:'transform .2s ease',
        }}><Icon.Arrow size={13}/></span>
      </div>
    </a>
  );
}

function Explore(){
  const [filter, setFilter] = React.useState('All');
  const filters = ['All','Living','Bedroom','Kitchen','Office','Entry'];
  const shown = filter==='All' ? ROOMS : ROOMS.filter(r=>r.tag===filter);
  return (
    <section id="explore" style={{padding:'140px 0', borderTop:'1px solid var(--line)'}}>
      <div className="container">
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'end', marginBottom:48, gap:32}}>
          <div>
            <span className="mono eyebrow">The Explore library</span>
            <h2 className="serif" style={{
              margin:'24px 0 0', fontWeight:300,
              fontSize:'clamp(40px, 5.5vw, 76px)', lineHeight:1, letterSpacing:'-0.03em',
            }}>
              Real rooms, <br/>
              <span style={{fontStyle:'italic', color:'var(--ink-2)'}}>shoppable as you scroll.</span>
            </h2>
          </div>
          <div style={{display:'flex',gap:6, flexWrap:'wrap'}}>
            {filters.map(f=>(
              <button key={f} onClick={()=>setFilter(f)} className="mono" style={{
                padding:'8px 12px',
                background: filter===f ? 'var(--ink)' : 'transparent',
                color: filter===f ? 'var(--bg)' : 'var(--ink-2)',
                border:'1px solid var(--line)',
                fontSize:10,
              }}>{f}</button>
            ))}
          </div>
        </div>

        <div style={{
          display:'grid',
          gridTemplateColumns:'repeat(3, 1fr)',
          gridAutoFlow:'dense',
          gap:16,
        }}>
          {shown.map((r,i)=><RoomCard key={i} room={r}/>)}
        </div>

        <div style={{marginTop:32, display:'flex', justifyContent:'center'}}>
          <a href="#" style={{
            display:'inline-flex',alignItems:'center',gap:10,
            padding:'14px 22px', borderRadius:999,
            border:'1px solid var(--line)',
            fontSize:13, color:'var(--ink-2)',
          }}>Browse 2,418 public rooms <Icon.Arrow size={12}/></a>
        </div>
      </div>
    </section>
  );
}
window.Explore = Explore;