function FilterPanel({filters,setFilter,resultCount,onReset}){
const {Select,Input,Checkbox,Button}=window.AutohausVoitelDesignSystem_21e950;
const f=k=>e=>setFilter(k, e && e.target ? e.target.value : e);
return <div style={{display:'flex',flexDirection:'column',gap:16,fontFamily:'var(--font-body)'}}>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
<span style={{fontWeight:700,fontSize:15}}>Filter</span>
<button onClick={onReset} style={{border:'none',background:'none',color:'var(--fg-brand)',fontSize:13,fontWeight:600,cursor:'pointer'}}>Zurücksetzen</button>
</div>
<Select label="Marke" options={['Alle Marken',...window.VOITEL_BRANDS]} value={filters.brand} onChange={f('brand')}/>
{/* Model options come from the stock (grouped to the base name, e.g.
    "Tourneo Custom"), and feed the same modelText key the search card
    uses, so the two filter bars agree. */}
<Select label="Modell" options={['Alle Modelle',...window.voitelModelOptions()]} value={filters.modelText||'Alle Modelle'} onChange={e=>setFilter('modelText',e.target.value==='Alle Modelle'?'':e.target.value)}/>
{/* Both lists are the grouped values the filter chain compares against
    (voitelBodyCategory / voitelFuelGroup), not the raw AUTOMANAGER names. */}
<Select label="Fahrzeugtyp" options={['Alle Typen',...window.voitelTypeOptions()]} value={filters.type} onChange={f('type')}/>
<Select label="Getriebe" options={['Alle',...window.VOITEL_TRANSMISSIONS]} value={filters.transmission} onChange={f('transmission')}/>
<Select label="Kraftstoffart" options={['Alle',...window.voitelFuelOptions()]} value={filters.fuel} onChange={f('fuel')}/>
<div style={{display:'flex',gap:10}}>
<Input label="Preis von" type="number" placeholder="0" value={filters.priceMin} onChange={f('priceMin')}/>
<Input label="Preis bis" type="number" placeholder="60000" value={filters.priceMax} onChange={f('priceMax')}/>
</div>
<Input label="Max. Kilometerstand" type="number" placeholder="50000" value={filters.kmMax} onChange={f('kmMax')}/>
<div style={{display:'flex',gap:10}}>
<Input label="Hubraum von (ccm)" type="number" placeholder="0" value={filters.dispMin} onChange={f('dispMin')}/>
<Input label="Leistung min. (PS)" type="number" placeholder="0" value={filters.powerMin} onChange={f('powerMin')}/>
</div>
<Select label="Sitzanzahl" options={['Alle','2','4','5','7+']} value={filters.seats} onChange={f('seats')}/>
<div style={{display:'flex',flexDirection:'column',gap:8,paddingTop:4,borderTop:'1px solid var(--border-subtle)'}}>
<Checkbox label="Nur Elektrofahrzeuge" checked={filters.electric} onChange={e=>setFilter('electric',e.target.checked)}/>
<Checkbox label="Nur Sonderangebote" checked={filters.offer} onChange={e=>setFilter('offer',e.target.checked)}/>
</div>
<div style={{fontSize:13,color:'var(--fg-muted)',paddingTop:4}}>{resultCount} Fahrzeuge gefunden</div>
</div>;
}
window.FilterPanelExport=FilterPanel;