const { Section, SectionHead, ServiceItem, Portrait, PhotoFigure, Panel, Button, Badge, CredentialList } =
  window.GEMAdvisoryDesignSystem_b1bc4f;

const PHOTO = "assets/photography/";

function SpeakingScreen({ go }) {
  const d = window.siteData;
  return (
    <>
      <Section style={{ background: "var(--gradient-wash-diagonal)" }}>
        <div data-grid2 style={{ display: "grid", gridTemplateColumns: "1fr 0.85fr", gap: "var(--gap-grid)", alignItems: "center" }}>
          <SectionHead eyebrow="Speaking" title="Available to speak" lede={d.speaking.lede} style={{ marginBottom: 0 }} />
          <PhotoFigure
            src={gemImg("keynote-standing-room.jpg")}
            alt="Abigail Ross Hopper addressing a standing-room trade-show audience"
            ratio={0.68}
            rule
          />
        </div>
      </Section>

      <Section size="tight" style={{ paddingTop: 0 }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
            columnGap: "var(--gap-grid)",
            rowGap: "var(--gap-grid-row)",
          }}
          data-grid2
        >
          {d.speaking.topics.map((t) => (
            <ServiceItem key={t.title} title={t.title}>
              {t.body}
            </ServiceItem>
          ))}
        </div>
      </Section>

      <Section tone="panel" size="tight" style={{ background: "var(--gradient-panel)" }}>
        <div data-grid2 style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--gap-grid)", alignItems: "start" }}>
          <div>
            <SectionHead eyebrow="Formats" title="How Abby shows up" style={{ marginBottom: 22 }} />
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 32 }}>
              {d.speaking.formats.map((f) => (
                <Badge key={f} tone="green">
                  {f}
                </Badge>
              ))}
            </div>
            <PhotoFigure
              src={gemImg("panel-isa-pavilion.jpg")}
              alt="Abigail Ross Hopper on an international pavilion panel with interpretation headsets"
              ratio={0.6}
            />
          </div>
          <div>
            <SectionHead eyebrow="For organizers" title="What you need" style={{ marginBottom: 22 }} />
            <CredentialList
              style={{ marginTop: 0, paddingTop: 0, borderTop: "none" }}
              columns={1}
              items={[
                { label: "Short bio", value: "Founder and principal, GEM Advisory; former President & CEO, SEIA; former Director, BOEM." },
                { label: "Based in", value: d.contact.based },
              ]}
            />
            <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 24, alignItems: "start", marginTop: 32 }}>
              <div>
                <Portrait
                  size={180}
                  shape="square"
                  src={gemImg("headshot-hero.jpg")}
                  alt="Abigail Ross Hopper, current headshot"
                />
                <Button
                  variant="outline"
                  size="sm"
                  href={gemImg("headshot-hero.jpg")}
                  download="abigail-ross-hopper-headshot-2026.jpg"
                  style={{ marginTop: 16, width: "100%" }}
                >
                  Download headshot
                </Button>
              </div>
              <p style={{ margin: 0, fontSize: "var(--size-body-sm)", color: "var(--text-caption)" }}>
                Current headshot, 2026. Higher-resolution files, a one-page speaker sheet and past-stage references are
                available on request.
              </p>
            </div>
          </div>
        </div>
      </Section>

      <Section size="tight">
        <div data-grid2 style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: "var(--gap-grid)", alignItems: "start" }}>
          <PhotoFigure
            src={gemImg("keynote-chart-deployment.jpg")}
            alt="Abigail Ross Hopper presenting a deployment-timeline chart"
            ratio={0.66}
            rule
          />
          <div>
            <SectionHead eyebrow="On the record" title="Press, video and testimony" style={{ marginBottom: 16 }} />
            <p style={{ fontSize: "var(--size-body)", maxWidth: "44ch", margin: "0 0 22px" }}>{d.pressNote}</p>
            <Button variant="outline" size="sm" href="#press" onClick={(e) => { e.preventDefault(); go("press"); }}>See press &amp; video</Button>
          </div>
        </div>
      </Section>


      <Section size="tight">
        <SectionHead eyebrow="On stage" title="Recent rooms" style={{ marginBottom: 28 }} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", columnGap: "var(--gap-grid)", rowGap: 32 }}>
          <PhotoFigure src={gemImg("speaking-gala.jpg")} alt="Abigail Ross Hopper speaking animatedly at a clear podium at an anniversary gala" ratio={0.75} imgStyle={{ objectPosition: "center 40%" }} />
          <PhotoFigure src={gemImg("speaking-enr-awards.jpg")} alt="Abigail Ross Hopper at the ENR awards podium, arms spread wide" ratio={0.75} imgStyle={{ objectPosition: "center 35%" }} />
          <PhotoFigure src={gemImg("speaking-podium-evening.jpg")} alt="Abigail Ross Hopper smiling at a podium during an evening event" ratio={0.75} imgStyle={{ objectPosition: "center 25%" }} />
          <PhotoFigure src={gemImg("speaking-volunteer-day.jpg")} alt="Abigail Ross Hopper addressing volunteers with a handheld microphone" ratio={0.75} imgStyle={{ objectPosition: "center 25%" }} />
          <PhotoFigure src={gemImg("women-reception-remarks.jpg")} alt="Abigail Ross Hopper giving remarks to a room of women at a conference reception" ratio={0.75} imgStyle={{ objectPosition: "center 40%" }} />
          <PhotoFigure src={gemImg("senator-schatz.jpg")} alt="Abigail Ross Hopper with U.S. Senator Brian Schatz after his remarks" 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 }} eyebrow="Booking" title="Invite Abby to speak" />
          <Button variant="onGreen" href="#contact" onClick={(e) => { e.preventDefault(); go("contact"); }}>
            Start a conversation
          </Button>
        </div>
      </Section>
    </>
  );
}

Object.assign(window, { SpeakingScreen });