const POPULAR=['Kanjivaram','Banarasi Silk','Wedding Saree','Organza','Linen Silk','T-Shirts','Jewellery','Perfumes'];
function Search(){
  const [q,setQ]=React.useState('');
  const [recent,setRecent]=React.useState([]);
  React.useEffect(()=>{
    document.title='Search — Bold Bee';
    try{setRecent(JSON.parse(localStorage.getItem('bb_searches')||'[]'));}catch(e){}
  },[]);
  const results=q.trim()?PRODUCTS.filter(p=>(p.name+' '+filterLabel(p)+' '+p.sub).toLowerCase().includes(q.toLowerCase())):[];
  function commitSearch(term){
    if(!term.trim())return;
    let r=[term,...recent.filter(x=>x!==term)].slice(0,6);
    setRecent(r);localStorage.setItem('bb_searches',JSON.stringify(r));
  }
  return (
    <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-7) var(--container-pad) var(--space-section)'}}>
      <Breadcrumbs trail={[{label:'Home',href:'index.html'},{label:'Search'}]}/>
      <h1 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(28px,3vw,38px)',margin:'24px 0 32px',color:'var(--text-primary)'}}>Search</h1>
      <div style={{maxWidth:560,margin:'0 auto 48px'}}>
        <input autoFocus value={q} maxLength={80} onChange={e=>setQ(BBValidate.sanitizeSearch(e.target.value))} onKeyDown={e=>e.key==='Enter'&&commitSearch(q)} placeholder="Search weaves, categories, colors…" style={{width:'100%',border:'1px solid var(--border-default)',borderRadius:'var(--radius-md)',padding:'16px 20px',fontSize:16,background:'var(--white)'}}/>
      </div>
      {q.trim()?(
        results.length?(
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:32}}>{results.map(p=>(<ProductTile key={p.id} p={p}/>))}</div>
        ):(
          <p style={{textAlign:'center',color:'var(--text-muted)'}}>No results for &ldquo;{q}&rdquo;. Try a weave like Kanjivaram, or a category like T-Shirts or Jewellery.</p>
        )
      ):(
        <div style={{maxWidth:560,margin:'0 auto'}}>
          {recent.length>0&&(
            <div style={{marginBottom:32}}>
              <Eyebrow>Recent Searches</Eyebrow>
              <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>{recent.map(r=>(<button key={r} onClick={()=>{setQ(r);commitSearch(r);}} style={{border:'1px solid var(--border-default)',background:'none',borderRadius:'var(--radius-pill)',padding:'8px 16px',fontSize:13,cursor:'pointer'}}>{r}</button>))}</div>
            </div>
          )}
          <Eyebrow>Popular Searches</Eyebrow>
          <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>{POPULAR.map(r=>(<button key={r} onClick={()=>{setQ(r);commitSearch(r);}} style={{border:'1px solid var(--border-default)',background:'none',borderRadius:'var(--radius-pill)',padding:'8px 16px',fontSize:13,cursor:'pointer'}}>{r}</button>))}</div>
        </div>
      )}
    </div>
  );
}
window.Search=Search;