function Hero({ ctaLabel, onScrollToConcerns, onBook }) {
  return (
    <section style={{ position: "relative", overflow: "hidden" }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        padding: "18px 20px 56px",
      }}>
        {/* top meta bar */}
        <div style={{ marginBottom: 22 }}>
          <div className="eyebrow"><span className="dot" />Est. 2017 · Berlin Charlottenburg</div>
        </div>

        {/* Headline */}
        <div style={{ maxWidth: 780 }}>
          <h1 className="serif" style={{
            fontSize: "clamp(40px, 11vw, 96px)",
            lineHeight: .95, fontWeight: 300,
            letterSpacing: "-.015em",
            color: "var(--ink)",
            textWrap: "balance",
            paddingBottom: ".08em",
          }}>
            Ihre Haut,{" "}
            <span className="italic" style={{ color: "var(--rose-deep)" }}>
              behutsam
            </span>
            {" "}wieder in{" "}
            <span className="italic">Balance</span>.
          </h1>
        </div>

        {/* Hero image — ABOVE text */}
        <div style={{
          marginTop: 28,
          position: "relative",
          aspectRatio: "5/4",
          width: "100%",
          maxWidth: 520,
          overflow: "hidden",
          background: "#E6D8C2",
        }}>
          <img
            src="assets/hero.webp"
            alt="Natürliche Hautpflege"
            style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            loading="eager"
          />
          <div style={{
            position: "absolute", bottom: -18, left: -14,
            width: 88, height: 88, borderRadius: "50%",
            background: "var(--cream)",
            border: "1px solid var(--rose)",
            display: "grid", placeItems: "center", textAlign: "center",
            boxShadow: "0 10px 40px -20px rgba(28,24,21,.3)",
          }}>
            <div>
              <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 24, color: "var(--rose-deep)", lineHeight: 1 }}>M</div>
              <div style={{ fontSize: 7.5, letterSpacing: ".24em", color: "var(--ink-3)", marginTop: 4 }}>MAISON</div>
              <div style={{ fontSize: 7.5, letterSpacing: ".24em", color: "var(--ink-3)" }}>VELOURS</div>
            </div>
          </div>
        </div>

        {/* Text below image */}
        <div style={{ marginTop: 36, maxWidth: 520 }}>
          <p style={{
            fontSize: "clamp(14.5px, 1.6vw, 17px)",
            color: "var(--ink-2)",
            lineHeight: 1.6,
          }}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation.
          </p>

          <div style={{ marginTop: 26, display: "flex", flexWrap: "wrap", gap: 10 }}>
            <button
              onClick={onBook}
              style={{
                background: "var(--ink)", color: "var(--cream)",
                padding: "15px 22px",
                fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase",
                borderRadius: 999,
                display: "inline-flex", alignItems: "center", gap: 10,
              }}
            >
              <WAIcon size={14} color="var(--cream)" />
              {ctaLabel}
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;