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

  // Material-style outline icons (white strokes)
  const ConsultIcon = (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 11.5a8.4 8.4 0 0 1-13.7 6.5L3 19l1-4.3A8.4 8.4 0 1 1 21 11.5z"/>
      <line x1="8" y1="11" x2="8.01" y2="11"/>
      <line x1="12" y1="11" x2="12.01" y2="11"/>
      <line x1="16" y1="11" x2="16.01" y2="11"/>
    </svg>
  );
  const HangerIcon = (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 7a2 2 0 1 1 2-2"/>
      <path d="M12 8.5l-9 7c-.7.6-.3 1.5.6 1.5h16.8c.9 0 1.3-.9.6-1.5l-9-7"/>
    </svg>
  );
  const CoffeeIcon = (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 8h14v6a5 5 0 0 1-5 5h-4a5 5 0 0 1-5-5V8z"/>
      <path d="M18 9h2a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-2"/>
      <path d="M7 4c0 1 1 1 1 2s-1 1-1 2"/>
      <path d="M11 4c0 1 1 1 1 2s-1 1-1 2"/>
    </svg>
  );

  const cards = [
    {
      icon: ConsultIcon,
      title: "Stilberatung",
      tags: ["Kein Kaufzwang", "Persönlich", "Nach Wunsch", "Auch sonntags"],
      body: "Wir nehmen uns Zeit für dich — 30 Minuten oder zwei Stunden. Ob ein Stück oder ein ganzer Look: Stil entsteht im Gespräch, nicht im Regal."
    },
    {
      icon: HangerIcon,
      title: "Kuratierte Labels",
      tags: ["25+ Designer", "Damen & Herren", "Saison-Edit", "Premium"],
      body: "Stone Island, Isabel Marant, MM6 Maison Margiela, A.P.C., Arc'teryx Veilance. Eine Auswahl mit Haltung — kein Beliebigkeits-Mix."
    },
    {
      icon: CoffeeIcon,
      title: "MAZZU Bar",
      tags: ["Espresso", "Aperitif", "Lounge", "Im Store"],
      body: "Eine echte Bar mitten im Verkaufsraum. Anprobieren, Pause machen, weitermachen — Mode darf langsam sein."
    }
  ];

  return (
    <section style={{
      position: "relative",
      minHeight: "100vh",
      paddingTop: "clamp(96px, 14vw, 144px)",
      paddingBottom: "clamp(96px, 14vw, 144px)",
      paddingLeft: "clamp(20px, 5vw, 80px)",
      paddingRight: "clamp(20px, 5vw, 80px)",
      borderTop: "1px solid hsla(0,0%,100%,0.06)",
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <Reveal style={{ marginBottom: 24 }}>
          <span className="font-body" style={{
            fontSize: 13, color: "hsla(0,0%,100%,0.8)", fontWeight: 400
          }}>// Capabilities</span>
        </Reveal>

        <Reveal delay={0.05} as="h2" className="font-heading" style={{
          fontStyle: "italic",
          color: "white",
          fontSize: "clamp(48px, 8.5vw, 116px)",
          lineHeight: 0.9,
          letterSpacing: "-3px",
          marginBottom: 64
        }}>
          Beratung<br/>neu gedacht.
        </Reveal>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: 24,
          marginTop: 64
        }}>
          {cards.map((c, i) => (
            <Reveal key={c.title} delay={0.1 + i * 0.08} className="liquid-glass" style={{
              padding: 24, borderRadius: 20, minHeight: 360,
              display: "flex", flexDirection: "column"
            }}>
              <div style={{
                display: "flex", alignItems: "flex-start",
                justifyContent: "space-between", gap: 16
              }}>
                {/* Icon tile */}
                <div className="liquid-glass" style={{
                  width: 44, height: 44, borderRadius: 12,
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  color: "white",
                  flexShrink: 0
                }}>
                  {c.icon}
                </div>

                {/* Tags */}
                <div style={{
                  display: "flex", flexWrap: "wrap", justifyContent: "flex-end",
                  gap: 6, maxWidth: "70%"
                }}>
                  {c.tags.map((t) => (
                    <span key={t} className="liquid-glass font-body" style={{
                      borderRadius: 9999, padding: "4px 10px",
                      fontSize: 11, color: "hsla(0,0%,100%,0.9)",
                      whiteSpace: "nowrap", fontWeight: 400
                    }}>{t}</span>
                  ))}
                </div>
              </div>

              <div style={{ flex: 1 }}/>

              <div style={{ marginTop: 24 }}>
                <h3 className="font-heading" style={{
                  fontStyle: "italic", color: "white",
                  fontSize: "clamp(28px, 3vw, 38px)",
                  lineHeight: 1, letterSpacing: "-1px",
                  marginBottom: 12
                }}>{c.title}</h3>
                <p className="font-body" style={{
                  fontSize: 14, fontWeight: 300, lineHeight: 1.45,
                  color: "hsla(0,0%,100%,0.9)",
                  maxWidth: "34ch",
                  textWrap: "pretty"
                }}>{c.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.MazzuExperience = MazzuExperience;