/* ============================================================
   WEINBERG — PageHero + Leistungen + Fabrik
   ============================================================ */

function PageHero({crumbs, title, sub, green, bg, pos, light, slides, fitw}){
  const [idx, setIdx] = React.useState(0);
  React.useEffect(()=>{
    if(!slides || slides.length<2) return;
    const t = setInterval(()=>setIdx(i=>(i+1)%slides.length), 2600);
    return ()=>clearInterval(t);
  },[slides]);
  return (
    <section className={'pagehero blueprint'+(green?' green':'')+((bg||slides)?' has-bg':'')+(light?' light':'')+(slides?' slideshow':'')+(fitw?' fitw':'')}>
      {slides ? slides.map((src,i)=>(
        <div key={i} className={'ph-bg ph-slide'+(i===idx?' on':'')} style={{backgroundImage:'url("'+ASSET(src)+'")',backgroundPosition:pos||'center'}}></div>
      )) : (bg ? <div className="ph-bg" style={{backgroundImage:'url("'+bg+'")',backgroundPosition:pos||'center'}}></div> : null)}
      <div className="wrap">
        {crumbs ? <div className="crumbs mono">{crumbs}</div> : null}
        <h1>{title}</h1>
        {sub ? <p>{sub}</p> : null}
      </div>
    </section>
  );
}

/* Full-bleed muted autoplay looping YouTube background hero */
function BgVideoHero({src, youtubeId, poster, cover, coverDelay, watermark, crumbs, bigTitle, sub, lang}){
  const [covered, setCovered] = React.useState(!!cover);
  React.useEffect(()=>{
    if(!cover) return;
    const t = setTimeout(()=>setCovered(false), coverDelay||3200);
    return ()=>clearTimeout(t);
  },[cover,coverDelay]);
  return (
    <section className="vhero">
      <div className="bg" style={poster?{backgroundImage:'url("'+poster+'")'}:undefined}>
        {youtubeId
          ? <YtEmbed videoId={youtubeId} className="yt-bg"
              params={"autoplay=1&mute=1&controls=0&loop=1&playlist="+youtubeId+"&playsinline=1&modestbranding=1&rel=0&showinfo=0&disablekb=1&fs=0&iv_load_policy=3"}
              title={bigTitle} tabIndex="-1" ariaHidden="true" lang={lang}
              allow="autoplay; encrypted-media"/>
          : <video src={src} poster={poster} autoPlay muted loop playsInline preload="metadata" tabIndex="-1" aria-hidden="true"></video>}
      </div>
      {cover ? <div className={'vh-cover'+(covered?'':' hide')} style={{backgroundImage:'url("'+cover+'")'}} aria-hidden="true"></div> : null}
      <div className="ov"></div>
      {watermark ? <div className="watermark" aria-hidden="true">{watermark}</div> : null}
      <div className="vh-inner">
        {crumbs ? <div className="crumbs mono">{crumbs}</div> : null}
        <h1>{bigTitle}</h1>
        {sub ? <p>{sub}</p> : null}
      </div>
    </section>
  );
}

function CapLightbox({cap, lang, onClose}){
  const [idx, setIdx] = React.useState(0);
  React.useEffect(()=>{ setIdx(0); },[cap]);
  React.useEffect(()=>{
    if(!cap) return;
    const imgs = (cap.gallery&&cap.gallery.length)?cap.gallery:(cap.img?[cap.img]:[]);
    const onKey=(e)=>{
      if(e.key==='Escape') onClose();
      else if(e.key==='ArrowRight'){ if(imgs.length) setIdx(i=>(i+1)%imgs.length); }
      else if(e.key==='ArrowLeft'){ if(imgs.length) setIdx(i=>(i-1+imgs.length)%imgs.length); }
    };
    document.addEventListener('keydown',onKey); document.body.style.overflow='hidden';
    return ()=>{ document.removeEventListener('keydown',onKey); document.body.style.overflow=''; };
  },[cap,onClose]);
  if(!cap) return null;
  const imgs = (cap.gallery&&cap.gallery.length)?cap.gallery:(cap.img?[cap.img]:[]);
  const many = imgs.length>1;
  const go=(d)=>setIdx(i=>(i+d+imgs.length)%imgs.length);
  const labels = {hu:{photo:'kép',soon:'Fotók hamarosan'},en:{photo:'photos',soon:'Photos coming soon'},de:{photo:'Fotos',soon:'Fotos folgen in Kürze'}};
  const t = labels[lang]||labels.de;
  return (
    <div className="caplb" onClick={onClose}>
      <button className="vlb-close" aria-label="Close" onClick={onClose}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"></path></svg>
      </button>
      <div className="caplb-panel" onClick={(e)=>e.stopPropagation()}>
        <div className="caplb-head">
          <div>
            <span className="eyebrow">{cap.eyebrow?L(cap.eyebrow,lang):L(CONTENT.leistungen.capsHead.eyebrow,lang)}</span>
            <h3>{L(cap.t,lang)}</h3>
          </div>
          {imgs.length>1 ? <span className="caplb-count mono">{imgs.length} {t.photo}</span> : null}
        </div>
        <div className="caplb-stage">
          {imgs.length ? (
            <div className="caplb-main" style={{backgroundImage:'url("'+ASSET(imgs[idx])+'")'}}></div>
          ) : (
            <div className="caplb-main empty"><Ph label={L(cap.l,lang)}/><span className="soon mono">{t.soon}</span></div>
          )}
          {many ? (<React.Fragment>
            <button className="caplb-nav prev" onClick={()=>go(-1)} aria-label="Previous"><Icon name="arrow"/></button>
            <button className="caplb-nav next" onClick={()=>go(1)} aria-label="Next"><Icon name="arrow"/></button>
          </React.Fragment>) : null}
        </div>
        {cap.d ? <p className="caplb-desc">{L(cap.d,lang)}</p> : null}
        {many ? (
          <div className="caplb-thumbs">
            {imgs.map((im,k)=>(
              <button key={k} className={'caplb-thumb'+(k===idx?' active':'')} onClick={()=>setIdx(k)}
                style={{backgroundImage:'url("'+ASSET(im)+'")'}} aria-label={'Bild '+(k+1)}></button>
            ))}
          </div>
        ) : null}
      </div>
    </div>
  );
}

function Leistungen({go, lang}){
  const s = CONTENT.leistungen;
  const handle = (r,opts)=>(e)=>{ e.preventDefault(); go(r,opts); };
  const specs = [s.intro.s1, s.intro.s2, s.intro.s3, s.intro.s4];
  const sectorIcons = ['building','box','bridge','chip','trophy','star','grid','shield','truck'];
  const sectorFilters = ['buero','buero','infra','tech','sport','sonder','buero','sonder','buero'];
  const [lbCap, setLbCap] = React.useState(null);
  return (
    <main>
      <BgVideoHero
        youtubeId="We-HjecrVUw"
        poster={ASSET("assets/leistungen-video-poster.jpg")}
        lang={lang}
        bigTitle={L(s.hero.bigTitle,lang)}
        sub={L(s.hero.sub,lang)}/>

      {/* INTRO */}
      <section className="section">
        <div className="wrap">
          <Reveal className="introblock">
            <div className="imgwrap">
              <Ph src={ASSET("assets/leistungen-intro.webp")} label={L(s.intro.label,lang)}/>
              <figcaption className="nameplate">
                <b>{L(s.intro.personName,lang)}</b>
                <span>{L(s.intro.personRole,lang)}</span>
              </figcaption>
            </div>
            <div>
              <span className="eyebrow">{L(s.intro.eyebrow,lang)}</span>
              <h2 className="h-sec" style={{margin:'16px 0 16px'}}>{L(s.intro.title,lang)}</h2>
              <p className="lead">{L(s.intro.text,lang)}</p>
              <div className="specgrid">
                {specs.map((sp,i)=>(
                  <div className="cell" key={i}>
                    <div className="n">{L(sp.n,lang)}</div>
                    <div className="l">{L(sp.l,lang)}</div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* CAPABILITIES */}
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <Reveal className="sec-head">
            <span className="eyebrow">{L(s.capsHead.eyebrow,lang)}</span>
            <h2 className="h-sec" style={{marginTop:'16px'}}>{L(s.capsHead.title,lang)}</h2>
          </Reveal>
          <div className="capgrid">
            {s.caps.map((c,i)=>{
              const imgs = (c.gallery && c.gallery.length) ? c.gallery : (c.img?[c.img]:[]);
              const cnt = imgs.length;
              const open = ()=>setLbCap(c);
              return (
              <Reveal as="article" className="capcard clickable" key={i} delay={(i%4)*60}
                role="button" tabIndex={0} onClick={open}
                onKeyDown={(e)=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); open(); } }}>
                <div className="imgwrap">
                  <Ph label={L(c.l,lang)} src={c.img?ASSET(c.img):null}/>
                  <span className="num mono">{String(i+1).padStart(2,'0')}</span>
                  <span className="cap-cue">
                    <Icon name="expand"/>
                    {cnt>1 ? <b>{cnt} {lang==='hu'?'kép':lang==='en'?'photos':'Fotos'}</b>
                           : <b>{lang==='hu'?'Galéria':lang==='en'?'Gallery':'Galerie'}</b>}
                  </span>
                </div>
                <div className="body">
                  <h3>{L(c.t,lang)}</h3>
                  <p>{L(c.d,lang)}</p>
                </div>
              </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* SECTORS */}
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <Reveal className="sec-head">
            <span className="eyebrow">{L(s.sectorsHead.eyebrow,lang)}</span>
            <h2 className="h-sec" style={{marginTop:'16px'}}>{L(s.sectorsHead.title,lang)}</h2>
          </Reveal>
          <Reveal className="sectors">
            {s.sectors.map((sec,i)=>(
              <div className="sector clickable" key={i}
                role="button" tabIndex={0}
                onClick={()=>go('referenzen',{filter:sectorFilters[i]})}
                onKeyDown={(e)=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); go('referenzen',{filter:sectorFilters[i]}); } }}>
                <span className="ico"><Icon name={sectorIcons[i]}/></span>
                <b>{L(sec,lang)}</b>
                <span className="sector-arrow"><Icon name="arrow"/></span>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* CTA */}
      <CtaStrip go={go} lang={lang}/>
      <CapLightbox cap={lbCap} lang={lang} onClose={()=>setLbCap(null)}/>
    </main>
  );
}

function Fabrik({go, lang}){
  const s = CONTENT.fabrik;
  const handle = (r,opts)=>(e)=>{ e.preventDefault(); go(r,opts); };
  const [lbMach, setLbMach] = React.useState(null);
  const openMach = (m)=>setLbMach({
    t:{de:m.de||m.t, en:m.en||m.t, hu:m.hu||m.t},
    d:m.desc||null,
    l:m.l,
    img:m.img,
    gallery:m.gallery || (m.img?[m.img]:[]),
    eyebrow:CONTENT.fabrik.maschinen.eyebrow,
  });
  return (
    <main>
      <PageHero crumbs={L(s.hero.crumbs,lang)} title={L(s.hero.title,lang)} sub={L(s.hero.sub,lang)} bg={ASSET("assets/fabrik-hero.jpg")} pos="center 40%"/>

      {/* VIDEO — always-visible Image Film */}
      <section className="section">
        <div className="wrap">
          <Reveal className="videoembed">
            <YtEmbed
              videoId={lang==='en'?'4VqrYMIVsXo':lang==='de'?'nCQSUJKvGt4':'ZMRTnb8lRRw'}
              title={L(s.hero.videoCaption,lang)}
              poster={ASSET("assets/leistungen-video-poster.jpg")}
              lang={lang}/>
          </Reveal>
          <p className="videocap mono">{L(s.hero.videoCaption,lang)}</p>
        </div>
      </section>

      {/* WERK */}
      <section className="section">
        <div className="wrap">
          <Reveal className="introblock">
            <div>
              <span className="eyebrow">{L(s.werk.eyebrow,lang)}</span>
              <h2 className="h-sec" style={{margin:'16px 0 16px'}}>{L(s.werk.title,lang)}</h2>
              <p className="lead">{L(s.werk.text,lang)}</p>
            </div>
            <div className="imgwrap"><Ph src="assets/werk-aerial.jpg" label={L(s.werk.label,lang)}/></div>
          </Reveal>
        </div>
      </section>

      {/* HIGHLIGHTS */}
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <Reveal className="highlights">
            {s.highlights.map((hb,i)=>(
              <div className="hibox" key={i}>
                <div className="n">{L(hb.n,lang)}</div>
                <div className="l">{L(hb.l,lang)}</div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* MASCHINENPARK */}
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <Reveal className="sec-head">
            <span className="eyebrow">{L(s.maschinen.eyebrow,lang)}</span>
            <h2 className="h-sec" style={{margin:'16px 0 14px'}}>{L(s.maschinen.title,lang)}</h2>
            <p className="lead">{L(s.maschinen.lead,lang)}</p>
          </Reveal>
          {s.machineGroups.map((grp,gi)=>(
            <div className="machgroup" key={gi}>
              <Reveal className="machgroup-head"><h3>{L(grp.g,lang)}</h3></Reveal>
              <div className="machgrid">
                {grp.items.map((m,i)=>{
                  const imgs = (m.gallery&&m.gallery.length)?m.gallery:(m.img?[m.img]:[]);
                  const cnt = imgs.length;
                  return (
                  <Reveal as="article" className="machcard clickable" key={i} delay={(i%3)*60}
                    role="button" tabIndex={0} onClick={()=>openMach(m)}
                    onKeyDown={(e)=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); openMach(m); } }}>
                    <div className="imgwrap">
                      <Ph label={L(m.l,lang)} src={m.img?ASSET(m.img):null}/>
                      <span className="cap-cue">
                        <Icon name="expand"/>
                        <b>{cnt>1 ? cnt+' '+(lang==='hu'?'kép':lang==='en'?'photos':'Fotos') : (lang==='hu'?'Galéria':lang==='en'?'Gallery':'Galerie')}</b>
                      </span>
                    </div>
                    <div className="body"><h3>{m[lang]||m.t}</h3><p>{L(m.l,lang)}</p></div>
                  </Reveal>
                  );
                })}
              </div>
            </div>
          ))}
          <div style={{marginTop:'40px'}}>
            <a className="btn btn-primary btn-lg" href={HREF('kontakt')} onClick={handle('kontakt',{tab:'kontakt'})}>{L(CONTENT.ui.buttons.fabrikbesuch,lang)} <Icon name="arrow" className="arr"/></a>
          </div>
        </div>
      </section>
      <CapLightbox cap={lbMach} lang={lang} onClose={()=>setLbMach(null)}/>
    </main>
  );
}

/* shared CTA strip */
function CtaStrip({go, lang}){
  const handle = (r,opts)=>(e)=>{ e.preventDefault(); go(r,opts); };
  return (
    <section className="section" style={{paddingTop:0}}>
      <div className="wrap">
        <Reveal className="greenteaser" style={{background:'var(--navy)'}}>
          <div className="body">
            <span className="eyebrow on-dark" style={{color:'#9fb4e6'}}>{lang==='hu'?'Az Ön projektje':lang==='en'?'Your project':'Ihr Projekt'}</span>
            <h2>{lang==='hu'?'Beszéljük meg acélprojektjét':lang==='en'?'Let\u2019s discuss your steel project':'Lassen Sie uns Ihr Stahlprojekt besprechen'}</h2>
            <p style={{color:'#cdd9ef'}}>{lang==='hu'?'Küldje el rajzait és specifikációit — ajánlatát egy munkanapon belül elkészítjük.':lang==='en'?'Send us your drawings and specifications — we\u2019ll prepare your quote within one working day.':'Senden Sie uns Ihre Zeichnungen und Spezifikationen — wir erstellen Ihr Angebot innerhalb eines Werktags.'}</p>
            <a className="btn btn-white" href={HREF('kontakt')} onClick={handle('kontakt',{tab:'angebot'})} style={{color:'var(--navy)'}}>{L(CONTENT.ui.buttons.angebot,lang)} <Icon name="arrow" className="arr"/></a>
          </div>
          <div className="right"><Ph src={ASSET("assets/cta-structure.jpg")} label={lang==='hu'?'Kész acélszerkezet':lang==='en'?'Finished steel structure':'Fertige Stahlkonstruktion'}/></div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { PageHero, Leistungen, Fabrik, CtaStrip });