// Quote.jsx — full-bleed founder quote, image left + quote right
function Quote() {
  return (
    <section
      data-screen-label="Quote"
      style={{
        background: "var(--bg)", color: "var(--fg)",
        padding: "0",
      }}
    >
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1.2fr",
        minHeight: "80vh",
      }}>
        {/* Image */}
        <div style={{
          backgroundImage: "url('assets/interior-detail-03.jpg')",
          backgroundSize: "cover", backgroundPosition: "center",
        }} />

        {/* Quote panel */}
        <div style={{
          padding: "144px 96px", display: "flex",
          flexDirection: "column", justifyContent: "center",
          background: "var(--bg)",
        }}>
          <div style={{
            fontFamily: "var(--font-sans)", fontSize: 11,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: "var(--fg-muted)", marginBottom: 48,
            display: "flex", alignItems: "center", gap: 16,
          }}>
            <span style={{ width: 28, height: 1, background: "var(--border-strong)" }} />
            Eine Notiz der Gründerin
          </div>

          <blockquote style={{
            margin: 0,
            fontFamily: "var(--font-serif)", fontWeight: 300,
            fontStyle: "italic",
            fontSize: "clamp(28px, 2.6vw, 44px)",
            lineHeight: 1.32, letterSpacing: "0.005em",
            color: "var(--fg)",
          }}>
            <span style={{
              fontSize: "1.4em", lineHeight: 0,
              fontStyle: "normal", color: "var(--fg-muted)",
              display: "inline-block", transform: "translateY(0.18em)",
              marginRight: 6,
            }}>“</span>
            Ein Raum gelingt dann, wenn man ihn betritt und die Schultern
            sinken lässt. Alles andere — Material, Licht, Geste — arbeitet
            auf diesen einen Moment hin.
          </blockquote>

          <div style={{
            marginTop: 56, display: "flex", alignItems: "center", gap: 20,
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: "50%",
              background: "var(--ferella-greige)",
              backgroundImage: "url('assets/interior-detail-01.jpg')",
              backgroundSize: "cover", backgroundPosition: "center",
            }} />
            <div>
              <div style={{
                fontFamily: "var(--font-serif)", fontSize: 18,
                color: "var(--fg)",
              }}>Elvira Schröter</div>
              <div style={{
                fontFamily: "var(--font-sans)", fontSize: 10,
                letterSpacing: "0.32em", textTransform: "uppercase",
                color: "var(--fg-muted)", marginTop: 6,
              }}>Founder &amp; Creative Direction</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Quote = Quote;