/* 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';
function CompareDrawer({vehicles,onClose}){
const {Button,Badge}=window.AutohausVoitelDesignSystem_21e950;
const rows=[['Preis',v=>window.fmtPrice(v.price)],['Kilometerstand',v=>v.km.toLocaleString('de-DE')+' km'],['Getriebe',v=>v.transmission],['Kraftstoff',v=>v.fuel],['Leistung',v=>v.power+' PS'],['Hubraum',v=>(v.displacement||'—')+' ccm'],['Sitze',v=>v.seats],['Verfügbarkeit',v=>v.count+'× verfügbar']];
return <div style={{position:'fixed',inset:0,background:'rgba(11,27,46,.5)',zIndex:200,display:'flex',alignItems:'center',justifyContent:'center'}} onClick={onClose}>
<div onClick={e=>e.stopPropagation()} style={{background:'#fff',borderRadius:'var(--radius-l)',boxShadow:'var(--shadow-overlay)',padding:28,width:'min(900px,92vw)',margin:'auto',maxHeight:vvh(85),overflowY:'auto',fontFamily:'var(--font-body)'}}>
<div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
<span style={{fontFamily:'var(--font-display)',fontWeight:800,fontSize:24}}>Fahrzeugvergleich</span>
<button onClick={onClose} aria-label="Schließen" style={{border:'none',background:'none',fontSize:22,cursor:'pointer',color:'var(--fg-muted)'}}>×</button>
</div>
<table style={{width:'100%',borderCollapse:'collapse',fontSize:14}}>
<thead><tr><td></td>{vehicles.map(v=><th key={v.id} style={{textAlign:'left',padding:'8px 12px'}}>
<div style={{height:90,background:v.img.light,borderRadius:'var(--radius-s)',marginBottom:8}}/>
<div style={{fontWeight:800,fontFamily:'var(--font-display)',fontSize:16}}>{v.brand} {v.model}</div>
{v.offer&&<Badge tone="brand">Angebot</Badge>}
</th>)}</tr></thead>
<tbody>
{rows.map(([label,fn])=><tr key={label} style={{borderTop:'1px solid var(--border-subtle)'}}>
<td style={{padding:'10px 12px',color:'var(--fg-muted)',fontWeight:600}}>{label}</td>
{vehicles.map(v=><td key={v.id} style={{padding:'10px 12px'}}>{fn(v)}</td>)}
</tr>)}
</tbody>
</table>
<div style={{display:'flex',gap:10,marginTop:24,justifyContent:'flex-end'}}>
<Button variant="outline" icon={<img src="https://unpkg.com/lucide-static@0.469.0/icons/share-2.svg" width={16}/>}>Vergleich teilen</Button>
<Button variant="primary" icon={<img src="https://unpkg.com/lucide-static@0.469.0/icons/file-down.svg" width={16}/>}>Als PDF herunterladen</Button>
</div>
</div></div>;
}
window.CompareDrawerExport=CompareDrawer;