/* eslint-disable */
function WhyForwardmax({ t, p }) {
  return (
    <section id="why" data-screen-label="04 Why" style={{
      position: "relative", background: p.bg, color: p.fg,
      borderBottom: `1px solid ${p.hairline}`,
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "140px 32px 0" }}>
        <div style={{ paddingBottom: 64 }}>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(36px, 5.2vw, 76px)", lineHeight: 0.98,
            letterSpacing: "0.6px",
            margin: 0, whiteSpace: "pre-line", maxWidth: 1000,
          }}>{t.why.title}</h2>
        </div>
      </div>

      <div style={{
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
        borderTop: `1px solid ${p.hairline}`,
      }}>
        {t.why.cards.map((c, i) => (
          <div key={i} style={{
            position: "relative", padding: "36px 28px 44px",
            minHeight: 380,
            borderRight: i < t.why.cards.length - 1 ? `1px solid ${p.hairline}` : "0",
            display: "flex", flexDirection: "column",
          }}>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: 60, letterSpacing: "0.8px", lineHeight: 1,
              opacity: 0.92, marginBottom: 28,
              display: "flex", alignItems: "baseline", gap: 12,
            }}>
              {c.n}
              <span style={{ fontSize: 14, letterSpacing: "1.17px", opacity: 0.5 }}>/04</span>
            </div>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: 22, lineHeight: 1.18, letterSpacing: "0.6px",
              textTransform: "uppercase", marginBottom: 18, textWrap: "balance",
            }}>{c.title}</div>
            <p style={{
              fontFamily: "var(--font-ui)", fontSize: 14.5, lineHeight: 1.6,
              letterSpacing: "0.2px", color: p.fgMute, margin: 0,
            }}>{c.body}</p>
            <div style={{ marginTop: "auto", paddingTop: 32, opacity: 0.4 }}>
              <svg width="22" height="14" viewBox="0 0 18 14" aria-hidden="true">
                <path d="M0 1 L8 7 L0 13 Z M5 1 L13 7 L5 13 Z" fill="currentColor" />
              </svg>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.WhyForwardmax = WhyForwardmax;