// Surroundings — full-bleed band + 4 cards.

const Surroundings = ({ t, photoMode }) => (
  <section id="surroundings" data-screen-label="02 Umgebung" style={{
    background: "var(--ink)", color: "var(--bone)", padding: "140px 56px 120px",
  }}>
    <div style={{ maxWidth: 1240, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 96, marginBottom: 80 }}>
        <Reveal>
          <Eyebrow tone="gold">· {t.surroundings_eyebrow} ·</Eyebrow>
          <div style={{ marginTop: 22 }}>
            <Headline lines={t.surroundings_title} size={56} light />
          </div>
          <div style={{ marginTop: 26 }}>
            <HairlineGold width={48} />
          </div>
        </Reveal>
        <Reveal delay={120}>
          <p style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic",
            fontSize: 22, lineHeight: 1.5, color: "rgba(245,241,234,0.84)", margin: 0, maxWidth: 540,
          }}>{t.surroundings_lead}</p>
        </Reveal>
      </div>

      <Reveal>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32,
        }}>
          {t.surroundings_items.map((it, i) => (
            <div key={i} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <Plate src={["photos/pragser-wildsee.jpg","photos/drei-zinnen.jpg","photos/plaetzwiese.jpg","photos/plan-de-corones.jpg"][i]}
                mode={photoMode} aspect="4/5" position="center" />
              <div style={{ paddingTop: 6 }}>
                <Eyebrow tone="gold">{it.d}</Eyebrow>
                <div style={{
                  marginTop: 10, fontFamily: "var(--font-serif)", fontStyle: "italic",
                  fontSize: 24, color: "var(--bone)", lineHeight: 1.1,
                }}>{it.t}</div>
                <div style={{
                  marginTop: 12, fontFamily: "var(--font-sans)", fontSize: 13,
                  lineHeight: 1.6, color: "rgba(245,241,234,0.62)",
                }}>{it.s}</div>
              </div>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  </section>
);

window.Surroundings = Surroundings;