/* Inventory grid + category filter · Segment tiles */

function VehicleCard({v,onBook}){
  return (
    <article className="card">
      <div className="card-media">
        <div className="card-badge">
          {v.core ? <span className="chip core">Kymco</span> : <span className="chip">{v.brand}</span>}
          <span className="chip seg">{v.segLabel}</span>
        </div>
        <img src={v.img} alt={v.brand+" "+v.model} loading="lazy"/>
      </div>
      <div className="card-body">
        <div className="card-brand">{v.brand}</div>
        <h3>{v.model}</h3>
        <div className="specs">
          {v.specs.map((s,i)=>(
            <div className="spec" key={i}><div className="v">{s.v}</div><div className="k">{s.k}</div></div>
          ))}
        </div>
        <div className="card-foot">
          <div className="price">
            <div className={"pv"+(v.req?" req":"")}>{v.price}</div>
            <div className="pl">{v.priceLabel}</div>
          </div>
          <button className="btn btn-dark btn-sm" onClick={()=>onBook(v.id)}>Probefahrt</button>
        </div>
      </div>
    </article>
  );
}

function Inventory({onBook,filter,setFilter}){
  const f=filter;
  const items = D.inventory.filter(v=> f==="alle" || (v.cats||[]).includes(f));
  const count = (key)=> key==="alle"? D.inventory.length : D.inventory.filter(v=>(v.cats||[]).includes(key)).length;
  const activeFilter = D.filters.find(x=>x.key===f);
  return (
    <section className="sec on-surface" id="fahrzeuge">
      <div className="wrap">
        <div className="section-kicker"><span className="num">01</span><span className="line"/></div>
        <div className="inv-head">
          <div>
            <h2>Aktuelle<br/>Fahrzeuge</h2>
            <p>Eine Auswahl aus über 50 Fahrzeugen vor Ort in Hainholz — Neu, Vorführer und gepflegte Gebrauchte. Alle Preise inkl. MwSt.</p>
          </div>
        </div>
        <div className="filters">
          {D.filters.map(ft=>{
            const c=count(ft.key);
            return (
              <button key={ft.key} className={"filter"+(f===ft.key?" active":"")} onClick={()=>setFilter(ft.key)}>
                {ft.label}{c>0 && <span className="c">{c}</span>}
              </button>
            );
          })}
        </div>
        {items.length>0 ? (
          <div className="inv-grid" key={f}>
            {items.map(v=> <VehicleCard key={v.id} v={v} onBook={onBook}/>)}
          </div>
        ) : (
          <div className="inv-empty">
            <div className="ie-ic">{I.cog()}</div>
            <div className="ie-t">{activeFilter && activeFilter.emptyHint ? activeFilter.emptyHint : "In dieser Kategorie ist online gerade nichts gelistet."}</div>
            <p>Vor Ort steht oft mehr, als online sichtbar ist. Sagen Sie uns, wonach Sie suchen — wir finden es.</p>
            <div className="ie-actions">
              <a className="btn btn-dark btn-sm" href={"tel:"+D.contact.telHref}>{I.phone()} {D.contact.tel}</a>
              <button className="btn btn-outline btn-sm" onClick={()=>setFilter("alle")}>Alle Fahrzeuge zeigen</button>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function SegTile({s,onCat}){
  const inner=(
    <React.Fragment>
      <span className="sarrow">{I.arrowUR()}</span>
      <span className="scount">{s.count}</span>
      <div className="seg-inner">
        <span className="seg-n">{s.n}</span>
        <div className="si">{s.title}</div>
        <p className="sd">{s.desc}</p>
        <div className="smods">{s.mods.map(m=> <span key={m}>{m}</span>)}</div>
      </div>
    </React.Fragment>
  );
  return (
    <button className={"seg-tile "+s.kind} onClick={()=>onCat(s.key)}>
      {s.kind==="photo" && <img className="seg-bg" src={s.img} alt={s.title}/>}
      {s.kind==="photo" && <span className="seg-shade"/>}
      {s.kind==="dark" && <span className="seg-glow"/>}
      {inner}
    </button>
  );
}

function Segments({onCat}){
  return (
    <section className="sec on-dark" id="segmente">
      <div className="wrap">
        <div className="section-kicker"><span className="num">02</span><span className="line"/></div>
        <div className="inv-head" style={{marginBottom:32}}>
          <div><h2 style={{color:"#fff"}}>Für jede Strecke<br/>das Richtige</h2></div>
        </div>
        <div className="seg-grid">
          {D.segments.map(s=> <SegTile key={s.key} s={s} onCat={onCat}/>)}
        </div>
      </div>
    </section>
  );
}
window.Inventory=Inventory; window.Segments=Segments;