/* eslint-disable */
// Platform landing page — single component, palette-swappable.
// popupvillage.life is a crowdfunding *platform* for popupvillages.
// This page is platform-level. Each village links to its own detail page.

const PLATFORM = {
  brand: "popupvillage",
  tagline: "Rooted Locals invite Nomadic Builders.",
  hero: {
    eyebrow: "",
    title: ["Rooted Locals invite.", "Nomadic Builders"],
    italic: "gather.",
    sub:
      "Together, they bring the popupvillage to life. Local hosts open the place; people who work from anywhere pledge the season into being.",
  },
  proof: [
    { src: "assets/past-10.jpeg", label: "Namhae spring fields", span: "wide" },
    { src: "assets/past-15.jpeg", label: "Coastal walk with local guide", span: "tall" },
    { src: "assets/past-16.jpeg", label: "Dumo Village valley rhythm", span: "wide" },
    { src: "assets/past-02.jpeg", label: "Mountain temple route", span: "tall" },
  ],
  pillars: [
    {
      n: "03",
      name: "Deep Work",
      tag: "Protected mornings. Alive afternoons.",
      body: "Mornings protect deep work. Afternoons open into the village. You keep building, but change the place around your day.",
    },
    {
      n: "02",
      name: "Deep Nature",
      tag: "Not scenery. Operating system.",
      body: "Villages sit beside forests, rivers, paddies, coastlines, or mountains. Nature is not a weekend add-on; it shapes the daily rhythm.",
    },
    {
      n: "01",
      name: "Deep Local",
      tag: "Hosted by people rooted there.",
      body: "The platform starts from the local side: hosts, cooks, guides, makers, farmers, councils, guesthouses, and small businesses already embedded in the village.",
    },
  ],
  steps: [
    { n: "01", t: "Local communities propose", b: "A rooted community offers the place, homes, coworking, nature, routes, local knowledge, and the reason this village should exist." },
    { n: "02", t: "Nomads pledge", b: "People who work from anywhere reserve refundable spots before the season is confirmed." },
    { n: "03", t: "The village opens", b: "If enough people commit, the popupvillage runs. If not, pledges are refunded." },
  ],
  villages: [
    {
      code: "KR · 01",
      name: "Dumo Village, Korea",
      sub: "Hosted by Farmfra and local partners in a Korean island village with paddies, forest trails, and a mountain stream",
      season: "April 2027",
      duration: "4 weeks",
      price: "$500 / week · $1,500 / month",
      image: "assets/village-walk.jpg",
      pledged: 12,
      target: 20,
      status: "Funding open",
      statusKind: "open",
    },
    {
      code: "KR · 02",
      name: "Sokcho Sprint",
      sub: "A 4-day coastal popup in Sokcho. Deep work mornings, lake walks, dinners with local hosts.",
      season: "June 2026",
      duration: "4 days",
      price: "At cost",
      image: "assets/og-sokcho.jpg",
      position: "center",
      pledged: 0,
      target: 12,
      status: "Open · join the sprint",
      statusKind: "open",
      href: "https://sokchosprint.ntrpd.com/",
      external: true,
    },
  ],
  past: {
    code: "Edition 00 · Prototype",
    name: "ProtoVille Dumo Season 1",
    tagline: "Prototyping Rural Futures.",
    where: "Dumo Village, Namhae · South Korea",
    when: "April 2–8, 2026",
    size: "~25 people · 7 days",
    themes: ["Deep Nature", "Co-creation", "UBI-watching"],
    about: "A week-long prototype in Dumo Village, built with Farmfra and local partners during Korea's rural UBI pilot. The lesson was practical: the temporary village works when the workday, meals, trails, hosts, and shared spaces are designed as one rhythm.",
    link: "https://protoville.xyz",
  },
  voices: [
    {
      quote: "Season 1 proved the core bet: a deep work group can keep building while becoming part of a village's daily rhythm.",
      name: "ProtoVille field note",
      meta: "Dumo Village · April 2026",
    },
    {
      quote: "The best product signal was not the schedule. It was people extending conversations with local hosts long after the official program ended.",
      name: "Organizer note",
      meta: "Prototype learning",
    },
    {
      quote: "A small funded group can change the economics for rural hosts without turning the place into a resort.",
      name: "Platform thesis",
      meta: "Deep local, not mass tourism",
    },
    {
      quote: "The next version needs a clearer deep work rhythm: protected mornings first, local programming second.",
      name: "Season 2 direction",
      meta: "Deep work requirement",
    },
  ],
  why: [
    { h: "Local communities first", b: "Campaigns begin with people who already belong to the village: hosts, councils, makers, cooks, guides, and small businesses." },
    { h: "Nomads fund demand", b: "Pledges give local communities enough committed demand to prepare rooms, coworking, local access, and programming before anyone arrives." },
    { h: "Refundable by design", b: "If a village misses its minimum group size, pledges are returned. No awkward half-empty popup." },
    { h: "Small enough to stay rooted", b: "A twenty-person village is large enough to fund local hosting and small enough to avoid resort logic." },
  ],
  team: [
    { name: "Local Nomad", role: "Platform builder", blurb: "Building the funding and guest platform that helps rooted local hosts open temporary village seasons." },
    { name: "Farmfra", role: "Korea host partner", blurb: "A rural coliving and coworking village in Dumo Village, built around self-reliant living experiments." },
    { name: "Field partners", role: "Korea & Japan", blurb: "Hosts, councils, makers, cooks, guides, and operators who make each village local from the ground up." },
  ],
  faqs: [
    { q: "Who is this for?", a: "Nomadic Builders, founders, writers, researchers, designers, and deep work travelers who want to keep working while spending real time in Korea or Japan." },
    { q: "What exactly is being crowdfunded?", a: "You are funding a host community's ability to welcome a deep work group: accommodation, coworking, guides, workshops, coordination, and local hosting time." },
    { q: "What happens if a village does not fund?", a: "If the minimum number of spots is not reached during pre-sale, the popup does not run and pledges are refunded." },
    { q: "How do you choose villages?", a: "We look for rooted host communities with strong nature, workable accommodation, reliable internet, and something that can only happen there." },
    { q: "How is this different from nomad retreats?", a: "popupvillage is structured around funding thresholds, small group economics, local programming, and a protected work rhythm. It is less about escape and more about making a temporary village viable." },
    { q: "Who can propose a village?", a: "Local hosts, inns, rural operators, village groups, councils, farms, makers, guides, and community builders in Korea or Japan." },
    { q: "Is this a retreat or a vacation?", a: "No. It is built around deep work first. You should be able to keep your normal work commitments while changing the place, people, and rhythm around your day." },
  ],
};

// Striped placeholder — fresh, palette-aware.
function Ph({ label, h = 320, palette, tone = "soft", style = {} }) {
  const p = palette;
  const tones = {
    soft:  { bg: p.tile,  stripe: p.tileDeep,  text: p.inkSoft },
    deep:  { bg: p.deep,  stripe: p.deeper,    text: p.bg },
  };
  const t = tones[tone] || tones.soft;
  const id = "s" + Math.random().toString(36).slice(2, 8);
  return (
    <div style={{ position: "relative", overflow: "hidden", height: h, ...style }}>
      <svg width="100%" height="100%" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" style={{ display: "block" }}>
        <defs>
          <pattern id={id} patternUnits="userSpaceOnUse" width="14" height="14" patternTransform="rotate(-28)">
            <rect width="14" height="14" fill={t.bg}/>
            <line x1="0" y1="0" x2="0" y2="14" stroke={t.stripe} strokeWidth="5"/>
          </pattern>
        </defs>
        <rect width="400" height="400" fill={`url(#${id})`}/>
      </svg>
      <div style={{
        position: "absolute", inset: 0, padding: "12px 14px",
        display: "flex", alignItems: "flex-end",
        fontFamily: p.mono, fontSize: 10, letterSpacing: "0.1em",
        textTransform: "uppercase", color: t.text,
      }}>[ {label} ]</div>
    </div>
  );
}

function FundingBar({ pledged, target, palette, compact = false }) {
  const p = palette;
  const pct = Math.min(100, Math.round((pledged / target) * 100));
  return (
    <div style={{ width: "100%", color: p.ink }}>
      <div style={{
        display: "flex", justifyContent: "space-between",
        fontFamily: p.mono, fontSize: compact ? 10 : 11, letterSpacing: "0.1em",
        textTransform: "uppercase", marginBottom: 8, color: p.inkSoft,
      }}>
        <span>{pledged}/{target} spots</span>
        <span>{pct}% pre-sold</span>
      </div>
      <div style={{
        width: "100%", height: compact ? 4 : 6,
        background: p.tile, borderRadius: 999, overflow: "hidden",
      }}>
        <div style={{ width: pct + "%", height: "100%", background: p.accent }}/>
      </div>
    </div>
  );
}

function Photo({ src, label, h = 320, palette, position = "center", style = {} }) {
  const p = palette;
  return (
    <div style={{
      position: "relative",
      overflow: "hidden",
      height: h,
      backgroundImage: `linear-gradient(180deg, rgba(20,30,22,0.02), rgba(20,30,22,0.36)), url('${src}')`,
      backgroundSize: "cover",
      backgroundPosition: position,
      ...style,
    }}>
      <div style={{
        position: "absolute",
        left: 14,
        bottom: 12,
        padding: "6px 8px",
        background: "rgba(20,30,22,0.42)",
        color: "#fbfaf3",
        borderRadius: 4,
        fontFamily: p.mono,
        fontSize: 10,
        letterSpacing: "0.13em",
        textTransform: "uppercase",
        backdropFilter: "blur(8px)",
      }}>{label}</div>
    </div>
  );
}

function PlatformLanding({ palette: p, label }) {
  const Eyebrow = ({ children, c = p.accent }) => (
    <div style={{
      fontFamily: p.mono, fontSize: 11, letterSpacing: "0.2em",
      textTransform: "uppercase", color: c,
      display: "flex", alignItems: "center", gap: 10,
    }}>
      <span style={{ width: 20, height: 1, background: c, opacity: 0.7 }}/>
      {children}
    </div>
  );

  // Italic-serif emphasis span
  const I = ({ children, c = p.accent }) => (
    <span style={{ fontFamily: p.italic, fontStyle: "italic", fontWeight: 400, color: c }}>{children}</span>
  );

  return (
    <div className="pl-root" style={{
      fontFamily: p.sans, background: p.bg, color: p.ink,
      width: "100%", boxSizing: "border-box",
    }}>
      {/* ===== NAV ===== */}
      <header style={{
        position: "sticky",
        top: 0,
        zIndex: 60,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: "16px 56px",
        background: "rgba(251,250,243,0.94)",
        borderBottom: `1px solid ${p.rule}`,
        backdropFilter: "blur(12px)",
      }}>
        <div style={{ fontFamily: p.sans, fontSize: 21, fontWeight: 600, letterSpacing: "-0.02em", color: p.deep }}>
          popup<I c={p.deep}>village</I><span style={{ color: p.accent }}>.</span>
        </div>
        <nav style={{
          display: "flex", gap: 26, fontFamily: p.sans, fontSize: 14,
          color: p.ink,
        }}>
          {["How it works", "Villages", "Proof", "Field notes", "FAQ"].map(l => (
            <a key={l} href={`#${l.replace(/\s/g, "")}`} style={{ color: p.ink, textDecoration: "none", opacity: 0.8 }}>{l}</a>
          ))}
        </nav>
        <a href="#Villages" style={{
          background: p.deep, color: p.bg, padding: "9px 17px", borderRadius: 999,
          fontFamily: p.sans, fontSize: 13, fontWeight: 500, textDecoration: "none",
        }}>Join a village →</a>
      </header>

      {/* ===== HERO (full-bleed image) ===== */}
      <section className="pv-hero" style={{
        position: "relative",
        height: "calc(100svh - 64px)",
        minHeight: 640,
        maxHeight: 820,
        overflow: "hidden",
        backgroundImage: `linear-gradient(90deg, rgba(20,30,22,0.44) 0%, rgba(20,30,22,0.24) 42%, rgba(20,30,22,0.06) 72%, transparent 100%), linear-gradient(180deg, rgba(20,30,22,0.02) 0%, rgba(20,30,22,0.04) 38%, rgba(20,30,22,0.54) 100%), url('assets/hero-paddies.jpeg')`,
        backgroundSize: "cover",
        backgroundPosition: "center 48%",
        display: "flex",
        flexDirection: "column",
        justifyContent: "flex-end",
        padding: "48px 56px 44px",
        color: "#fbfaf3",
      }}>
        <div className="pv-hero-content" style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.45fr) minmax(360px, 418px)",
          gap: 56,
          alignItems: "end",
          width: "100%",
        }}>
          <div style={{ transform: "translateY(-54px)" }}>
            {PLATFORM.hero.eyebrow ? <Eyebrow c="#e8eed6">{PLATFORM.hero.eyebrow}</Eyebrow> : null}
            <h1 style={{
              fontFamily: p.display, fontWeight: 500, fontSize: 86, lineHeight: 1.02,
              letterSpacing: "-0.018em", margin: "0 0 18px", color: "#fbfaf3",
              maxWidth: 920, textShadow: "0 2px 4px rgba(0,0,0,0.22), 0 10px 28px rgba(0,0,0,0.28)",
            }}>
              {PLATFORM.hero.title[0]}<br/>
              {PLATFORM.hero.title[1]}{" "}
              {PLATFORM.hero.italic ? (
                <span style={{ fontFamily: p.italic, fontStyle: "italic", fontWeight: 400, color: "#dbe6b6" }}>
                  {PLATFORM.hero.italic}
                </span>
              ) : null}
            </h1>
            <p style={{
              fontFamily: p.sans, fontSize: 18, lineHeight: 1.45, color: "#f0eee2",
              margin: 0, maxWidth: 640, textShadow: "0 1px 12px rgba(20,30,22,0.45)",
            }}>{PLATFORM.hero.sub}</p>
          </div>
          <div className="pv-hero-card" style={{
            background: "rgba(251,250,243,0.92)",
            color: p.ink,
            border: "1px solid rgba(251,250,243,0.72)",
            borderRadius: 8,
            padding: 24,
            minHeight: 360,
            boxShadow: "0 22px 70px rgba(20,30,22,0.28)",
            backdropFilter: "blur(10px)",
          }}>
            {(() => {
              const v = PLATFORM.villages[0];
              return (
                <div style={{ minHeight: 312, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                  <div>
                  <div style={{
                    display: "flex", justifyContent: "space-between", gap: 18, alignItems: "center",
                    fontFamily: p.mono, fontSize: 10, letterSpacing: "0.14em",
                    textTransform: "uppercase", color: p.accent, marginBottom: 14,
                  }}>
                    <span>{v.status}</span>
                    <span>{v.code}</span>
                  </div>
                  <h2 style={{
                    fontFamily: p.display, fontWeight: 500, fontSize: 32, lineHeight: 1.06,
                    letterSpacing: "-0.018em", margin: "0 0 8px", color: p.deep,
                  }}>{v.name}</h2>
                  <div style={{
                    fontFamily: p.mono, fontSize: 10, letterSpacing: "0.14em",
                    textTransform: "uppercase", color: p.accent, margin: "0 0 10px",
                  }}>Fishing village · Mountain stream · Terraced paddies</div>
                  <p style={{
                    fontFamily: p.sans,
                    fontSize: 14,
                    lineHeight: 1.42,
                    color: p.inkSoft,
                    margin: "0 0 14px",
                  }}>
                    A deep work season in a Korean island village with paddies, forest trails, and a mountain stream.
                  </p>
                  <FundingBar pledged={v.pledged} target={v.target} palette={p} compact/>
                  <div style={{
                    display: "grid",
                    gridTemplateColumns: "1fr 1fr",
                    gap: 14,
                    margin: "16px 0 0",
                    paddingTop: 16,
                    borderTop: `1px solid ${p.rule}`,
                  }}>
                    {[
                      ["Host", "Farmfra"],
                      ["Dates", v.season],
                      ["Threshold", "20 spots"],
                      ["Rule", "Refunded if not funded"],
                    ].map(([k, val]) => (
                      <div key={k}>
                        <div style={{
                          fontFamily: p.mono,
                          fontSize: 9,
                          letterSpacing: "0.14em",
                          textTransform: "uppercase",
                          color: p.inkSoft,
                          marginBottom: 5,
                        }}>{k}</div>
                        <div style={{
                          fontFamily: p.sans,
                          fontSize: 14,
                          fontWeight: 600,
                          color: p.deep,
                          letterSpacing: "-0.01em",
                        }}>{val}</div>
                      </div>
                    ))}
                  </div>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 10, marginTop: 22 }}>
                    <a href="#Villages" style={{
                      background: p.deep, color: p.bg, padding: "13px 16px", borderRadius: 999,
                      fontFamily: p.sans, fontSize: 13, fontWeight: 600, textDecoration: "none",
                      textAlign: "center",
                    }}>Join Dumo Village</a>
                  </div>
                </div>
              );
            })()}
          </div>
        </div>
      </section>

      {/* ===== STAT STRIP ===== */}
      <section style={{
        padding: "32px 56px", background: p.tile,
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32,
      }}>
        {[
          ["1", "local host network"],
          ["20", "pledged spots to unlock"],
          ["100%", "refunded if not funded"],
          ["KR", "rooted communities first"],
        ].map(([big, small]) => (
          <div key={big}>
            <div style={{
              fontFamily: p.display, fontWeight: 500, fontSize: 56, lineHeight: 1.05,
              letterSpacing: "-0.018em", color: p.deep,
            }}>{big}</div>
            <div style={{
              marginTop: 8, fontFamily: p.mono, fontSize: 11,
              letterSpacing: "0.12em", textTransform: "uppercase", color: p.inkSoft,
            }}>{small}</div>
          </div>
        ))}
      </section>

      {/* ===== HOW IT WORKS ===== */}
      <section id="Howitworks" style={{ padding: "112px 56px 80px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 48, marginBottom: 56 }}>
          <Eyebrow>How it works</Eyebrow>
          <h2 style={{
            fontFamily: p.display, fontWeight: 500, fontSize: 64, lineHeight: 1.08,
            letterSpacing: "-0.018em", margin: 0, color: p.deep, maxWidth: 880,
          }}>
            A village opens when local invitation meets real demand.
          </h2>
        </div>
        <div className="pv-carousel" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
          {PLATFORM.steps.map((s, i) => (
            <div key={s.n} style={{
              padding: "32px 28px 36px 28px",
              borderLeft: i > 0 ? `1px solid ${p.rule}` : "none",
              position: "relative",
            }}>
              <div style={{
                fontFamily: p.mono, fontSize: 11, letterSpacing: "0.16em",
                color: p.accent, marginBottom: 16,
              }}>STEP {s.n}</div>
              <h3 style={{
                fontFamily: p.display, fontWeight: 500, fontSize: 26, lineHeight: 1.12, letterSpacing: "-0.012em",
                margin: "0 0 12px", color: p.deep,
              }}>{s.t}</h3>
              <p style={{
                fontFamily: p.sans, fontSize: 15, lineHeight: 1.55,
                color: p.inkSoft, margin: 0,
              }}>{s.b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ===== VILLAGES GRID ===== */}
      <section id="Villages" style={{ padding: "112px 56px 80px", background: p.tile, borderTop: `1px solid ${p.rule}`, borderBottom: `1px solid ${p.rule}` }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr auto", gap: 48,
          alignItems: "end", marginBottom: 48,
        }}>
          <div>
            <Eyebrow>Villages</Eyebrow>
            <h2 style={{
              fontFamily: p.display, fontWeight: 500, fontSize: 64, lineHeight: 1.08,
              letterSpacing: "-0.018em", margin: "20px 0 0", color: p.deep, maxWidth: 880,
            }}>
              Choose by season, setting, work rhythm, and the local program you want to help unlock.
            </h2>
          </div>
          <div style={{
            fontFamily: p.mono, fontSize: 11, letterSpacing: "0.14em",
            textTransform: "uppercase", color: p.inkSoft,
          }}>2 listed · KR</div>
        </div>

        {/* featured village */}
        {(() => {
          const v = PLATFORM.villages[0];
          return (
            <a href="Dumo Season 2.html" style={{
              display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 0,
              border: `1px solid ${p.rule}`, borderRadius: 6, overflow: "hidden",
              textDecoration: "none", color: "inherit", background: p.bg,
              marginBottom: 24,
            }}>
              <Photo src={v.image} label={`${v.code} · Dumo Village`} h={460} palette={p}/>
              <div style={{ padding: "36px 36px 32px", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                <div>
                  <div style={{
                    display: "inline-flex", gap: 10, alignItems: "center",
                    fontFamily: p.mono, fontSize: 11, letterSpacing: "0.16em",
                    textTransform: "uppercase", color: p.accent, marginBottom: 14,
                  }}>
                    <span style={{ width: 8, height: 8, background: p.accent, borderRadius: 999 }}/>
                    {v.status}
                  </div>
                  <h3 style={{
                    fontFamily: p.display, fontWeight: 500, fontSize: 56, lineHeight: 1.12,
                    letterSpacing: "-0.018em", margin: "0 0 6px", color: p.deep,
                  }}>{v.name}</h3>
                  <div style={{
                    fontFamily: p.italic, fontStyle: "italic", fontSize: 20,
                    color: p.inkSoft, marginBottom: 24,
                  }}>{v.sub}</div>
                  <div style={{
                    display: "grid", gridTemplateColumns: "repeat(3, auto)", gap: 32,
                    paddingTop: 20, borderTop: `1px solid ${p.rule}`,
                    fontFamily: p.mono, fontSize: 11, letterSpacing: "0.12em",
                    textTransform: "uppercase", color: p.inkSoft,
                  }}>
                    <div>
                      <div style={{ fontFamily: p.sans, fontSize: 20, fontWeight: 500, color: p.deep, textTransform: "none", letterSpacing: "-0.02em", marginBottom: 4 }}>{v.season}</div>
                      <div>Season</div>
                    </div>
                    <div>
                      <div style={{ fontFamily: p.sans, fontSize: 20, fontWeight: 500, color: p.deep, textTransform: "none", letterSpacing: "-0.02em", marginBottom: 4 }}>{v.duration}</div>
                      <div>Length</div>
                    </div>
                    <div>
                      <div style={{ fontFamily: p.sans, fontSize: 20, fontWeight: 500, color: p.deep, textTransform: "none", letterSpacing: "-0.02em", marginBottom: 4 }}>$500 / wk</div>
                      <div>From</div>
                    </div>
                  </div>
                </div>
                <div style={{ marginTop: 32, display: "grid", gap: 14 }}>
                  <FundingBar pledged={v.pledged} target={v.target} palette={p}/>
                  <div style={{
                    display: "flex", justifyContent: "space-between", alignItems: "center",
                    paddingTop: 8,
                  }}>
                    <span style={{ fontFamily: p.mono, fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: p.inkSoft }}>
                      Funding closes Dec 15, 2026
                    </span>
                    <span style={{
                      fontFamily: p.sans, fontSize: 14, fontWeight: 500, color: p.deep,
                    }}>See village →</span>
                  </div>
                </div>
              </div>
            </a>
          );
        })()}

        {/* other villages */}
        <div className="pv-carousel" style={{ display: "grid", gridTemplateColumns: `repeat(${Math.max(PLATFORM.villages.slice(1).length, 1)}, 1fr)`, gap: 24 }}>
          {PLATFORM.villages.slice(1).map((v) => (
            <a key={v.code} href={v.href || "#"} {...(v.external ? { target: "_blank", rel: "noreferrer" } : {})} style={{
              display: "block", textDecoration: "none", color: "inherit",
              border: `1px solid ${p.rule}`, borderRadius: 6, overflow: "hidden",
              background: p.bg,
            }}>
              <Photo src={v.image} label={v.code} h={220} palette={p} position={v.position || (v.code.includes("JP") ? "center" : "center right")}/>
              <div style={{ padding: "24px 24px 28px" }}>
                <div style={{
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  fontFamily: p.mono, fontSize: 10, letterSpacing: "0.14em",
                  textTransform: "uppercase", color: p.inkSoft, marginBottom: 12,
                }}>
                  <span>{v.code}</span>
                  <span style={{ color: v.statusKind === "wait" ? p.accent : p.inkSoft }}>{v.status}</span>
                </div>
                <h3 style={{
                  fontFamily: p.display, fontWeight: 500, fontSize: 28, lineHeight: 1.12, letterSpacing: "-0.012em",
                  margin: "0 0 4px", color: p.deep,
                }}>{v.name}</h3>
                <div style={{
                  fontFamily: p.italic, fontStyle: "italic", fontSize: 16,
                  color: p.inkSoft, lineHeight: 1.4, marginBottom: 18,
                }}>{v.sub}</div>
                <div style={{
                  display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10,
                  fontFamily: p.mono, fontSize: 11, letterSpacing: "0.1em",
                  textTransform: "uppercase", color: p.inkSoft,
                  paddingTop: 14, borderTop: `1px solid ${p.rule}`,
                }}>
                  <div>{v.season}</div>
                  <div style={{ textAlign: "right" }}>{v.duration}</div>
                </div>
                <div style={{
                  marginTop: 18, fontFamily: p.sans, fontSize: 14, fontWeight: 500, color: p.deep,
                }}>{v.statusKind === "wait" ? "Join waitlist →" : v.statusKind === "concept" ? "Read the brief →" : "See village →"}</div>
              </div>
            </a>
          ))}
        </div>

        <div style={{
          marginTop: 32, textAlign: "center",
          fontFamily: p.sans, fontSize: 15, color: p.inkSoft,
        }}>
          Are you a local host, inn, village group, maker network, or council in Korea or Japan?{" "}
          <a href="#" style={{ color: p.deep, fontWeight: 500 }}>Propose a popupvillage →</a>
        </div>
      </section>

      {/* ===== PILLARS ===== */}
      <section id="pillars" style={{ padding: "80px 56px", background: p.deep, color: p.bg, borderTop: `1px solid ${p.rule}`, borderBottom: `1px solid ${p.rule}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 48, marginBottom: 48 }}>
          <Eyebrow c={p.accent}>The three deeps</Eyebrow>
          <h2 style={{
            fontFamily: p.display, fontWeight: 500, fontSize: 64, lineHeight: 1.08,
            letterSpacing: "-0.018em", margin: 0, color: p.bg, maxWidth: 900,
          }}>
            A village rhythm for deep work.
          </h2>
        </div>
        <div className="pv-carousel" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {PLATFORM.pillars.map((pl) => (
            <article key={pl.n} style={{
              background: `${p.bg}08`, padding: "32px 28px 36px",
              border: `1px solid ${p.bg}1f`, borderRadius: 4,
            }}>
              <h3 style={{
                fontFamily: p.display, fontWeight: 500, fontSize: 44, lineHeight: 1.05, letterSpacing: "-0.018em",
                margin: "0 0 10px", color: p.bg,
              }}>{pl.name}</h3>
              <div style={{
                fontFamily: p.italic, fontStyle: "italic", fontSize: 18,
                color: p.accent, marginBottom: 14, fontWeight: 400,
              }}>{pl.tag}</div>
              <p style={{
                fontFamily: p.sans, fontSize: 15, lineHeight: 1.55,
                color: `${p.bg}cc`, margin: 0,
              }}>{pl.body}</p>
            </article>
          ))}
        </div>
      </section>

      {/* ===== PROOF FROM DUMO VILLAGE ===== */}
      <section id="Proof" style={{ padding: "112px 56px 96px", background: p.bg }}>
        <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 48, marginBottom: 48 }}>
          <Eyebrow>Proof from Dumo Village</Eyebrow>
          <h2 style={{
            fontFamily: p.display, fontWeight: 500, fontSize: 64, lineHeight: 1.08,
            letterSpacing: "-0.018em", margin: 0, color: p.deep, maxWidth: 920,
          }}>
            The first prototype already ran.
          </h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "0.78fr 1.22fr",
          gap: 44,
          alignItems: "end",
          marginBottom: 34,
        }}>
          <p style={{
            fontFamily: p.sans,
            fontSize: 17,
            lineHeight: 1.55,
            color: p.inkSoft,
            margin: 0,
            maxWidth: 620,
          }}>
            Dumo Village showed the rhythm: quiet mornings, local routes, hosted walks, mountain paths, and a small group moving through an actual village.
          </p>
          <div className="pv-photo-grid" style={{
            display: "grid",
            gridTemplateColumns: "1.1fr 0.7fr 1.1fr",
            gridTemplateRows: "1fr 1fr",
            gap: 12,
            height: 360,
          }}>
            {PLATFORM.proof.map((photo, i) => (
              <Photo
                key={photo.src}
                src={photo.src}
                label={photo.label}
                h="100%"
                palette={p}
                position={i === 1 ? "center right" : "center"}
                style={{
                  borderRadius: 6,
                  border: `1px solid ${p.rule}`,
                  gridRow: photo.span === "tall" ? "span 2" : "span 1",
                }}
              />
            ))}
          </div>
        </div>
        <article style={{
          display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 0,
          border: `1px solid ${p.rule}`, borderRadius: 6, overflow: "hidden", background: p.tile,
        }}>
          <div style={{
            height: 500,
            backgroundImage: `url('assets/past-16.jpeg')`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            position: "relative",
          }}>
            <div style={{
              position: "absolute", left: 16, bottom: 14,
              fontFamily: p.mono, fontSize: 10, letterSpacing: "0.14em",
              textTransform: "uppercase", color: "#fff",
              textShadow: "0 1px 4px rgba(0,0,0,0.5)",
            }}>{PLATFORM.past.name} · Dumo Village</div>
          </div>
          <div style={{ padding: "44px 44px 40px", display: "flex", flexDirection: "column", justifyContent: "space-between", background: p.bg }}>
            <div>
              <div style={{
                fontFamily: p.mono, fontSize: 11, letterSpacing: "0.16em",
                textTransform: "uppercase", color: p.accent, marginBottom: 14,
              }}>{PLATFORM.past.code}</div>
              <h3 style={{
                fontFamily: p.display, fontWeight: 500, fontSize: 56, lineHeight: 1.12,
                letterSpacing: "-0.018em", margin: "0 0 6px", color: p.deep,
              }}>{PLATFORM.past.name}</h3>
              <div style={{
                fontFamily: p.italic, fontStyle: "italic", fontSize: 22,
                color: p.accent, marginBottom: 6,
              }}>{PLATFORM.past.tagline}</div>
              <div style={{
                fontFamily: p.sans, fontSize: 16, color: p.inkSoft, marginBottom: 22,
              }}>{PLATFORM.past.where}</div>
              <p style={{
                fontFamily: p.sans, fontSize: 15, lineHeight: 1.6,
                color: p.inkSoft, margin: 0, maxWidth: 540,
              }}>{PLATFORM.past.about}</p>
              <div style={{
                marginTop: 28, paddingTop: 20, borderTop: `1px solid ${p.rule}`,
                display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18,
                fontFamily: p.mono, fontSize: 10, letterSpacing: "0.14em",
                textTransform: "uppercase", color: p.inkSoft,
              }}>
                <div>
                  <div style={{ fontFamily: p.sans, fontSize: 15, fontWeight: 500, color: p.deep, textTransform: "none", letterSpacing: "-0.01em", marginBottom: 4 }}>{PLATFORM.past.when}</div>
                  <div>When</div>
                </div>
                <div>
                  <div style={{ fontFamily: p.sans, fontSize: 15, fontWeight: 500, color: p.deep, textTransform: "none", letterSpacing: "-0.01em", marginBottom: 4 }}>{PLATFORM.past.size}</div>
                  <div>Size</div>
                </div>
                <div style={{ gridColumn: "1 / -1" }}>
                  <div style={{ fontFamily: p.sans, fontSize: 15, fontWeight: 500, color: p.deep, textTransform: "none", letterSpacing: "-0.01em", marginBottom: 4 }}>{PLATFORM.past.themes.join(" · ")}</div>
                  <div>Themes</div>
                </div>
              </div>
            </div>
            <div style={{ marginTop: 32, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
              <a href={PLATFORM.past.link} target="_blank" rel="noreferrer" style={{
                fontFamily: p.sans, fontSize: 14, fontWeight: 500, color: p.deep,
                textDecoration: "none", borderBottom: `1px solid ${p.deep}`, paddingBottom: 2,
              }}>Visit protoville.xyz →</a>
              <span style={{
                fontFamily: p.mono, fontSize: 10, letterSpacing: "0.14em",
                textTransform: "uppercase", color: p.inkSoft, textAlign: "right",
              }}>Next season · Dumo Village</span>
            </div>
          </div>
        </article>
      </section>

      {/* ===== FIELD NOTES — editorial spread + marquee ===== */}
      <section id="Fieldnotes" style={{
        background: p.deep, color: p.bg,
        borderTop: `1px solid ${p.rule}`, borderBottom: `1px solid ${p.rule}`,
        overflow: "hidden",
      }}>
        {/* Top ticker — short pull lines, infinite marquee */}
        <div style={{
          borderBottom: `1px solid ${p.accent}33`,
          padding: "18px 0", overflow: "hidden",
          position: "relative",
        }}>
          <div className="pv-marquee" style={{
            display: "flex", gap: 56, whiteSpace: "nowrap",
            fontFamily: p.italic, fontStyle: "italic",
            fontSize: 28, color: p.accent, letterSpacing: "-0.01em",
            animation: "pvMarquee 38s linear infinite",
            width: "max-content",
          }}>
            {[...Array(2)].map((_, k) => (
              <React.Fragment key={k}>
                {[
                  "local hosts first",
                  "builders pledge",
                  "deep work before programming",
                  "small groups, real villages",
                  "nature as daily infrastructure",
                  "protected mornings",
                  "Korea and Japan first",
                  "funded or refunded",
                ].map((s, i) => (
                  <span key={`${k}-${i}`} style={{ display: "inline-flex", alignItems: "center", gap: 56 }}>
                    {s}
                    <span style={{ color: `${p.bg}55`, fontStyle: "normal" }}>✦</span>
                  </span>
                ))}
              </React.Fragment>
            ))}
          </div>
        </div>

        {/* Header strip */}
        <div style={{
          padding: "72px 56px 40px",
          display: "grid", gridTemplateColumns: "260px 1fr auto", gap: 48,
          alignItems: "end",
        }}>
          <Eyebrow c={p.accent}>Field notes</Eyebrow>
          <h2 style={{
            fontFamily: p.display, fontWeight: 500, fontSize: 56, lineHeight: 1.06,
            letterSpacing: "-0.018em", margin: 0, color: p.bg, maxWidth: 720,
          }}>
            What the prototype <I c={p.accent}>taught us.</I>
          </h2>
          <div style={{
            fontFamily: p.mono, fontSize: 11, letterSpacing: "0.16em",
            textTransform: "uppercase", color: `${p.bg}88`,
          }}>04 notes · Edition 00</div>
        </div>

        {/* Editorial spread: 1 hero quote · 3 stacked side quotes */}
        <div style={{
          padding: "24px 56px 88px",
          display: "grid", gridTemplateColumns: "1.55fr 1fr", gap: 64,
          alignItems: "start",
        }}>
          {/* Hero quote */}
          <figure style={{ margin: 0, position: "relative" }}>
            <div aria-hidden="true" style={{
              position: "absolute", top: -36, left: -8,
              fontFamily: p.italic, fontStyle: "italic",
              fontSize: 160, lineHeight: 0.8, color: p.accent,
              opacity: 0.65, pointerEvents: "none",
            }}>"</div>
            <blockquote style={{
              margin: 0, position: "relative", zIndex: 1,
              fontFamily: p.italic, fontStyle: "italic", fontWeight: 400,
              fontSize: 54, lineHeight: 1.08, letterSpacing: "-0.018em",
              color: p.bg,
            }}>
              {PLATFORM.voices[0].quote}
            </blockquote>
            <figcaption style={{
              marginTop: 32, paddingTop: 18,
              borderTop: `1px solid ${p.bg}33`, maxWidth: 480,
              display: "flex", justifyContent: "space-between", alignItems: "baseline",
              gap: 16, flexWrap: "wrap",
            }}>
              <div style={{
                fontFamily: p.sans, fontWeight: 500, fontSize: 18, color: p.bg,
              }}>— {PLATFORM.voices[0].name}</div>
              <div style={{
                fontFamily: p.mono, fontSize: 10, letterSpacing: "0.14em",
                textTransform: "uppercase", color: p.accent,
              }}>{PLATFORM.voices[0].meta}</div>
            </figcaption>
          </figure>

          {/* Side stack */}
          <div className="pv-carousel pv-carousel--voices" style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            {PLATFORM.voices.slice(1).map((v, i) => {
              const initials = v.name.split(/\s+/).map(s => s[0]).join("").slice(0, 2).toUpperCase();
              return (
                <figure key={v.name} style={{
                  margin: 0, padding: "22px 22px 22px",
                  background: `${p.bg}08`,
                  border: `1px solid ${p.bg}1f`,
                  borderRadius: 4,
                  display: "grid", gridTemplateColumns: "44px 1fr", gap: 16,
                  alignItems: "start",
                }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 22,
                    background: p.accent, color: p.deep,
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontFamily: p.sans, fontWeight: 600, fontSize: 14, letterSpacing: "0.02em",
                  }}>{initials}</div>
                  <div>
                    <blockquote style={{
                      margin: 0, fontFamily: p.sans, fontWeight: 400,
                      fontSize: 16, lineHeight: 1.45, letterSpacing: "-0.005em",
                      color: p.bg,
                    }}>{v.quote}</blockquote>
                    <figcaption style={{
                      marginTop: 12, display: "flex", justifyContent: "space-between",
                      alignItems: "baseline", gap: 12, flexWrap: "wrap",
                    }}>
                      <div style={{
                        fontFamily: p.sans, fontWeight: 500, fontSize: 13, color: p.bg,
                      }}>{v.name}</div>
                      <div style={{
                        fontFamily: p.mono, fontSize: 9, letterSpacing: "0.14em",
                        textTransform: "uppercase", color: `${p.bg}88`,
                      }}>{v.meta}</div>
                    </figcaption>
                  </div>
                </figure>
              );
            })}
          </div>
        </div>

        <style>{`
          @keyframes pvMarquee {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); }
          }
        `}</style>
      </section>

      {/* ===== FAQ ===== */}
      <section id="FAQ" style={{
        padding: "80px 56px", background: p.tile,
        borderTop: `1px solid ${p.rule}`, borderBottom: `1px solid ${p.rule}`,
      }}>
        <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 56 }}>
          <div>
            <Eyebrow>FAQ</Eyebrow>
            <h2 style={{
              fontFamily: p.display, fontWeight: 500, fontSize: 44, lineHeight: 1.12,
              letterSpacing: "-0.018em", margin: "20px 0 16px", color: p.deep, lineHeight: 1.1,
            }}>
              The questions, <I>fairly asked.</I>
            </h2>
            <p style={{
              fontFamily: p.sans, fontSize: 15, lineHeight: 1.55,
              color: p.inkSoft, margin: 0,
            }}>
              More on each village's own page — refund policy, travel, what to bring.
            </p>
          </div>
          <div>
            {PLATFORM.faqs.map((f, i) => (
              <details key={f.q} open={i < 2} style={{
                padding: "20px 0",
                borderTop: `1px solid ${p.rule}`,
                borderBottom: i === PLATFORM.faqs.length - 1 ? `1px solid ${p.rule}` : "none",
              }}>
                <summary style={{
                  cursor: "pointer", listStyle: "none",
                  display: "grid", gridTemplateColumns: "40px 1fr 24px",
                  gap: 16, alignItems: "baseline",
                  fontFamily: p.sans, fontWeight: 500, fontSize: 20,
                  letterSpacing: "-0.015em", color: p.deep,
                }}>
                  <span style={{
                    fontFamily: p.mono, fontSize: 11, letterSpacing: "0.14em",
                    color: p.accent,
                  }}>0{i + 1}</span>
                  <span>{f.q}</span>
                  <span style={{ color: p.accent, textAlign: "right", fontSize: 18 }}>＋</span>
                </summary>
                <p style={{
                  margin: "12px 0 0 56px",
                  fontFamily: p.sans, fontSize: 15, lineHeight: 1.6,
                  color: p.inkSoft, maxWidth: 640,
                }}>{f.a}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* ===== CTA / NEWSLETTER ===== */}
      <section style={{
        padding: "96px 56px", background: p.bg,
        display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 56, alignItems: "center",
      }}>
        <div>
          <Eyebrow>Two ways in</Eyebrow>
          <h2 style={{
            fontFamily: p.display, fontWeight: 500, fontSize: 72, lineHeight: 1.02,
            letterSpacing: "-0.012em", margin: "20px 0 24px", color: p.deep,
          }}>
            Host from your village, <I>pledge into a season.</I>
          </h2>
          <p style={{
            fontFamily: p.sans, fontSize: 18, lineHeight: 1.5,
            color: p.inkSoft, margin: 0, maxWidth: 540,
          }}>
            Local communities can propose a popupvillage. Builders can pledge spots into open seasons. Every village runs only when its threshold is met.
          </p>
        </div>
        <form onSubmit={(e) => e.preventDefault()} style={{
          display: "grid", gap: 12,
          padding: 28, background: p.tile, borderRadius: 8,
          border: `1px solid ${p.rule}`,
        }}>
          <input placeholder="email@you.dev" style={{
            background: p.bg, border: `1px solid ${p.rule}`, borderRadius: 6,
            padding: "14px 16px", fontFamily: p.sans, fontSize: 15,
            color: p.ink, outline: "none",
          }}/>
          <button type="submit" style={{
            background: p.deep, color: p.bg, border: "none", borderRadius: 6,
            padding: "14px 16px", fontFamily: p.sans, fontSize: 14, fontWeight: 500,
            cursor: "pointer",
          }}>Propose a village →</button>
        </form>
      </section>

      {/* ===== FOOTER ===== */}
      <footer style={{
        padding: "40px 56px 32px",
        borderTop: `1px solid ${p.rule}`,
        background: p.bg,
      }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 32,
          marginBottom: 32,
        }}>
          <div>
            <div style={{ fontFamily: p.sans, fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", color: p.deep }}>
              popup<I c={p.deep}>village</I><span style={{ color: p.accent }}>.</span>
            </div>
            <div style={{ marginTop: 10, fontFamily: p.sans, fontSize: 14, color: p.inkSoft, maxWidth: 320 }}>
              A crowdfunding platform where communities in Korea and Japan host people who work from anywhere, twenty at a time.
            </div>
          </div>
          {[
            ["Villages", ["KR · 01 Dumo Village", "KR · 02 Sokcho Sprint"]],
            ["Platform", ["How it works", "Propose a village", "Press"]],
            ["Talk to us", ["hello@popupvillage.life", "Telegram", "Instagram", "Newsletter"]],
          ].map(([h, items]) => (
            <div key={h}>
              <div style={{
                fontFamily: p.mono, fontSize: 10, letterSpacing: "0.18em",
                textTransform: "uppercase", color: p.inkSoft, marginBottom: 12,
              }}>{h}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }}>
                {items.map((it) => (
                  <li key={it}>
                    <a href="#" style={{ color: p.ink, textDecoration: "none", fontFamily: p.sans, fontSize: 14 }}>{it}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          paddingTop: 20, borderTop: `1px solid ${p.rule}`,
          display: "flex", justifyContent: "space-between", gap: 18, flexWrap: "wrap",
          fontFamily: p.mono, fontSize: 10, letterSpacing: "0.14em",
          textTransform: "uppercase", color: p.inkSoft,
        }}>
          <div>popupvillage.life · {label}</div>
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
            <a href="terms.html" style={{ color: p.inkSoft, textDecoration: "none" }}>Terms of Service</a>
            <a href="privacy.html" style={{ color: p.inkSoft, textDecoration: "none" }}>Privacy Policy</a>
            <a href="refund.html" style={{ color: p.inkSoft, textDecoration: "none" }}>Refund Policy</a>
          </div>
          <div>© 2026 · KR</div>
        </div>
      </footer>
      <div className="pv-sticky-cta" style={{
        position: "fixed",
        left: 12,
        right: 12,
        bottom: 12,
        zIndex: 50,
        padding: "10px 10px 10px 14px",
        background: p.deep,
        color: p.bg,
        borderRadius: 999,
        boxShadow: "0 18px 50px rgba(20,30,22,0.28)",
      }}>
        <div>
          <div style={{
            fontFamily: p.sans, fontSize: 13, fontWeight: 600,
            letterSpacing: "-0.01em",
          }}>12/20 spots pledged</div>
          <div style={{
            fontFamily: p.mono, fontSize: 9, letterSpacing: "0.12em",
            textTransform: "uppercase", color: `${p.bg}b8`,
          }}>Dumo Village funding open</div>
        </div>
        <a href="#Villages" style={{
          background: p.bg,
          color: p.deep,
          padding: "10px 14px",
          borderRadius: 999,
          fontFamily: p.sans,
          fontSize: 12,
          fontWeight: 700,
          textDecoration: "none",
          whiteSpace: "nowrap",
        }}>Pledge a spot</a>
      </div>
    </div>
  );
}

// ---------- Palettes ----------
// All three share the same fresh-nature DNA: warm clean cream bg,
// vivid green primary, soft accent. Modern sans (Geist) + italic
// Newsreader for emphasis + JetBrains Mono for taxonomic bits.

const FONTS = {
  // Quiet Modern pairing — Newsreader (display+italic) · DM Sans (UI body) · IBM Plex Mono (labels)
  sans:  "'DM Sans', system-ui, -apple-system, sans-serif",
  italic:"'Newsreader', Georgia, serif",
  mono:  "'IBM Plex Mono', ui-monospace, monospace",
  // Display: Newsreader at 60-opsz for headlines
  display: "'Newsreader', Georgia, serif",
};

const PALETTES = {
  meadow: {
    name: "Meadow — fresh moss + sage on cream",
    bg:    "#fbfaf3",
    tile:  "#f1efe1",
    tileDeep: "#e4e2cf",
    deep:  "#2c5238",
    deeper:"#1f3a28",
    accent:"#7fa063",
    ink:   "#1f2a22",
    inkSoft:"#52614e",
    rule:  "#e0ddc8",
    ...FONTS,
  },
  stream: {
    name: "Stream — pale mist + evergreen + water blue",
    bg:    "#f4f7f3",
    tile:  "#e6ece4",
    tileDeep:"#d7dfd4",
    deep:  "#1f4438",
    deeper:"#143027",
    accent:"#4d92a8",
    ink:   "#1a2620",
    inkSoft:"#4d5b54",
    rule:  "#d1d9cf",
    ...FONTS,
  },
  citron: {
    name: "Citron — paper + sage + bright citron",
    bg:    "#fbf9ec",
    tile:  "#f1ecd5",
    tileDeep:"#e0d9bd",
    deep:  "#3b4f2a",
    deeper:"#283a1c",
    accent:"#b8c43a",
    ink:   "#1f2415",
    inkSoft:"#5a604a",
    rule:  "#e2dcbe",
    ...FONTS,
  },
};

Object.assign(window, { PLATFORM, Ph, FundingBar, PlatformLanding, PALETTES });