// Browser clipper feature spotlight
function Clipper(){
  const [active, setActive] = React.useState(1);

  // mini "browser" mock showing a product page + clipper popover
  const sites = [
    { host:'wayfair.com',     product:'Cane Lounge Chair',  price:'$1,299', img:'https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?w=600&q=70&auto=format&fit=crop' },
    { host:'westelm.com',     product:'Travertine Table',   price:'$640',   img:'https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=600&q=70&auto=format&fit=crop' },
    { host:'schoolhouse.com', product:'Pendant Lamp',       price:'$420',   img:'https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?w=600&q=70&auto=format&fit=crop' },
    { host:'etsy.com',        product:'Beni Ourain Rug',    price:'$880',   img:'https://images.unsplash.com/photo-1540574163026-643ea20ade25?w=600&q=70&auto=format&fit=crop' },
  ];
  const site = sites[active];

  return (
    <section id="clipper" style={{padding:'140px 0', borderTop:'1px solid var(--line)'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:80, alignItems:'center'}}>

          {/* left — copy */}
          <div>
            <span className="mono eyebrow">The browser clipper</span>
            <h2 className="serif" style={{
              margin:'24px 0 0', fontWeight:300,
              fontSize:'clamp(40px, 5.5vw, 80px)', lineHeight:0.95, letterSpacing:'-0.03em',
            }}>
              See it anywhere. <br/>
              <span style={{fontStyle:'italic', color:'var(--ink-2)'}}>Clip it in one tap.</span>
            </h2>
            <p style={{
              margin:'28px 0 0', maxWidth:480,
              color:'var(--ink-2)', fontSize:16, lineHeight:1.6, fontWeight:300,
            }}>
              A browser extension you install once. Wayfair, IKEA, West Elm, a tiny ceramic studio in Lisbon —
              clip a product anywhere on the open web and it lands in your library with image and link intact.
              No screenshots, no copy-paste, no broken URLs.
            </p>

            <ul style={{listStyle:'none',padding:0,margin:'32px 0 0', display:'flex', flexDirection:'column', gap:14}}>
              {[
                'Product image, URL and name captured automatically',
                'Background removed on upload — clean edges every time',
                'Builds a personal library available to any room',
                'Chrome day one, Safari shortly after',
              ].map((t,i)=>(
                <li key={i} style={{display:'flex',alignItems:'flex-start',gap:12,fontSize:14, color:'var(--ink-2)'}}>
                  <span style={{color:'var(--accent)',marginTop:2}}><Icon.Check size={14}/></span>{t}
                </li>
              ))}
            </ul>

            <a href="#" style={{
              marginTop:36, display:'inline-flex',alignItems:'center',gap:10,
              padding:'14px 22px', borderRadius:999,
              background:'var(--ink)', color:'var(--bg)',
              fontSize:13, fontWeight:500,
            }}>Install for Chrome <Icon.Arrow size={12}/></a>
            <div className="mono" style={{marginTop:14, color:'var(--muted-2)'}}>Free. No account required to start clipping.</div>
          </div>

          {/* right — mock browser */}
          <div style={{
            position:'relative',
            border:'1px solid var(--line)',
            background:'#0c0b0a',
            boxShadow:'0 30px 80px rgba(0,0,0,0.45)',
          }}>
            {/* tab bar */}
            <div style={{padding:'10px 12px', borderBottom:'1px solid var(--line)', display:'flex',alignItems:'center',gap:8}}>
              <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'}}/>
              <div style={{
                marginLeft:12, flex:1,
                padding:'5px 10px', border:'1px solid var(--line)', background:'#14110f',
                fontFamily:'JetBrains Mono', fontSize:10, color:'var(--ink-2)',
                display:'flex', alignItems:'center', gap:8,
              }}>
                <span style={{width:5,height:5,borderRadius:99,background:'var(--good)'}}/>
                {site.host}/products/{site.product.toLowerCase().replace(/\s+/g,'-')}
              </div>
            </div>

            {/* site tabs */}
            <div style={{padding:'10px 12px', borderBottom:'1px solid var(--line)', display:'flex', gap:6, overflow:'hidden'}}>
              {sites.map((s,i)=>(
                <button key={i} onClick={()=>setActive(i)} className="mono" style={{
                  padding:'6px 10px',
                  background: active===i ? 'var(--bg-2)' : 'transparent',
                  border:'1px solid var(--line)',
                  color: active===i ? 'var(--ink)' : 'var(--muted)',
                  fontSize:10,
                }}>{s.host}</button>
              ))}
            </div>

            {/* fake product page */}
            <div style={{position:'relative', padding:24, display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, minHeight:380}}>
              <div style={{aspectRatio:'1/1', overflow:'hidden', background:'#1a1714', border:'1px solid var(--line)'}}>
                <img src={site.img} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
              <div>
                <div className="mono" style={{color:'var(--muted-2)'}}>{site.host}</div>
                <div className="serif" style={{margin:'10px 0 0', fontSize:24, fontWeight:400, letterSpacing:'-0.02em'}}>{site.product}</div>
                <div className="serif" style={{margin:'14px 0 0', fontSize:20, color:'var(--ink-2)'}}>{site.price}</div>
                <div style={{marginTop:16, display:'flex', gap:6}}>
                  {['Oak','Walnut','Cane'].map((c,i)=>(
                    <span key={i} style={{
                      padding:'4px 10px',border:'1px solid var(--line)',
                      fontSize:11, color: i===1?'var(--ink)':'var(--muted)',
                      background: i===1?'var(--bg-2)':'transparent',
                    }}>{c}</span>
                  ))}
                </div>
                <button style={{
                  marginTop:20, padding:'10px 16px',
                  border:'1px solid var(--line)', color:'var(--muted)', fontSize:12,
                }}>Add to cart</button>
              </div>

              {/* clipper popover */}
              <div style={{
                position:'absolute', right:20, top:80,
                width:240, padding:'14px 16px',
                background:'rgba(20,17,15,0.96)',
                backdropFilter:'blur(12px)',
                border:'1px solid var(--accent)',
                boxShadow:'0 16px 40px rgba(0,0,0,0.45)',
              }}>
                <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10}}>
                  <span className="mono" style={{color:'var(--accent)', fontSize:10}}>● myrooms clipper</span>
                  <Icon.X size={11}/>
                </div>
                <div style={{display:'flex', gap:10, alignItems:'center'}}>
                  <div style={{width:48,height:48,overflow:'hidden',background:'#1a1714',border:'1px solid var(--line)'}}>
                    <img src={site.img} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                  </div>
                  <div style={{flex:1}}>
                    <div style={{fontSize:12, lineHeight:1.3}}>{site.product}</div>
                    <div style={{fontSize:11, color:'var(--muted)'}}>{site.price}</div>
                  </div>
                </div>
                <div style={{marginTop:12, fontSize:11, color:'var(--muted)'}}>Lands in: <span style={{color:'var(--ink-2)'}}>Living room ideas</span></div>
                <button style={{
                  marginTop:14, width:'100%',
                  padding:'9px 12px', background:'var(--accent)', color:'#1a0f08',
                  fontSize:12, fontWeight:500,
                  display:'flex', alignItems:'center', justifyContent:'center', gap:8,
                }}>
                  <Icon.Plus size={12}/> Clip to library
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Clipper = Clipper;