/* Dexilion — our work page. */

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

  function Cases() {
    const w = window.SITE.work;
    return (
      <section
        style={{
          background: "var(--paper-50)",
          padding: "var(--section-y) 0",
          position: "relative",
          overflow: "hidden",
        }}
      >
        <Grain />
        <Shell>
          <div
            className="dx-cards-3"
            style={{
              position: "relative",
              display: "grid",
              gridTemplateColumns: "repeat(3,1fr)",
              gap: "24px",
            }}
          >
            {w.cases.map((c, i) => (
              <Card
                key={i}
                padding="md"
                interactive
                onClick={
                  c.href
                    ? () => {
                        window.location.href = c.href;
                      }
                    : undefined
                }
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: "16px",
                }}
              >
                {c.src ? (
                  <img
                    src={c.src}
                    alt={c.image}
                    style={{
                      width: "100%",
                      aspectRatio: "4 / 3",
                      objectFit: "cover",
                      display: "block",
                      borderRadius: "var(--radius-md)",
                      border: "1px solid var(--border-subtle)",
                    }}
                  />
                ) : (
                  <ImageSlot
                    label={c.image}
                    ratio="4 / 3"
                    style={{ borderRadius: "var(--radius-md)" }}
                  />
                )}
                <div>
                  <div
                    style={{
                      font: "var(--text-eyebrow)",
                      letterSpacing: "var(--ls-eyebrow)",
                      textTransform: "uppercase",
                      color: "var(--blue-500)",
                    }}
                  >
                    {tx(c.sector)}
                  </div>
                  <div
                    style={{
                      marginTop: "10px",
                      fontFamily: "var(--font-serif)",
                      fontSize: "var(--fs-h4)",
                      fontWeight: "var(--fw-semibold)",
                      letterSpacing: "var(--ls-heading)",
                      color: "var(--text-strong)",
                      lineHeight: 1.25,
                    }}
                  >
                    {tx(c.title)}
                  </div>
                  <p
                    style={{
                      margin: "10px 0 0",
                      fontSize: "var(--fs-body-sm)",
                      lineHeight: "var(--lh-body)",
                      color: "var(--text-body)",
                    }}
                  >
                    {tx(c.summary)}
                  </p>
                  {c.href && (
                    <div
                      style={{
                        marginTop: "14px",
                        display: "flex",
                        alignItems: "center",
                        gap: "8px",
                        fontSize: "var(--fs-body-sm)",
                        fontWeight: "var(--fw-semibold)",
                        color: "var(--blue-500)",
                      }}
                    >
                      {c.cta}
                      <Ico n="arrow-right" s={16} color="var(--blue-500)" />
                    </div>
                  )}
                </div>
                <div
                  style={{
                    marginTop: "auto",
                    paddingTop: "16px",
                    borderTop: "1px solid var(--border-subtle)",
                    display: "flex",
                    gap: "24px",
                    flexWrap: "wrap",
                  }}
                >
                  {c.stats.map((s, j) => (
                    <div key={j}>
                      <div
                        style={{
                          fontFamily: "var(--font-mono)",
                          fontSize: "18px",
                          fontWeight: "var(--fw-semibold)",
                          color: "var(--text-strong)",
                        }}
                      >
                        {tx(s.value)}
                      </div>
                      <div
                        style={{
                          fontSize: "var(--fs-caption)",
                          color: "var(--text-muted)",
                          marginTop: "2px",
                        }}
                      >
                        {tx(s.label)}
                      </div>
                    </div>
                  ))}
                </div>
              </Card>
            ))}
          </div>
        </Shell>
      </section>
    );
  }

  function QuoteBand() {
    const q = window.SITE.work.quote;
    return (
      <section
        className="dx-dark"
        style={{
          background: "var(--ink-900)",
          padding: "var(--section-y-compact) 0",
          position: "relative",
          overflow: "hidden",
        }}
      >
        <Grid dark fade="linear-gradient(0deg,#000 0%,transparent 90%)" />
        <Grain dark />
        <Shell>
          <blockquote
            style={{
              position: "relative",
              margin: 0,
              maxWidth: "46ch",
              paddingLeft: "22px",
              borderLeft: "3px solid var(--gold-400)",
              font: "var(--text-quote)",
              color: "var(--white)",
            }}
          >
            {tx(q.text)}
            <footer
              style={{
                marginTop: "14px",
                fontFamily: "var(--font-sans)",
                fontSize: "var(--fs-caption)",
                fontStyle: "normal",
                color: "var(--neutral-400)",
              }}
            >
              {tx(q.attribution)}
            </footer>
          </blockquote>
        </Shell>
      </section>
    );
  }

  function Page() {
    const w = window.SITE.work;
    return (
      <React.Fragment>
        <SiteHeader active="work" />
        <PageHero eyebrow={w.eyebrow} headline={w.headline} lede={w.lede} />
        <Cases />
        <ConversionBand />
        <SiteFooter />
      </React.Fragment>
    );
  }

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