/* eslint-disable */
function Vision({ t, p }) {
  return (
    <section id="vision" data-screen-label="02 Vision" style={{
      position: "relative", background: p.bg, color: p.fg,
      padding: "160px 32px 160px",
      borderBottom: `1px solid ${p.hairline}`,
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 220px) 1fr", gap: 48,
          alignItems: "start",
        }}>
          <div>
            <div style={{ ...window.eyebrowStyle(p) }}>— {t.vision.eyebrow}</div>
          </div>
          <div>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(48px, 8.6vw, 132px)", lineHeight: 0.95,
              letterSpacing: "-0.2px", textTransform: "uppercase",
              margin: 0, textWrap: "balance",
            }}>
              <span>{t.vision.line1}</span>
              <br/>
              <span style={{ display: "inline-flex", alignItems: "center", gap: "0.35em" }}>
                <svg width="0.7em" height="0.55em" viewBox="0 0 18 14" aria-hidden="true" style={{ flex: "0 0 auto", opacity: 0.55 }}>
                  <path d="M0 1 L8 7 L0 13 Z M5 1 L13 7 L5 13 Z" fill="currentColor" />
                </svg>
                {t.vision.line2}
              </span>
            </h2>
          </div>
        </div>
      </div>
    </section>
  );
}

window.eyebrowStyle = function(p) {
  return {
    fontFamily: "var(--font-ui)", fontWeight: 400, fontSize: 11,
    letterSpacing: "1.17px", lineHeight: 2, textTransform: "uppercase",
    color: p.eyebrow,
  };
};

window.Vision = Vision;