/* App shell — state, scroll, reveal, tweaks */
const {useState:uS,useEffect:uE,useRef:uR} = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#cf2027",
  "headline": "gross",
  "hero": "cfmoto",
  "radius": 5
}/*EDITMODE-END*/;

const HEROES = {
  cfmoto:{img:"assets/models/cfmoto-800mtx-action.webp", ck:"CFMOTO 800MT-X", cl:"Neuer Vertragshändler", pos:"50% 50%"},
  cv3:{img:"assets/models/kymco-cv3-550i.webp", ck:"Kymco CV3 550i", cl:"Im Fokus", pos:"50% 42%"},
  vespa:{img:"assets/models/vespa-gts300-studio.jpg", ck:"Vespa GTS 125", cl:"Klassiker", pos:"50% 50%"}
};

function App(){
  const [t,setTweak]=useTweaks(TWEAK_DEFAULTS);
  const [scrolled,setScrolled]=uS(false);
  const [showMcta,setShowMcta]=uS(false);
  const [preselect,setPreselect]=uS("");
  const [filter,setFilter]=uS("alle");
  const formRef=uR(null);

  // apply tweaks to CSS
  uE(()=>{
    const r=document.documentElement.style;
    r.setProperty('--accent',t.accent);
    r.setProperty('--accent-hover',`color-mix(in srgb, ${t.accent}, white 18%)`);
    r.setProperty('--r-lg',t.radius+'px');
    document.body.classList.toggle('case-titel', t.headline==='titel');
  },[t.accent,t.radius,t.headline]);

  // header + mobile cta on scroll
  uE(()=>{
    const onScroll=()=>{ setScrolled(window.scrollY>40); setShowMcta(window.scrollY>620); };
    onScroll();
    window.addEventListener('scroll',onScroll,{passive:true});
    return ()=>window.removeEventListener('scroll',onScroll);
  },[]);

  // enable entrance motion ONLY if the animation timeline actually advances
  // (some preview/headless engines freeze it at t=0 — then content must stay visible)
  uE(()=>{
    let probe;
    try{ probe=document.documentElement.animate([{opacity:1},{opacity:1}],{duration:600}); }catch(e){}
    const id=setTimeout(()=>{
      const live=probe && probe.currentTime>0;
      if(probe) probe.cancel();
      if(live) document.documentElement.classList.add('fx');
    },140);
    return ()=>clearTimeout(id);
  },[]);

  // reveal observer
  uE(()=>{
    const els=document.querySelectorAll('.reveal');
    const io=new IntersectionObserver((ent)=>{
      ent.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);} });
    },{threshold:.14,rootMargin:'0px 0px -8% 0px'});
    els.forEach(el=>io.observe(el));
    return ()=>io.disconnect();
  });

  const scrollTo=(href)=>{
    if(href==='#top'){ window.scrollTo({top:0,behavior:'smooth'}); return; }
    const el=document.querySelector(href);
    if(el){ const y=el.getBoundingClientRect().top+window.scrollY-64; window.scrollTo({top:y,behavior:'smooth'}); }
  };
  const onBook=(id)=>{ if(typeof id==='string') setPreselect(id); scrollTo('#kontakt'); };
  const onCat=(key)=>{ setFilter(key); setTimeout(()=>scrollTo('#fahrzeuge'),60); };

  const h=HEROES[t.hero]||HEROES.cfmoto;
  uE(()=>{ document.documentElement.style.setProperty('--hero-pos',h.pos); },[t.hero]);

  return (
    <React.Fragment>
      <Header onBook={()=>onBook()} scrolled={scrolled} onNav={scrollTo} onCat={onCat}/>
      <main>
        <Hero onBook={()=>onBook()} hero={h}/>
        <BrandWall onNav={scrollTo}/>
        <Inventory onBook={onBook} filter={filter} setFilter={setFilter}/>
        <Segments onCat={onCat}/>
        <Ersatzteile onNav={scrollTo}/>
        <Workshop/>
        <Blog/>
        <TestDriveForm preselect={preselect} formRef={formRef}/>
        <Closing onBook={()=>onBook()}/>
      </main>
      <Footer onNav={scrollTo}/>

      <div className={"mcta"+(showMcta?" show":"")}>
        <a className="call" href={"tel:"+D.contact.telHref}>{I.phone()} Anrufen</a>
        <a className="book" href="#kontakt" onClick={(e)=>{e.preventDefault();onBook();}}>{I.calendar()} Probefahrt</a>
      </div>

      <TweaksPanel>
        <TweakSection label="Haus-Akzent"/>
        <TweakColor label="Akzentfarbe" value={t.accent}
          options={["#cf2027","#16161a","#5b6470","#8a9a52"]}
          onChange={(v)=>setTweak('accent',v)}/>
        <TweakSection label="Typografie"/>
        <TweakRadio label="Headlines" value={t.headline}
          options={[{value:"gross",label:"GROSS"},{value:"titel",label:"Titel"}]}
          onChange={(v)=>setTweak('headline',v)}/>
        <TweakSection label="Layout"/>
        <TweakSelect label="Hero-Motiv" value={t.hero}
          options={[{value:"cfmoto",label:"CFMOTO Adventure"},{value:"cv3",label:"Kymco CV3 (Trike)"},{value:"vespa",label:"Vespa Klassiker"}]}
          onChange={(v)=>setTweak('hero',v)}/>
        <TweakSlider label="Kartenecken" value={t.radius} min={0} max={16} unit="px"
          onChange={(v)=>setTweak('radius',v)}/>
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);