/* global React */
function Hero() {
  return (
    <section className="fw-hero" id="top">
      <div className="fw-container fw-hero__inner">
        <div className="fw-hero__copy">
          <span className="fw-eyebrow">Fotografiekunst — als abonnement</span>
          <h1 className="fw-display">Wissel je kunst.<br/><em className="fw-display__accent">Houd je ruimte fris.</em></h1>
          <p className="fw-lede">Dé service voor hoogwaardige fotografiekunst aan de muur die je kantoor fris en representatief houdt.</p>
          <div className="fw-hero__cta">
            <a href="#abonnementen" className="fw-btn fw-btn--primary fw-btn--lg">Ontdek onze abonnementen <span aria-hidden="true">→</span></a>
            <a href="#contact" className="fw-btn fw-btn--ghost fw-btn--lg">Vraag direct een offerte aan</a>
          </div>
        </div>
        <div className="fw-hero__art">
          <div className="fw-frame">
            <img src="uploads/Japanski-1-683x1024.webp" alt="Voorbeeld van een FrisseWand doek — Japonisme fotografie" loading="eager" />
          </div>
          <div className="fw-hero__art-meta">
            <span className="fw-mono">200×100 cm</span>
            <span className="fw-meta">uit de collectie · "Japonisme"</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;