// ev-pages-3.jsx — Team + Case Studies pages.

// ============================================================================
// TEAM PAGE
// ============================================================================

const FULL_TEAM = [
  {
    name: "Will Lytle",
    title: "PhD · Founder & Principal",
    discipline: "Resource Governance",
    color: "#2D6E5E",
    variant: 0,
    location: "Pacific Northwest",
    short: "Cross-disciplinary expert in resource governance and stakeholder partnerships.",
    long: "Will combines deep cross-disciplinary experience with an ability to understand customer needs, assemble expert teams, and build partnerships across sectors to manage complex projects and advance equitable, science-driven resource governance.",
    expertise: ["Cross-sector partnerships", "Equitable governance", "Watershed policy", "Stakeholder facilitation"],
  },
  {
    name: "Hossein Tavakoli",
    title: "PhD · Innovation Lead",
    discipline: "Climate Technology",
    color: "#007878",
    variant: 1,
    location: "San Francisco Bay",
    short: "Pioneer in digital EPDs for the concrete industry; visionary in low-carbon materials.",
    long: "Hossein is one of the original visionaries who found a home at Climate Earth: the first and only global provider of on-demand digital EPDs and business intelligence tools for the concrete industry, offering data insights that advance sustainability assessment and life-cycle thinking for lower-carbon materials.",
    expertise: ["EPDs & material disclosure", "Concrete decarbonization", "Industrial LCA", "Climate-tech product"],
  },
  {
    name: "Robert Handler",
    title: "PhD · Environmental Engineer",
    discipline: "Lifecycle Assessment",
    color: "#1B4A3B",
    variant: 2,
    location: "Great Lakes Region",
    short: "Civil & Environmental Engineering PhD; bridge between remediation and sustainability.",
    long: "Robert holds a PhD in Civil and Environmental Engineering and, after moving from groundwater remediation into sustainable engineering through life-cycle assessment work, now focuses on sustainability assessment and life-cycle thinking as an assistant professor.",
    expertise: ["Lifecycle assessment", "Sustainable engineering", "Groundwater remediation", "Academic research"],
  },
  {
    name: "Kelly Froehlich",
    title: "PhD · Agricultural Systems",
    discipline: "Sustainable Agriculture",
    color: "#C25E2F",
    variant: 3,
    location: "Mountain West",
    short: "Animal sciences PhD; producer educator and sustainable agriculture lead.",
    long: "Kelly holds a PhD in animal sciences and spearheaded a beginning sheep producer program through the American Sheep Industry Association to deliver producer education via online curriculum and in-person events.",
    expertise: ["Producer education", "Animal sciences", "Curriculum design", "Sustainable livestock systems"],
  },
  {
    name: "Matt Gallagher",
    title: "Infrastructure & Technology",
    discipline: "Network & Cloud Systems",
    color: "#4A6058",
    variant: 1,
    location: "Multi-site",
    short: "Network and cloud infrastructure specialist; resilience and automation.",
    long: "Matt manages network and cloud infrastructure across multiple sites, deploying SD-WAN and cloud solutions, overseeing security, automation, and IT systems for organizational resilience.",
    expertise: ["SD-WAN deployment", "Cloud infrastructure", "Security automation", "IT for resilience"],
  },
  {
    name: "Whitney Warstler",
    title: "Communications & Strategy",
    discipline: "Strategic Communications",
    color: "#D4A84B",
    variant: 2,
    location: "Midwest",
    short: "Storytelling, content, and growth — at the intersection of community and brand.",
    long: "Whitney is a seasoned Communications Consultant with private sector and community leadership experience. She combines strategic storytelling and digital expertise to create engaging content, strengthen relationships, and drive meaningful growth.",
    expertise: ["Strategic storytelling", "Content strategy", "Community engagement", "Digital growth"],
  },
];

function TeamCard({ m }) {
  const t = useTheme();
  const v = useViewport();
  const [open, setOpen] = React.useState(false);
  return (
    <div
      onClick={() => setOpen(!open)}
      style={{
        background: t.c.bg,
        border: `1px solid ${t.c.line}`,
        borderRadius: t.r.card,
        overflow: "hidden",
        transition: "all 0.25s",
        cursor: "pointer",
        display: "flex",
        flexDirection: "column",
      }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = t.c.primary; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = t.c.line; }}
    >
      <div style={{ padding: rv(v, 24, 28, 32), paddingBottom: 0 }}>
        <Avatar name={m.name} color={m.color} size={rv(v, 96, 108, 120)} variant={m.variant} />
      </div>
      <div style={{ padding: rv(v, 24, 28, 32), paddingTop: 22, flex: 1, display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, marginBottom: 6, flexWrap: "wrap" }}>
          <Tag>{m.discipline}</Tag>
          <div style={{ fontFamily: t.fonts.body, fontSize: "0.72rem", color: t.c.inkLight, letterSpacing: "0.04em" }}>
            {m.location}
          </div>
        </div>
        <H3 style={{ fontSize: "clamp(1.25rem, 3.6vw, 1.5rem)", marginTop: 18, marginBottom: 6 }}>{m.name}</H3>
        <div style={{ fontFamily: t.fonts.body, fontSize: "0.85rem", color: t.c.primary, fontWeight: 500, letterSpacing: "0.02em", marginBottom: 18 }}>
          {m.title}
        </div>
        <Body style={{ fontSize: "0.95rem", flex: 1 }}>
          {open ? m.long : m.short}
        </Body>
        {open && (
          <div style={{ marginTop: 22, paddingTop: 18, borderTop: `1px solid ${t.c.line}` }}>
            <div style={{ fontFamily: t.fonts.body, fontSize: "0.7rem", fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: t.c.inkMid, marginBottom: 10 }}>
              Expertise
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
              {m.expertise.map((e) => (
                <Tag key={e} style={{ background: t.c.bgSoft, color: t.c.inkMid }}>{e}</Tag>
              ))}
            </div>
          </div>
        )}
        <div style={{ marginTop: 18, fontFamily: t.fonts.body, fontSize: "0.82rem", color: t.c.primary, fontWeight: 500, minHeight: 24, display: "flex", alignItems: "center" }}>
          {open ? "Show less ↑" : "Read full bio →"}
        </div>
      </div>
    </div>
  );
}

function TeamPage() {
  const t = useTheme();
  const v = useViewport();
  return (
    <div data-screen-label="Team">
      <PageHero
        eyebrow="Our Affiliated Experts"
        title="The right team,"
        accent={" assembled for the work."}
        lead="Cross-disciplinary specialists drawn from engineering, agricultural science, communications, climate technology, and infrastructure. Project teams form, deliver, and dissolve as the work requires."
      />

      {/* Filter / sector overview */}
      <Section bg={t.c.bg} py={80}>
        <Container>
          <div style={{ display: "flex", alignItems: v.isMobile ? "flex-start" : "center", flexDirection: v.isMobile ? "column" : "row", gap: 20, justifyContent: "space-between", paddingBottom: 28, borderBottom: `1px solid ${t.c.line}` }}>
            <div style={{ display: "flex", gap: rv(v, 16, 20, 24), alignItems: "baseline" }}>
              <div style={{ fontFamily: t.fonts.display, fontSize: "clamp(2.2rem, 7vw, 3rem)", fontWeight: t.h.weight, color: t.c.ink, lineHeight: 1, letterSpacing: t.h.ls, fontStyle: t.id === "canopy" ? "italic" : "normal" }}>
                06
              </div>
              <div>
                <div style={{ fontFamily: t.fonts.body, fontSize: "0.9rem", color: t.c.ink, fontWeight: 500 }}>Core team members</div>
                <div style={{ fontFamily: t.fonts.body, fontSize: "0.82rem", color: t.c.inkMid, marginTop: 2 }}>Plus a network of trusted collaborators on each engagement.</div>
              </div>
            </div>
            {/* Horizontal-scroll filter chips on mobile/tablet */}
            <div style={{
              display: "flex",
              gap: 8,
              flexWrap: v.isDesktop ? "wrap" : "nowrap",
              overflowX: v.isDesktop ? "visible" : "auto",
              maxWidth: "100%",
              WebkitOverflowScrolling: "touch",
              paddingBottom: v.isDesktop ? 0 : 4,
              scrollbarWidth: "thin",
            }}>
              {["All", "Doctoral", "Engineering", "Strategy"].map((f, i) => (
                <span
                  key={f}
                  style={{
                    fontFamily: t.fonts.body,
                    fontSize: "0.82rem",
                    padding: "10px 16px",
                    minHeight: 38,
                    display: "inline-flex",
                    alignItems: "center",
                    borderRadius: t.r.tag,
                    color: i === 0 ? "#fff" : t.c.inkMid,
                    background: i === 0 ? t.c.primary : t.c.bgSoft,
                    cursor: "pointer",
                    border: `1px solid ${i === 0 ? t.c.primary : t.c.line}`,
                    letterSpacing: t.id === "summit" ? "0.06em" : "0",
                    textTransform: t.id === "summit" ? "uppercase" : "none",
                    fontWeight: 500,
                    whiteSpace: "nowrap",
                    flexShrink: 0,
                  }}
                >
                  {f}
                </span>
              ))}
            </div>
          </div>
        </Container>
      </Section>

      {/* Team grid */}
      <Section bg={t.c.bg} py={40}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr 1fr", "repeat(3, 1fr)"), gap: rv(v, 16, 20, 24) }}>
            {FULL_TEAM.map((m) => (
              <TeamCard key={m.name} m={m} />
            ))}
          </div>
        </Container>
      </Section>

      {/* Join the network */}
      <Section bg={t.c.bgSoft} py={120}>
        <Container max={900}>
          <div style={{ textAlign: "center" }}>
            <Eyebrow style={{ marginBottom: 24, justifyContent: "center", display: "inline-flex" }}>Collaborator Network</Eyebrow>
            <H2 style={{ marginBottom: 20 }}>
              Bring your expertise to the work.
            </H2>
            <Lead style={{ marginBottom: 32 }}>
              We're always expanding our network of affiliated experts. If you're a scientist, practitioner, or strategist working at the edge of sustainability, we'd like to know you.
            </Lead>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <Button>Apply to Collaborate</Button>
              <Button variant="ghost">View Open Projects</Button>
            </div>
          </div>
        </Container>
      </Section>
    </div>
  );
}

// ============================================================================
// CASE STUDIES PAGE
// ============================================================================

const CASE_STUDIES = [
  {
    id: "watershed",
    title: "Watershed resilience planning across three Pacific Northwest counties",
    client: "Regional Water Authority",
    sector: "Water & Watersheds",
    year: "2025",
    services: ["Stakeholder Alignment", "Environmental Assessment"],
    summary: "A three-year multi-stakeholder engagement to integrate flood risk, water quality, and tribal co-management priorities into a single watershed plan adopted by all participating jurisdictions.",
    result: { stat: "3 counties · 1 plan", detail: "Adopted unanimously across jurisdictions" },
    visualKey: "water",
    accentColor: "#007878",
  },
  {
    id: "netzero",
    title: "Net Zero roadmap for a regional municipality of 240,000 residents",
    client: "Municipal Government",
    sector: "Public Sector",
    year: "2025",
    services: ["Strategy & Roadmapping", "ESG Reporting"],
    summary: "Built the science-based pathway, financial model, and stakeholder coalition to commit the city to a 2040 net-zero operations target — including all utilities and capital projects.",
    result: { stat: "2040", detail: "Net-zero operations target adopted by council" },
    visualKey: "compass",
    accentColor: "#2D6E5E",
  },
  {
    id: "agtransition",
    title: "Sustainable agriculture transition for 80+ regional producers",
    client: "Producer Cooperative",
    sector: "Agriculture & Food",
    year: "2024",
    services: ["Innovation Facilitation", "Leadership & Capacity Building"],
    summary: "Designed and delivered a producer education program — combining online curriculum, peer mentoring, and on-farm pilots — to support regenerative practice adoption across an 80-producer cooperative.",
    result: { stat: "80+ producers", detail: "Regenerative-practice adoption underway" },
    visualKey: "spark",
    accentColor: "#C25E2F",
  },
  {
    id: "wildfire",
    title: "Wildfire infrastructure risk assessment for vulnerable mountain communities",
    client: "County Emergency Services",
    sector: "Wildfire & Risk",
    year: "2024",
    services: ["Environmental Assessment", "Stakeholder Alignment"],
    summary: "Deployed the TRI-FI framework across five counties to triage infrastructure investments. Combined fire-science modeling with community-led prioritization to direct $14M in mitigation funding.",
    result: { stat: "$14M", detail: "Mitigation funding directed by risk priority" },
    visualKey: "fire",
    accentColor: "#FF6B35",
  },
  {
    id: "concrete",
    title: "Digital EPD strategy for a regional concrete producer",
    client: "Industrial Manufacturer",
    sector: "Industrial Materials",
    year: "2024",
    services: ["ESG Reporting", "Environmental Assessment"],
    summary: "Designed the data architecture and disclosure strategy to enable on-demand digital EPDs across all product lines — opening procurement access to climate-led infrastructure projects.",
    result: { stat: "100%", detail: "Product portfolio with verified EPDs" },
    visualKey: "flask",
    accentColor: "#1B4A3B",
  },
  {
    id: "buildings",
    title: "Whole-House pilot across a regional realtor network",
    client: "Real Estate Association",
    sector: "Built Environment",
    year: "2025",
    services: ["Innovation Facilitation", "Strategy & Roadmapping"],
    summary: "Co-designed and piloted the Whole-House Lifecycle Ledger with a network of 12 brokerages — establishing a longitudinal data set for 300 beta households and a path to industry adoption.",
    result: { stat: "300", detail: "Beta households with full lifecycle records" },
    visualKey: "home",
    accentColor: "#005A5A",
  },
];

function CaseStudyVisual({ cs, large }) {
  const t = useTheme();
  const v = useViewport();
  return (
    <div style={{ background: cs.accentColor, padding: rv(v, 28, 36, 48), position: "relative", overflow: "hidden", minHeight: rv(v, 180, 200, 200), display: "flex", flexDirection: large && v.notDesktop ? "row" : "column", justifyContent: "space-between", gap: 16, alignItems: large && v.notDesktop ? "center" : "stretch" }}>
      <div style={{ position: "absolute", top: -60, right: -60, width: 200, height: 200, border: "1px solid rgba(255,255,255,0.18)", borderRadius: "50%" }} />
      <div style={{ position: "absolute", bottom: -40, left: -40, width: 140, height: 140, border: "1px solid rgba(255,255,255,0.14)", borderRadius: "50%" }} />
      <div style={{ position: "relative" }}>{Icon[cs.visualKey]("#fff", rv(v, 32, 34, 36))}</div>
      <div style={{ position: "relative", textAlign: large && v.notDesktop ? "right" : "left" }}>
        <div style={{ fontFamily: t.fonts.display, fontSize: "clamp(1.6rem, 5.5vw, 2.4rem)", fontWeight: t.h.weight, color: "#fff", lineHeight: 1, letterSpacing: t.h.ls, marginBottom: 6 }}>
          {cs.result.stat}
        </div>
        <div style={{ fontFamily: t.fonts.body, fontSize: "0.76rem", color: "rgba(255,255,255,0.8)", lineHeight: 1.5 }}>
          {cs.result.detail}
        </div>
      </div>
    </div>
  );
}

function CaseStudyCard({ cs, large }) {
  const t = useTheme();
  const v = useViewport();
  // On non-desktop, even the "large" card stacks vertically
  const stackLarge = large && !v.isDesktop;
  return (
    <div
      style={{
        background: t.c.bg,
        border: `1px solid ${t.c.line}`,
        borderRadius: t.r.card,
        overflow: "hidden",
        display: "flex",
        flexDirection: large && v.isDesktop ? "row" : "column",
        cursor: "pointer",
        transition: "all 0.25s",
      }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = t.c.primary; e.currentTarget.style.transform = "translateY(-2px)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = t.c.line; e.currentTarget.style.transform = "translateY(0)"; }}
    >
      <div style={{ flex: large && v.isDesktop ? "0 0 45%" : "0 0 auto" }}>
        <CaseStudyVisual cs={cs} large={large} />
      </div>
      <div style={{ padding: rv(v, 24, 32, large ? 56 : 32), flex: 1, display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16, flexWrap: "wrap" }}>
          <Tag>{cs.sector}</Tag>
          <span style={{ fontFamily: t.fonts.body, fontSize: "0.75rem", color: t.c.inkLight, letterSpacing: "0.04em" }}>
            {cs.client} · {cs.year}
          </span>
        </div>
        <h3
          style={{
            fontFamily: t.fonts.display,
            fontSize: large ? "clamp(1.3rem, 4vw, 2.1rem)" : "clamp(1.15rem, 3.4vw, 1.4rem)",
            fontWeight: t.h.weight,
            lineHeight: 1.15,
            letterSpacing: t.h.ls,
            color: t.c.ink,
            margin: "0 0 14px",
            textWrap: "balance",
          }}
        >
          {cs.title}
        </h3>
        <Body style={{ fontSize: large ? "clamp(0.95rem, 2.3vw, 1rem)" : "0.92rem", flex: 1 }}>{cs.summary}</Body>
        <div style={{ marginTop: 22, paddingTop: 18, borderTop: `1px solid ${t.c.line}`, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, alignItems: "center" }}>
            {cs.services.map((s) => (
              <span key={s} style={{ fontFamily: t.fonts.body, fontSize: "0.72rem", color: t.c.inkMid, fontWeight: 500, letterSpacing: "0.02em" }}>
                {s}
              </span>
            )).reduce((acc, el, i) => acc.length === 0 ? [el] : [...acc, <span key={`d${i}`} style={{ color: t.c.inkLight }}>·</span>, el], [])}
          </div>
          <TextLink onClick={() => {}}>Read</TextLink>
        </div>
      </div>
    </div>
  );
}

function CaseStudiesPage() {
  const t = useTheme();
  const v = useViewport();
  const [filter, setFilter] = React.useState("All");
  const filters = ["All", "Water & Watersheds", "Public Sector", "Agriculture & Food", "Wildfire & Risk", "Built Environment", "Industrial Materials"];
  const filtered = filter === "All" ? CASE_STUDIES : CASE_STUDIES.filter(c => c.sector === filter);
  return (
    <div data-screen-label="Case Studies">
      <PageHero
        eyebrow="Selected Work"
        title="Solutions"
        accent={", made real."}
        lead="Engagements across water, agriculture, infrastructure, and the public sector — each rooted in measurable outcomes and shared ownership."
      />

      {/* Filter bar */}
      <Section bg={t.c.bg} py={48}>
        <Container>
          <div style={{ display: "flex", alignItems: v.isMobile ? "flex-start" : "center", justifyContent: "space-between", gap: 16, paddingBottom: 22, borderBottom: `1px solid ${t.c.line}`, flexDirection: v.isMobile ? "column" : "row" }}>
            <div style={{
              display: "flex",
              gap: 8,
              flexWrap: v.isDesktop ? "wrap" : "nowrap",
              overflowX: v.isDesktop ? "visible" : "auto",
              maxWidth: "100%",
              WebkitOverflowScrolling: "touch",
              paddingBottom: v.isDesktop ? 0 : 6,
              marginLeft: v.isDesktop ? 0 : -4,
              paddingLeft: v.isDesktop ? 0 : 4,
              scrollbarWidth: "thin",
            }}>
              {filters.map((f) => {
                const active = filter === f;
                return (
                  <span
                    key={f}
                    onClick={() => setFilter(f)}
                    style={{
                      fontFamily: t.fonts.body,
                      fontSize: "0.82rem",
                      padding: "10px 16px",
                      minHeight: 38,
                      display: "inline-flex",
                      alignItems: "center",
                      borderRadius: t.r.tag,
                      color: active ? "#fff" : t.c.inkMid,
                      background: active ? t.c.primary : t.c.bgSoft,
                      cursor: "pointer",
                      border: `1px solid ${active ? t.c.primary : t.c.line}`,
                      letterSpacing: t.id === "summit" ? "0.06em" : "0",
                      textTransform: t.id === "summit" ? "uppercase" : "none",
                      fontWeight: 500,
                      transition: "all 0.2s",
                      whiteSpace: "nowrap",
                      flexShrink: 0,
                    }}
                  >
                    {f}
                  </span>
                );
              })}
            </div>
            <div style={{ fontFamily: t.fonts.body, fontSize: "0.85rem", color: t.c.inkMid, flexShrink: 0 }}>
              <span style={{ color: t.c.ink, fontWeight: 500 }}>{filtered.length}</span> engagement{filtered.length !== 1 ? "s" : ""}
            </div>
          </div>
        </Container>
      </Section>

      {/* Featured + grid */}
      <Section bg={t.c.bg} py={48}>
        <Container>
          {filtered.length > 0 && (
            <div style={{ marginBottom: rv(v, 16, 20, 24) }}>
              <CaseStudyCard cs={filtered[0]} large />
            </div>
          )}
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "repeat(2, 1fr)"), gap: rv(v, 16, 20, 24) }}>
            {filtered.slice(1).map((cs) => (
              <CaseStudyCard key={cs.id} cs={cs} />
            ))}
          </div>
        </Container>
      </Section>

      <CTABand />
    </div>
  );
}

Object.assign(window, { TeamPage, CaseStudiesPage, FULL_TEAM, CASE_STUDIES });