/* eslint-disable */
function ContactOffice({ t, p }) {
  const o = t.contact.office;
  return (
    <section data-screen-label="04 Office" style={{
      position: "relative", background: p.bgSoft, color: p.fg,
      borderBottom: `1px solid ${p.hairline}`,
    }}>
      <div style={{ maxWidth: 1400, margin: "0 auto", padding: "140px 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 220px) 1fr", gap: 48, alignItems: "start" }}>
          <div style={window.eyebrowStyle(p)}>— {o.eyebrow}</div>
          <div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 22, flexWrap: "wrap", marginBottom: 48 }}>
              <h2 style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: "clamp(36px, 5.2vw, 76px)", lineHeight: 0.98,
                letterSpacing: "0.6px", textTransform: "uppercase",
                margin: 0,
              }}>{o.title}</h2>
              <span style={{
                fontFamily: "var(--font-ui)", fontSize: 13, letterSpacing: "1.17px",
                textTransform: "uppercase", color: p.fgFaint,
                fontVariantNumeric: "tabular-nums",
              }}>{o.coords}</span>
            </div>

            <div style={{
              display: "grid", gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 1fr)",
              borderTop: `1px solid ${p.hairline}`,
            }}>
              <div style={{ padding: "36px 40px 36px 0", borderRight: `1px solid ${p.hairline}` }}>
                <div style={{
                  fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "1.17px",
                  textTransform: "uppercase", color: p.fgFaint, marginBottom: 14,
                }}>Address</div>
                <div style={{
                  fontFamily: "var(--font-ui)", fontSize: 17, lineHeight: 1.6,
                  letterSpacing: "0.2px", color: p.fg,
                }}>
                  {o.addr.map((line, i) => (
                    <div key={i}>{line}</div>
                  ))}
                </div>
              </div>
              <div style={{ padding: "36px 0 36px 40px", position: "relative", overflow: "hidden", minHeight: 220 }}>
                <div aria-hidden="true" style={{
                  position: "absolute", inset: "20px 20px 20px 52px",
                  backgroundImage:
                    `linear-gradient(${p.hairlineSoft} 1px, transparent 1px),` +
                    `linear-gradient(90deg, ${p.hairlineSoft} 1px, transparent 1px)`,
                  backgroundSize: "22px 22px",
                }} />
                <div style={{
                  position: "absolute", left: "60%", top: "52%",
                  width: 12, height: 12, borderRadius: 999, background: p.fg,
                  boxShadow: `0 0 0 6px ${p.hairlineSoft}`,
                }} />
                <div style={{
                  position: "absolute", left: "60%", top: "52%",
                  width: 90, height: 90, transform: "translate(-50%, -50%)",
                  borderRadius: 999, border: `1px solid ${p.hairline}`, opacity: 0.6,
                }} />
                <div style={{
                  position: "absolute", left: 52, top: 36,
                  fontFamily: "var(--font-ui)", fontSize: 11, letterSpacing: "1.17px",
                  textTransform: "uppercase", color: p.fgFaint,
                }}>Locale</div>
                <div style={{
                  position: "absolute", right: 12, bottom: 24,
                  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
                  fontSize: 10.5, letterSpacing: "0.4px", color: p.fgFaint,
                  textTransform: "uppercase",
                }}>Sinchon · Seodaemun-gu</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ContactOffice = ContactOffice;