/* ============================================================
   WEINBERG — Nachhaltigkeit + Warum Weinberg
   ============================================================ */

function Nachhaltigkeit({go, lang}){
  const s = CONTENT.nachhaltigkeit;
  return (
    <main>
      <PageHero green crumbs={L(s.hero.crumbs,lang)} title={L(s.hero.title,lang)} sub={L(s.hero.sub,lang)} bg={ASSET("assets/nachhaltigkeit-hero.jpg")} pos="center center" fitw/>

      {/* PILLARS */}
      <section className="section">
        <div className="wrap">
          <Reveal className="sec-head">
            <span className="eyebrow green">{L(s.pillarsHead.eyebrow,lang)}</span>
            <h2 className="h-sec" style={{marginTop:'16px'}}>{L(s.pillarsHead.title,lang)}</h2>
          </Reveal>
          <div className="pillars">
            {s.pillars.map((p,i)=>(
              <Reveal className="pillar" key={i} delay={(i%4)*60}>
                <span className="ico"><Icon name={p.ico}/></span>
                <h3>{L(p.t,lang)}</h3>
                <p>{L(p.d,lang)}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* OWN EXAMPLE — geothermal office */}
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <Reveal className="oeband">
            <div className="oeband-photo">
              <img src={ASSET("assets/nachhaltigkeit-hero.jpg")} alt={L(s.ownExample.title,lang)} loading="lazy"/>
              <span className="oeband-tag mono"><Icon name="leaf" style={{width:14,height:14}}/>{L(s.ownExample.eyebrow,lang)} · {L(s.ownExample.stat,lang)}</span>
            </div>
            <div className="oeband-content">
              <h3>{L(s.ownExample.title,lang)}</h3>
              <p>{L(s.ownExample.text,lang)}</p>
              {s.ownExample.energy ? (
                <div className="oeband-metrics">
                  {s.ownExample.energy.map((e,i)=>(
                    <div className="oeband-metric" key={i}>
                      <div className="n">{e.n}</div>
                      <div className="l">{L(e.l,lang)}</div>
                    </div>
                  ))}
                </div>
              ) : null}
            </div>
          </Reveal>
        </div>
      </section>

      {/* CBAM INFOBOX removed */}

      {/* BREEAM REFERENCES */}
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <Reveal className="sec-head">
            <span className="eyebrow green">{L(s.breeam.eyebrow,lang)}</span>
            <h2 className="h-sec" style={{marginTop:'16px'}}>{L(s.breeam.title,lang)}</h2>
            <p className="sec-lead" style={{marginTop:'18px'}}>{L(s.breeam.intro,lang)}</p>
          </Reveal>
          <div className="breeam-grid" style={{marginTop:'34px'}}>
            {s.breeam.projects.map((p,i)=>(
              <Reveal as="article" className="breeam-card" key={i} delay={(i%3)*70}>
                <div className="breeam-photo">
                  <img src={ASSET(p.img)} alt={L(p.name,lang)} loading="lazy"/>
                  <span className="breeam-badge mono"><Icon name="leaf" style={{width:13,height:13}}/>BREEAM</span>
                </div>
                <div className="breeam-body">
                  <h3>{L(p.name,lang)}</h3>
                  <dl className="breeam-meta">
                    <div><dt>{L(s.breeam.meta.builder,lang)}</dt><dd>{L(p.builder,lang)}</dd></div>
                    <div><dt>{L(s.breeam.meta.location,lang)}</dt><dd>{L(p.location,lang)}</dd></div>
                    <div><dt>{L(s.breeam.meta.year,lang)}</dt><dd>{L(p.year,lang)}</dd></div>
                    <div><dt>{L(s.breeam.meta.area,lang)}</dt><dd>{L(p.area,lang)}</dd></div>
                    <div><dt>{L(s.breeam.meta.fn,lang)}</dt><dd>{L(p.fn,lang)}</dd></div>
                  </dl>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <GreenCta go={go} lang={lang}/>
    </main>
  );
}

function GreenCta({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">
          <div className="body">
            <span className="eyebrow green" style={{color:'#bfe0c1'}}>{lang==='hu'?'CO₂-dokumentáció':lang==='en'?'CO₂ documentation':'CO₂-Dokumentation'}</span>
            <h2>{lang==='hu'?'CBAM-igazolásra van szüksége projektjéhez?':lang==='en'?'Need CBAM evidence for your project?':'Brauchen Sie CBAM-Nachweise für Ihr Projekt?'}</h2>
            <p>{lang==='hu'?'Minden szükséges kibocsátási adatot és igazolást határidőre biztosítunk. Keressen minket.':lang==='en'?'We provide all required emissions data and evidence on time. Get in touch.':'Wir stellen alle erforderlichen Emissionsdaten und Nachweise fristgerecht bereit. Sprechen Sie uns an.'}</p>
            <a className="btn btn-white" href={HREF('kontakt')} onClick={handle('kontakt',{tab:'kontakt'})} style={{color:'#2E7D32'}}>{L(CONTENT.ui.buttons.kontakt,lang)} <Icon name="arrow" className="arr"/></a>
          </div>
          <div className="right"><Ph green src={ASSET("assets/nachhaltigkeit-cbam.jpg")} pos="center 45%" label={lang==='hu'?'EPD dokumentáció':lang==='en'?'EPD documentation':'EPD Dokumentation'}/></div>
        </Reveal>
      </div>
    </section>
  );
}

function Warum({go, lang}){
  const s = CONTENT.warum;
  const valueIcons = {leaf:'leaf',shield:'shield',gear:'gear',people:'people'};
  const csrIcons = ['gear','people','star','shield'];
  return (
    <main>
      <PageHero crumbs={L(s.hero.crumbs,lang)} title={L(s.hero.title,lang)} sub={L(s.hero.sub,lang)} bg={ASSET("assets/warum-hero.jpg")} pos="center 55%"/>

      {/* ARGUMENTS */}
      <section className="section">
        <div className="wrap">
          <Reveal className="sec-head">
            <span className="eyebrow">{L(s.argsHead.eyebrow,lang)}</span>
            <h2 className="h-sec" style={{marginTop:'16px'}}>{L(s.argsHead.title,lang)}</h2>
          </Reveal>
          <div className="arguments">
            {s.args.map((a,i)=>(
              <Reveal className="argrow" key={i}>
                <div className="big">{L(a.big,lang)}</div>
                <div>
                  <h3>{L(a.t,lang)}</h3>
                  <p>{L(a.d,lang)}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* OWNER QUOTE */}
      <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(s.quote.label,lang)}/></div>
            <div className="body">
              <span className="eyebrow">{L(s.quote.eyebrow,lang)}</span>
              <span className="mark-q">”</span>
              <blockquote>{L(s.quote.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(s.quote.name,lang)}</b><span>{L(s.quote.role,lang)}</span></div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* VALUES */}
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <Reveal className="sec-head" style={{textAlign:'center',margin:'0 auto 44px'}}>
            <span className="eyebrow">{L(s.valuesHead.eyebrow,lang)}</span>
            <h2 className="h-sec" style={{marginTop:'16px'}}>{L(s.valuesHead.title,lang)}</h2>
          </Reveal>
          <Reveal className="values">
            {s.values.map((v,i)=>(
              <div className="valuecard" key={i}>
                <span className="ico"><Icon name={valueIcons[v.ico]||'star'}/></span>
                <h3>{L(v.t,lang)}</h3>
                {(()=>{const t=L(v.d,lang);const m=t.match(/^(.*?[.?!])\s+([\s\S]*)$/);return m?(<><p className="vlead">{m[1]}</p><p>{m[2]}</p></>):<p>{t}</p>;})()}
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* CSR */}
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <Reveal className="sec-head">
            <span className="eyebrow">{L(s.csrHead.eyebrow,lang)}</span>
            <h2 className="h-sec" style={{marginTop:'16px'}}>{L(s.csrHead.title,lang)}</h2>
          </Reveal>
          <Reveal className="csrlist">
            {s.csr.map((c,i)=>(
              <div className="csritem" key={i}>
                <span className="ico"><Icon name={csrIcons[i]}/></span>
                <div><b>{L(c.t,lang)}</b><p>{L(c.d,lang)}</p></div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* FAMILY-FRIENDLY BAND */}
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <Reveal className="familieband">
            <div className="fb-photo">
              <img src={ASSET("assets/warum-familie.jpg")} alt={L(s.familie.title,lang)} loading="lazy"/>
            </div>
            <div className="fb-content">
              <span className="eyebrow">{L(s.familie.eyebrow,lang)}</span>
              <h2 className="h-sec">{L(s.familie.title,lang)}</h2>
              <p>{L(s.familie.text,lang)}</p>
            </div>
          </Reveal>
        </div>
      </section>

      <CtaStrip go={go} lang={lang}/>
    </main>
  );
}

Object.assign(window, { Nachhaltigkeit, Warum, GreenCta });