const { Section, Container, SectionHead, PullQuote, Button, ServiceItem } = window.GEMAdvisoryDesignSystem_b1bc4f;

function ServicesScreen({ go }) {
  const d = window.siteData;
  return (
    <>
      <Section style={{ background: "var(--gradient-wash-diagonal)" }}>
        <SectionHead
          eyebrow="Services"
          title="Advisory built for the energy transition"
          lede={d.servicesPage.lede}
          style={{ marginBottom: 0 }}
        />
      </Section>

      <Section size="tight" style={{ paddingTop: 0 }}>
        <div style={{ display: "grid", gap: 0 }}>
          {d.pillars.map((p, i) => (
            <div
              key={p.title}
              data-grid2
              style={{
                display: "grid",
                gridTemplateColumns: "minmax(200px, 320px) 1fr",
                gap: "var(--gap-grid)",
                alignItems: "start",
                padding: "40px 0 48px",
                borderTop: i === 0 ? "2px solid var(--brass)" : "1px solid var(--rule)",
              }}
            >
              <div>
                <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--size-small)", color: "var(--text-muted)", margin: "0 0 10px", letterSpacing: "0.06em" }}>
                  {"0" + (i + 1)}
                </p>
                <p style={{ fontFamily: "var(--font-display)", fontSize: "var(--size-section)", lineHeight: "var(--leading-section)", color: "var(--pine)", margin: "0 0 16px", maxWidth: "14ch" }}>
                  {p.title}
                </p>
                <p style={{ fontSize: "var(--size-body-sm)", color: "var(--text-caption)", margin: 0, maxWidth: "38ch" }}>{p.intro}</p>
              </div>
              <div style={{ display: "grid", gap: 16 }}>
                {p.services.map((s) => (
                  <div key={s.title} style={{ border: "1px solid var(--rule)", borderRadius: "var(--radius-media)", padding: "22px 22px 8px", background: "var(--white)" }}>
                    <ServiceItem title={s.title}>{s.body}</ServiceItem>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </Section>

      <div style={{ background: "var(--gradient-wash)", borderTop: "1px solid var(--rule)" }}>
        <Container style={{ padding: "72px var(--page-gutter)" }}>
          <PullQuote quote={d.quote.text} attribution={d.quote.attribution} />
        </Container>
      </div>

      <Section tone="field" size="tight" style={{ background: "var(--gradient-field)" }}>
        <div style={{ display: "flex", gap: 24, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap" }}>
          <SectionHead tone="onGreen" style={{ marginBottom: 0 }} eyebrow="Engagements" title="Let’s talk about the work" />
          <Button variant="onGreen" href="#contact" onClick={(e) => { e.preventDefault(); go("contact"); }}>
            Start a conversation
          </Button>
        </div>
      </Section>
    </>
  );
}

Object.assign(window, { ServicesScreen });