const { Section, SectionHead, Portrait, PhotoFigure, CredentialList, PullQuote, TextLink, Button } =
  window.GEMAdvisoryDesignSystem_b1bc4f;

const PHOTO = "assets/photography/";

function AboutScreen({ go }) {
  const d = window.siteData;
  return (
    <>
      <Section style={{ background: "var(--gradient-wash-diagonal)" }}>
        <SectionHead eyebrow="About" title="Abigail Ross Hopper" />
        <div data-grid2 style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: "var(--gap-grid)", alignItems: "start" }}>
          <Portrait
            size={240}
            ring
            src={gemImg("headshot-square.jpg")}
            alt="Abigail Ross Hopper, seated portrait, looking to camera"
          />
          <div>
            {d.about.paragraphs.map((p, i) => (
              <p key={i} style={{ fontSize: "var(--size-body)", maxWidth: "62ch", margin: "0 0 18px" }}>
                {p}
              </p>
            ))}
            <CredentialList items={d.about.credentials.map((c) => Array.isArray(c.value) ? { ...c, value: c.value.map((v, i) => <span key={i} style={{ display: "block" }}>{v}</span>) } : c)} />
            <p style={{ marginTop: 20, marginBottom: 0, fontSize: "var(--size-body-sm)" }}>
              Connect with Abby on <TextLink href={d.contact.linkedinHref}>LinkedIn</TextLink>.
            </p>
          </div>
        </div>
      </Section>

      <Section tone="panel" size="tight" style={{ background: "var(--gradient-panel)" }}>
        <PullQuote
          quote={"\u201CI spent nine years explaining this industry to Congress, the press, and anyone who'd listen. I know which arguments land and which ones don't.\u201D"}
          attribution="— Abigail Ross Hopper"
        />
      </Section>

      <Section size="tight">
        <div data-grid2 style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--gap-grid)", alignItems: "start" }}>
          <div>
            <SectionHead eyebrow="Who Abby works with" title="The people who call" style={{ marginBottom: 24 }} />
            <p style={{ fontSize: "var(--size-body)", maxWidth: "46ch", margin: 0 }}>
              Developers and independent power producers, the investors behind them, boards and executive teams, and the
              associations and institutions that have to hold a position in public.
            </p>
          </div>
          <PhotoFigure
            src={gemImg("panel-ft-live-stage.jpg")}
            alt="Abigail Ross Hopper seated on a five-person panel at a live conference"
            ratio={0.62}
            rule
          />
        </div>
      </Section>

      <Section size="tight" style={{ paddingTop: 0 }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
            columnGap: "var(--gap-grid)",
            rowGap: 28,
          }}
        >
          <PhotoFigure
            src={gemImg("keynote-standing-room.jpg")}
            alt="Abigail Ross Hopper addressing a standing-room trade-show audience"
            ratio={0.7}
          />
          <PhotoFigure
            src={gemImg("keynote-us-map.jpg")}
            alt="Abigail Ross Hopper gesturing at a U.S. project map mid-laugh"
            ratio={0.7}
          />
          <PhotoFigure
            src={gemImg("media-radio-desk-04.png")}
            alt="Abigail Ross Hopper with the host at a broadcast desk"
            ratio={0.7}
          />
        </div>
      </Section>


      <Section size="tight">
        <SectionHead eyebrow="Beyond the podium" title="In the field" style={{ marginBottom: 28 }} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", columnGap: "var(--gap-grid)", rowGap: 32 }}>
          <PhotoFigure src={gemImg("field-solar-install.jpg")} alt="Abigail Ross Hopper in a hard hat helping carry a solar panel off a work truck" ratio={0.75} imgStyle={{ objectPosition: "center 40%" }} />
          <PhotoFigure src={gemImg("field-arctic-shoreline.jpg")} alt="Abigail Ross Hopper in a hard hat and safety vest touching the water at an Arctic shoreline" ratio={0.75} imgStyle={{ objectPosition: "center 50%" }} />
          <PhotoFigure src={gemImg("women-lets-share-the-sun.jpg")} alt="Abigail Ross Hopper with a group of women beside a Let’s Share the Sun Foundation banner" ratio={0.75} imgStyle={{ objectPosition: "center 40%" }} />
          <PhotoFigure src={gemImg("women-re-plus.jpg")} alt="Abigail Ross Hopper with women leaders at RE+ in front of a SEIA step-and-repeat" ratio={0.75} imgStyle={{ objectPosition: "center 50%" }} />
          <PhotoFigure src={gemImg("re-plus-houston.jpg")} alt="Abigail Ross Hopper in a cowboy hat and red blazer on the RE+ show floor" ratio={0.75} imgStyle={{ objectPosition: "center 30%" }} />
        </div>
      </Section>
      <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 }} title="Let's talk" />
          <Button variant="onGreen" href="#contact" onClick={(e) => { e.preventDefault(); go("contact"); }}>
            Get in touch
          </Button>
        </div>
      </Section>
    </>
  );
}

Object.assign(window, { AboutScreen });