// The Object section — apartment description + editorial photo sequence + The Studio.

const ObjectSection = ({ t, photoMode }) =>
<section id="object" data-screen-label="01 Objekt" style={{
  background: "var(--paper)", padding: "140px 0 120px"
}}>
    {/* Intro — constrained */}
    <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 56px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 96, alignItems: "flex-start", marginBottom: 96 }}>
        <Reveal>
          <Eyebrow tone="gold">· {t.object_eyebrow} ·</Eyebrow>
          <div style={{ marginTop: 22 }}>
            <Headline lines={t.object_title} size={56} />
          </div>
          <div style={{ marginTop: 28 }}>
            <HairlineGold width={48} />
          </div>
        </Reveal>
        <Reveal delay={120}>
          <p className="lead" style={{
          fontFamily: "var(--font-serif)", fontStyle: "italic",
          fontSize: 22, lineHeight: 1.45, color: "var(--graphite)", margin: 0
        }}>
            {t.object_lead}
          </p>
          {(Array.isArray(t.object_paragraph) ? t.object_paragraph : [t.object_paragraph]).map((para, i) =>
          <p key={i} style={{
            marginTop: i === 0 ? 28 : 18, fontFamily: "var(--font-sans)", fontSize: 15.5,
            lineHeight: 1.75, color: "var(--fg-muted)", maxWidth: 560
          }}>
              {para}
            </p>
          )}
        </Reveal>
      </div>

      {/* Editorial photo grid: large + two stacked */}
      <Reveal>
        <div style={{
        display: "grid",
        gridTemplateColumns: "1.6fr 1fr",
        gridTemplateRows: "320px 320px",
        gap: 24, marginBottom: 80
      }}>
          <Plate src="photos/living-dining.jpg" mode={photoMode} position="center 40%"
        style={{ gridRow: "1 / 3", boxShadow: "var(--shadow-image)" }} />
          <Plate src="photos/living-02.jpg" mode={photoMode} position="center 30%"
        style={{ boxShadow: "var(--shadow-image)" }} />
          <Plate src="photos/dining-01.jpg" mode={photoMode} position="center"
        style={{ boxShadow: "var(--shadow-image)" }} />
        </div>
      </Reveal>

      {/* Caption row */}
      <Reveal>
        <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 32,
        paddingTop: 32, borderTop: "1px solid var(--linen)"
      }}>
          {(t.object_captions || [
        ["Living room", "With reading gallery and open kitchen."],
        ["Three bedrooms", "Each with a double bed, all quiet."],
        ["Bath & shower", "Plus a guest WC."],
        ["Three parking spots", "One outside, two in the garage."]]).
        map(([title, desc], i) =>
        <div key={i} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <Eyebrow tone="mute">— 0{i + 1}</Eyebrow>
              <div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 22, color: "var(--graphite)", marginTop: 4 }}>
                {title}
              </div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, color: "var(--fg-muted)", lineHeight: 1.55 }}>
                {desc}
              </div>
            </div>
        )}
        </div>
      </Reveal>
    </div>

    {/* TRIPTYCH — three-up with floating eyebrow */}
    <Reveal>
      <div style={{ marginTop: 120, position: "relative" }}>
        <div style={{
        position: "absolute", top: 28, right: 56, zIndex: 2
      }}>
          <Eyebrow tone="muteDark">{t.triptych_eyebrow || "Premium Apartment"}</Eyebrow>
          <div style={{ marginTop: 10, display: "flex", justifyContent: "flex-end" }}>
            <HairlineGold width={48} />
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24, padding: "0 56px", color: "rgb(201, 168, 106)" }}>
          <Plate src="photos/interior-stairs-kitchen.jpg" mode={photoMode} position="center"
        aspect="3/4" />
          <Plate src="photos/interior-reading-nook.jpg" mode={photoMode} position="center"
        aspect="3/4" />
          <Plate src="photos/interior-stairs-art.jpg" mode={photoMode} position="center"
        aspect="3/4" />
        </div>
      </div>
    </Reveal>

    {/* Detail grid — 4 close-ups */}
    <div style={{ maxWidth: 1240, margin: "0 auto", padding: "100px 56px 0" }}>
      <Reveal>
        <div style={{
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24
      }}>
          <Plate src="photos/interior-bedroom-1.jpg" mode={photoMode} position="center"
        aspect="4/3" style={{ boxShadow: "var(--shadow-image)" }} />
          <Plate src="photos/interior-bedroom-2.jpg" mode={photoMode} position="center"
        aspect="4/3" style={{ boxShadow: "var(--shadow-image)" }} />
          <Plate src="photos/interior-kitchen-detail.jpg" mode={photoMode} position="center 65%"
        aspect="4/3" style={{ boxShadow: "var(--shadow-image)" }} />
          <Plate src="photos/interior-shelves.jpg" mode={photoMode} position="center"
        aspect="4/3" style={{ boxShadow: "var(--shadow-image)" }} />
        </div>
      </Reveal>
    </div>

    {/* FULL-BLEED — atmosphere photo with editorial headline */}
    <Reveal>
      <div style={{
      marginTop: 120, position: "relative", height: 720, overflow: "hidden", color: "var(--bone)"
    }}>
        <Plate src="photos/interior-curtains.jpg" mode={photoMode} position="center 60%"
      style={{ position: "absolute", inset: 0 }} overlay />
        {/* Top-right eyebrow */}
        <div style={{ position: "absolute", top: 56, right: 56, zIndex: 2, textAlign: "right" }}>
          <Eyebrow tone="muteDark">{t.fullbleed_eyebrow || "Prags · Dolomites"}</Eyebrow>
          <div style={{ marginTop: 10, display: "flex", justifyContent: "flex-end" }}>
            <HairlineGold width={48} />
          </div>
        </div>
        {/* Bottom-left headline */}
        <div style={{ position: "absolute", left: 56, bottom: 80, zIndex: 2, maxWidth: 620 }}>
          <Eyebrow tone="gold">· {t.fullbleed_kicker || "Eine private Residenz"} ·</Eyebrow>
          <div style={{ marginTop: 22 }}>
            <Headline lines={t.fullbleed_title || ["Wo das <em>Licht</em>", "die Dielen findet."]} size={64} light />
          </div>
          <div style={{
          marginTop: 22, fontFamily: "var(--font-serif)", fontStyle: "italic",
          fontSize: 18, lineHeight: 1.5, color: "rgba(245,241,234,0.82)", maxWidth: 440
        }}>
            {t.fullbleed_fineprint || ""}
          </div>
        </div>
      </div>
    </Reveal>

    {/* The Studio */}
    <div style={{ maxWidth: 1240, margin: "0 auto", padding: "120px 56px 0" }}>
      <Reveal>
        <div style={{
        display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center"
      }}>
          <Plate src="photos/studio-overview.jpg" mode={photoMode} position="center"
        aspect="4/3" style={{ boxShadow: "var(--shadow-image)" }} />
          <div>
            <Eyebrow tone="gold">· {t.studio_eyebrow} ·</Eyebrow>
            <div style={{ marginTop: 22 }}>
              <Headline lines={t.studio_title} size={48} />
            </div>
            <div style={{ marginTop: 24 }}>
              <HairlineGold width={40} />
            </div>
            <p style={{
            marginTop: 24, fontFamily: "var(--font-serif)", fontStyle: "italic",
            fontSize: 19, lineHeight: 1.5, color: "var(--graphite)", maxWidth: 460
          }}>
              {t.studio_lead}
            </p>
            <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "auto auto auto", gap: 32 }}>
              {[
            ["Glasfaser", "Fibre"],
            ["Meeting", "Meeting"],
            ["Hardware", "Hardware"]].
            map(([de, en], i) =>
            <div key={i}>
                  <Eyebrow tone="mute">{de}</Eyebrow>
                </div>
            )}
            </div>
          </div>
        </div>
      </Reveal>

      {/* Studio detail row */}
      <Reveal>
        <div style={{
        marginTop: 64,
        display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 24
      }}>
          <Plate src="photos/studio-meeting-table.jpg" mode={photoMode} position="center"
        aspect="4/3" style={{ boxShadow: "var(--shadow-image)" }} />
          <Plate src="photos/studio-monitors.jpg" mode={photoMode} position="center"
        aspect="4/3" style={{ alignSelf: "center", boxShadow: "var(--shadow-image)" }} />
        </div>
      </Reveal>
    </div>

    {/* Studio full-bleed banner */}
    <Reveal>
      <div style={{
      marginTop: 120, position: "relative", height: 640, overflow: "hidden", color: "var(--bone)"
    }}>
        <Plate src="photos/studio-window.jpg" mode={photoMode} position="center 55%"
      style={{ position: "absolute", inset: 0 }} overlay />
        <div style={{ position: "absolute", top: 56, right: 56, zIndex: 2, textAlign: "right" }}>
          <Eyebrow tone="muteDark">{t.studio_eyebrow}</Eyebrow>
          <div style={{ marginTop: 10, display: "flex", justifyContent: "flex-end" }}>
            <HairlineGold width={48} />
          </div>
        </div>
        <div style={{ position: "absolute", left: 56, bottom: 80, zIndex: 2, maxWidth: 660 }}>
          <Eyebrow tone="gold">· {t.studio_banner_kicker || "Konzentriert arbeiten"} ·</Eyebrow>
          <div style={{ marginTop: 22 }}>
            <Headline lines={t.studio_banner_title || ["Wo der <em>Blick</em>", "ins Tal die Pause ist."]} size={60} light />
          </div>
        </div>
      </div>
    </Reveal>
  </section>;


window.ObjectSection = ObjectSection;