/* eslint-disable */
function MissionBand({ t, p }) {
  return (
    <section id="mission" data-screen-label="05 Mission" style={{
      position: "relative", minHeight: "92vh",
      backgroundImage: `${p.photoOverlayMission}, url(https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=2400&q=75)`,
      backgroundSize: "cover", backgroundPosition: "center",
      backgroundColor: p.bg, color: p.fg,
      display: "flex", alignItems: "center", padding: "120px 32px",
      borderBottom: `1px solid ${p.hairline}`,
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto", width: "100%" }}>
        <div style={{ ...window.eyebrowStyle(p), marginBottom: 36 }}>— {t.mission.eyebrow}</div>
        <h2 style={{
          fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: "clamp(48px, 8.4vw, 128px)", lineHeight: 0.98,
          letterSpacing: "-0.2px", textTransform: "uppercase",
          margin: 0, whiteSpace: "pre-line", maxWidth: 1300, textWrap: "balance",
        }}>{t.mission.line}</h2>
      </div>
    </section>
  );
}

window.MissionBand = MissionBand;