/* eslint-disable */
function ContactHero({ t, p }) {
  const h = t.contact.hero;
  return (
    <section data-screen-label="01 Contact Hero" style={{
      position: "relative", background: p.bg, color: p.fg,
      borderBottom: `1px solid ${p.hairline}`,
      padding: "200px 32px 96px",
      minHeight: "78vh",
      display: "flex", flexDirection: "column", justifyContent: "flex-end",
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto", width: "100%" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 220px) 1fr",
          gap: 48, alignItems: "start", marginBottom: 56,
        }}>
          <div style={window.eyebrowStyle(p)}>— {h.eyebrow}</div>
          <div style={{
            fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "1.17px",
            textTransform: "uppercase", color: p.fgFaint,
            display: "flex", alignItems: "center", gap: 12,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: p.fg, boxShadow: `0 0 0 4px ${p.hairlineSoft}` }} />
            Open · Replies within one business day
          </div>
        </div>

        <h1 style={{
          fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: "clamp(56px, 11vw, 168px)", lineHeight: 0.92,
          letterSpacing: "-0.5px", textTransform: "uppercase",
          margin: 0, textWrap: "balance",
        }}>{h.headline}</h1>

        <div style={{
          marginTop: 56, paddingTop: 32,
          borderTop: `1px solid ${p.hairlineSoft}`,
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.6fr)", gap: 48,
        }}>
          <div style={{
            fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "1.17px",
            textTransform: "uppercase", color: p.fgFaint, paddingTop: 6,
          }}>The invitation</div>
          <p style={{
            fontFamily: "var(--font-ui)", fontSize: 18, lineHeight: 1.6,
            letterSpacing: "0.2px", color: p.fgMute, margin: 0,
            maxWidth: 760, textWrap: "pretty",
          }}>{h.body}</p>
        </div>
      </div>
    </section>
  );
}

window.ContactHero = ContactHero;