/* ============================================================
   WEINBERG — Homepage + shared RefCard / StatBar / Partners / CertStrip
   ============================================================ */

function RefCard({p, lang, onOpen}){
  const imgs = (p.gallery&&p.gallery.length)?p.gallery:(p.img?[p.img]:[]);
  const clickable = !!(onOpen && imgs.length>1);
  return (
    <Reveal as="article" className={'refcard'+(clickable?' clickable':'')}
      onClick={clickable?()=>onOpen(p):undefined}
      role={clickable?'button':undefined} tabIndex={clickable?0:undefined}
      onKeyDown={clickable?(e)=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();onOpen(p);}}:undefined}>
      <div className="imgwrap">
        <Ph label={L(p.name,lang)} src={p.img?ASSET(p.img):null}/>
        <span className={'cat'+(p.green?' green':'')}>{L(p.catLabel,lang)}</span>
        {p.green ? <span className="green-badge">🌿</span> : null}
        {clickable ? (
          <span className="cap-cue">
            <Icon name="expand"/>
            <b>{imgs.length+' '+(lang==='hu'?'kép':lang==='en'?'photos':'Fotos')}</b>
          </span>
        ) : null}
      </div>
      <div className="body">
        {p.year ? <span className="yr">{p.year}</span> : null}
        <h3>{L(p.name,lang)}</h3>
        <div className="client">{L(p.client,lang)}</div>
        <p>{L(p.desc,lang)}</p>
      </div>
    </Reveal>
  );
}

function StatBar({stats, lang}){
  return (
    <section className="statbar">
      <div className="wrap" style={{paddingLeft:0,paddingRight:0}}>
        <div className="grid">
          {stats.map((s,i)=>(
            <div className="st" key={i}>
              <div className="n">{L(s.n,lang)}</div>
              <div className="l">{L(s.l,lang)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Partners({lang}){
  const logos = [
    {n:'Syngenta', src:'assets/logo-syngenta.jpg'},
    {n:'WING', src:'assets/logo-wing.png'},
    {n:'ZÁÉV', src:'assets/logo-zaev.png'},
    {n:'CPI Property Group', src:'assets/logo-cpi.png'},
    {n:'Volvo', src:'assets/logo-volvo.jpg'},
    {n:'Spar', src:'assets/logo-spar.png'},
    {n:'Siemens', src:'assets/partners/siemens.png'},
    {n:'Continental', src:'assets/partners/continental.png'},
    {n:'Schneider Electric', src:'assets/partners/schneider.png'},
    {n:'GE', src:'assets/partners/ge.png'},
    {n:'MOL', src:'assets/partners/mol.png'},
    {n:'MVM Group', src:'assets/partners/mvm.png'},
    {n:'Festo', src:'assets/partners/festo.png'},
    {n:'Valeo', src:'assets/partners/valeo.png'},
    {n:'Hankook', src:'assets/partners/hankook.png'},
    {n:'Apollo', src:'assets/partners/apollo.png'},
    {n:'Andritz', src:'assets/partners/andritz.png'},
    {n:'Donau Chemie', src:'assets/partners/donau-chemie.png'},
    {n:'Swiss Krono', src:'assets/partners/swiss-krono.png'},
    {n:'Budapest Airport', src:'assets/partners/budapest-airport.png'},
    {n:'Wescast Industries', src:'assets/partners/wescast.png'},
    {n:'Duvenbeck', src:'assets/partners/duvenbeck.png'},
    {n:'Masped Csoport', src:'assets/partners/masped.png'},
    {n:'Ghibli', src:'assets/partners/ghibli.png'},
    {n:'Alumetal', src:'assets/partners/alumetal.png'},
    {n:'Inotal', src:'assets/partners/inotal.png'},
    {n:'Nagév', src:'assets/partners/nagev.png'},
    {n:'enmech', src:'assets/partners/enmech.png'},
    {n:'Infoware', src:'assets/partners/infoware.png'},
    {n:'Fraisa', src:'assets/partners/fraisa.png'},
    {n:'Royalpack', src:'assets/partners/royalpack.png'},
    {n:'East Gate Business Park', src:'assets/partners/east-gate.png'},
    {n:'Budapesti Szabadkikötő Logisztikai', src:'assets/partners/szabadkikoto.png'},
    {n:'SBTC', src:'assets/partners/sbtc.png'},
    {n:'Aeroplex of Central Europe', src:'assets/partners/ace-atc.png'},
  ];
  const loop = logos.concat(logos);
  return (
    <section className="section" style={{paddingTop:'clamp(40px,6vw,72px)',paddingBottom:'clamp(40px,6vw,72px)'}}>
      <div className="wrap">
        <div className="sec-head" style={{textAlign:'center',margin:'0 auto 40px',maxWidth:'none'}}>
          <span className="eyebrow">{L(CONTENT.home.partners.eyebrow,lang)}</span>
        </div>
      </div>
      <div className="partners">
        <div className="track">
          {loop.map((l,i)=>(
            <span className="partner-logo" key={i}>
              <img src={ASSET(l.src)} alt={l.n}/>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function CertStrip({go}){
  const certs = ['EN 1090-1','EN 1090-2','ISO 9001','ISO 14001','ISO 45001','ISO 3834-2','8/2018 ITM','EPD','NATO Qualified Supplier'];
  const click = go ? (e)=>{ e.preventDefault(); go('zertifikate'); } : undefined;
  return (
    <section className="certstrip">
      <a className="wrap cs-link" href={HREF('zertifikate')} onClick={click} style={{cursor: go?'pointer':'default'}}>
        {certs.map(c=>(<span className="cert mono" key={c}><span className="cert-check"><Icon name="check"/></span>{c}</span>))}
      </a>
    </section>
  );
}

function Home({go, lang}){
  const h = CONTENT.home;
  const handle = (r,opts)=>(e)=>{ e.preventDefault(); go(r,opts); };
  const pickRef = (img)=>CONTENT.referenzen.projects.find(p=>p.img===img);
  const previewRefs = [
    ...CONTENT.referenzen.projects.slice(0,3),
    pickRef("assets/ref-volvo.jpg"),
    pickRef("assets/ref-aeroplex.jpg"),
    pickRef("assets/ref-femalk.jpg"),
  ].filter(Boolean);
  const [filmOpen, setFilmOpen] = React.useState(false);
  return (
    <main>
      {/* HERO — Kinoformat (full-bleed) */}
      <section className="hero-cine">
        <div className="bg" style={{backgroundImage:'url("'+ASSET("assets/werk-aerial.jpg")+'")'}}></div>
        <div className="ov"></div>
        <div className="wrap hc-body">
          <div className="head">
            <h1>{L(h.hero.titleA,lang)}<br/>{L(h.hero.titleB,lang)}</h1>
            <p className="hero-sub">{L(h.hero.sub,lang)}</p>
            <div className="ctas">
              <a className="btn btn-white" href={HREF('referenzen')} onClick={handle('referenzen')}>{L(CONTENT.ui.buttons.referenzen,lang)}</a>
              <a className="btn btn-ghost" href={HREF('kontakt')} onClick={handle('kontakt',{tab:'kontakt'})}>{L(CONTENT.ui.buttons.kontakt,lang)}</a>
            </div>
          </div>
          <div className="hc-stats">
            {h.stats.map((s,i)=>(
              <div className="st" key={i}>
                <div className="n">{L(s.n,lang)}</div>
                <div className="l">{L(s.l,lang)}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CORE BUSINESS */}
      <section className="section">
        <div className="wrap">
          <Reveal className="sec-head">
            <span className="eyebrow">{L(h.core.eyebrow,lang)}</span>
            <h2 className="h-sec">{L(h.core.title,lang)}</h2>
            <p className="lead">{L(h.core.lead,lang)}</p>
          </Reveal>
          <Reveal className="cols-2">
            <a className="corecard" href={HREF('leistungen')} onClick={handle('leistungen')}>
              <Ph src={ASSET("assets/warum-hero.jpg")} label={L(h.core.c1label,lang)}/>
              <div className="ov"></div>
              <div className="body">
                <span className="num mono">{L(h.core.c1num,lang)}</span>
                <h3>{L(h.core.c1title,lang)}</h3>
                <p>{L(h.core.c1desc,lang)}</p>
                <span className="geo-note" aria-hidden="true" style={{visibility:'hidden'}}><Icon name="pin"/>&nbsp;</span>
                <span className="more">{L(CONTENT.ui.buttons.mehr,lang)} <Icon name="arrow"/></span>
              </div>
            </a>
            <a className="corecard" href={HREF('leistungen')} onClick={handle('leistungen')}>
              <Ph src={ASSET("assets/ref-volvo.jpg")} label={L(h.core.c2label,lang)}/>
              <div className="ov"></div>
              <div className="body">
                <span className="num mono">{L(h.core.c2num,lang)}</span>
                <h3>{L(h.core.c2title,lang)}</h3>
                <p>{L(h.core.c2desc,lang)}</p>
                <span className="geo-note"><Icon name="pin"/>{L(h.core.c2note,lang)}</span>
                <span className="more">{L(CONTENT.ui.buttons.mehr,lang)} <Icon name="arrow"/></span>
              </div>
            </a>
          </Reveal>
        </div>
      </section>

      {/* GREEN TEASER — temporarily hidden (per request, may restore later)
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <Reveal className="greenteaser">
            <div className="body">
              <span className="eyebrow green" style={{color:'#bfe0c1'}}>{L(h.green.eyebrow,lang)}</span>
              <h2>{L(h.green.title,lang)}</h2>
              <p>{L(h.green.text,lang)}</p>
              <a className="btn btn-white" href={HREF('nachhaltigkeit')} onClick={handle('nachhaltigkeit')} style={{color:'#2E7D32'}}>{L(h.green.cta,lang)} <Icon name="arrow" className="arr"/></a>
            </div>
            <div className="right"><Ph green label={L(h.green.label,lang)}/></div>
          </Reveal>
        </div>
      </section>
      */}

      {/* GARANTIE */}
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <Reveal className="garantie">
            <div className="photo"><Ph src={ASSET("assets/derczo-istvan.webp")} pos="center 25%" label={L(h.garantie.label,lang)}/></div>
            <div className="body">
              <span className="eyebrow">{L(h.garantie.eyebrow,lang)}</span>
              <span className="mark-q">”</span>
              <blockquote>{L(h.garantie.quote,lang)}</blockquote>
              <div className="by">
                <span className="ava" style={{backgroundImage:'url("'+ASSET("assets/derczo-istvan.webp")+'")',backgroundSize:'cover',backgroundPosition:'center 20%'}}></span>
                <div><b>{L(h.garantie.name,lang)}</b><span>{L(h.garantie.role,lang)}</span></div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* REFERENCES PREVIEW */}
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <Reveal className="sec-head" style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',maxWidth:'none',gap:'24px',flexWrap:'wrap'}}>
            <div>
              <span className="eyebrow">{L(h.refs.eyebrow,lang)}</span>
              <h2 className="h-sec" style={{marginTop:'16px',marginBottom:0}}>{L(h.refs.title,lang)}</h2>
            </div>
            <a className="btn btn-outline" href={HREF('referenzen')} onClick={handle('referenzen')}>{L(CONTENT.ui.buttons.alle,lang)} <Icon name="arrow" className="arr"/></a>
          </Reveal>
          <div className="cardgrid">
            {previewRefs.map((p,i)=>(<RefCard key={i} p={p} lang={lang}/>))}
          </div>
        </div>
      </section>

      {/* IMAGE FILM */}
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <Reveal className="filmsection">
            <div className="bg" style={{backgroundImage:'url("'+ASSET("assets/werk-aerial.jpg")+'")'}}></div>
            <div className="ov"></div>
            <div className="inner">
              <span className="eyebrow">{L(h.film.eyebrow,lang)}</span>
              <h2>{L(h.film.title,lang)}</h2>
              <p>{L(h.film.text,lang)}</p>
              <button className="filmplay" onClick={()=>setFilmOpen(true)}>
                <span className="circle"><Icon name="play"/></span>
                {L(h.film.play,lang)}
              </button>
            </div>
          </Reveal>
        </div>
      </section>

      <Partners lang={lang}/>
      <CertStrip go={go}/>
      <VideoLightbox videoId={lang==='en'?'4VqrYMIVsXo':lang==='de'?'nCQSUJKvGt4':'ZMRTnb8lRRw'} open={filmOpen} onClose={()=>setFilmOpen(false)}/>
    </main>
  );
}

Object.assign(window, { Home, RefCard, StatBar, Partners, CertStrip });