// Arrival — directions, four cards.

const Arrival = ({ t, photoMode }) => (
  <section id="arrival" data-screen-label="06 Anreise" style={{
    background: "var(--paper)", padding: "140px 56px 120px",
  }}>
    <div style={{ maxWidth: 1240, margin: "0 auto" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 96, marginBottom: 72, alignItems: "flex-start" }}>
        <Reveal>
          <Eyebrow tone="gold">· {t.arrival_eyebrow} ·</Eyebrow>
          <div style={{ marginTop: 22 }}>
            <Headline lines={t.arrival_title} size={56} />
          </div>
          <div style={{ marginTop: 26 }}>
            <HairlineGold width={48} />
          </div>
        </Reveal>
        <Reveal delay={100}>
          <Plate src="photos/exterior-front.jpg" mode={photoMode} aspect="16/9"
            position="center" style={{ boxShadow: "var(--shadow-image)" }} />
        </Reveal>
      </div>

      <Reveal>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
          borderTop: "1px solid var(--linen)", borderBottom: "1px solid var(--linen)",
        }}>
          {t.arrival_items.map((it, i) => (
            <div key={i} style={{
              padding: "40px 32px",
              borderRight: i < 2 ? "1px solid var(--linen)" : "none",
            }}>
              <Eyebrow tone="gold">— 0{i + 1}</Eyebrow>
              <div style={{
                marginTop: 14, fontFamily: "var(--font-serif)", fontStyle: "italic",
                fontSize: 22, color: "var(--graphite)", lineHeight: 1.2,
              }}>{it.l}</div>
              <p style={{
                marginTop: 14, fontFamily: "var(--font-sans)", fontSize: 13.5,
                lineHeight: 1.65, color: "var(--fg-muted)", margin: 0,
              }}>{it.t}</p>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  </section>
);

window.Arrival = Arrival;