function MazzuBeratung() {
  const { Reveal } = window.MazzuShared;

  const numbers = [
    { k: "17", v: "Jahre Erfahrung" },
    { k: "25+", v: "kuratierte Labels" },
    { k: "1:1", v: "Termin nach Wunsch" },
    { k: "0 €", v: "Beratungsgebühr" },
  ];

  return (
    <section id="beratung" style={{
      position: "relative",
      paddingTop: "clamp(96px, 14vw, 176px)",
      paddingBottom: "clamp(96px, 14vw, 176px)",
      borderTop: "1px solid hsla(0,0%,100%,0.06)",
    }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        padding: "0 clamp(20px,6vw,80px)",
      }}>
        {/* Eyebrow */}
        <Reveal style={{ marginBottom: 32 }}>
          <span className="text-muted-foreground" style={{
            fontSize: 11, textTransform: "uppercase", letterSpacing: "3px"
          }}>Beratung · Im Mittelpunkt</span>
        </Reveal>

        {/* Headline + Lead */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr",
          gap: 48,
          alignItems: "end",
          marginBottom: 64
        }}>
          <Reveal delay={0.05} as="h2" style={{
            fontSize: "clamp(38px, 7vw, 104px)",
            fontWeight: 500,
            letterSpacing: "-2px",
            lineHeight: 0.98,
            textWrap: "balance",
            maxWidth: 1000,
          }}>
            Wir hören <span className="font-serif" style={{ fontStyle: "italic", fontWeight: 400 }}>zu</span>,
            schlagen <span className="font-serif" style={{ fontStyle: "italic", fontWeight: 400 }}>vor</span>,<br/>
            ändern <span className="font-serif" style={{ fontStyle: "italic", fontWeight: 400 }}>an</span>.
          </Reveal>
        </div>

        {/* Big editorial image — reception desk feel */}
        <Reveal delay={0.1} className="spotlight-frame" style={{ marginBottom: 64 }}>
          <div style={{ position: "relative", aspectRatio: "21 / 9", overflow: "hidden" }}>
            <img
              src="images/store-10.jpg"
              alt="MAZZU MAZZU Empfang — wir nehmen uns Zeit"
              style={{
                width: "100%", height: "100%", objectFit: "cover",
                filter: "saturate(0.9) brightness(0.95)"
              }}
            />
            <div style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%)"
            }}/>
            <div style={{
              position: "absolute", left: 32, bottom: 28, right: 32,
              display: "flex", justifyContent: "space-between", alignItems: "flex-end",
              flexWrap: "wrap", gap: 16,
              color: "hsla(0,0%,100%,0.92)"
            }}>
              <div style={{
                fontFamily: "'Instrument Serif', serif", fontStyle: "italic",
                fontSize: "clamp(20px, 2.6vw, 32px)", lineHeight: 1.1, maxWidth: 600
              }}>
                "Beratung ist Zeit, die wir uns nehmen — nicht ein Service-Punkt."
              </div>
              <div style={{
                fontSize: 11, letterSpacing: "2px", textTransform: "uppercase",
                color: "hsla(0,0%,100%,0.6)"
              }}>
                Matthias Kozera · Inhaber
              </div>
            </div>
          </div>
        </Reveal>

        {/* Two-column lead text + bullets */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: "clamp(32px, 5vw, 80px)",
          marginBottom: 80,
          alignItems: "start"
        }}>
          <Reveal delay={0.05} as="p" style={{
            fontSize: "clamp(20px, 2.3vw, 28px)",
            fontWeight: 500,
            lineHeight: 1.32,
            letterSpacing: "-0.4px",
            color: "hsl(var(--foreground))",
            maxWidth: 520,
            textWrap: "pretty"
          }}>
            Beratung ist kein Service-Punkt — es ist die Hauptsache. Wir nehmen uns Zeit, fragen nach, probieren mit dir aus.
            Ob 30 Minuten oder zwei Stunden — du gehst nicht raus, weil ein Termin endet.
          </Reveal>

          <Reveal delay={0.12} style={{
            display: "flex", flexDirection: "column", gap: 18,
            paddingTop: 6
          }}>
            {[
              "Termine auch außerhalb der Öffnungszeiten — auf Anfrage",
              "Kein Kaufzwang. Anprobe, Espresso, Gespräch.",
              "Änderungsschneiderei direkt im Haus",
              "Auf Wunsch: ganzer Look statt einzelner Teile",
            ].map((point) => (
              <div key={point} style={{
                display: "flex", gap: 14, alignItems: "baseline",
                borderTop: "1px solid hsla(0,0%,100%,0.08)",
                paddingTop: 16,
              }}>
                <span style={{
                  fontFamily: "'Instrument Serif', serif",
                  fontStyle: "italic",
                  color: "hsla(0,0%,100%,0.35)",
                  fontSize: 14,
                  minWidth: 18,
                }}>·</span>
                <span style={{
                  fontSize: 15,
                  color: "hsl(var(--hero-subtitle))",
                  lineHeight: 1.55
                }}>{point}</span>
              </div>
            ))}
          </Reveal>
        </div>

        {/* Numbers row */}
        <Reveal delay={0.2} style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
          gap: 32,
          borderTop: "1px solid hsla(0,0%,100%,0.1)",
          borderBottom: "1px solid hsla(0,0%,100%,0.1)",
          padding: "40px 0",
        }}>
          {numbers.map((n) => (
            <div key={n.v} style={{ textAlign: "left" }}>
              <div style={{
                fontFamily: "'Instrument Serif', serif",
                fontStyle: "italic",
                fontSize: "clamp(40px, 5vw, 64px)",
                lineHeight: 1,
                color: "hsl(var(--foreground))",
                marginBottom: 8
              }}>{n.k}</div>
              <div className="text-muted-foreground" style={{
                fontSize: 12, letterSpacing: "1.2px", textTransform: "uppercase"
              }}>{n.v}</div>
            </div>
          ))}
        </Reveal>

        {/* CTA row */}
        <Reveal delay={0.28} style={{
          marginTop: 56,
          display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center"
        }}>
          <a href="#kontakt" className="bg-foreground text-background" style={{
            border: "none", borderRadius: 9999,
            padding: "14px 28px", fontSize: 12, fontWeight: 600,
            letterSpacing: "1.2px", textTransform: "uppercase",
            cursor: "pointer", textDecoration: "none"
          }}>Termin vereinbaren</a>
          <a href="store.html" className="text-muted-foreground" style={{
            fontSize: 13, padding: "14px 0",
            letterSpacing: "0.3px",
            textDecoration: "underline",
            textDecorationColor: "hsla(0,0%,100%,0.2)",
            textUnderlineOffset: 6
          }}>Store ansehen →</a>
        </Reveal>
      </div>
    </section>
  );
}

window.MazzuBeratung = MazzuBeratung;