/* Dexilion — contact page. */

(function () {
  const { Card } = window;
  const {
    Ico,
    Grain,
    Shell,
    tx,
    SiteHeader,
    PageHero,
    ContactForm,
    SiteFooter,
  } = window;

  function ContactBody() {
    const c = window.SITE.contact;
    return (
      <section
        style={{
          background: "var(--paper-50)",
          padding: "var(--section-y) 0",
          position: "relative",
          overflow: "hidden",
        }}
      >
        <Grain />
        <Shell>
          <div
            className="dx-split"
            style={{
              position: "relative",
              display: "grid",
              gridTemplateColumns: "1fr 720px",
              gap: "64px",
              alignItems: "start",
            }}
          >
            <div>
              <h2
                style={{
                  font: "var(--text-h2)",
                  letterSpacing: "var(--ls-heading)",
                  margin: 0,
                  color: "var(--text-strong)",
                  maxWidth: "18ch",
                }}
              >
                {c.nextHeading}
              </h2>
              <p
                style={{
                  margin: "18px 0 0",
                  maxWidth: "48ch",
                  fontSize: "var(--fs-body-lg)",
                  lineHeight: "var(--lh-body)",
                  color: "var(--text-body)",
                }}
              >
                {tx(c.lede)}
              </p>
              <div
                style={{
                  marginTop: "24px",
                  display: "flex",
                  gap: "10px",
                  alignItems: "center",
                  fontFamily: "var(--font-mono)",
                  fontSize: "12px",
                  color: "var(--text-muted)",
                }}
              >
                <Ico n="clock" s={15} color="var(--blue-500)" />{" "}
                {tx(c.responseNote)}
              </div>

              <dl
                style={{
                  margin: "36px 0 0",
                  display: "grid",
                  gridTemplateColumns: "1fr",
                  gap: "0",
                  maxWidth: "420px",
                  borderTop: "1px solid var(--paper-200)",
                }}
              >
                {c.details.map((d) => (
                  <div
                    key={d.label}
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      gap: "16px",
                      padding: "14px 0",
                      borderBottom: "1px solid var(--paper-200)",
                    }}
                  >
                    <dt
                      style={{
                        fontSize: "var(--fs-body-sm)",
                        color: "var(--text-muted)",
                      }}
                    >
                      {d.label}
                    </dt>
                    <dd
                      style={{
                        margin: 0,
                        fontFamily: "var(--font-mono)",
                        fontSize: "var(--fs-body-sm)",
                        color: "var(--text-strong)",
                        textAlign: "right",
                      }}
                    >
                      {tx(d.value)}
                    </dd>
                  </div>
                ))}
              </dl>
            </div>
            <Card padding="lg" accent style={{ boxShadow: "var(--shadow-lg)" }}>
              <ContactForm />
            </Card>
          </div>
        </Shell>
      </section>
    );
  }

  function Page() {
    const c = window.SITE.contact;
    return (
      <React.Fragment>
        <SiteHeader active="contact" />
        <PageHero eyebrow={c.eyebrow} headline={c.headline} />
        <ContactBody />
        <SiteFooter />
      </React.Fragment>
    );
  }

  mountPage(<Page />);
})();