// Disciplines.jsx — the four domains of practice with imagery
function Disciplines() {
  const items = [
    { k: "01", t: "Private Residences",     b: "Villen, Penthouses, Lofts. Maßgeschneiderte Gesamtkonzepte für anspruchsvolle Privatkundschaft.", img: "assets/interior-living-warm.jpg" },
    { k: "02", t: "Hospitality Interiors",  b: "Hotels, Restaurants, Bars und Spas mit unverwechselbarer Atmosphäre und langer Halbwertszeit.",     img: "assets/interior-dining.jpg" },
    { k: "03", t: "Retail Spaces",          b: "Flagships und Boutiquen, die Marke und Haltung räumlich übersetzen — leise und präzise.",            img: "assets/interior-sculptural.jpg" },
    { k: "04", t: "Office Spaces",          b: "Executive-Etagen, Member Clubs, Headquarters. Räume zum Denken — nicht zum Performen.",              img: "assets/interior-suite-04.jpg" },
  ];
  return (
    <section
      data-screen-label="Disciplines"
      style={{ background: "var(--bg-soft)", padding: "176px 56px" }}
    >
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <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)",
          }}>IV · Disciplines</div>
          <div style={{
            display: "flex", justifyContent: "space-between",
            alignItems: "baseline", borderBottom: "1px solid var(--border)",
            paddingBottom: 18,
          }}>
            <h2 style={{
              fontFamily: "var(--font-serif)", fontWeight: 300,
              fontSize: "clamp(36px, 3.8vw, 56px)", lineHeight: 1.1,
              margin: 0, color: "var(--fg)",
            }}>Vier Disziplinen, eine Handschrift.</h2>
            <div style={{
              fontFamily: "var(--font-serif)", fontStyle: "italic",
              fontSize: 16, color: "var(--fg-muted)",
            }}>2026 · Practice</div>
          </div>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr",
          gap: 64, rowGap: 96,
        }}>
          {items.map((it, i) => (
            <a key={i} href="#" style={{
              display: "grid", gridTemplateColumns: "200px 1fr",
              gap: 32, alignItems: "start",
              color: "inherit", textDecoration: "none", border: 0,
            }}>
              <div style={{
                width: "100%", aspectRatio: "4 / 5",
                backgroundImage: `url('${it.img}')`,
                backgroundSize: "cover", backgroundPosition: "center",
              }} />
              <div>
                <div style={{
                  fontFamily: "var(--font-serif)", fontStyle: "italic",
                  fontSize: 14, color: "var(--fg-muted)", marginBottom: 18,
                }}>{it.k}</div>
                <h3 style={{
                  fontFamily: "var(--font-serif)", fontWeight: 300,
                  fontSize: 30, lineHeight: 1.15, margin: 0,
                  color: "var(--fg)",
                }}>{it.t}</h3>
                <p style={{
                  marginTop: 20,
                  fontFamily: "var(--font-sans)", fontSize: 14,
                  lineHeight: 1.7, color: "var(--fg-muted)",
                }}>{it.b}</p>
                <div style={{
                  marginTop: 28,
                  fontFamily: "var(--font-sans)", fontSize: 10,
                  letterSpacing: "0.28em", textTransform: "uppercase",
                  color: "var(--fg)", borderBottom: "1px solid var(--fg)",
                  paddingBottom: 3, display: "inline-block",
                }}>Mehr erfahren →</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Disciplines = Disciplines;