// Prices — single rate, plainly stated.

const Prices = ({ t }) => (
  <section id="prices" data-screen-label="03 Preise" style={{
    background: "var(--paper)", padding: "140px 56px 120px",
  }}>
    <div style={{ maxWidth: 1100, margin: "0 auto", textAlign: "center" }}>
      <Reveal>
        <Eyebrow tone="gold">· {t.prices_eyebrow} ·</Eyebrow>
        <div style={{ marginTop: 22, display: "flex", justifyContent: "center" }}>
          <Headline lines={t.prices_title} size={64} style={{ textAlign: "center" }} />
        </div>
        <div style={{ marginTop: 28, display: "flex", justifyContent: "center" }}>
          <RuleDiamond />
        </div>
        <p style={{
          marginTop: 32, fontFamily: "var(--font-serif)", fontStyle: "italic",
          fontSize: 20, lineHeight: 1.5, color: "var(--graphite)",
          maxWidth: 640, margin: "32px auto 0",
        }}>{t.prices_lead}</p>
      </Reveal>

      <Reveal delay={120}>
        <div style={{
          marginTop: 72,
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0,
          border: "1px solid var(--linen)", background: "var(--surface)",
        }}>
          <div style={{ padding: "56px 48px", borderRight: "1px solid var(--linen)", textAlign: "left" }}>
            <Eyebrow tone="mute">Standard</Eyebrow>
            <div style={{
              marginTop: 18, fontFamily: "var(--font-serif)", fontWeight: 500,
              fontSize: 88, lineHeight: 1, color: "var(--graphite)",
            }}>
              <span>€&nbsp;850</span>
              <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--gold)", fontSize: 36, marginLeft: 8 }}>{t.prices_per_night}</span>
            </div>
            <div style={{
              marginTop: 18, display: "flex", alignItems: "center", gap: 12,
              fontFamily: "var(--font-sans)", fontSize: 12, letterSpacing: "0.18em",
              textTransform: "uppercase", color: "var(--fg-muted)",
            }}>
              <Diamond /> {t.prices_min_stay}
            </div>
          </div>
          <div style={{ padding: "56px 48px", textAlign: "left" }}>
            <Eyebrow tone="mute">{t.prices_long_label}</Eyebrow>
            <div style={{
              marginTop: 18, fontFamily: "var(--font-serif)", fontStyle: "italic",
              fontWeight: 500, fontSize: 56, lineHeight: 1.05, color: "var(--gold)",
            }}>{t.prices_long_value}</div>
            <p style={{
              marginTop: 18, fontFamily: "var(--font-sans)", fontSize: 14,
              lineHeight: 1.6, color: "var(--fg-muted)", maxWidth: 360,
            }}>
              {t.prices_includes}
            </p>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

window.Prices = Prices;