const { Button, Icon } = window.CoolZoneSolutionDesignSystem_12e696;

function Hero({ t }) {
  return (
    <section className="hero-v2" id="hero">
      <div className="hero-v2-glow" aria-hidden="true"></div>
      <div className="container hero-v2-grid">
        <div>
          <span className="eyebrow hero-v2-eyebrow">
            <span className="dot"></span>
            <EditableText fieldKey="heroEyebrow">{t.heroEyebrow}</EditableText>
          </span>
          <h1 className="hero-v2-title">
            <EditableText fieldKey="heroA">{t.heroA}</EditableText>
            <span className="hl"><EditableText fieldKey="heroHl1">{t.heroHl1}</EditableText></span>,{' '}
            <span className="hl"><EditableText fieldKey="heroHl2">{t.heroHl2}</EditableText></span>
            <EditableText fieldKey="heroTail">{t.heroTail}</EditableText>
          </h1>
          <p className="hero-v2-lead"><EditableText fieldKey="lead" multiline>{t.lead}</EditableText></p>
          <div className="hero-v2-actions">
            <Button variant="primary" href="#kontakt" icon="arrow" data-track="hero_cta_primary">
              <EditableText fieldKey="cta">{t.cta}</EditableText>
            </Button>
            <Button variant="ghost" href="project-check.html" data-track="hero_cta_secondary">
              <EditableText fieldKey="btn2">{t.btn2}</EditableText>
            </Button>
          </div>
          <ul className="hero-v2-trust">
            {t.trust.slice(0, 3).map((x, i) => (
              <li key={i}><Icon name="check" /><span>{x}</span></li>
            ))}
          </ul>
        </div>

        <div className="hero-v2-visual">
          <div className="hero-v2-card">
            <img className="hero-v2-art" src="assets/projects/heat-pump-unit.jpg?v=20260930i" alt="" />
          </div>
          <div className="hero-v2-badges">
            {t.chips.map((c, i) => (
              <div className="hero-v2-badge" key={i}>
                <span className="hero-v2-badge-value">{c[0]}</span>
                <span className="hero-v2-badge-label">{c[1]}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="hero-v2-ticker-wrap" aria-hidden="true">
        <div className="hero-v2-ticker-track">
          {[0, 1].map((rep) => (
            <React.Fragment key={rep}>
              {t.svc.map((s, i) => (
                <span className="hero-v2-ticker-item" key={rep + '-' + i}>
                  <span className="dot"></span>{s[0]}
                </span>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });