function MazzuCTA() {
  const { Reveal, EditorialMark, WhatsappIcon, MapPinIcon } = window.MazzuShared;

  return (
    <section id="kontakt" style={{
      position: "relative",
      paddingTop: "clamp(128px, 14vw, 176px)",
      paddingBottom: "clamp(128px, 14vw, 176px)",
      borderTop: "1px solid hsla(0,0%,100%,0.08)",
      overflow: "hidden",
    }}>
      <div className="ken-burns" style={{
        position: "absolute", inset: 0, zIndex: 0,
        backgroundImage: "url('images/store-01.jpg')",
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}/>
      <div style={{
        position: "absolute", inset: 0, zIndex: 1,
        background: "linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.85) 100%)"
      }}/>
      <div style={{
        position: "absolute", top: 0, left: 0, right: 0, height: 160,
        background: "linear-gradient(to bottom, hsl(var(--background)), transparent)", zIndex: 2
      }}/>
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0, height: 200,
        background: "linear-gradient(to top, hsl(var(--background)), transparent)", zIndex: 2
      }}/>

      <div style={{
        position: "relative", zIndex: 10,
        maxWidth: 880, margin: "0 auto",
        textAlign: "center",
        padding: "0 clamp(20px,6vw,80px)"
      }}>
        <Reveal style={{ display: "flex", justifyContent: "center", marginBottom: 28 }}>
          <EditorialMark/>
        </Reveal>

        <Reveal delay={0.05} as="h2" style={{
          fontSize: "clamp(40px, 7vw, 96px)",
          fontWeight: 500,
          letterSpacing: "-1.5px",
          lineHeight: 1.05,
          marginBottom: 24,
          textWrap: "balance"
        }}>
          Komm <span className="font-serif" style={{ fontStyle: "italic", fontWeight: 400 }}>vorbei</span>.
        </Reveal>

        <Reveal delay={0.12} as="p" className="text-muted-foreground" style={{
          fontSize: 18, lineHeight: 1.55, maxWidth: 580, margin: "0 auto 14px",
          textWrap: "pretty"
        }}>
          Frankfurter Straße 55–57 · 61118 Bad Vilbel
        </Reveal>
        <Reveal delay={0.18} as="p" style={{
          fontSize: 13, color: "hsla(0,0%,100%,0.55)", marginBottom: 40, letterSpacing: "0.4px"
        }}>
          Mo–Fr 10–19 Uhr · Sa 10–18 Uhr · Termine darüber hinaus auf Anfrage
        </Reveal>

        <Reveal delay={0.24} style={{
          display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap"
        }}>
          <a href="tel:+4961011234567" className="bg-foreground text-background" style={{
            border: "none", borderRadius: 8,
            padding: "14px 32px",
            fontSize: 13, fontWeight: 600, letterSpacing: "1px", textTransform: "uppercase",
            cursor: "pointer", transition: "transform .15s ease",
            display: "inline-flex", alignItems: "center", gap: 10, textDecoration: "none"
          }}
            onMouseEnter={(e) => e.currentTarget.style.transform = "scale(1.03)"}
            onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"}
          >
            <MapPinIcon size={14}/>
            Termin vereinbaren
          </a>
          <a
            href="https://wa.me/4961011234567"
            target="_blank" rel="noopener noreferrer"
            className="liquid-glass text-foreground"
            style={{
              borderRadius: 8,
              padding: "14px 32px",
              fontSize: 13, fontWeight: 600, letterSpacing: "1px", textTransform: "uppercase",
              cursor: "pointer",
              color: "hsl(var(--foreground))",
              transition: "transform .15s ease",
              display: "inline-flex", alignItems: "center", gap: 10, textDecoration: "none"
            }}
            onMouseEnter={(e) => e.currentTarget.style.transform = "scale(1.03)"}
            onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"}
          >
            <WhatsappIcon size={14}/>
            Per WhatsApp
          </a>
        </Reveal>
      </div>
    </section>
  );
}

function MazzuFooter() {
  const { Wordmark } = window.MazzuShared;
  return (
    <footer style={{
      padding: "56px clamp(20px,6vw,112px) 44px",
      display: "grid",
      gridTemplateColumns: "1fr auto 1fr",
      alignItems: "center",
      gap: 24,
      borderTop: "1px solid hsla(0,0%,100%,0.06)",
    }}>
      <div className="text-muted-foreground" style={{ fontSize: 13 }}>
        © 2026 MAZZU MAZZU · com.mode GmbH
      </div>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <Wordmark size="sm"/>
      </div>
      <div style={{ display: "flex", gap: 24, justifyContent: "flex-end" }}>
        {["Impressum", "Datenschutz", "Kontakt"].map((l) => (
          <a key={l} href="#" className="text-muted-foreground hover-foreground" style={{ fontSize: 13 }}>
            {l}
          </a>
        ))}
      </div>
    </footer>
  );
}

window.MazzuCTA = MazzuCTA;
window.MazzuFooter = MazzuFooter;