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

  const timeline = [
    { year: "2009", note: "Matthias eröffnet MAZZU MAZZU in Bad Vilbel — 80 m², ein paar Labels, eine Idee." },
    { year: "2014", note: "Umzug auf 300 m². Erste Bar im Store. Premium-Labels kommen dazu." },
    { year: "2019", note: "Frauen- und Männerwelt unter einem Dach. Schuster- und Schneiderservice." },
    { year: "2026", note: "17 Jahre — und Matthias steht noch immer fast täglich selbst im Laden." },
  ];

  return (
    <section id="story" style={{
      position: "relative",
      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)",
      background: "#000",
      overflow: "hidden"
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <Reveal style={{ marginBottom: 20 }}>
          <span className="font-body" style={{
            fontSize: 13, color: "hsla(0,0%,100%,0.8)"
          }}>// Story</span>
        </Reveal>

        <Reveal delay={0.05} as="h2" className="font-heading" style={{
          fontStyle: "italic",
          color: "white",
          fontSize: "clamp(44px, 7.5vw, 104px)",
          lineHeight: 0.9,
          letterSpacing: "-3px",
          marginBottom: 72,
          maxWidth: 1100,
          textWrap: "balance"
        }}>
          Hinter dem Tresen:<br/>Matthias Kozera.
        </Reveal>

        <div style={{
          display: "grid",
          gridTemplateColumns: "minmax(280px, 5fr) minmax(300px, 6fr)",
          gap: "clamp(32px, 5vw, 80px)",
          alignItems: "start"
        }} className="story-grid">

          {/* LEFT: Portrait */}
          <Reveal delay={0.1} style={{
            position: "relative",
          }}>
            <div style={{
              position: "relative",
              borderRadius: 20,
              overflow: "hidden",
              aspectRatio: "3 / 4",
              background: "#d6c5ad",
              boxShadow: "0 60px 120px -40px rgba(0,0,0,0.8), inset 0 0 0 1px hsla(0,0%,100%,0.08)"
            }}>
              <img
                src="images/matthias.jpg"
                alt="Matthias Kozera, Inhaber von MAZZU MAZZU"
                style={{
                  width: "100%", height: "100%", objectFit: "cover", display: "block"
                }}
              />
              {/* Caption tag */}
              <div className="liquid-glass" style={{
                position: "absolute",
                bottom: 16, left: 16,
                padding: "8px 14px",
                borderRadius: 9999,
                display: "inline-flex", alignItems: "center", gap: 10,
                color: "rgba(0,0,0,0.85)",
                background: "rgba(255,255,255,0.65)",
                backdropFilter: "blur(6px)",
                WebkitBackdropFilter: "blur(6px)",
                boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.5)"
              }}>
                <span style={{
                  width: 6, height: 6, borderRadius: 9999, background: "rgba(0,0,0,0.6)"
                }}/>
                <span className="font-body" style={{ fontSize: 11, letterSpacing: "1.5px", textTransform: "uppercase", fontWeight: 500 }}>
                  Matthias Kozera · Inhaber
                </span>
              </div>
            </div>
          </Reveal>

          {/* RIGHT: story copy + timeline + quote */}
          <Reveal delay={0.18} style={{
            display: "flex", flexDirection: "column", gap: 32, paddingTop: 8
          }}>
            <p className="font-body" style={{
              fontSize: "clamp(18px, 2.1vw, 24px)",
              fontWeight: 300,
              lineHeight: 1.45,
              color: "white",
              textWrap: "pretty",
              maxWidth: 600
            }}>
              2009 öffnete Matthias in Bad Vilbel einen Laden, der anders sein sollte:
              keine Brand-Filiale, keine austauschbare Auswahl, kein Verkaufsdruck.
              Stattdessen kuratierte Labels, eine Bar — und vor allem eine Person,
              die sich für dich Zeit nimmt.
            </p>

            <p className="font-body" style={{
              fontSize: 15, fontWeight: 300, lineHeight: 1.6,
              color: "hsla(0,0%,100%,0.78)", maxWidth: 580
            }}>
              17 Jahre später ist MAZZU MAZZU eine Institution im Rhein-Main-Gebiet.
              Die Bar steht noch. Die Auswahl ist tiefer. Und Matthias ist immer noch
              dein erster Ansprechpartner — meistens persönlich.
            </p>

            {/* Pull quote */}
            <div style={{
              borderLeft: "2px solid hsla(0,0%,100%,0.3)",
              paddingLeft: 24,
              marginTop: 4
            }}>
              <div className="font-heading" style={{
                fontStyle: "italic",
                fontSize: "clamp(22px, 2.8vw, 32px)",
                lineHeight: 1.2,
                color: "white",
                letterSpacing: "-0.5px",
                marginBottom: 14,
                textWrap: "balance"
              }}>
                "Mode ist nicht, was passt. Mode ist, was zu dir passt."
              </div>
              <div className="font-body" style={{
                fontSize: 11, letterSpacing: "2px", textTransform: "uppercase",
                color: "hsla(0,0%,100%,0.5)"
              }}>
                Matthias Kozera
              </div>
            </div>

            {/* Timeline */}
            <div style={{
              marginTop: 12,
              borderTop: "1px solid hsla(0,0%,100%,0.1)"
            }}>
              {timeline.map((row) => (
                <div key={row.year} style={{
                  display: "grid",
                  gridTemplateColumns: "minmax(80px, 110px) 1fr",
                  gap: 24,
                  padding: "18px 0",
                  borderBottom: "1px solid hsla(0,0%,100%,0.08)",
                  alignItems: "baseline"
                }}>
                  <div className="font-heading" style={{
                    fontStyle: "italic",
                    fontSize: 24,
                    color: "white",
                    lineHeight: 1,
                    letterSpacing: "-0.5px"
                  }}>{row.year}</div>
                  <p className="font-body" style={{
                    fontSize: 14, fontWeight: 300, lineHeight: 1.5,
                    color: "hsla(0,0%,100%,0.85)"
                  }}>{row.note}</p>
                </div>
              ))}
            </div>

            <a href="#kontakt" className="liquid-glass-strong" style={{
              alignSelf: "flex-start",
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "12px 22px", borderRadius: 9999,
              color: "white", fontWeight: 500, fontSize: 13,
              textDecoration: "none",
              marginTop: 8
            }}>
              Termin bei Matthias
              <window.ArrowUpRight size={16}/>
            </a>
          </Reveal>
        </div>
      </div>

      <style>{`
        @media (max-width: 800px) {
          .story-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.MazzuStory = MazzuStory;