// ev-pages-4.jsx — Insights + Contact pages.

// ============================================================================
// INSIGHTS / BLOG PAGE
// ============================================================================

const POSTS = [
  {
    id: "sustainability-security",
    title: "Sustainability as Security: Reframing the ESG Conversation",
    excerpt: "When we treat environmental impact as a security concern — not a compliance line-item — the boardroom conversation changes. Here's why the frame matters, and how to reset it inside your organization.",
    author: "Will Lytle, PhD",
    date: "May 2026",
    read: "12 min",
    category: "Essay",
    featured: true,
    visualKey: "compass",
    color: "#007878",
  },
  {
    id: "watershed-resilience",
    title: "What watershed health tells us about urban resilience",
    excerpt: "The way water moves through a place is a leading indicator of everything that follows. A field note from three years of stormwater modeling.",
    author: "Robert Handler, PhD",
    date: "April 2026",
    read: "8 min",
    category: "Field Note",
    visualKey: "water",
    color: "#2D6E5E",
  },
  {
    id: "netzero-framework",
    title: "From Net Zero goals to Net Zero operations: a practical framework",
    excerpt: "The gap between commitment and operation is where most plans die. A four-stage framework drawn from #emissionsfreefriday.",
    author: "Hossein Tavakoli, PhD",
    date: "March 2026",
    read: "10 min",
    category: "Framework",
    visualKey: "zero",
    color: "#0E0E0E",
  },
  {
    id: "stakeholder-science",
    title: "The science of stakeholder alignment",
    excerpt: "Real coalitions are engineered, not announced. What the literature on collective action teaches us about getting plans actually adopted.",
    author: "Whitney Warstler",
    date: "February 2026",
    read: "9 min",
    category: "Essay",
    visualKey: "network",
    color: "#D4A84B",
  },
  {
    id: "regen-ag",
    title: "What a sheep producer can teach a sustainability officer",
    excerpt: "On-the-ground learnings from a beginning-producer program — and why agricultural sustainability needs less abstraction.",
    author: "Kelly Froehlich, PhD",
    date: "January 2026",
    read: "7 min",
    category: "Field Note",
    visualKey: "spark",
    color: "#C25E2F",
  },
  {
    id: "concrete-disclosure",
    title: "Concrete, EPDs, and the next decade of materials disclosure",
    excerpt: "Why on-demand digital EPDs change the procurement calculus for low-carbon infrastructure — and what that means for builders.",
    author: "Hossein Tavakoli, PhD",
    date: "December 2025",
    read: "11 min",
    category: "Industry",
    visualKey: "flask",
    color: "#1B4A3B",
  },
  {
    id: "wildfire-triage",
    title: "Triaging wildfire risk: when ranking infrastructure saves lives",
    excerpt: "Inside the TRI-FI framework — and the difficult ethics of telling communities which assets we can protect first.",
    author: "Will Lytle, PhD",
    date: "November 2025",
    read: "13 min",
    category: "Framework",
    visualKey: "fire",
    color: "#FF6B35",
  },
];

function PostVisual({ p, height }) {
  const t = useTheme();
  return (
    <div style={{ background: p.color, height: height || 240, position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <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: -80, left: -80, width: 240, height: 240, border: "1px solid rgba(255,255,255,0.14)", borderRadius: "50%" }} />
      <div style={{ position: "relative" }}>{Icon[p.visualKey]("#fff", 56)}</div>
      <div style={{ position: "absolute", top: 20, left: 24, fontFamily: t.fonts.body, fontSize: "0.7rem", letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.9)", fontWeight: 500 }}>
        {p.category}
      </div>
    </div>
  );
}

function FeaturedPost({ p }) {
  const t = useTheme();
  const v = useViewport();
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: rcols(v, "1fr", "1fr", "1.1fr 1fr"),
        gap: 0,
        background: t.c.bg,
        border: `1px solid ${t.c.line}`,
        borderRadius: t.r.card,
        overflow: "hidden",
        cursor: "pointer",
        transition: "all 0.25s",
      }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = t.c.primary; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = t.c.line; }}
    >
      <PostVisual p={p} height={rv(v, 240, 320, 520)} />
      <div style={{ padding: rv(v, "32px 24px", "44px 36px", "64px 56px"), display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <Eyebrow style={{ marginBottom: 20 }}>Featured Essay</Eyebrow>
        <h2
          style={{
            fontFamily: t.fonts.display,
            fontSize: "clamp(1.5rem, 5vw, 2.6rem)",
            fontWeight: t.h.weight,
            lineHeight: 1.1,
            letterSpacing: t.h.ls,
            color: t.c.ink,
            margin: "0 0 20px",
            textWrap: "balance",
          }}
        >
          {p.title}
        </h2>
        <Body style={{ fontSize: "clamp(0.95rem, 2.4vw, 1.05rem)", marginBottom: 28 }}>{p.excerpt}</Body>
        <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 28 }}>
          <Avatar name={p.author} color={p.color} size={48} variant={1} />
          <div>
            <div style={{ fontFamily: t.fonts.body, fontSize: "0.9rem", color: t.c.ink, fontWeight: 500 }}>{p.author}</div>
            <div style={{ fontFamily: t.fonts.body, fontSize: "0.78rem", color: t.c.inkMid, marginTop: 2 }}>
              {p.date} · {p.read} read
            </div>
          </div>
        </div>
        <TextLink>Read the essay</TextLink>
      </div>
    </div>
  );
}

function PostCard({ p }) {
  const t = useTheme();
  const v = useViewport();
  return (
    <div
      style={{
        background: t.c.bg,
        border: `1px solid ${t.c.line}`,
        borderRadius: t.r.card,
        overflow: "hidden",
        cursor: "pointer",
        transition: "all 0.25s",
        display: "flex",
        flexDirection: "column",
      }}
      onMouseEnter={(e) => { e.currentTarget.style.borderColor = t.c.primary; e.currentTarget.style.transform = "translateY(-3px)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderColor = t.c.line; e.currentTarget.style.transform = "translateY(0)"; }}
    >
      <PostVisual p={p} height={rv(v, 180, 200, 200)} />
      <div style={{ padding: rv(v, 24, 28, 32), flex: 1, display: "flex", flexDirection: "column" }}>
        <div style={{ fontFamily: t.fonts.body, fontSize: "0.72rem", color: t.c.inkLight, letterSpacing: "0.06em", marginBottom: 12, textTransform: "uppercase", fontWeight: 500 }}>
          {p.date} · {p.read} read
        </div>
        <H3 style={{ fontSize: "clamp(1.1rem, 3.2vw, 1.25rem)", lineHeight: 1.2, marginBottom: 12 }}>{p.title}</H3>
        <Body style={{ fontSize: "0.92rem", flex: 1, marginBottom: 22 }}>{p.excerpt}</Body>
        <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 18, borderTop: `1px solid ${t.c.line}` }}>
          <Avatar name={p.author} color={p.color} size={36} variant={2} />
          <div style={{ fontFamily: t.fonts.body, fontSize: "0.82rem", color: t.c.ink, fontWeight: 500 }}>
            {p.author}
          </div>
        </div>
      </div>
    </div>
  );
}

function InsightsPage() {
  const t = useTheme();
  const v = useViewport();
  const [category, setCategory] = React.useState("All");
  const categories = ["All", "Essay", "Field Note", "Framework", "Industry"];
  const featured = POSTS.find((p) => p.featured);
  const rest = POSTS.filter((p) => !p.featured);
  const filtered = category === "All" ? rest : rest.filter((p) => p.category === category);

  return (
    <div data-screen-label="Insights">
      <PageHero
        eyebrow="Insights & Field Notes"
        title="Working notes"
        accent={" from the field."}
        lead="Essays, frameworks, and field notes from our team. We write to think clearly — and to bring our partners into the conversation."
      />

      {/* Featured */}
      <Section bg={t.c.bg} py={80}>
        <Container>
          {featured && <FeaturedPost p={featured} />}
        </Container>
      </Section>

      {/* Category filter */}
      <Section bg={t.c.bg} py={0}>
        <Container>
          <div style={{ display: "flex", alignItems: v.isMobile ? "flex-start" : "center", justifyContent: "space-between", paddingBottom: 28, borderBottom: `1px solid ${t.c.line}`, flexDirection: v.isMobile ? "column" : "row", gap: 16 }}>
            <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,
              scrollbarWidth: "thin",
            }}>
              {categories.map((c) => {
                const active = category === c;
                return (
                  <span
                    key={c}
                    onClick={() => setCategory(c)}
                    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,
                    }}
                  >
                    {c}
                  </span>
                );
              })}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, fontFamily: t.fonts.body, fontSize: "0.85rem", color: t.c.inkMid, flexShrink: 0 }}>
              <span>{v.isMobile ? "Subscribe" : "Subscribe for monthly notes"}</span>
              <span style={{ color: t.c.primary, fontWeight: 500, cursor: "pointer", borderBottom: `1px solid ${t.c.primary}`, paddingBottom: 2 }}>
                Join the list →
              </span>
            </div>
          </div>
        </Container>
      </Section>

      {/* Grid */}
      <Section bg={t.c.bg} py={48}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr 1fr", "repeat(3, 1fr)"), gap: rv(v, 16, 20, 24) }}>
            {filtered.map((p) => (
              <PostCard key={p.id} p={p} />
            ))}
          </div>
        </Container>
      </Section>

      {/* Newsletter band */}
      <Section bg={t.c.bgSoft} py={120}>
        <Container max={900}>
          <div style={{ textAlign: "center" }}>
            <Eyebrow style={{ marginBottom: 24, justifyContent: "center", display: "inline-flex" }}>Monthly Field Notes</Eyebrow>
            <H2 style={{ marginBottom: 20 }}>One thoughtful note per month.</H2>
            <Lead style={{ maxWidth: 540, margin: "0 auto 32px" }}>
              No marketing copy. Just essays, frameworks, and on-the-ground learnings from our team — in your inbox the first Friday of every month.
            </Lead>
            <div style={{ display: "flex", flexDirection: v.isMobile ? "column" : "row", gap: 10, maxWidth: 480, margin: "0 auto" }}>
              <input
                type="email"
                placeholder="your@organization.org"
                style={{
                  flex: 1,
                  width: "100%",
                  padding: "14px 18px",
                  minHeight: 46,
                  border: `1.5px solid ${t.c.line}`,
                  borderRadius: t.r.btn,
                  fontFamily: t.fonts.body,
                  fontSize: "0.95rem",
                  color: t.c.ink,
                  background: t.c.bg,
                  outline: "none",
                  boxSizing: "border-box",
                }}
                onFocus={(e) => (e.currentTarget.style.borderColor = t.c.primary)}
                onBlur={(e) => (e.currentTarget.style.borderColor = t.c.line)}
              />
              <Button style={v.isMobile ? { width: "100%" } : {}}>Subscribe</Button>
            </div>
          </div>
        </Container>
      </Section>
    </div>
  );
}

// ============================================================================
// CONTACT PAGE
// ============================================================================

function FormField({ label, type = "text", placeholder, multiline, required }) {
  const t = useTheme();
  const [val, setVal] = React.useState("");
  const [focused, setFocused] = React.useState(false);
  const InputTag = multiline ? "textarea" : "input";
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <label
        style={{
          fontFamily: t.fonts.body,
          fontSize: "0.78rem",
          fontWeight: 500,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          color: focused ? t.c.primary : t.c.inkMid,
          transition: "color 0.2s",
        }}
      >
        {label} {required && <span style={{ color: t.c.primary }}>*</span>}
      </label>
      <InputTag
        type={type}
        value={val}
        onChange={(e) => setVal(e.target.value)}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        placeholder={placeholder}
        rows={multiline ? 5 : undefined}
        style={{
          padding: "14px 0",
          border: "none",
          borderBottom: `1.5px solid ${focused ? t.c.primary : t.c.line}`,
          fontFamily: t.fonts.body,
          fontSize: "1rem",
          color: t.c.ink,
          background: "transparent",
          outline: "none",
          resize: multiline ? "vertical" : "none",
          width: "100%",
          transition: "border-color 0.2s",
          fontFamily: multiline ? t.fonts.body : t.fonts.body,
        }}
      />
    </div>
  );
}

function ContactPage() {
  const t = useTheme();
  const v = useViewport();
  const [sent, setSent] = React.useState(false);

  return (
    <div data-screen-label="Contact">
      <PageHero
        eyebrow="Begin the Conversation"
        title="Share your vision."
        accent={" Receive one free idea."}
        lead="No pitch deck, no commitment. Tell us about the challenge you're working on, and we'll respond with a fresh perspective from our team."
      />

      <Section bg={t.c.bg} py={80}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "1fr 1.4fr"), gap: rv(v, 32, 48, 80) }}>
            {/* LEFT — info column */}
            <div>
              <Eyebrow style={{ marginBottom: 28 }}>How to Reach Us</Eyebrow>

              <div style={{ display: "flex", flexDirection: "column", gap: rv(v, 24, 28, 32) }}>
                {[
                  { label: "Email", value: "hello@evergreen.international", sub: "Primary channel — responses within two business days." },
                  { label: "Press & Media", value: "press@evergreen.international", sub: "For story inquiries, interviews, and panel requests." },
                  { label: "Partner with a Lab", value: "labs@evergreen.international", sub: "StormWEB · Whole-House · TRI-FI · Net Zero" },
                ].map((c) => (
                  <div key={c.label} style={{ paddingBottom: rv(v, 24, 28, 32), borderBottom: `1px solid ${t.c.line}` }}>
                    <div style={{ fontFamily: t.fonts.body, fontSize: "0.7rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: t.c.inkMid, marginBottom: 10 }}>
                      {c.label}
                    </div>
                    <div style={{ fontFamily: t.fonts.display, fontSize: "clamp(1.05rem, 3.4vw, 1.3rem)", fontWeight: t.h.weight, color: t.c.primary, letterSpacing: t.h.ls, marginBottom: 10, wordBreak: "break-word" }}>
                      {c.value}
                    </div>
                    <div style={{ fontFamily: t.fonts.body, fontSize: "0.88rem", color: t.c.inkMid, lineHeight: 1.6 }}>
                      {c.sub}
                    </div>
                  </div>
                ))}

                <div>
                  <div style={{ fontFamily: t.fonts.body, fontSize: "0.7rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: t.c.inkMid, marginBottom: 10 }}>
                    Working Geography
                  </div>
                  <div style={{ fontFamily: t.fonts.body, fontSize: "0.95rem", color: t.c.ink, lineHeight: 1.7 }}>
                    Distributed across North America.<br />
                    Field-based on every engagement.
                  </div>
                </div>
              </div>
            </div>

            {/* RIGHT — form */}
            <div
              style={{
                background: t.c.bgSoft,
                border: `1px solid ${t.c.line}`,
                borderRadius: t.r.card,
                padding: rv(v, 28, 40, 56),
                position: "relative",
                overflow: "hidden",
              }}
            >
              <div style={{ position: "absolute", top: -100, right: -100, width: 280, height: 280, background: t.c.primaryLt, opacity: 0.6, borderRadius: "50%", pointerEvents: "none" }} />

              <div style={{ position: "relative" }}>
                {!sent ? (
                  <>
                    <H3 style={{ fontSize: "clamp(1.3rem, 4vw, 1.6rem)", marginBottom: 6 }}>Tell us about your challenge.</H3>
                    <Body style={{ marginBottom: rv(v, 28, 32, 40) }}>
                      The more specific you are, the more useful our response will be.
                    </Body>

                    <div style={{ display: "flex", flexDirection: "column", gap: rv(v, 22, 26, 28) }}>
                      <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr 1fr", "1fr 1fr"), gap: rv(v, 22, 24, 28) }}>
                        <FormField label="Name" placeholder="Your full name" required />
                        <FormField label="Organization" placeholder="Where you work" />
                      </div>
                      <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr 1fr", "1fr 1fr"), gap: rv(v, 22, 24, 28) }}>
                        <FormField label="Email" type="email" placeholder="you@organization.org" required />
                        <FormField label="Role" placeholder="Your title or focus" />
                      </div>

                      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                        <label style={{ fontFamily: t.fonts.body, fontSize: "0.78rem", fontWeight: 500, letterSpacing: "0.08em", textTransform: "uppercase", color: t.c.inkMid }}>
                          What's the challenge?
                        </label>
                        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                          {["Stakeholder alignment", "Sustainability strategy", "ESG reporting", "Environmental assessment", "Innovation pilot", "Other"].map((opt, i) => (
                            <PillOption key={opt} label={opt} active={i === 0} />
                          ))}
                        </div>
                      </div>

                      <FormField label="What are you working on?" placeholder="A short paragraph is plenty. We're looking for context, not polish." multiline required />

                      <div style={{ display: "flex", flexDirection: v.isMobile ? "column" : "row", alignItems: v.isMobile ? "stretch" : "center", justifyContent: "space-between", marginTop: 6, paddingTop: 22, borderTop: `1px solid ${t.c.line}`, gap: 20 }}>
                        <div style={{ fontFamily: t.fonts.body, fontSize: "0.78rem", color: t.c.inkMid, lineHeight: 1.5 }}>
                          By submitting, you agree to our brief response and follow-up if helpful.<br />Your information is never shared.
                        </div>
                        <Button onClick={() => setSent(true)} style={{ padding: "16px 32px", flexShrink: 0, justifyContent: "center" }}>
                          Send →
                        </Button>
                      </div>
                    </div>
                  </>
                ) : (
                  <div style={{ textAlign: "center", padding: "32px 16px" }}>
                    <div style={{ width: 80, height: 80, borderRadius: "50%", background: t.c.primary, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 28px", fontFamily: t.fonts.display, fontSize: "2rem" }}>
                      ✓
                    </div>
                    <H3 style={{ fontSize: "clamp(1.4rem, 4.5vw, 1.8rem)", marginBottom: 14 }}>Thank you.</H3>
                    <Body style={{ maxWidth: 420, margin: "0 auto 28px", fontSize: "clamp(0.95rem, 2.5vw, 1.05rem)" }}>
                      Your note is in our inbox. We respond to every submission within two business days — usually with a question or two before our first idea.
                    </Body>
                    <Button variant="ghost" onClick={() => setSent(false)}>Send another</Button>
                  </div>
                )}
              </div>
            </div>
          </div>
        </Container>
      </Section>

      {/* Trust signals */}
      <Section bg={t.c.bgSoft} py={80}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: rcols(v, "1fr", "1fr", "repeat(3, 1fr)"), gap: rv(v, 28, 36, 48) }}>
            {[
              { num: "48hr", label: "Response time", desc: "We reply to every submission within two business days, often with a clarifying question." },
              { num: "1 idea", label: "Free of charge", desc: "Every first conversation includes one strategic idea — no commitment, no follow-up unless requested." },
              { num: "100%", label: "Confidential", desc: "We treat every conversation as confidential by default. NDA available on request." },
            ].map((item) => (
              <div key={item.label} style={{ paddingTop: 22, borderTop: `2px solid ${t.c.primary}` }}>
                <div style={{ fontFamily: t.fonts.display, fontSize: "clamp(1.8rem, 5.5vw, 2.4rem)", fontWeight: t.h.weight, color: t.c.ink, lineHeight: 1, letterSpacing: t.h.ls, marginBottom: 10 }}>
                  {item.num}
                </div>
                <div style={{ fontFamily: t.fonts.body, fontSize: "0.85rem", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: t.c.primary, marginBottom: 14 }}>
                  {item.label}
                </div>
                <Body style={{ fontSize: "0.95rem" }}>{item.desc}</Body>
              </div>
            ))}
          </div>
        </Container>
      </Section>
    </div>
  );
}

function PillOption({ label, active }) {
  const t = useTheme();
  const [on, setOn] = React.useState(active);
  return (
    <span
      onClick={() => setOn(!on)}
      style={{
        fontFamily: t.fonts.body,
        fontSize: "0.82rem",
        padding: "8px 16px",
        borderRadius: t.r.tag,
        color: on ? "#fff" : t.c.inkMid,
        background: on ? t.c.primary : t.c.bg,
        cursor: "pointer",
        border: `1px solid ${on ? t.c.primary : t.c.line}`,
        fontWeight: 500,
        transition: "all 0.2s",
        whiteSpace: "nowrap",
      }}
    >
      {label}
    </span>
  );
}

Object.assign(window, { InsightsPage, ContactPage, POSTS });