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

  const labels = [
    "Stone Island", "Isabel Marant", "Isabel Marant Étoile",
    "MM6 Maison Margiela", "A.P.C. Paris", "Arc'teryx Veilance",
    "Officine Générale", "Officine Creative", "Autry",
    "Dondup", "Drykorn", "Frame",
    "Barena", "Patou", "R13",
    "PT Torino", "Roberto Collina", "Dorothee Schumacher",
    "Extreme Cashmere", "Giorgio Brato", "Harris Wharf",
    "Hannes Roether", "Werkstatt:München", "Y-3"
  ];

  const services = [
    { title: "Stilberatung", desc: "Persönliche Termine — auch außerhalb der Öffnungszeiten, ohne Kaufzwang." },
    { title: "Änderungsschneiderei", desc: "Kooperation für perfekt sitzende Schnitte. Hosen, Sakkos, Kleider." },
    { title: "Schuh-Service", desc: "Pflege & Reparatur in Kooperation mit dem 1st Shoe Shine Salon Berlin." },
    { title: "MAZZU Bar", desc: "Kaffee, Drink, Pause. Eine Bar mitten im Store — Stil braucht Zeit." },
  ];

  return (
    <section id="labels" style={{
      paddingTop: "clamp(128px, 14vw, 176px)",
      paddingBottom: "clamp(128px, 14vw, 176px)",
      borderTop: "1px solid hsla(0,0%,100%,0.08)",
    }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        padding: "0 clamp(20px,6vw,80px)",
      }}>
        <Reveal style={{ marginBottom: 32 }}>
          <span className="text-muted-foreground" style={{
            fontSize: 11, textTransform: "uppercase", letterSpacing: "3px"
          }}>Portfolio</span>
        </Reveal>

        <Reveal delay={0.05} as="h2" style={{
          fontSize: "clamp(32px, 5.5vw, 80px)",
          fontWeight: 500,
          letterSpacing: "-1.5px",
          lineHeight: 1.05,
          marginBottom: 64,
          maxWidth: 1000,
          textWrap: "balance"
        }}>
          Über 25 <span className="font-serif" style={{ fontStyle: "italic", fontWeight: 400 }}>ausgewählte</span> Labels
        </Reveal>

        {/* Labels list — editorial typographic block */}
        <Reveal delay={0.1} style={{
          marginBottom: 96,
          borderTop: "1px solid hsla(0,0%,100%,0.1)",
          borderBottom: "1px solid hsla(0,0%,100%,0.1)",
          padding: "40px 0",
        }}>
          <div style={{
            display: "flex",
            flexWrap: "wrap",
            gap: "10px 28px",
            justifyContent: "flex-start",
            alignItems: "baseline"
          }}>
            {labels.map((l, i) => (
              <span key={l} style={{
                fontFamily: "'Instrument Serif', serif",
                fontSize: "clamp(20px, 2.4vw, 32px)",
                fontStyle: i % 3 === 1 ? "italic" : "normal",
                lineHeight: 1.1,
                color: "hsla(0,0%,100%,0.9)",
                whiteSpace: "nowrap"
              }}>
                {l}
                {i < labels.length - 1 && (
                  <span className="text-muted-foreground"
                        style={{ marginLeft: 28, opacity: 0.35, fontStyle: "normal", fontSize: "0.6em", verticalAlign: "middle" }}>·</span>
                )}
              </span>
            ))}
          </div>
        </Reveal>

        {/* Wide editorial photo — shoe wall */}
        <Reveal delay={0.15} style={{ marginBottom: 96, borderRadius: 20, overflow: "hidden", position: "relative" }}>
          <div style={{ position: "relative", aspectRatio: "3 / 1", overflow: "hidden", borderRadius: 20 }}>
            <img
              src="images/store-03.jpg"
              alt="MAZZU MAZZU Schuh-Wand und Lounge"
              style={{
                width: "100%", height: "100%", objectFit: "cover",
                filter: "saturate(0.9) brightness(0.92)"
              }}
            />
            <div style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%)"
            }}/>
          </div>
        </Reveal>

        {/* Services grid */}
        <Reveal delay={0.05} style={{ marginBottom: 16 }}>
          <span className="text-muted-foreground" style={{
            fontSize: 11, textTransform: "uppercase", letterSpacing: "3px"
          }}>Services</span>
        </Reveal>

        <Reveal delay={0.1} as="h3" style={{
          fontSize: "clamp(28px, 4vw, 56px)",
          fontWeight: 500,
          letterSpacing: "-1px",
          lineHeight: 1.1,
          marginBottom: 56,
          maxWidth: 900,
        }}>
          Alles für ein <span className="font-serif" style={{ fontStyle: "italic", fontWeight: 400 }}>perfekt</span> sitzendes Stück.
        </Reveal>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
          gap: 32
        }}>
          {services.map((f, i) => (
            <Reveal key={f.title} delay={0.12 + i * 0.06}>
              <div style={{
                fontFamily: "'Instrument Serif', serif",
                fontStyle: "italic",
                fontSize: 13,
                color: "hsla(0,0%,100%,0.4)",
                marginBottom: 10
              }}>
                0{i + 1}
              </div>
              <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 10 }}>{f.title}</div>
              <p className="text-muted-foreground" style={{ fontSize: 14, lineHeight: 1.6, textWrap: "pretty" }}>
                {f.desc}
              </p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.MazzuLabels = MazzuLabels;