function Hero({ lang, onTalk }) {
  return (
    <section className="band band-cream hero-band" id="top">
      <div className="wrap">
        <div className="hero-grid">
          <div className="hero-left">
            <div>
              <div className="eyebrow eyebrow-dim">{t(COPY.hero.eye, lang)}</div>
              <div className="hero-script" style={{marginTop:"1rem"}}>
                We shift the<br/>
                <em>way businesses</em><br/>
                work.
              </div>
            </div>
            <h2 className="hero-h1">
              {lang === "de"
                ? <>KMUs brauchen keine weitere Digitalagentur. Sie brauchen <span className="u-copper">Partner,</span> die ihre Probleme wirklich verstehen.</>
                : <>SMEs don't need another digital agency. They need <span className="u-copper">partners</span> who genuinely understand their problems.</>}
            </h2>
            <p className="hero-sub">{t(COPY.hero.sub, lang)}</p>
            <div className="hero-cta">
              <button className="btn btn-copper" onClick={onTalk}>{t(COPY.hero.cta1, lang)}</button>
              <a href="#how" className="btn btn-ghost">{t(COPY.hero.cta2, lang)}</a>
            </div>
            <div className="hero-meta">
              <span>{lang === "de" ? "Kein Konzeptpapier" : "No concept paper"}</span>
              <span>·</span>
              <span>{lang === "de" ? "Gebaut von Operatoren" : "Built by operators"}</span>
              <span>·</span>
              <span>{lang === "de" ? "2 Wochen bis zum ersten Ergebnis" : "2 weeks to first result"}</span>
            </div>
          </div>
          <div className="hero-right">
            <div className="hero-photo photo-ph" style={{aspectRatio:"3/4",borderRadius:"14px 14px 0 0"}}>
              <span className="ph-label">Photo · Guy &amp; Simone · Innsbruck</span>
            </div>
            <div className="hero-stat-strip">
              <div>
                <div className="hero-stat-n">40%</div>
                <div className="hero-stat-label">{lang === "de" ? "Bürozeit für Admin — vorher." : "Office time on admin — before."}</div>
              </div>
              <div style={{width:"1px",background:"rgba(255,255,255,.1)",alignSelf:"stretch"}}></div>
              <div>
                <div className="hero-stat-n" style={{color:"#fff"}}>12h</div>
                <div className="hero-stat-label">{lang === "de" ? "pro Woche gespart — nachher." : "saved per week — after."}</div>
              </div>
            </div>
            <div className="hero-mark-float">
              <img src="assets/logos/shyft-logo-nobg.png" alt="" />
              <span>shyft</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;