/* Heights relative to the screen: svh where supported. On an iPhone plain vh
   is the height with Safari's toolbars hidden, so an 88vh box is taller than
   what is visible while they show - centred overlays then lost their header
   off the top edge. */
var vvh=n=>(window.CSS&&CSS.supports&&CSS.supports('height','1svh'))?n+'svh':n+'vh';
/* The website's own dropdown (form-dropdown.js has the styles and the plain
   HTML version used by the other forms). Starts empty: "Bitte wählen". */
function VSelect({label,options}){
const [val,setVal]=React.useState('');
const [open,setOpen]=React.useState(false);
const [active,setActive]=React.useState(0);
const [up,setUp]=React.useState(false);
const wrap=React.useRef(null),btn=React.useRef(null),list=React.useRef(null);
const id=React.useMemo(()=>'vddr'+Math.random().toString(36).slice(2,8),[]);
React.useEffect(()=>{window.voitelDropdown&&window.voitelDropdown.css();},[]);
React.useEffect(()=>{
if(!open)return;
const out=e=>{if(wrap.current&&!wrap.current.contains(e.target))setOpen(false);};
const shut=()=>setOpen(false);
document.addEventListener('mousedown',out,true);window.addEventListener('resize',shut);
return()=>{document.removeEventListener('mousedown',out,true);window.removeEventListener('resize',shut);};
},[open]);
React.useEffect(()=>{
const l=list.current;if(!open||!l)return;const li=l.children[active];if(!li)return;
if(li.offsetTop<l.scrollTop)l.scrollTop=li.offsetTop-6;
else if(li.offsetTop+li.offsetHeight>l.scrollTop+l.clientHeight)l.scrollTop=li.offsetTop+li.offsetHeight-l.clientHeight+6;
},[open,active]);
const show=()=>{
setUp(!!(window.voitelDropdown&&window.voitelDropdown.opensUp(wrap.current,options.length*42+12)));
setActive(Math.max(0,options.indexOf(val)));setOpen(true);
};
const pick=o=>{setVal(o);setOpen(false);btn.current&&btn.current.focus();};
const key=e=>{
if(e.key==='ArrowDown'||e.key==='ArrowUp'){e.preventDefault();if(!open)return show();setActive(a=>Math.max(0,Math.min(options.length-1,a+(e.key==='ArrowDown'?1:-1))));}
else if(e.key==='Enter'||e.key===' '){e.preventDefault();if(!open)return show();pick(options[active]);}
else if(e.key==='Escape'&&open){e.preventDefault();e.stopPropagation();setOpen(false);}
else if(e.key==='Tab')setOpen(false);
else if(e.key==='Home'&&open){e.preventDefault();setActive(0);}
else if(e.key==='End'&&open){e.preventDefault();setActive(options.length-1);}
};
return <div style={{display:'flex',flexDirection:'column',gap:6,width:'100%',fontFamily:'var(--font-body)'}}>
<span id={id+'-l'} style={{fontSize:13,fontWeight:600,color:'var(--fg-secondary)'}}>{label}</span>
<div ref={wrap} className={'vdd vdd-ds'+(open?' open':'')+(up?' up':'')}>
<button ref={btn} type="button" className={'vdd-btn'+(val?'':' is-empty')} aria-haspopup="listbox" aria-expanded={open} aria-controls={id} aria-labelledby={id+'-l'} aria-activedescendant={open?id+'-'+active:undefined} onClick={()=>open?setOpen(false):show()} onKeyDown={key}>
<span className="vdd-val">{val||'Bitte wählen'}</span>
<svg className="vdd-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
</button>
<ul ref={list} id={id} className="vdd-list" role="listbox" tabIndex={-1}>
{options.map((o,i)=><li key={o} id={id+'-'+i} role="option" aria-selected={o===val} className={'vdd-opt'+(i===active?' active':'')} onMouseDown={e=>e.preventDefault()} onMouseMove={()=>setActive(i)} onClick={()=>pick(o)}>{o}</li>)}
</ul>
</div>
</div>;
}
function SavedSearchDrawer({onClose}){
const {Input,Button}=window.AutohausVoitelDesignSystem_21e950;
const [sent,setSent]=React.useState(false);
const radioRow={display:'flex',gap:10};
const radioLabel={display:'flex',alignItems:'center',gap:6,border:'1px solid var(--border-subtle)',borderRadius:'var(--radius-m)',padding:'9px 14px',fontSize:13,fontWeight:500,cursor:'pointer',flex:1,justifyContent:'center'};
return <div style={{position:'fixed',inset:0,background:'rgba(11,27,46,.5)',zIndex:200,display:'flex',alignItems:'center',justifyContent:'center',padding:24}} onClick={onClose}>
<div className="ss-card" onClick={e=>e.stopPropagation()} style={{background:'#fff',borderRadius:'var(--radius-l)',boxShadow:'var(--shadow-overlay)',padding:28,width:'min(640px,92vw)',margin:'auto',maxHeight:vvh(88),overflowY:'auto',fontFamily:'var(--font-body)',display:'flex',flexDirection:'column',gap:14}}>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
<span style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:22}}>Ihr Wunschfahrzeug konfigurieren</span>
<button onClick={onClose} aria-label="Schließen" style={{border:'none',background:'none',fontSize:22,cursor:'pointer',color:'var(--fg-muted)'}}>×</button>
</div>
{!sent?<React.Fragment>
<p style={{color:'var(--fg-muted)',fontSize:14,margin:0}}>Sagen Sie uns, was Sie suchen — wir finden ein passendes Fahrzeug oder benachrichtigen Sie, sobald eines verfügbar ist.</p>
{/* One grid for all seven criteria. Fahrzeugtyp used to sit outside it as a
    lone full-width control, which broke the two-column rhythm; it spans the
    row from inside the grid instead, so every field lines up. */}
<div className="ss-grid" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
<VSelect label="Marke *" options={['Ford','Mitsubishi','Beliebig']}/>
<Input label="Modell(e) *" placeholder="z.B. Puma, Focus"/>
<Input label="Kilometerstand bis (km) *" type="number" placeholder="z.B. 40000"/>
<Input label="Budget bis (€) *" type="number" placeholder="z.B. 24000"/>
<VSelect label="Kraftstoffart *" options={['Beliebig','Benzin','Diesel','Hybrid','Elektro']}/>
<VSelect label="Getriebe *" options={['Beliebig','Schaltgetriebe','Automatik']}/>
<div style={{gridColumn:'1 / -1'}}><VSelect label="Fahrzeugtyp *" options={['Schrägheck','Kleinwagen','Kombi','Limousine','SUV','Van','Pickup']}/></div>
</div>
<div>
<div style={{fontSize:12,fontWeight:700,color:'var(--fg-primary)',marginBottom:8}}>Wie möchten Sie das Fahrzeug erwerben? *</div>
<div className="ss-radio-row" style={radioRow}>
<label style={radioLabel}><input type="radio" name="ss-payment"/> Barzahlung</label>
<label style={radioLabel}><input type="radio" name="ss-payment"/> Leasing</label>
<label style={radioLabel}><input type="radio" name="ss-payment"/> Rückkauf</label>
</div>
</div>
<div className="ss-grid" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
<Input label="Vorname *" placeholder="z.B. Max"/>
<Input label="Nachname *" placeholder="z.B. Müller"/>
<Input label="E-Mail *" type="email" placeholder="sie@beispiel.de"/>
<Input label="Telefonnummer (optional)" type="tel" placeholder="+49 …"/>
</div>
{/* One channel only: these notifications go out through Mailchimp. */}
<p className="modal-notify-note">Sie werden als Erste oder Erster per E-Mail benachrichtigt, sobald ein passendes Fahrzeug eintrifft.</p>
<Button variant="primary" onClick={e=>{
  /* sent to anfrage@ (form-send.js); the thanks only once it went through */
  const btn=e.currentTarget, root=btn.closest('.ss-card');
  if(!window.voitelSendForm){setSent(true);return;}
  window.voitelFormTrap(root);
  window.voitelSendForm('suchauftrag',root,{anchor:btn}).then(ok=>{if(ok)setSent(true);});
}}>Suche speichern</Button>
</React.Fragment>:<div style={{textAlign:'center',padding:'12px 0 4px'}}>
{/* the same two ways on as the homepage form and the trade-in form */}
<div style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:20,marginBottom:8}}>Suche gespeichert</div>
<p style={{color:'var(--fg-muted)',fontSize:14,margin:'0 0 18px'}}>Wir benachrichtigen Sie per E-Mail, sobald ein passendes Fahrzeug eintrifft.</p>
<div className="ss-thanks-ctas" style={{display:'flex',gap:10,justifyContent:'center',flexWrap:'wrap'}}>
<Button variant="outline" onClick={()=>{onClose();window.voitelOpenTradeIn&&window.voitelOpenTradeIn();}}>Fahrzeug in Zahlung geben</Button>
<Button variant="primary" onClick={()=>{onClose();window.voitelGoMarket?window.voitelGoMarket():(location.href='automarkt.html');}}>Fahrzeugmarkt ansehen</Button>
</div>
</div>}
</div></div>;
}
window.SavedSearchDrawerExport=SavedSearchDrawer;