/* global React */
function Hero({ onPrimary, onSecondary }) {
  return (
    <section className="dp2-hero" id="home">
      <HeroBackdrop />
      <div className="dp2-hero__inner">
        <div className="dp2-hero__left">
          <span className="dp2-eyebrow">
            <span className="dp2-eyebrow__dot">14</span>
            <strong>Heute neu eingetroffen</strong> · 14 Posten
          </span>

          <h1 className="dp2-hero__title">
            Restposten,<br/>
            <span className="dp2-cmyk">knallhart</span>
            {' '}<span className="dp2-amp">&amp;</span>{' '}
            <span className="dp2-pulse">ehrlich</span><br/>
            kalkuliert.
          </h1>

          <p className="dp2-hero__sub">
            Markenware aus <strong>Insolvenzen, Überproduktion und Lagerauflösung</strong> —
            direkt vom Großhändler. Täglich neue Posten, geprüfte Qualität,
            faire Preise für Händler und Privatkäufer.
          </p>

          <div className="dp2-hero__cta">
            <button className="dp2-btn dp2-btn--primary" onClick={onPrimary}>
              Angebote entdecken
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </button>
            <button className="dp2-btn dp2-btn--ghost" onClick={onSecondary}>
              Wie wir arbeiten
            </button>
          </div>

          <div className="dp2-hero__stats">
            <div className="dp2-stat">
              <div className="dp2-stat__num"><span className="dp2-stat__accent">−70</span>%</div>
              <div className="dp2-stat__label">unter UVP<br/>im Schnitt</div>
            </div>
            <div className="dp2-stat">
              <div className="dp2-stat__num"><span className="dp2-stat__accent">15</span>+</div>
              <div className="dp2-stat__label">Jahre direkt<br/>am Markt</div>
            </div>
            <div className="dp2-stat">
              <div className="dp2-stat__num"><span className="dp2-stat__accent">500</span>+</div>
              <div className="dp2-stat__label">Posten<br/>pro Jahr</div>
            </div>
            <div className="dp2-stat">
              <div className="dp2-stat__num"><span className="dp2-stat__accent">48</span>h</div>
              <div className="dp2-stat__label">Versand<br/>DE/AT/CH</div>
            </div>
          </div>
        </div>

        <div className="dp2-hero__right">
          <div className="dp2-hero__visual">
            <img className="dp2-hero__fox" src="assets/SparFuchs.png" alt="SparFuchs" />

            <div className="dp2-hero__badge dp2-hero__badge--b1">
              <div className="ico" style={{ background: '#5DA83F' }}>✓</div>
              <div><b>Geprüfte Qualität</b><span>OVP, mängelfrei</span></div>
            </div>
            <div className="dp2-hero__badge dp2-hero__badge--b2">
              <div className="ico" style={{ background: '#E63946' }}>%</div>
              <div><b>Bis −70%</b><span>unter UVP</span></div>
            </div>
            <div className="dp2-hero__badge dp2-hero__badge--b3">
              <div className="ico" style={{ background: '#00AEE8' }}>↻</div>
              <div><b>Täglich neu</b><span>frische Posten</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;