function hasActiveFilters(f){
return f.brand!=='Alle Marken'||f.type!=='Alle Typen'||f.transmission!=='Alle'||f.fuel!=='Alle'||f.priceMin||f.priceMax||f.kmMax||f.dispMin||f.powerMin||f.seats!=='Alle'||f.electric||f.offer;
}
function MarketScreen({onOpenVehicle,onOpenCompare,onOpenSavedSearch,onOpenTradeIn,compareList,setCompareList,favorites,onToggleFavorite}){
const {Select,Button,IconButton,Badge}=window.AutohausVoitelDesignSystem_21e950;
const emptyFilters={brand:'Alle Marken',type:'Alle Typen',transmission:'Alle',fuel:'Alle',priceMin:'',priceMax:'',kmMax:'',dispMin:'',powerMin:'',seats:'Alle',electric:false,offer:false};
const [sort,setSort]=React.useState('Neu hinzugefügt');
const [filterOpen,setFilterOpen]=React.useState(false);
const [browseAll,setBrowseAll]=React.useState(false);
const [filters,setFiltersState]=React.useState(emptyFilters);
function setFilter(k,v){setFiltersState(s=>({...s,[k]:v}));}
function resetFilters(){setFiltersState(emptyFilters);}
function toggleChip(k){setFiltersState(s=>({...s,[k]:!s[k]}));}
let list=window.VOITEL_MARKET.filter(v=>{
if(filters.brand!=='Alle Marken'&&v.brand!==filters.brand)return false;
if(filters.type!=='Alle Typen'&&window.voitelBodyCategory(v.type)!==filters.type)return false;
if(filters.transmission!=='Alle'&&v.transmission!==filters.transmission)return false;
if(filters.fuel!=='Alle'&&window.voitelFuelGroup(v.fuel)!==filters.fuel)return false;
if(filters.priceMin&&v.price<Number(filters.priceMin))return false;
if(filters.priceMax&&v.price>Number(filters.priceMax))return false;
if(filters.kmMax&&v.km>Number(filters.kmMax))return false;
if(filters.dispMin&&v.displacement<Number(filters.dispMin))return false;
if(filters.powerMin&&v.power<Number(filters.powerMin))return false;
if(filters.seats!=='Alle'&&!(filters.seats==='7+'?v.seats>=7:v.seats===Number(filters.seats)))return false;
if(filters.electric&&!v.electric)return false;
if(filters.offer&&!v.offer)return false;
return true;
});
const active=hasActiveFilters(filters);
const showGrid=active||browseAll;
if(sort==='Preis aufsteigend')list=[...list].sort((a,b)=>a.price-b.price);
else if(sort==='Preis absteigend')list=[...list].sort((a,b)=>b.price-a.price);
else if(sort==='Verfügbare Angebote')list=list.filter(v=>v.offer);
else if(!active)list=[...list].sort((a,b)=>(b.offer-a.offer)||(new Date(b.added)-new Date(a.added)));
else list=[...list].sort((a,b)=>new Date(b.added)-new Date(a.added));
function toggleCompare(v){
setCompareList(cl=>{
if(cl.find(x=>x.id===v.id))return cl.filter(x=>x.id!==v.id);
if(cl.length>=3)return cl;
return [...cl,v];
});
}
const FilterPanel=window.FilterPanelExport,VehicleCard=window.VehicleCardExport;
const chips=[['offer','Sonderangebote'],['electric','Elektro']];
const onSale=window.VOITEL_MARKET.filter(v=>v.offer);
const newest=[...window.VOITEL_MARKET].sort((a,b)=>new Date(b.added)-new Date(a.added)).slice(0,4);
const popular=[...window.VOITEL_MARKET].sort((a,b)=>b.requests-a.requests).slice(0,4);
function Row({title,items}){
return <div style={{marginBottom:36}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:20,marginBottom:14}}>{title}</div>
<div style={{display:'flex',gap:16,overflowX:'auto',paddingBottom:8}}>
{items.map(v=><div key={v.id} style={{minWidth:260,maxWidth:260,flexShrink:0}}><VehicleCard v={v} view="grid" onOpen={onOpenVehicle} compareSelected={!!compareList.find(x=>x.id===v.id)} compareDisabled={compareList.length>=3} onToggleCompare={toggleCompare} isFavorite={!!favorites.find(x=>x.id===v.id)} onToggleFavorite={onToggleFavorite}/></div>)}
</div></div>;
}
return <div style={{fontFamily:'var(--font-body)'}}>
<div style={{background:'var(--navy-950)',padding:'32px 24px'}}>
<div style={{maxWidth:'var(--container-max)',margin:'0 auto'}}>
<div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:28,color:'#fff',marginBottom:16}}>Ihr nächstes Fahrzeug finden</div>
<div style={{background:'#fff',borderRadius:'var(--radius-m)',padding:16,display:'flex',gap:10,flexWrap:'wrap'}}>
<Select label="" options={['Alle Marken',...window.VOITEL_BRANDS]} value={filters.brand} onChange={e=>setFilter('brand',e.target.value)} style={{flex:'1 1 180px'}}/>
<Select label="" options={['Alle Typen',...window.voitelTypeOptions()]} value={filters.type} onChange={e=>setFilter('type',e.target.value)} style={{flex:'1 1 180px'}}/>
<Select label="" options={['Alle',...window.voitelFuelOptions()]} value={filters.fuel} onChange={e=>setFilter('fuel',e.target.value)} style={{flex:'1 1 180px'}}/>
<Button variant="outline" onClick={()=>setFilterOpen(true)} style={{marginLeft:'auto',flexShrink:0}} icon={<img src="https://unpkg.com/lucide-static@0.469.0/icons/sliders-horizontal.svg" width={16}/>}>Alle Filter</Button>
</div>
<div style={{display:'flex',gap:8,marginTop:14,flexWrap:'wrap'}}>
{chips.map(([k,label])=><span key={k} onClick={()=>toggleChip(k)} style={{cursor:'pointer',background:filters[k]?'var(--brand-600)':'rgba(255,255,255,.12)',color:'#fff',fontSize:12,fontWeight:600,padding:'6px 12px',borderRadius:'var(--radius-pill)'}}>{label}</span>)}
</div>
</div></div>
<div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'28px 24px 100px'}}>
{!showGrid?<div>
<Row title="Sonderangebote" items={onSale}/>
<Row title="Neu hinzugefügt" items={newest}/>
<Row title="Meistgesucht" items={popular}/>
<div style={{textAlign:'center',marginTop:8}}><Button variant="outline" size="l" onClick={()=>setBrowseAll(true)}>Alle Fahrzeuge ansehen ({window.VOITEL_MARKET.length})</Button></div>
</div>:<div>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16,flexWrap:'wrap',gap:10}}>
<div style={{fontSize:14,color:'var(--fg-muted)'}}>{list.length} Fahrzeuge {active?'gefunden':'verfügbar'}</div>
<div style={{display:'flex',gap:10}}>
<Select label="" options={['Neu hinzugefügt','Preis aufsteigend','Preis absteigend','Verfügbare Angebote']} value={sort} onChange={e=>setSort(e.target.value)}/>
<Button variant="ghost" size="s" onClick={onOpenSavedSearch}>Suche speichern</Button>
<Button variant="ghost" size="s" onClick={onOpenTradeIn}>Fahrzeug in Zahlung geben</Button>
</div>
</div>
<div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18}}>
{list.map(v=><VehicleCard key={v.id} v={v} view="grid" onOpen={onOpenVehicle} compareSelected={!!compareList.find(x=>x.id===v.id)} compareDisabled={compareList.length>=3} onToggleCompare={toggleCompare} isFavorite={!!favorites.find(x=>x.id===v.id)} onToggleFavorite={onToggleFavorite}/>)}
</div>
{list.length===0&&<div style={{padding:40,textAlign:'center',color:'var(--fg-muted)'}}>Keine Fahrzeuge gefunden. Filter anpassen oder zurücksetzen.</div>}
</div>}
</div>
{compareList.length>0&&<div style={{position:'fixed',bottom:0,left:0,right:0,background:'var(--navy-950)',color:'#fff',padding:'14px 24px',display:'flex',justifyContent:'center',gap:16,alignItems:'center',zIndex:50}}>
<span style={{fontSize:14}}>{compareList.length} Fahrzeug{compareList.length>1?'e':''} zum Vergleich ausgewählt</span>
<div style={{display:'flex',gap:8}}>{compareList.map(v=><Badge key={v.id} tone="neutral">{v.model}</Badge>)}</div>
<Button variant="primary" size="s" onClick={onOpenCompare} disabled={compareList.length<2}>Vergleichen</Button>
<button onClick={()=>setCompareList([])} style={{border:'none',background:'none',color:'var(--fg-on-dark-muted)',cursor:'pointer',fontSize:13}}>Leeren</button>
</div>}
{filterOpen&&<div style={{position:'fixed',inset:0,background:'rgba(11,27,46,.5)',zIndex:60,display:'flex',justifyContent:'flex-end'}} onClick={()=>setFilterOpen(false)}>
<div onClick={e=>e.stopPropagation()} style={{background:'#fff',width:320,height:'100%',padding:20,overflowY:'auto'}}>
<FilterPanel filters={filters} setFilter={setFilter} resultCount={list.length} onReset={resetFilters}/>
<Button variant="primary" onClick={()=>setFilterOpen(false)} style={{width:'100%',marginTop:16}}>Ergebnisse anzeigen ({list.length})</Button>
</div></div>}
</div>;
}
window.MarketScreenExport=MarketScreen;