/* ============================================================
   WEINBERG — Referenzen (filter) + Kontakt (forms)
   ============================================================ */

function Referenzen({go, lang, initialFilter}){
  const s = CONTENT.referenzen;
  const [division, setDivision] = React.useState('steel');
  const [filter, setFilter] = React.useState(initialFilter || 'alle');
  const inDiv = s.projects.filter(p=>(p.div||'steel')===division);
  const visible = inDiv.filter(p=>{
    if(division!=='steel') return true;
    if(filter==='alle') return true;
    return p.cat===filter;
  });
  const pickDiv = (id)=>{ setDivision(id); setFilter('alle'); };
  const [lbRef, setLbRef] = React.useState(null);
  const toLb = (p)=>({
    t:p.name, d:p.desc, l:p.name, img:p.img,
    gallery:(p.gallery&&p.gallery.length)?p.gallery:(p.img?[p.img]:[]),
    eyebrow:p.catLabel,
  });
  return (
    <main>
      <PageHero title={L(s.hero.title,lang)} sub={L(s.hero.sub,lang)} slides={React.useMemo(()=>s.projects.filter(p=>p.img).map(p=>p.img),[s.projects])} pos="center 55%"/>
      <section className="section">
        <div className="wrap">
          <div className="divtabs">
            {s.divisions.map(d=>(
              <button key={d.id}
                className={'divtab'+(division===d.id?' on':'')}
                onClick={()=>pickDiv(d.id)}>{L(d.label,lang)}</button>
            ))}
          </div>
          {division==='steel' ? (
            <div className="filterbar">
              {s.filters.map(f=>(
                <button key={f.id}
                  className={(f.green?'green-f ':'')+(filter===f.id?'on':'')}
                  onClick={()=>setFilter(f.id)}>{L(f.label,lang)}</button>
              ))}
            </div>
          ) : null}
          <div className="refgrid">
            {visible.map((p,i)=>(<RefCard key={p.name.de+i} p={p} lang={lang} onOpen={(pp)=>setLbRef(toLb(pp))}/>))}
          </div>
          {visible.length===0 ? <p className="lead" style={{textAlign:'center',padding:'40px 0'}}>{lang==='hu'?'Hamarosan érkeznek projektek ebben a kategóriában.':lang==='en'?'Projects in this category coming soon.':'Projekte in dieser Kategorie folgen in Kürze.'}</p> : null}
        </div>
      </section>
      <CtaStrip go={go} lang={lang}/>
      <CapLightbox cap={lbRef} lang={lang} onClose={()=>setLbRef(null)}/>
    </main>
  );
}

/* ---------- form helpers ---------- */
function emailOk(v){ return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); }

function Field({id, label, type, required, value, onChange, err, errMsg, textarea}){
  return (
    <div className={'field'+(err?' err':'')}>
      <label htmlFor={id}>{label}{required ? <span className="req"> *</span> : null}</label>
      {textarea
        ? <textarea id={id} value={value} onChange={onChange}></textarea>
        : <input id={id} type={type||'text'} value={value} onChange={onChange}/>}
      <span className="errmsg">{errMsg}</span>
    </div>
  );
}

/* ---------- NETLIFY FORMS SUBMIT ----------
   Posts multipart/form-data to a real, non-redirected page path; Netlify's form
   handler picks it up via the "form-name" field, matched against the hidden
   static stubs in index.html. NOTE: do not post to "/" — netlify.toml force-302s
   the bare root to /en/, and a redirected POST is replayed as a GET, so the
   handler never sees the body. When the page is opened as a file (dev preview,
   offline export) there is no handler, so the submit resolves as a no-op success
   and the prototype keeps behaving as before. */
async function postToNetlify(formName, fields){
  if(BASE !== '/') return true; /* file mode: nothing to post to */
  const build = function(){
    const fd = new FormData();
    fd.append('form-name', formName);
    /* Honeypot declared on the static stubs — Netlify expects it PRESENT and EMPTY;
       omitting it can get the submission silently dropped or marked as spam. */
    fd.append('bot-field', '');
    Object.keys(fields).forEach(function(k){ fd.append(k, fields[k]); });
    return fd;
  };
  const targets = ['/index.html', location.pathname];
  let last = '';
  for(let i = 0; i < targets.length; i++){
    let res;
    try{
      res = await fetch(targets[i], {method:'POST', body:build(), redirect:'follow'});
    }catch(err){
      last = 'network: ' + (err && err.message);
      continue;
    }
    if(res.ok) return true;
    let detail = '';
    try{ detail = (await res.text()).slice(0, 300); }catch(e){}
    last = res.status + ' @ ' + targets[i] + (detail ? ' — ' + detail : '');
  }
  throw new Error('submit failed: ' + last);
}

function ContactForm({lang}){
  const f = CONTENT.kontakt.form; const E = CONTENT.kontakt.errors;
  const [v, setV] = React.useState({name:'',company:'',email:'',phone:'',message:'',dsgvo:false});
  const [errs, setErrs] = React.useState({});
  const [done, setDone] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendErr, setSendErr] = React.useState(null);
  const set = (k)=>(e)=> setV(o=>({...o,[k]: e.target.type==='checkbox'?e.target.checked:e.target.value}));
  const submit = async (e)=>{
    e.preventDefault();
    const er = {};
    if(!v.name.trim()) er.name = L(E.required,lang);
    if(!v.email.trim()) er.email = L(E.required,lang); else if(!emailOk(v.email)) er.email = L(E.email,lang);
    if(!v.message.trim()) er.message = L(E.required,lang);
    if(!v.dsgvo) er.dsgvo = L(E.dsgvo,lang);
    setErrs(er);
    if(Object.keys(er).length) return;
    setSendErr(null); setSending(true);
    try{
      await postToNetlify('kontakt', {
        name:v.name, company:v.company, email:v.email, phone:v.phone,
        message:v.message, dsgvo:v.dsgvo?'ja':'nein', language:lang,
      });
      setDone(true);
    }catch(err){ console.error('Form submit error:', err && err.message); setSendErr(L(E.send,lang)); }
    finally{ setSending(false); }
  };
  if(done) return <FormSuccess lang={lang} onReset={()=>{setDone(false);setV({name:'',company:'',email:'',phone:'',message:'',dsgvo:false});}}/>;
  return (
    <form className="formcard" onSubmit={submit} noValidate>
      <h3 style={{fontSize:'22px',marginBottom:'22px'}}>{L(f.title,lang)}</h3>
      <div className="field-row">
        <Field id="c-name" label={L(f.name,lang)} required value={v.name} onChange={set('name')} err={errs.name} errMsg={errs.name}/>
        <Field id="c-company" label={L(f.company,lang)} value={v.company} onChange={set('company')}/>
      </div>
      <div className="field-row">
        <Field id="c-email" type="email" label={L(f.email,lang)} required value={v.email} onChange={set('email')} err={errs.email} errMsg={errs.email}/>
        <Field id="c-phone" label={L(f.phone,lang)} value={v.phone} onChange={set('phone')}/>
      </div>
      <Field id="c-msg" label={L(f.message,lang)} required textarea value={v.message} onChange={set('message')} err={errs.message} errMsg={errs.message}/>
      <label className={'checkrow'+(errs.dsgvo?' err':'')}>
        <input type="checkbox" checked={v.dsgvo} onChange={set('dsgvo')}/>
        <span>{L(f.dsgvo,lang)}</span>
      </label>
      {sendErr ? <div className="sendfail">{sendErr}</div> : null}
      <button className="btn btn-primary btn-lg" type="submit" style={{width:'100%'}} disabled={sending}>
        {sending ? L(CONTENT.kontakt.sending,lang) : <>{L(f.submit,lang)} <Icon name="arrow" className="arr"/></>}
      </button>
    </form>
  );
}

function QuoteForm({lang}){
  const q = CONTENT.kontakt.quote; const E = CONTENT.kontakt.errors;
  const [v, setV] = React.useState({name:'',company:'',email:'',phone:'',project:'',dsgvo:false});
  const [errs, setErrs] = React.useState({});
  const [done, setDone] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendErr, setSendErr] = React.useState(null);
  const set = (k)=>(e)=> setV(o=>({...o,[k]: e.target.type==='checkbox'?e.target.checked:e.target.value}));
  const submit = async (e)=>{
    e.preventDefault();
    const er = {};
    ['name','company','email','phone','project'].forEach(k=>{ if(!v[k].trim()) er[k]=L(E.required,lang); });
    if(v.email.trim() && !emailOk(v.email)) er.email = L(E.email,lang);
    if(!v.dsgvo) er.dsgvo = L(E.dsgvo,lang);
    setErrs(er);
    if(Object.keys(er).length) return;
    setSendErr(null); setSending(true);
    try{
      await postToNetlify('angebot', {
        name:v.name, company:v.company, email:v.email, phone:v.phone,
        project:v.project, dsgvo:v.dsgvo?'ja':'nein', language:lang,
      });
      setDone(true);
    }catch(err){ console.error('Form submit error:', err && err.message); setSendErr(L(E.send,lang)); }
    finally{ setSending(false); }
  };
  if(done) return <FormSuccess lang={lang} onReset={()=>{setDone(false);setV({name:'',company:'',email:'',phone:'',project:'',dsgvo:false});}}/>;
  return (
    <form className="formcard" onSubmit={submit} noValidate>
      <h3 style={{fontSize:'22px',marginBottom:'8px'}}>{L(q.title,lang)}</h3>
      <p style={{color:'var(--steel-600)',fontSize:'14.5px',marginBottom:'24px'}}>{L(q.intro,lang)}</p>
      <div className="field-row">
        <Field id="q-name" label={L(q.name,lang)} required value={v.name} onChange={set('name')} err={errs.name} errMsg={errs.name}/>
        <Field id="q-company" label={L(q.company,lang)} required value={v.company} onChange={set('company')} err={errs.company} errMsg={errs.company}/>
      </div>
      <div className="field-row">
        <Field id="q-email" type="email" label={L(q.email,lang)} required value={v.email} onChange={set('email')} err={errs.email} errMsg={errs.email}/>
        <Field id="q-phone" label={L(q.phone,lang)} required value={v.phone} onChange={set('phone')} err={errs.phone} errMsg={errs.phone}/>
      </div>
      <Field id="q-project" label={L(q.project,lang)} required textarea value={v.project} onChange={set('project')} err={errs.project} errMsg={errs.project}/>
      <p className="bigfile-note">{L(q.bigNote,lang)}{' '}
        <a href="mailto:steel@weinberg93.eu">steel@weinberg93.eu</a>
      </p>
      <label className={'checkrow'+(errs.dsgvo?' err':'')}>
        <input type="checkbox" checked={v.dsgvo} onChange={set('dsgvo')}/>
        <span>{L(q.dsgvo,lang)}</span>
      </label>
      {sendErr ? <div className="sendfail">{sendErr}</div> : null}
      <button className="btn btn-primary btn-lg" type="submit" style={{width:'100%'}} disabled={sending}>
        {sending ? L(CONTENT.kontakt.sending,lang) : <>{L(q.submit,lang)} <Icon name="arrow" className="arr"/></>}
      </button>
    </form>
  );
}

function FormSuccess({lang, onReset}){
  const s = CONTENT.kontakt.success;
  return (
    <div className="formcard">
      <div className="formsuccess">
        <div className="check"><Icon name="check"/></div>
        <h3>{L(s.title,lang)}</h3>
        <p>{L(s.msg,lang)}</p>
        <button className="btn btn-outline" style={{marginTop:'24px'}} onClick={onReset}>{L(s.again,lang)}</button>
      </div>
    </div>
  );
}

function Kontakt({go, lang, tab, setTab}){
  const s = CONTENT.kontakt;
  return (
    <main>
      <PageHero crumbs={L(s.hero.crumbs,lang)} title={L(s.hero.title,lang)} sub={L(s.hero.sub,lang)}/>
      <section className="section">
        <div className="wrap">
          <div className="subtabs">
            <button className={tab==='kontakt'?'on':''} onClick={()=>setTab('kontakt')}>{L(s.tabs.kontakt,lang)}</button>
            <button className={tab==='angebot'?'on':''} onClick={()=>setTab('angebot')}>{L(s.tabs.angebot,lang)}</button>
          </div>

          {tab==='kontakt' ? (
            <div className="contactgrid">
              <div>
                <span className="eyebrow">{L(s.person.eyebrow,lang)}</span>
                <div className="personrow" style={{marginTop:'16px'}}>
                  {[s.person, s.person2].filter(Boolean).map((p,i)=>(
                    <div className="person" key={i}>
                      <span className="ava">{p.photo ? <img src={ASSET(p.photo)} alt={L(p.name,lang)} style={p.pos?{objectPosition:p.pos}:undefined}/> : null}</span>
                      <div className="person-info">
                        <b>{L(p.name,lang)}</b>
                        <div className="title">{L(p.title,lang)}</div>
                        <div className="row mono"><Icon name="phone"/>{L(p.phone,lang)}</div>
                        <div className="row mono"><Icon name="mail"/>{L(p.email,lang)}</div>
                        {p.langs ? <div className="langs"><Icon name="globe"/>{L(p.langs,lang)}</div> : null}
                      </div>
                    </div>
                  ))}
                </div>

                <span className="eyebrow">{L(s.locations.eyebrow,lang)}</span>
                <div className="locrow" style={{marginTop:'16px'}}>
                  <LocCard title={L(s.locations.werkTitle,lang)} addr={L(s.locations.werkAddr,lang)} img={s.locations.werkImg} link={s.locations.werkLink} cta={L(s.locations.openMap,lang)}/>
                  <LocCard title={L(s.locations.bueroTitle,lang)} addr={L(s.locations.bueroAddr,lang)} img={s.locations.bueroImg} link={s.locations.bueroLink} cta={L(s.locations.openMap,lang)}/>                </div>

                <div className="detailrows">
                  <div className="r"><span className="k">{L(s.details.tel,lang)}</span><span className="v">+36 47 511 040</span></div>
                  <div className="r"><span className="k">{L(s.details.fax,lang)}</span><span className="v">+36 47 313 807</span></div>
                  <div className="r"><span className="k">{L(s.details.email,lang)}</span><span className="v">steel@weinberg93.eu</span></div>
                  <div className="r"><span className="k">{L(s.details.hours,lang)}</span><span className="v">{L(s.details.hoursVal,lang)}</span></div>
                </div>
                <div className="promise"><Icon name="clock"/>{L(s.promise,lang)}</div>
              </div>
              <ContactForm lang={lang}/>
            </div>
          ) : (
            <div style={{maxWidth:'760px',margin:'0 auto'}}>
              <QuoteForm lang={lang}/>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

function LocCard({title, addr, map, img, link, cta}){
  return (
    <div className="loccard">
      <div className="map">
        {img
          ? <img src={ASSET(img)} alt={title} loading="lazy"/>
          : map
          ? <iframe src={map} title={title} loading="lazy" referrerPolicy="no-referrer-when-downgrade" allowFullScreen></iframe>
          : (<React.Fragment><div className="ph"></div><span className="pin"><Icon name="pin"/></span></React.Fragment>)}
      </div>
      <div className="body">
        <h4>{title}</h4>
        <address>{addr}</address>
        {link && <a className="maplink" href={link} target="_blank" rel="noopener"><Icon name="pin"/>{cta}</a>}
      </div>
    </div>
  );
}

function Datenschutz({go, lang}){
  const s = CONTENT.datenschutz;
  return (
    <main>
      <PageHero title={L(s.hero.title,lang)}/>
      <section className="section">
        <div className="wrap">
          <div className="legal">
            {s.blocks.map((b,i)=>(
              <Reveal className="legal-block" key={i} delay={(i%4)*40}>
                <h2>{L(b.h,lang)}</h2>
                {L(b.lines,lang).map((ln,j)=>(<p key={j}>{ln}</p>))}
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Referenzen, Kontakt, ContactForm, QuoteForm, LocCard, Zertifikate, Impressum, Datenschutz });

function Impressum({go, lang}){
  const s = CONTENT.impressum;
  return (
    <main>
      <PageHero crumbs={L(s.hero.crumbs,lang)} title={L(s.hero.title,lang)} sub={L(s.hero.sub,lang)}/>
      <section className="section">
        <div className="wrap">
          <div className="legal">
            {s.blocks.map((b,i)=>(
              <Reveal className="legal-block" key={i} delay={(i%4)*40}>
                <h2>{L(b.h,lang)}</h2>
                {L(b.lines,lang).map((ln,j)=>(<p key={j}>{ln}</p>))}
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function Zertifikate({go, lang}){
  const s = CONTENT.zertifikate;
  return (
    <main>
      <PageHero crumbs={L(s.hero.crumbs,lang)} title={L(s.hero.title,lang)} sub={L(s.hero.sub,lang)} bg="assets/zertifikate-hero.jpg" pos="center 42%" light/>
      <section className="section">
        <div className="wrap">
          {s.groups.map((g,gi)=>{
            const renderCard=(c,ci)=>(
              <Reveal className={'certcard-wrap'+(c.banner?' banner':'')} key={ci} delay={(ci%6)*50}>
                <a className={'certcard'+(c.pdf?' has-pdf':'')+(c.banner?' is-banner':'')}
                   href={c.pdf?ASSET(c.pdf):undefined}
                   target={c.pdf?'_blank':undefined}
                   rel={c.pdf?'noopener noreferrer':undefined}>
                  {c.img
                    ? <img src={ASSET(c.img)} alt={c.name+' '+c.issuer}/>
                    : (
                      <div className={'certph'+(c.issuer==='TÜV Rheinland'?' tuv':c.issuer==='NATO'?' nato':'')}>
                        <span className="issuer mono">{c.issuer}</span>
                        <b>{c.name}</b>
                        <span className="body">{L(c.body,lang)}</span>
                      </div>
                    )}
                  {c.pdf ? <span className="certview mono"><Icon name="doc"/>PDF</span> : null}
                </a>
              </Reveal>
            );
            const banners=g.certs.filter(c=>c.banner);
            const tiles=g.certs.filter(c=>!c.banner);
            return (
              <div className="certgroup" key={gi}>
                <Reveal as="h2" className="certgroup-title">{L(g.title,lang)}</Reveal>
                {banners.length ? (
                  <div className="certcols">
                    <div className="certcol-banners">{banners.map(renderCard)}</div>
                    <div className="certcol-tiles">{tiles.map(renderCard)}</div>
                  </div>
                ) : (
                  <div className="certgrid">{g.certs.map(renderCard)}</div>
                )}
              </div>
            );
          })}
          {s.awards && s.awards.length ? (
            <div className="awards-sec">
              <Reveal className="sec-head">
                <span className="eyebrow">{L(s.awardsHead.eyebrow,lang)}</span>
                <h2 className="h-sec" style={{marginTop:'14px'}}>{L(s.awardsHead.title,lang)}</h2>
              </Reveal>
              <div className="awardgrid">
                {s.awards.map((a,ai)=>(
                  <Reveal className="awardcard" key={ai} delay={(ai%4)*60}>
                    {a.img
                      ? <div className="award-img"><img src={ASSET(a.img)} alt={L(a.name,lang)}/></div>
                      : <span className="award-ico"><Icon name="trophy"/></span>}
                    <div className="award-body">
                      {a.year ? <span className="award-year mono">{a.year}</span> : null}
                      <h3>{L(a.name,lang)}</h3>
                      <span className="award-org">{L(a.org,lang)}</span>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          ) : null}
          <Reveal as="p" className="certnote mono">{L(s.note,lang)}</Reveal>
        </div>
      </section>
    </main>
  );
}