/* Header · Hero · Brand wall */
const {useState,useEffect,useRef} = React;

const VEHICLE_CATS=[
  ["Roller bis 50 ccm","50"],["Roller ab 125 ccm","125"],["Elektrofahrzeuge","elektro"],
  ["Motorräder","motorrad"],["Quads","quad"],["Gebrauchtfahrzeuge","gebraucht"]
];

function Header({onBook,scrolled,onNav,onCat}){
  const [open,setOpen]=useState(false);
  const [dd,setDd]=useState(false);
  const ddRef=useRef(null);
  const links=[["Marken","#marken"],["Segmente","#segmente"],["Werkstatt","#werkstatt"],["Ersatzteile","#ersatzteile"],["News","#news"],["Kontakt","#kontakt"]];
  const go=(href)=>{setOpen(false);setDd(false);onNav(href);};
  const goCat=(key)=>{setOpen(false);setDd(false);onCat(key);};
  useEffect(()=>{
    const close=(e)=>{ if(ddRef.current && !ddRef.current.contains(e.target)) setDd(false); };
    document.addEventListener('click',close); return ()=>document.removeEventListener('click',close);
  },[]);
  return (
    <React.Fragment>
      <header className={"header"+(scrolled?" scrolled":"")}>
        <div className="wrap header-inner">
          <a className="brand" href="#top" onClick={(e)=>{e.preventDefault();go("#top");}}>
            <img src="assets/logo/logo.png" alt="Der Mopedladen"/>
          </a>
          <nav className="nav">
            <div className={"nav-dd"+(dd?" open":"")} ref={ddRef}
                 onMouseEnter={()=>setDd(true)} onMouseLeave={()=>setDd(false)}>
              <button className="nav-dd-trigger" onClick={()=>setDd(o=>!o)} aria-expanded={dd}>
                Fahrzeuge {I.chev({className:"chev"})}
              </button>
              <div className="nav-menu">
                <button className="nav-menu-item all" onClick={()=>goCat("alle")}>Alle Fahrzeuge ansehen {I.arrow()}</button>
                {VEHICLE_CATS.map(([t,k])=>(
                  <button key={k} className="nav-menu-item" onClick={()=>goCat(k)}>{t}</button>
                ))}
              </div>
            </div>
            {links.map(([t,h])=> <a key={h} href={h} onClick={(e)=>{e.preventDefault();go(h);}}>{t}</a>)}
          </nav>
          <div className="header-cta">
            <a className="tel-link" href={"tel:"+D.contact.telHref}>{I.phone()}{D.contact.tel}</a>
            <button className="btn btn-primary btn-sm" onClick={onBook}>Probefahrt buchen</button>
            <button className={"burger"+(open?" open":"")} aria-label="Menü" onClick={()=>setOpen(o=>!o)}><span/></button>
          </div>
        </div>
      </header>
      <div className={"drawer"+(open?" open":"")}>
        <div className="drawer-scroll">
          <button className="drawer-link" onClick={()=>goCat("alle")}>Fahrzeuge</button>
          <div className="drawer-cats">
            {VEHICLE_CATS.map(([t,k])=> <button key={k} onClick={()=>goCat(k)}>{t}</button>)}
          </div>
          {links.map(([t,h])=> <button key={h} className="drawer-link" onClick={()=>go(h)}>{t}</button>)}
        </div>
        <div className="drawer-foot">
          <a className="btn btn-primary" style={{fontSize:14}} href="#" onClick={(e)=>{e.preventDefault();setOpen(false);onBook();}}>Probefahrt buchen</a>
          <a className="btn btn-outline" style={{fontSize:14}} href={"tel:"+D.contact.telHref}>{I.phone()} {D.contact.tel}</a>
        </div>
      </div>
    </React.Fragment>
  );
}

function Hero({onBook,hero}){
  const h=hero||{img:"assets/models/cfmoto-800mtx-action.webp",ck:"CFMOTO 800MT-X",cl:"Neuer Vertragshändler"};
  return (
    <section className="hero" id="top">
      <div className="hero-grid">
        <div className="hero-copy">
          <div className="eyebrow"><span className="dot"/> Neuer CFMOTO Vertragshändler · Hannover-Hainholz</div>
          <h1>Ihr Roller- &amp; Motorrad&shy;spezialist in <span className="accent">Hannover.</span></h1>
          <p className="hero-sub">Verkauf, Meisterwerkstatt und Service unter einem Dach — von CFMOTO und Kymco bis Vespa. Persönlich, ehrlich, sofort startklar.</p>
          <div className="hero-actions">
            <button className="btn btn-primary" onClick={onBook}>Probefahrt buchen {I.arrow()}</button>
            <a className="btn btn-outline" href={"tel:"+D.contact.telHref}>{I.phone()} {D.contact.tel}</a>
          </div>
          <div className="hero-stats">
            <div className="hero-stat"><div className="k">8</div><div className="l">Marken im Haus</div></div>
            <div className="hero-stat"><div className="k">50+</div><div className="l">Fahrzeuge vor Ort</div></div>
            <div className="hero-stat"><div className="k">0,99%</div><div className="l">Finanzierung ab</div></div>
          </div>
        </div>
        <div className="hero-media">
          <img src={h.img} alt={h.ck}/>
          <div className="hero-chip">
            <div><div className="cl">{h.cl}</div><div className="ck">{h.ck}</div></div>
          </div>
        </div>
      </div>
      <div className="scroll-cue"><span className="bar"/> Sortiment entdecken</div>
    </section>
  );
}

function BrandWall({onNav}){
  return (
    <section className="brands reveal" id="marken">
      <div className="wrap">
        <div className="brands-head">
          <span className="t">Unsere Marken</span>
          <span className="l"/>
          <span className="pp">CFMOTO Vertragshändler · Kymco Premium Partner</span>
        </div>
        <div className="brand-row">
          {D.brands.map(b=>(
            <div key={b.n} className="brand-cell" title={b.n}>
              <img src={b.f} alt={b.n}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Header=Header; window.Hero=Hero; window.BrandWall=BrandWall;