// ev-pages-2.jsx — Services + LYF Labs pages.

// ============================================================================
// SERVICES PAGE
// ============================================================================

const FULL_SERVICES = [
  {
    id: "stakeholder",
    icon: "network",
    num: "01",
    title: "Stakeholder Alignment",
    brief: "Bring communities, partners, regulators, and decision-makers into shared ownership of sustainability goals.",
    deliverables: ["Stakeholder mapping & analysis", "Engagement strategy & facilitation", "Coalition design & governance", "Conflict resolution & mediation"],
  },
  {
    id: "strategy",
    icon: "compass",
    num: "02",
    title: "Strategy & Roadmapping",
    brief: "Translate ambition into science-based plans with measurable milestones and a credible path to execution.",
    deliverables: ["Materiality assessment", "Net-zero & climate roadmaps", "Goal-setting frameworks (SBTi-aligned)", "Implementation planning"],
  },
  {
    id: "esg",
    icon: "chart",
    num: "03",
    title: "ESG Reporting & Disclosure",
    brief: "Structure and showcase environmental, social, and governance performance with clarity, rigor, and audit-readiness.",
    deliverables: ["GRI, SASB, TCFD alignment", "Annual sustainability reporting", "Data systems & assurance prep", "Investor & rating-agency response"],
  },
  {
    id: "assessment",
    icon: "flask",
    num: "04",
    title: "Environmental Assessment",
    brief: "Rigorous lifecycle analysis, impact modeling, and risk evaluation for products, projects, and portfolios.",
    deliverables: ["LCA & EPD development", "Carbon footprint & GHG inventory", "Watershed & ecosystem assessment", "Climate-risk scenario modeling"],
  },
  {
    id: "innovation",
    icon: "spark",
    num: "05",
    title: "Innovation Facilitation",
    brief: "Co-create scalable, science-backed solutions with cross-disciplinary expert teams — from concept to pilot.",
    deliverables: ["Innovation sprints & charrettes", "R&D partnership design", "Prototype & pilot deployment", "Funding & investment strategy"],
  },
  {
    id: "leadership",
    icon: "peak",
    num: "06",
    title: "Leadership & Capacity Building",
    brief: "Equip your organization with the frameworks, fluency, and culture for lasting sustainable change.",
    deliverables: ["Executive education programs", "Board-level briefings", "Internal capability building", "Producer & community curricula"],
  },
];

function ServicesPage() {
  const t = useTheme();
  const v = useViewport();
  const navigate = useNavigate();
  return (
    <div data-screen-label="Services">
      <PageHero
        eyebrow="Services"
        title="From insight"
        accent={t.id === "canopy" ? " to impact." : " to impact."}
        lead="Six interlocking practices that move organizations from sustainability ambition to durable, measurable, science-backed outcomes."
      />

      {/* Services grid */}
      <Section bg={t.c.bg} py={120}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "repeat(2, 1fr)"), gap: rv(v, 16, 20, 24) }}>
            {FULL_SERVICES.map((s) => (
              <div
                key={s.id}
                style={{
                  background: t.c.bg,
                  border: `1px solid ${t.c.line}`,
                  borderRadius: t.r.card,
                  padding: rv(v, 28, 36, 48),
                  display: "grid",
                  gridTemplateColumns: rcols(v, "1fr", "auto 1fr", "auto 1fr"),
                  gap: rv(v, 16, 24, 32),
                  alignItems: "start",
                  transition: "all 0.25s",
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = t.c.primary; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = t.c.line; }}
              >
                <div style={{ display: "flex", flexDirection: v.isMobile ? "row" : "column", gap: 16, alignItems: "center" }}>
                  <div
                    style={{
                      width: rv(v, 52, 60, 64),
                      height: rv(v, 52, 60, 64),
                      background: t.c.primaryLt,
                      borderRadius: t.r.card,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      flexShrink: 0,
                    }}
                  >
                    {Icon[s.icon](t.c.primary, rv(v, 26, 30, 32))}
                  </div>
                  <div
                    style={{
                      fontFamily: t.fonts.display,
                      fontSize: "1.2rem",
                      color: t.c.inkLight,
                      fontWeight: t.h.weight,
                      fontStyle: t.id === "canopy" ? "italic" : "normal",
                    }}
                  >
                    {s.num}
                  </div>
                </div>
                <div>
                  <H3 style={{ fontSize: "clamp(1.3rem, 3.5vw, 1.6rem)", marginBottom: 14 }}>{s.title}</H3>
                  <Body style={{ fontSize: "1rem", marginBottom: 22 }}>{s.brief}</Body>
                  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                    {s.deliverables.map((d) => (
                      <div key={d} style={{ display: "flex", gap: 12, alignItems: "center", fontFamily: t.fonts.body, fontSize: "0.88rem", color: t.c.inkMid }}>
                        <span style={{ width: 4, height: 4, background: t.c.primary, borderRadius: "50%", flexShrink: 0 }} />
                        {d}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* How we work */}
      <Section bg={t.c.bgSoft} py={120}>
        <Container>
          <div style={{ textAlign: "center", maxWidth: 720, margin: `0 auto ${rv(v, 48, 64, 80)}px` }}>
            <Eyebrow style={{ marginBottom: 20, justifyContent: "center", display: "inline-flex" }}>Engagement Model</Eyebrow>
            <H2>How we work, in four moves.</H2>
            <Lead style={{ marginTop: 20 }}>
              Project teams form, deliver, and dissolve as the work requires. Our process is the same whether the engagement is a one-week sprint or a multi-year program.
            </Lead>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr 1fr", "repeat(4, 1fr)"), gap: rv(v, 24, 32, 0), position: "relative" }}>
            {v.isDesktop && (
              <div style={{ position: "absolute", top: 30, left: "12.5%", right: "12.5%", height: 1, background: t.c.line, zIndex: 0 }} />
            )}
            {[
              { num: "01", title: "Listen", desc: "Deep stakeholder interviews and on-the-ground assessment to understand the real conditions." },
              { num: "02", title: "Frame", desc: "Translate complexity into a clear problem statement and a science-backed approach." },
              { num: "03", title: "Build", desc: "Assemble the expert team; co-create the solution with the people who will own it." },
              { num: "04", title: "Hand off", desc: "Equip the organization to operate and improve the work long after we step away." },
            ].map((step) => (
              <div key={step.num} style={{ padding: rv(v, 0, "0 12px", "0 28px"), position: "relative", zIndex: 1, textAlign: "center" }}>
                <div
                  style={{
                    width: 60,
                    height: 60,
                    borderRadius: "50%",
                    background: t.c.primary,
                    color: "#fff",
                    fontFamily: t.fonts.display,
                    fontSize: "1.1rem",
                    fontWeight: t.h.weight,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    margin: "0 auto 22px",
                    border: `4px solid ${t.c.bgSoft}`,
                  }}
                >
                  {step.num}
                </div>
                <H3 style={{ fontSize: "1.25rem", marginBottom: 10 }}>{step.title}</H3>
                <Body style={{ fontSize: "0.92rem" }}>{step.desc}</Body>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Sectors */}
      <Section bg={t.c.bg} py={120}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "1fr 1.6fr"), gap: rv(v, 24, 40, 80), marginBottom: rv(v, 40, 52, 64), alignItems: v.isDesktop ? "end" : "start" }}>
            <div>
              <Eyebrow style={{ marginBottom: 20 }}>Where We Work</Eyebrow>
              <H2>Sectors served.</H2>
            </div>
            <Lead style={{ maxWidth: 540, paddingBottom: v.isDesktop ? 16 : 0 }}>
              We work where adaptive expertise matters most — at the intersection of complex science, real communities, and decision-making under uncertainty.
            </Lead>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr 1fr", "repeat(2, 1fr)", "repeat(4, 1fr)"), gap: rv(v, 8, 10, 12) }}>
            {[
              "Water & Watersheds",
              "Built Environment",
              "Agriculture & Food",
              "Industrial Materials",
              "Energy Systems",
              "Wildfire & Risk",
              "Public Sector",
              "Climate-tech & Startups",
            ].map((sector, i) => (
              <div
                key={sector}
                style={{
                  background: i % 3 === 0 ? t.c.primaryLt : t.c.bgSoft,
                  border: `1px solid ${t.c.line}`,
                  borderRadius: t.r.card,
                  padding: rv(v, "18px 16px", "20px 20px", "24px 24px"),
                  fontFamily: t.fonts.display,
                  fontSize: "clamp(0.95rem, 2.4vw, 1.1rem)",
                  fontWeight: t.h.weight,
                  color: t.c.ink,
                  letterSpacing: t.h.ls,
                }}
              >
                {sector}
              </div>
            ))}
          </div>
        </Container>
      </Section>

      <CTABand />
    </div>
  );
}

// ============================================================================
// LYF LABS PAGE
// ============================================================================

const FULL_LABS = [
  {
    id: "stormweb",
    icon: "water",
    title: "StormWEB",
    full: "Watershed Evaluation Benchmarking",
    tag: "Active · Pilot Stage",
    color: "#007878",
    desc: "Monitoring and modeling stormwater systems to reduce flood risk and protect water quality. StormWEB combines sensor data, hydrological modeling, and community reporting into a single decision-support platform.",
    metrics: [
      { v: "12", l: "Pilot watersheds" },
      { v: "8K+", l: "Sensor data points / mo" },
      { v: "3", l: "Partner municipalities" },
    ],
    partners: ["Pacific NW Watershed Council", "USGS", "State Environmental Agencies"],
  },
  {
    id: "wholehouse",
    icon: "home",
    title: "Whole-House",
    full: "Building Lifecycle Ledger",
    tag: "Active · MVP",
    color: "#2D6E5E",
    desc: "A QR-enabled platform that tracks the complete lifecycle of a home — permits, renovations, appliances, energy systems — in one accessible record. The result: better-informed buyers, owners, and inspectors, and a longitudinal data set for the built environment.",
    metrics: [
      { v: "300", l: "Beta households" },
      { v: "9", l: "Data categories tracked" },
      { v: "2030", l: "Vision year for industry adoption" },
    ],
    partners: ["Regional Realtor Associations", "Home Inspection Networks", "Municipal Permit Offices"],
  },
  {
    id: "trifi",
    icon: "fire",
    title: "TRI-FI",
    full: "Triage-based Risk-Informed Fire-safe Infrastructure",
    tag: "Active · Research",
    color: "#C25E2F",
    desc: "A decision framework for wildfire risk mitigation in vulnerable communities. TRI-FI prioritizes infrastructure interventions where they matter most — combining fire science, GIS modeling, and community engagement.",
    metrics: [
      { v: "5", l: "Pilot counties" },
      { v: "40%", l: "Risk-weighted cost reduction" },
      { v: "1,200", l: "Households protected (pilot)" },
    ],
    partners: ["Wildfire Defense Coalition", "County Emergency Services", "USDA Forest Service"],
  },
  {
    id: "netzero",
    icon: "zero",
    title: "Net Zero",
    full: "#emissionsfreefriday",
    tag: "Public Campaign",
    color: "#0E0E0E",
    desc: "A campaign and operational toolkit for organizations committing to emissions-free operations — one day at a time. We provide the playbook, measurement tools, and community of practice for #emissionsfreefriday and beyond.",
    metrics: [
      { v: "47", l: "Participating orgs" },
      { v: "1 day/wk", l: "Operational target" },
      { v: "Open", l: "Source toolkit" },
    ],
    partners: ["Climate Action Network", "B Corp Community", "Regional Chambers of Commerce"],
  },
];

function LabCard({ lab, index }) {
  const t = useTheme();
  const v = useViewport();
  const reverse = v.isDesktop && index % 2 === 1;
  const visualPad = rv(v, 32, 44, 64);
  const textPad = rv(v, 32, 44, 64);
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: rcols(v, "1fr", "1fr", "1fr 1fr"),
        gap: 0,
        background: t.c.bg,
        border: `1px solid ${t.c.line}`,
        borderRadius: t.r.card,
        overflow: "hidden",
      }}
    >
      {/* Visual block */}
      <div
        style={{
          background: lab.color,
          color: "#fff",
          padding: visualPad,
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          gap: rv(v, 32, 40, 0),
          minHeight: rv(v, 320, 380, 480),
          position: "relative",
          overflow: "hidden",
          order: reverse ? 2 : 1,
        }}
      >
        <div style={{ position: "absolute", top: -100, right: -80, width: 320, height: 320, border: "1px solid rgba(255,255,255,0.18)", borderRadius: "50%" }} />
        <div style={{ position: "absolute", top: -40, right: -20, width: 200, height: 200, border: "1px solid rgba(255,255,255,0.14)", borderRadius: "50%" }} />
        <div style={{ position: "relative" }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "rgba(255,255,255,0.15)", padding: "6px 14px", borderRadius: t.r.tag, fontSize: "0.7rem", fontWeight: 500, letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: t.fonts.body, color: "#fff", marginBottom: rv(v, 22, 28, 32) }}>
            <span style={{ width: 6, height: 6, background: "#fff", borderRadius: "50%" }} />
            {lab.tag}
          </div>
          <div style={{ marginBottom: 20 }}>{Icon[lab.icon]("#fff", rv(v, 40, 44, 48))}</div>
          <h3
            style={{
              fontFamily: t.fonts.display,
              fontSize: "clamp(1.8rem, 7vw, 3.6rem)",
              fontWeight: t.h.weight,
              lineHeight: 1,
              letterSpacing: t.h.ls,
              color: "#fff",
              margin: "0 0 10px",
            }}
          >
            {lab.title}
          </h3>
          <div style={{ fontFamily: t.fonts.body, fontSize: "clamp(0.92rem, 2.4vw, 1rem)", color: "rgba(255,255,255,0.85)", fontWeight: t.id === "canopy" ? 300 : 400 }}>
            {lab.full}
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: rv(v, 12, 16, 20), position: "relative", borderTop: "1px solid rgba(255,255,255,0.2)", paddingTop: 24 }}>
          {lab.metrics.map((m) => (
            <div key={m.l}>
              <div style={{ fontFamily: t.fonts.display, fontSize: "clamp(1.3rem, 4.5vw, 1.8rem)", fontWeight: t.h.weight, color: "#fff", lineHeight: 1 }}>{m.v}</div>
              <div style={{ fontFamily: t.fonts.body, fontSize: "0.68rem", color: "rgba(255,255,255,0.7)", marginTop: 6, letterSpacing: "0.04em" }}>{m.l}</div>
            </div>
          ))}
        </div>
      </div>
      {/* Text block */}
      <div style={{ padding: textPad, display: "flex", flexDirection: "column", justifyContent: "center", order: reverse ? 1 : 2 }}>
        <Eyebrow style={{ marginBottom: rv(v, 22, 26, 28) }}>Lab 0{index + 1} · LYF Initiative</Eyebrow>
        <h3
          style={{
            fontFamily: t.fonts.display,
            fontSize: "clamp(1.3rem, 4vw, 2.2rem)",
            fontWeight: t.h.weight,
            lineHeight: 1.15,
            letterSpacing: t.h.ls,
            color: t.c.ink,
            margin: "0 0 18px",
          }}
        >
          {lab.full}
        </h3>
        <Body style={{ marginBottom: 28 }}>{lab.desc}</Body>
        <div>
          <div style={{ fontFamily: t.fonts.body, fontSize: "0.7rem", fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: t.c.inkMid, marginBottom: 10 }}>
            Partner Network
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {lab.partners.map((p) => (
              <Tag key={p}>{p}</Tag>
            ))}
          </div>
        </div>
        <div style={{ marginTop: 28, display: "flex", flexWrap: "wrap", gap: rv(v, 16, 20, 24), alignItems: "center" }}>
          <TextLink onClick={() => {}}>Read the brief</TextLink>
          <TextLink onClick={() => {}}>Become a collaborator</TextLink>
        </div>
      </div>
    </div>
  );
}

function LYFLabsPage() {
  const t = useTheme();
  const v = useViewport();
  return (
    <div data-screen-label="LYF Labs">
      <PageHero
        eyebrow="LYF Labs · Linking Your Footprint"
        title="Where innovation"
        accent={" meets impact."}
        lead="Our initiatives invite collaboration with visionary entrepreneurs, scientists, and decision-makers — all united in co-creating a better future by taking shared ownership of our impact."
      />

      {/* Intro band */}
      <Section bg={t.c.bg} py={100}>
        <Container max={1100}>
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "1fr 1.4fr"), gap: rv(v, 28, 48, 80) }}>
            <div>
              <Eyebrow style={{ marginBottom: 22 }}>What is LYF?</Eyebrow>
              <H3 style={{ fontSize: "clamp(1.2rem, 3.6vw, 1.4rem)", color: t.c.primary, fontStyle: t.id === "canopy" ? "italic" : "normal" }}>
                Linking Your Footprint.
              </H3>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <Lead>
                LYF Labs incubates next-generation tools for sustainability at scale — built from real-world conditions, pressure-tested with partners, and open to anyone willing to co-create.
              </Lead>
              <Body>
                Each Lab is a multi-year initiative with a science-backed thesis, a pilot in the field, and a clear path from proof-of-concept to broad adoption. We work with the people who will operate the solution — not for them.
              </Body>
            </div>
          </div>
        </Container>
      </Section>

      {/* Lab cards */}
      <Section bg={t.c.bgSoft} py={100}>
        <Container>
          <div style={{ display: "flex", flexDirection: "column", gap: rv(v, 20, 26, 32) }}>
            {FULL_LABS.map((lab, i) => (
              <LabCard key={lab.id} lab={lab} index={i} />
            ))}
          </div>
        </Container>
      </Section>

      {/* Collaborate CTA */}
      <Section bg={t.c.bg} py={120}>
        <Container max={1000}>
          <div
            style={{
              background: t.c.bgDark,
              color: "#fff",
              borderRadius: t.r.card,
              padding: rv(v, "56px 28px", "64px 48px", "80px 64px"),
              textAlign: "center",
              position: "relative",
              overflow: "hidden",
            }}
          >
            <div style={{ position: "absolute", top: -180, right: -180, width: 500, height: 500, background: t.c.primary, opacity: 0.2, filter: "blur(120px)", borderRadius: "50%" }} />
            <div style={{ position: "absolute", bottom: -180, left: -180, width: 500, height: 500, background: t.c.primary, opacity: 0.1, filter: "blur(120px)", borderRadius: "50%" }} />
            <div style={{ position: "relative" }}>
              <Eyebrow color={t.c.primaryLt} style={{ marginBottom: 24, color: t.c.primaryLt, justifyContent: "center", display: "inline-flex" }}>
                Co-create the next Lab
              </Eyebrow>
              <h2
                style={{
                  fontFamily: t.fonts.display,
                  fontWeight: t.h.weight,
                  fontSize: "clamp(1.7rem, 5.5vw, 3.4rem)",
                  lineHeight: 1.05,
                  letterSpacing: t.h.ls,
                  color: "#fff",
                  margin: "0 0 22px",
                  textWrap: "balance",
                }}
              >
                Have a thesis you<br />want to pressure-test?
              </h2>
              <p style={{ fontFamily: t.fonts.body, fontSize: "clamp(1rem, 2.4vw, 1.1rem)", lineHeight: 1.65, color: "rgba(255,255,255,0.7)", maxWidth: 580, margin: "0 auto 36px" }}>
                We're always looking for partners — funders, agencies, universities, communities — willing to take shared ownership of real outcomes.
              </p>
              <Button variant="light">Start a Conversation →</Button>
            </div>
          </div>
        </Container>
      </Section>
    </div>
  );
}

Object.assign(window, { ServicesPage, LYFLabsPage, FULL_SERVICES, FULL_LABS });