/* Dexilion — home page. */

(function () {
  const { Button, Tabs } = window;
  const {
    Ico,
    Grain,
    Grid,
    Eyebrow,
    Shell,
    tx,
    ImageSlot,
    DitherField,
    SiteHeader,
    EditorialList,
    ConversionBand,
    SiteFooter,
  } = window;

  function Hero() {
    const h = window.SITE.home.hero;
    return (
      <section
        className="dx-hero dx-dark"
        style={{
          background: "var(--ink-900)",
          color: "var(--white)",
          padding: "112px 0 0",
          position: "relative",
          overflow: "hidden",
          /* One screen tall, less the sticky header above it. box-sizing keeps
             the 112px top padding inside that budget; min-height lets the
             section grow rather than clip if the copy ever outgrows a screen. */
          boxSizing: "border-box",
          height: "calc(100vh - var(--header-h))",
          minHeight: "fit-content",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <DitherField />
        <Grain dark />
        <Shell
          style={{
            flex: "1 1 auto",
            display: "flex",
            alignItems: "center",
            minHeight: 0,
          }}
        >
          <div
            className="dx-hero-grid"
            style={{
              position: "relative",
              width: "100%",
              display: "grid",
              gridTemplateColumns: "1.06fr .94fr",
              gap: "56px",
              alignItems: "center",
              paddingBottom: "88px",
            }}
          >
            <div>
              <Eyebrow color="var(--gold-400)">
                {window.SITE.brand.positioning}
              </Eyebrow>
              <h1
                style={{
                  font: "var(--text-display-1)",
                  letterSpacing: "var(--ls-display)",
                  margin: "22px 0 0",
                  color: "var(--white)",
                  textWrap: "balance",
                }}
              >
                {h.headline}
                <span style={{ color: "var(--gold-400)" }}>
                  {h.headlineAccent}
                </span>
                {h.headlineTail}
              </h1>
              <p
                style={{
                  margin: "26px 0 0",
                  maxWidth: "54ch",
                  fontSize: "var(--fs-body-lg)",
                  lineHeight: "var(--lh-body)",
                  color: "var(--powder-500)",
                }}
              >
                {tx(h.lede)}
              </p>
              <div
                className="dx-hero-ctas"
                style={{ display: "flex", gap: "12px", marginTop: "36px" }}
              >
                <Button
                  variant="accent"
                  size="lg"
                  onClick={() => {
                    window.location.href = "contact.html";
                  }}
                >
                  {h.primaryCta}
                </Button>
                <Button
                  variant="secondary"
                  size="lg"
                  onClick={() => {
                    window.location.href = "work.html";
                  }}
                  style={{
                    background: "transparent",
                    color: "var(--white)",
                    borderColor: "rgba(255,255,255,.28)",
                  }}
                >
                  {h.secondaryCta}
                </Button>
              </div>
            </div>
            <div className="dx-hero-art">
              {h.art && <ImageSlot label={h.art} ratio="4 / 5" dark />}
            </div>
          </div>
        </Shell>

        <div
          style={{
            position: "relative",
            background: "rgba(255,255,255,.02)",
            backdropFilter: "blur(4px)",
            WebkitBackdropFilter: "blur(4px)",
            borderTop: "1px solid rgba(255,255,255,.12)",
          }}
        >
          <Shell>
            <div
              className="dx-commit-grid"
              style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)" }}
            >
              {window.SITE.home.commitments.map((c, i) => (
                <div
                  key={i}
                  className="dx-commit-item"
                  style={{
                    padding: "30px 28px 32px",
                    borderLeft: i ? "1px solid rgba(255,255,255,.10)" : "none",
                    paddingLeft: i ? "28px" : 0,
                  }}
                >
                  <div
                    style={{
                      fontFamily: "var(--font-serif)",
                      fontSize: "19px",
                      fontWeight: "var(--fw-medium)",
                      lineHeight: 1.35,
                      color: "var(--white)",
                      maxWidth: "22ch",
                    }}
                  >
                    {tx(c.title)}
                  </div>
                  <div
                    style={{
                      marginTop: "10px",
                      fontSize: "var(--fs-caption)",
                      lineHeight: 1.65,
                      color: "var(--neutral-400)",
                      maxWidth: "28ch",
                    }}
                  >
                    {tx(c.body)}
                  </div>
                </div>
              ))}
            </div>
          </Shell>
        </div>
      </section>
    );
  }

  function ClientStrip() {
    const c = window.SITE.home.clients;
    return (
      <section
        style={{
          background: "var(--paper-100)",
          borderBottom: "1px solid var(--paper-200)",
          padding: "48px 0",
          position: "relative",
        }}
      >
        <Grain />
        <Shell>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: "38px",
              flexWrap: "wrap",
            }}
          >
            <span
              style={{
                font: "var(--text-eyebrow)",
                letterSpacing: "var(--ls-eyebrow)",
                textTransform: "uppercase",
                color: "var(--text-muted)",
              }}
            >
              {c.label}
            </span>
            <span
              style={{
                fontFamily: "Geist, sans-serif",
                fontSize: "19px",
                fontWeight: "var(--fw-medium)",
                color: "grey",
                letterSpacing: "-0.01em",
                display: "flex",
                gap: "12px",
                alignItems: "center",
              }}
            >
              <img
                src="assets/brokerbroker.svg"
                alt="BrokerBroker"
                height="24"
              />
              BrokerBroker
            </span>
            <span
              style={{
                fontFamily: "var(--font-serif)",
                fontSize: "19px",
                fontWeight: "var(--fw-medium)",
                color: "grey",
                letterSpacing: "-0.01em",
                display: "flex",
                gap: "12px",
                alignItems: "center",
              }}
            >
              <img
                src="assets/cursor-insight.svg"
                alt="Cursor Insight"
                height="24"
              />
            </span>
            <span
              style={{
                fontFamily: "var(--font-serif)",
                fontSize: "19px",
                fontWeight: "var(--fw-medium)",
                color: "grey",
                letterSpacing: "-0.01em",
                display: "flex",
                gap: "12px",
                alignItems: "center",
              }}
            >
              <img src="assets/excalidraw.svg" alt="Excalidraw" height="24" />
            </span>
          </div>
        </Shell>
      </section>
    );
  }

  function Services() {
    const s = window.SITE.home.services;
    return (
      <section
        style={{
          background: "var(--paper-50)",
          padding: "var(--section-y) 0",
          position: "relative",
          overflow: "hidden",
        }}
      >
        <Grain />
        <Shell>
          <EditorialList
            eyebrow={s.eyebrow}
            heading={s.heading}
            headingLine2={s.headingLine2}
            lede={s.lede}
            action={{ label: s.cta, href: "services.html" }}
            href="services.html"
            rows={window.SITE.practices.map((p) => ({
              icon: p.icon,
              title: p.title,
              summary: p.summary,
              meta: p.meta,
              href: p.slug ? "services.html#" + p.slug : undefined,
            }))}
          />
        </Shell>
      </section>
    );
  }

  function CaseStudy() {
    const c = window.SITE.home.caseStudy;
    return (
      <section
        className="dx-dark"
        style={{
          background: "var(--ink-900)",
          padding: "var(--section-y) 0",
          position: "relative",
          overflow: "hidden",
        }}
      >
        <Grid dark fade="linear-gradient(0deg,#000 0%,transparent 90%)" />
        <Grain dark />
        <Shell>
          <div
            className="dx-case-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: "56px",
              alignItems: "center",
            }}
          >
            <video
              src="assets/excalidraw-elbow.webm"
              loop
              autoPlay
              muted
              playsInline
              ref={(el) => {
                if (!el) return;
                el.muted = true;
                el.play().catch(() => {});
              }}
            ></video>
            <div>
              <Eyebrow color="var(--gold-400)">{c.eyebrow}</Eyebrow>
              <h2
                style={{
                  font: "var(--text-h1)",
                  letterSpacing: "var(--ls-heading)",
                  margin: "18px 0 0",
                  color: "var(--white)",
                }}
              >
                {tx(c.headline)}
              </h2>
              <p
                style={{
                  margin: "20px 0 0",
                  fontSize: "var(--fs-body-lg)",
                  lineHeight: "var(--lh-body)",
                  color: "var(--powder-500)",
                  maxWidth: "52ch",
                }}
              >
                {tx(c.body)}
              </p>
              <blockquote
                style={{
                  margin: "30px 0 0",
                  paddingLeft: "22px",
                  borderLeft: "3px solid var(--gold-400)",
                  font: "var(--text-quote)",
                  color: "var(--white)",
                  maxWidth: "40ch",
                }}
              >
                {tx(c.quote)}
                {c.attribution && (
                  <footer
                    style={{
                      marginTop: "14px",
                      fontFamily: "var(--font-sans)",
                      fontSize: "var(--fs-caption)",
                      fontStyle: "normal",
                      color: "var(--neutral-400)",
                    }}
                  >
                    {tx(c.attribution)}
                  </footer>
                )}
              </blockquote>
              <div
                style={{
                  display: "flex",
                  gap: "26px",
                  margin: "32px 0 28px",
                  flexWrap: "wrap",
                }}
              >
                {c.stats.map((s, i) => (
                  <div key={i}>
                    <div
                      style={{
                        fontFamily: "var(--font-mono)",
                        fontSize: "22px",
                        fontWeight: "var(--fw-semibold)",
                        color: "var(--gold-400)",
                      }}
                    >
                      {tx(s.value)}
                    </div>
                    <div
                      style={{
                        fontSize: "var(--fs-caption)",
                        color: "var(--neutral-400)",
                        marginTop: "2px",
                      }}
                    >
                      {tx(s.label)}
                    </div>
                  </div>
                ))}
              </div>
              <Button
                variant="secondary"
                onClick={() => {
                  window.location.href = c.href;
                }}
                style={{
                  background: "transparent",
                  color: "var(--white)",
                  borderColor: "rgba(255,255,255,.28)",
                }}
              >
                {c.cta}
              </Button>
            </div>
          </div>
        </Shell>
      </section>
    );
  }

  function Approach() {
    const a = window.SITE.home.approach,
      phases = window.SITE.phases;
    const [tab, setTab] = React.useState(phases[0].value);
    const cur = phases.find((p) => p.value === tab);
    return (
      <section
        style={{
          background: "var(--white)",
          padding: "var(--section-y-compact) 0 var(--section-y)",
          borderTop: "1px solid var(--paper-200)",
          position: "relative",
          overflow: "hidden",
        }}
      >
        <Grid fade="linear-gradient(180deg,#000 0%,transparent 55%)" />
        <Shell>
          <div
            className="dx-approach-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "320px 1fr",
              gap: "56px",
            }}
          >
            <div>
              <Eyebrow>{a.eyebrow}</Eyebrow>
              <h2
                style={{
                  font: "var(--text-h2)",
                  letterSpacing: "var(--ls-heading)",
                  margin: "18px 0 0",
                  color: "var(--text-strong)",
                }}
              >
                {a.heading}
              </h2>
            </div>
            <div>
              <Tabs
                items={phases.map((p) => ({ value: p.value, label: p.label }))}
                value={tab}
                onChange={setTab}
              />
              <div style={{ marginTop: "28px", maxWidth: "62ch" }}>
                <div
                  style={{
                    fontFamily: "var(--font-serif)",
                    fontSize: "var(--fs-h3)",
                    fontWeight: "var(--fw-semibold)",
                    color: "var(--text-strong)",
                  }}
                >
                  {cur.label}
                </div>
                <p
                  style={{
                    margin: "12px 0 0",
                    fontSize: "var(--fs-body-lg)",
                    lineHeight: "var(--lh-body)",
                    color: "var(--text-body)",
                  }}
                >
                  {tx(cur.body)}
                </p>
                <div
                  style={{
                    marginTop: "20px",
                    paddingTop: "16px",
                    borderTop: "1px solid var(--paper-200)",
                    fontFamily: "var(--font-mono)",
                    fontSize: "12px",
                    color: "var(--text-muted)",
                    lineHeight: 1.7,
                  }}
                >
                  {window.SITE.ui.deliverableLabel}: {tx(cur.deliverable)}
                </div>
              </div>
            </div>
          </div>
        </Shell>
      </section>
    );
  }

  function Page() {
    return (
      <React.Fragment>
        <SiteHeader active="home" />
        <Hero />
        <ClientStrip />
        <Services />
        <CaseStudy />
        <Approach />
        <ConversionBand form />
        <SiteFooter />
      </React.Fragment>
    );
  }

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