const { Section, Container, SectionHead, HeroReveal, Button, StatBand, ServiceItem, PressItem, PullQuote, PhotoFigure, TextLink } =
  window.GEMAdvisoryDesignSystem_b1bc4f;

const PHOTO = "assets/photography/";

const HOME_PILLAR_PHOTOS = [
  [
    ["senator-schatz.jpg", "Abigail Ross Hopper with U.S. Senator Brian Schatz after his remarks", "center 25%"],
    ["speaking-enr-awards.jpg", "Abigail Ross Hopper at the ENR awards podium, arms spread wide", "center 35%"],
  ],
  [
    ["media-trade-show-interview.jpg", "Abigail Ross Hopper interviewed on camera at an international solar trade show", "center 25%"],
    ["field-solar-install.jpg", "Abigail Ross Hopper in a hard hat helping carry a solar panel off a work truck", "center 45%"],
  ],
];

function HomeScreen({ go }) {
  const d = window.siteData;
  return (
    <>
      <Section size="none" style={{ background: "var(--gradient-wash-diagonal)", paddingTop: 84, paddingBottom: 84 }}>
        <HeroReveal>
          <div
            data-grid2
            style={{ display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: "var(--gap-grid)", alignItems: "center" }}
          >
            <div>
              <p
                style={{
                  fontFamily: "var(--font-display)",
                  fontStyle: "italic",
                  fontSize: "var(--size-lede)",
                  color: "var(--green)",
                  margin: "0 0 18px",
                  maxWidth: "none",
                }}
              >
                {d.hero.eyebrow}
              </p>
              <h1 style={{ maxWidth: "16ch", margin: "0 0 18px", color: "var(--pine)" }}>{d.hero.headline}</h1>
              <p style={{ fontFamily: "var(--font-display)", fontSize: "var(--size-section)", lineHeight: "var(--leading-section)", color: "var(--green)", maxWidth: "24ch", margin: "0 0 24px" }}>{d.hero.subhead}</p>
              <span
                aria-hidden="true"
                style={{ display: "block", width: 120, height: 2, background: "var(--gradient-rule)", margin: "0 0 26px" }}
              ></span>
              <p style={{ fontSize: "var(--size-body)", maxWidth: "58ch", margin: "0 0 32px", color: "var(--text-body)" }}>
                {d.hero.lede}
              </p>
              <div style={{ display: "flex", gap: 14, flexWrap: "wrap", alignItems: "center" }}>
                <Button href="#contact" onClick={(e) => { e.preventDefault(); go("contact"); }}>
                  Get in touch
                </Button>
                <Button variant="outline" href="#speaking" onClick={(e) => { e.preventDefault(); go("speaking"); }}>
                  Speaking
                </Button>
              </div>
            </div>
            <PhotoFigure
              src={gemImg("headshot-hero.jpg")}
              alt="Abigail Ross Hopper, seated, arms folded, looking to camera"
              ratio={1.24}
              rule
            />
          </div>
        </HeroReveal>
      </Section>

      <Section size="none" style={{ borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)", paddingTop: 30, paddingBottom: 30 }}>
        <div style={{ display: "flex", gap: 28, alignItems: "center", flexWrap: "nowrap" }}>
          <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "var(--size-lede)", color: "var(--green)", margin: 0, maxWidth: "none", flex: "0 0 auto" }}>
            {d.asSeenIn.label}
          </p>
          <div
            style={{
              flex: "1 1 360px",
              minWidth: 0,
              overflow: "hidden",
              WebkitMaskImage: "linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%)",
              maskImage: "linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%)",
            }}
          >
            <div data-logo-marquee style={{ display: "flex", width: "max-content", alignItems: "center" }}>
              {[0, 1].map((copy) => (
                <div key={copy} style={{ display: "flex", alignItems: "center", gap: 56, paddingRight: 56 }} aria-hidden={copy === 1 ? "true" : undefined}>
                  {d.asSeenIn.outlets.map((o) =>
                    o.logo ? (
                      <img
                        key={o.name}
                        src={o.logo}
                        alt={copy === 0 ? o.name : ""}
                        style={{ height: o.logoHeight || 26, width: "auto", objectFit: "contain", opacity: 0.9, flex: "0 0 auto" }}
                      />
                    ) : (
                      <span
                        key={o.name}
                        style={{
                          display: "inline-flex",
                          alignItems: "center",
                          height: 40,
                          padding: "0 14px",
                          border: "1px dashed var(--rule-strong)",
                          borderRadius: "var(--radius-media)",
                          background: "var(--surface-card)",
                          fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)",
                          fontSize: 11,
                          letterSpacing: "0.04em",
                          textTransform: "uppercase",
                          color: "var(--text-caption)",
                          whiteSpace: "nowrap",
                          flex: "0 0 auto",
                        }}
                      >
                        {o.name}
                      </span>
                    )
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </Section>

      <StatBand stats={d.stats} />

      <Section id="services">
        <SectionHead eyebrow="What we do" title="Advisory built for the energy transition" />
        <div style={{ display: "grid", gap: 56 }}>
          {d.pillars.map((p, i) => (
            <React.Fragment key={p.title}>
            {i > 0 && HOME_PILLAR_PHOTOS[i - 1] ? (
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "var(--gap-grid)" }}>
                {HOME_PILLAR_PHOTOS[i - 1].map(([f, alt, pos]) => (
                  <PhotoFigure key={f} src={gemImg(f)} alt={alt} ratio={0.62} imgStyle={{ objectPosition: pos }} />
                ))}
              </div>
            ) : null}
            <div style={{ paddingTop: i === 0 ? 0 : 8 }}>
              <p style={{ fontFamily: "var(--font-display)", fontSize: "var(--size-section)", lineHeight: "var(--leading-section)", color: "var(--pine)", margin: "0 0 12px", maxWidth: "none" }}>{p.title}</p>
              <p style={{ fontSize: "var(--size-body)", color: "var(--text-caption)", maxWidth: "64ch", margin: "0 0 28px" }}>{p.intro}</p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", 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>
            </React.Fragment>
          ))}
        </div>
      </Section>

      <div style={{ background: "var(--gradient-wash)", borderTop: "1px solid var(--rule)" }}>
        <Container style={{ padding: "80px var(--page-gutter)" }}>
          <div
            data-grid2
            style={{ display: "grid", gridTemplateColumns: "1.25fr 0.75fr", gap: "var(--gap-grid)", alignItems: "center" }}
          >
            <PullQuote quote={d.quote.text} attribution={d.quote.attribution} />
            <PhotoFigure
              src={gemImg("panel-seated-with-slide.jpg")}
              alt="Abigail Ross Hopper in conversation on stage, a data slide behind her"
              ratio={0.74}
            />
          </div>
        </Container>
      </div>

      <Section tone="panel" id="press" style={{ background: "var(--gradient-panel)" }}>
        <SectionHead eyebrow="In the press" title="A trusted public voice on energy policy" />
        <p style={{ fontSize: "var(--size-body)", maxWidth: "64ch", margin: "0 0 40px" }}>{d.pressNote}</p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", columnGap: "var(--gap-grid)", rowGap: 32, marginBottom: 32 }}>
          {d.pressFeatured.map((a) => (
            <a
              key={a.title}
              href={a.href}
              target="_blank"
              rel="noopener"
              style={{ display: "block", textDecoration: "none", borderBottom: "none", color: "inherit", borderTop: "1px solid var(--rule-strong)", paddingTop: 18 }}
            >
              <div style={{ display: "flex", alignItems: "center", minHeight: 26, marginBottom: 12 }}>
                <img src={a.logo} alt={a.outlet} style={{ height: a.logoHeight || 20, width: "auto", objectFit: "contain", objectPosition: "left center", opacity: 0.9 }} />
              </div>
              <p style={{ fontFamily: "var(--font-display)", fontSize: "var(--size-subhead)", lineHeight: 1.25, color: "var(--pine)", margin: "0 0 10px", maxWidth: "28ch" }}>
                {a.title}
              </p>
              <p style={{ fontSize: "var(--size-body-sm)", color: "var(--text-caption)", margin: "0 0 10px", maxWidth: "34ch" }}>
                {"\u201C" + a.quote + "\u201D"}
              </p>
              <p style={{ fontSize: "var(--size-small)", color: "var(--text-muted)", margin: 0 }}>{a.format}</p>
            </a>
          ))}
        </div>
        <div style={{ marginBottom: 56, display: "flex", gap: 14, flexWrap: "wrap" }}>
          <Button variant="outline" size="sm" href="#press" onClick={(e) => { e.preventDefault(); go("press"); }}>
            See more press
          </Button>
          <Button variant="outline" size="sm" href="#speaking" onClick={(e) => { e.preventDefault(); go("speaking"); }}>
            Invite Abby to speak
          </Button>
        </div>
        <div style={{ margin: "0 0 48px", padding: "30px 0 34px", borderTop: "2px solid var(--brass)", borderBottom: "1px solid var(--rule)" }}>
          <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "var(--size-lede)", color: "var(--brass)", margin: "0 0 12px", maxWidth: "none" }}>Recognition</p>
          <p style={{ fontFamily: "var(--font-display)", fontWeight: "var(--weight-regular)", fontSize: "var(--size-section)", lineHeight: "var(--leading-section)", color: "var(--pine)", margin: "0 0 30px", maxWidth: "22ch" }}>
            Recognized for how she transforms organizations
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", columnGap: "var(--gap-grid)", rowGap: 36 }}>
            {d.press.map((p) => (
              <div key={p.outlet}>
                <img src={p.logo} alt={p.outlet} style={{ display: "block", height: p.logoHeight, width: "auto", maxWidth: "100%", objectFit: "contain", objectPosition: "left center", marginBottom: 18 }} />
                <p style={{ fontFamily: "var(--font-display)", fontWeight: "var(--weight-regular)", fontSize: "var(--size-subhead)", lineHeight: 1.28, color: "var(--pine)", margin: "0 0 8px", maxWidth: "22ch" }}>{p.headline}</p>
                <p style={{ fontSize: "var(--size-body-sm)", color: "var(--text-caption)", margin: 0, maxWidth: "30ch" }}>{p.detail}</p>
              </div>
            ))}
          </div>
        </div>        <div style={{ display: "grid", gap: 40, marginBottom: 56 }}>
          <PhotoFigure
            src={gemImg("media-radio-desk-01.png")}
            alt="Abigail Ross Hopper laughing during a live radio interview"
            ratio={0.46}
            rule
          />
          <PhotoFigure
            src={gemImg("panel-ceraweek-interview.jpg")}
            alt="Abigail Ross Hopper interviewed on a conference main stage"
            ratio={0.46}
            rule
          />
          <PhotoFigure
            src={gemImg("keynote-50gw-slide.jpg")}
            alt="Abigail Ross Hopper on stage beside a 50 gigawatt announcement slide"
            ratio={0.46}
            rule
          />
        </div>
        <div data-grid2 style={{ display: "grid", gridTemplateColumns: "210px 1fr", gap: 34, alignItems: "center", background: "var(--surface-card)", border: "1px solid var(--rule)", borderRadius: "var(--radius-media)", padding: 28 }}>
          <img src={gemImg(d.podcast.art)} alt="Boots on the Ground podcast cover art" style={{ display: "block", width: "100%", borderRadius: "var(--radius-media)" }} />
          <div>
            <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "var(--size-lede)", color: "var(--green)", margin: "0 0 10px", maxWidth: "none" }}>Podcast</p>
            <p style={{ fontFamily: "var(--font-display)", fontSize: "var(--size-section)", lineHeight: 1.15, color: "var(--pine)", margin: "0 0 8px", maxWidth: "none" }}>{d.podcast.title}</p>
            <p style={{ fontSize: "var(--size-body-sm)", color: "var(--text-caption)", margin: "0 0 14px" }}>{d.podcast.subtitle}</p>
            <p style={{ fontSize: "var(--size-body)", maxWidth: "48ch", margin: "0 0 22px" }}>{d.podcast.body}</p>
            <Button variant="outline" size="sm" href={d.podcast.href} target="_blank" rel="noopener">Listen on Apple Podcasts</Button>
          </div>
        </div>
      </Section>

      <Section tone="field" size="tight" style={{ background: "var(--gradient-field)" }}>
        <div data-grid2 style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "var(--gap-grid)", alignItems: "center" }}>
          <SectionHead
            tone="onGreen"
            style={{ marginBottom: 0 }}
            eyebrow="Get in touch"
            title="Let's talk"
            lede={d.contact.lede}
          />
          <div>
            <Button variant="onGreen" href="#contact" onClick={(e) => { e.preventDefault(); go("contact"); }}>
              Email Abby
            </Button>
            <p style={{ marginTop: 20, marginBottom: 0, fontSize: "var(--size-small)", color: "var(--text-onGreen-muted)" }}>
              Connect with Abby on <TextLink tone="onGreen" href={d.contact.linkedinHref}>LinkedIn</TextLink>.
            </p>
          </div>
        </div>
      </Section>
    </>
  );
}

Object.assign(window, { HomeScreen });
