// Studio.jsx — manifesto / about, two-column with portrait + numbered tenets
function Studio() {
  return (
    <section
      id="studio"
      data-screen-label="Studio"
      style={{
        background: "var(--bg)", color: "var(--fg)",
        padding: "176px 56px",
      }}
    >
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        {/* Top eyebrow */}
        <div style={{
          display: "grid", gridTemplateColumns: "200px 1fr",
          gap: 64, alignItems: "baseline", marginBottom: 88,
        }}>
          <div style={{
            fontFamily: "var(--font-sans)", fontSize: 11,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: "var(--fg-muted)",
          }}>I · Studio</div>
          <div style={{
            display: "flex", justifyContent: "space-between",
            alignItems: "baseline", borderBottom: "1px solid var(--border)",
            paddingBottom: 18,
          }}>
            <div style={{
              fontFamily: "var(--font-serif)", fontStyle: "italic",
              fontWeight: 300, fontSize: 20, color: "var(--fg-muted)",
            }}>Ein Atelier für Innenarchitektur</div>
            <div style={{
              fontFamily: "var(--font-sans)", fontSize: 10,
              letterSpacing: "0.32em", textTransform: "uppercase",
              color: "var(--fg-soft)",
            }}>seit MMXII</div>
          </div>
        </div>

        {/* Main two-col */}
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1.35fr",
          gap: 96, alignItems: "start",
        }}>
          {/* Left — portrait image + caption */}
          <div>
            <div style={{
              width: "100%", aspectRatio: "4 / 5",
              backgroundImage: "url('assets/interior-living-bronze.jpg')",
              backgroundSize: "cover", backgroundPosition: "center",
            }} />
            <div style={{
              marginTop: 22,
              fontFamily: "var(--font-sans)", fontSize: 10,
              letterSpacing: "0.28em", textTransform: "uppercase",
              color: "var(--fg-soft)",
            }}>Studio Como — Atelier &amp; Materialbibliothek</div>
          </div>

          {/* Right — body */}
          <div>
            <h2 style={{
              fontFamily: "var(--font-serif)", fontWeight: 300,
              fontSize: "clamp(36px, 3.4vw, 56px)", lineHeight: 1.12,
              letterSpacing: "0.005em", margin: 0, color: "var(--fg)",
              maxWidth: 760,
            }}>
              Ferella Interiors entwirft <span style={{ fontStyle: "italic" }}>Gesamtkonzepte</span>
              {" "}— von der ersten Skizze bis zur finalen Inszenierung.
            </h2>

            <div style={{
              marginTop: 48, display: "grid",
              gridTemplateColumns: "1fr 1fr", gap: 56,
              maxWidth: 760,
            }}>
              <p style={{
                fontFamily: "var(--font-sans)", fontSize: 15,
                lineHeight: 1.75, color: "var(--fg)", margin: 0,
              }}>
                Unter der Leitung von <em style={{ fontFamily: "var(--font-serif)", fontSize: 17 }}>Elvira Schröter</em> verbindet das Studio
                zeitlose Eleganz mit aesthetischer Klarheit. Wir arbeiten an
                wenigen, sorgfältig ausgewählten Projekten — überwiegend für
                private Bauherren und ausgewählte Hospitality-Häuser im
                deutschsprachigen Raum.
              </p>
              <p style={{
                fontFamily: "var(--font-sans)", fontSize: 15,
                lineHeight: 1.75, color: "var(--fg)", margin: 0,
              }}>
                Hochwertige Materialien, handveredelte Oberflächen und
                skulpturale Elemente schaffen Räume, die über Trends hinweg
                bestehen. Jeder Auftrag beginnt mit einem Gespräch und endet
                erst dann, wenn das Haus seinen eigenen, ruhigen Klang findet.
              </p>
            </div>

            {/* Numbered tenets */}
            <div style={{
              marginTop: 80,
              borderTop: "1px solid var(--border)",
            }}>
              {[
                { n: "i.",   t: "Material vor Dekoration", b: "Stein, Holz, Bouclé, gebürstetes Metall — Oberflächen, die mit der Zeit besser werden." },
                { n: "ii.",  t: "Licht als Architektur",   b: "Tages- und Kunstlicht werden gemeinsam mit dem Grundriss entworfen, nie nachträglich gelegt." },
                { n: "iii.", t: "Eine ruhige Hand",        b: "Wenige, präzise gesetzte Gesten. Kein Stilzitat, kein Statement um seiner selbst willen." },
              ].map((t, i) => (
                <div key={i} style={{
                  display: "grid", gridTemplateColumns: "60px 1fr 2fr",
                  gap: 32, padding: "28px 0",
                  borderBottom: "1px solid var(--border)",
                  alignItems: "baseline",
                }}>
                  <div style={{
                    fontFamily: "var(--font-serif)", fontStyle: "italic",
                    fontWeight: 400, fontSize: 18,
                    color: "var(--fg-muted)",
                  }}>{t.n}</div>
                  <div style={{
                    fontFamily: "var(--font-serif)", fontWeight: 400,
                    fontSize: 22, lineHeight: 1.25, color: "var(--fg)",
                  }}>{t.t}</div>
                  <div style={{
                    fontFamily: "var(--font-sans)", fontSize: 14,
                    lineHeight: 1.7, color: "var(--fg-muted)",
                  }}>{t.b}</div>
                </div>
              ))}
            </div>

            <a href="#approach" style={{
              display: "inline-block", marginTop: 56,
              fontFamily: "var(--font-sans)", fontSize: 11,
              letterSpacing: "0.24em", textTransform: "uppercase",
              color: "var(--fg)", borderBottom: "1px solid var(--fg)",
              paddingBottom: 4, textDecoration: "none",
            }}>Über unseren Approach →</a>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Studio = Studio;
