/* 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: "Host proposes", b: "A rooted local host offers the place, homes, work setup, routes, and reason to gather." },
    { n: "02", t: "Builders pledge", b: "Remote workers reserve refundable spots before the season is confirmed." },
    { n: "03", t: "Village opens", b: "When the threshold is met, the season opens. Otherwise, every pledge is 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/past-16.jpeg",
      pledged: 12,
      target: 20,
      status: "Funding open",
      statusKind: "open",
    },
    {
      code: "JP · 01",
      name: "Forest Onsen Town",
      sub: "A future host community around old forest, baths, small inns, craft, and slow rail connections",
      season: "September 2027",
      duration: "4 weeks",
      price: "~$1,500 / month",
      image: "assets/past-02.jpeg",
      pledged: 0,
      target: 20,
      status: "Pre-launch · join waitlist",
      statusKind: "wait",
    },
    {
      code: "KR · 02",
      name: "Coastal Korea",
      sub: "A future host community around ferries, tidal flats, seafood work, and island hospitality",
      season: "Spring 2028",
      duration: "4 weeks",
      price: "TBD",
      image: "assets/past-15.jpeg",
      pledged: 0,
      target: 20,
      status: "Concept · vote on the next",
      statusKind: "concept",
    },
    {
      code: "JP · 02",
      name: "Mountain Japan",
      sub: "A future host community around old growth forest, hot springs, quiet mornings, and small-town hospitality",
      season: "Autumn 2028",
      duration: "4 weeks",
      price: "TBD",
      image: "assets/past-10.jpeg",
      pledged: 0,
      target: 20,
      status: "Concept",
      statusKind: "concept",
    },
  ],
  past: {
    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.deep}18`, 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", "Stories", "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 style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                      <span style={{ width: 7, height: 7, background: p.accent, borderRadius: 999 }}/>
                      {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: 9, letterSpacing: "0.08em",
                    textTransform: "uppercase", color: p.accent, margin: "0 0 10px",
                    whiteSpace: "nowrap",
                  }}>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",
                          display: "inline-flex",
                          alignItems: "center",
                          gap: 6,
                        }}>
                          {val}
                          {k === "Host" ? (
                            <a
                              href="https://www.farmfravillage.com/"
                              target="_blank"
                              rel="noreferrer"
                              aria-label="Open Farmfra website"
                              style={{
                                width: 17,
                                height: 17,
                                borderRadius: 999,
                                border: `1px solid ${p.rule}`,
                                color: p.accent,
                                display: "inline-flex",
                                alignItems: "center",
                                justifyContent: "center",
                                textDecoration: "none",
                                fontFamily: p.sans,
                                fontSize: 11,
                                lineHeight: 1,
                              }}
                            >↗</a>
                          ) : null}
                        </div>
                      </div>
                    ))}
                  </div>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 10, marginTop: 22 }}>
                    <a href="dumo-s2" 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</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/JP", "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,
          }}>
            From local invitation to open season.
          </h2>
        </div>
        <div className="pv-flow-rule" style={{
          margin: "-22px 0 34px 308px",
          fontFamily: p.mono,
          fontSize: 11,
          letterSpacing: "0.12em",
          textTransform: "uppercase",
          color: p.inkSoft,
        }}>
          <span style={{ color: p.deep, fontWeight: 500 }}>Funded</span> seasons open. <span style={{ color: p.deep, fontWeight: 500 }}>Unfunded</span> pledges return.
        </div>
        <div className="pv-carousel" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28, position: "relative" }}>
          {PLATFORM.steps.map((s, i) => (
            <div key={s.n} style={{
              padding: "24px 0 0",
              borderTop: `2px solid ${i === 2 ? p.accent : p.rule}`,
              position: "relative",
            }}>
              <div style={{
                display: "flex",
                alignItems: "center",
                gap: 14,
                marginBottom: 18,
              }}>
                <div style={{
                  width: 34,
                  height: 34,
                  borderRadius: 999,
                  background: i === 2 ? p.deep : p.bg,
                  border: `1px solid ${p.accent}`,
                  color: i === 2 ? p.bg : p.accent,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  fontFamily: p.mono,
                  fontSize: 10,
                  letterSpacing: "0.08em",
                  lineHeight: 1,
                }}>{s.n}</div>
                <div style={{
                  fontFamily: p.mono, fontSize: 10, letterSpacing: "0.16em",
                  color: i === 2 ? p.accent : p.inkSoft,
                  textTransform: "uppercase",
                }}>{i === 0 ? "Supply" : i === 1 ? "Demand" : "Unlocked"}</div>
              </div>
              <h3 style={{
                fontFamily: p.display, fontWeight: 500, fontSize: 34, lineHeight: 1.08, 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: "88px 56px 72px", background: p.tile, borderTop: `1px solid ${p.rule}`, borderBottom: `1px solid ${p.rule}` }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr", gap: 48,
          alignItems: "end", marginBottom: 34,
        }}>
          <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 Your Next Village
            </h2>
          </div>
        </div>

        {/* featured village */}
        {(() => {
          const v = PLATFORM.villages[0];
          return (
            <a href="dumo-s2" style={{
              display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 0,
              border: `1px solid ${p.accent}`, borderRadius: 6, overflow: "hidden",
              textDecoration: "none", color: "inherit", background: p.bg,
              marginBottom: 22, boxShadow: "0 18px 48px -36px rgba(20,30,22,0.42)",
            }}>
              <Photo src={v.image} label="Dumo Village" h={380} palette={p}/>
              <div style={{ padding: "30px 32px 28px", 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: 48, lineHeight: 1.08,
                    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: 20,
                  }}>{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: 24, display: "grid", gap: 12 }}>
                  <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(3, 1fr)", gap: 24 }}>
          {PLATFORM.villages.slice(1).map((v) => (
            <a key={v.code} href="#" style={{
              display: "block", textDecoration: "none", color: "inherit",
              border: `1px solid ${p.rule}`, borderRadius: 6, overflow: "hidden",
              background: p.bg,
              opacity: v.statusKind === "concept" ? 0.74 : 0.9,
            }}>
              <Photo src={v.image} label={v.name} h={190} palette={p} position={v.code.includes("JP") ? "center" : "center right"}/>
              <div style={{ padding: "22px 22px 24px" }}>
                <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 style={{
                    color: v.statusKind === "wait" ? p.accent : p.inkSoft,
                    display: "inline-flex", alignItems: "center", gap: 7,
                    marginLeft: "auto",
                  }}>
                    <span style={{
                      width: 6, height: 6, borderRadius: 999,
                      background: v.statusKind === "wait" ? p.accent : "transparent",
                      border: `1px solid ${v.statusKind === "wait" ? p.accent : p.rule}`,
                    }}/>
                    {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: "72px 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,
          }}>
            Our Three Pillars
          </h2>
        </div>
        <div className="pv-carousel" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {PLATFORM.pillars.map((pl, i) => {
            const [deep, ...rest] = pl.name.split(" ");
            return (
            <article key={pl.n} style={{
              position: "relative", overflow: "hidden",
              background: i === 1 ? `${p.bg}18` : `${p.bg}12`,
              padding: "72px 28px 30px",
              border: `1px solid ${p.bg}34`, borderRadius: 4,
              minHeight: 280,
            }}>
              <h3 style={{
                fontFamily: p.display, fontWeight: 500, fontSize: 52, lineHeight: 1, letterSpacing: "-0.018em",
                margin: "0 0 18px", color: p.bg,
              }}>
                <span>{deep} </span>
                <span style={{ fontFamily: p.italic, fontStyle: "italic", fontWeight: 400, color: p.accent }}>{rest.join(" ")}</span>
              </h3>
              <div style={{
                fontFamily: p.sans, fontSize: 13, lineHeight: 1.35,
                color: p.bg, marginBottom: 18, fontWeight: 600,
                letterSpacing: "0.06em", textTransform: "uppercase",
              }}>{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>

      {/* ===== PAST VILLAGES ===== */}
      <section id="PastVillages" style={{ padding: "58px 56px", background: p.bg, borderTop: `1px solid ${p.rule}`, borderBottom: `1px solid ${p.rule}` }}>
        <div style={{
          display: "grid", gridTemplateColumns: "260px 1fr", gap: 48,
          alignItems: "end", marginBottom: 18,
        }}>
          <Eyebrow>Past Villages</Eyebrow>
          <h2 style={{
            fontFamily: p.display, fontWeight: 500, fontSize: 48, lineHeight: 1.08,
            letterSpacing: "-0.018em", margin: 0, color: p.deep, maxWidth: 820,
          }}>
            Proof from the first village
          </h2>
        </div>

        <div style={{
          display: "flex",
          gap: 18,
          flexWrap: "wrap",
          marginBottom: 16,
          paddingTop: 2,
          fontFamily: p.mono,
          fontSize: 11,
          letterSpacing: "0.14em",
          textTransform: "uppercase",
          color: p.inkSoft,
        }}>
          {["24 people", "7 days", "Dumo Village, Korea", "Farmfra host"].map((item, i) => (
            <span key={item} style={{ display: "inline-flex", alignItems: "center", gap: 18 }}>
              {i > 0 ? <span style={{ color: p.accent }}>·</span> : null}
              <span>{item}</span>
            </span>
          ))}
        </div>

        <article style={{
          display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 0,
          border: `1px solid ${p.rule}`, borderRadius: 6, overflow: "hidden", background: p.tile,
        }}>
          <div style={{
            minHeight: 280,
            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: "24px 30px 24px", background: p.tile }}>
            <h3 style={{
              fontFamily: p.display, fontWeight: 500, fontSize: 42, lineHeight: 1.06,
              letterSpacing: "-0.018em", margin: "0 0 6px", color: p.deep,
            }}>{PLATFORM.past.name}</h3>
            <div style={{
              fontFamily: p.italic, fontStyle: "italic", fontSize: 21,
              color: p.accent, marginBottom: 4,
            }}>{PLATFORM.past.tagline}</div>
            <div style={{
              fontFamily: p.sans, fontSize: 14, color: p.inkSoft, marginBottom: 14,
            }}>{PLATFORM.past.where}</div>
            <p style={{
              fontFamily: p.sans, fontSize: 14, lineHeight: 1.5,
              color: p.inkSoft, margin: 0, maxWidth: 640,
            }}>{PLATFORM.past.about}</p>
            <div style={{
              display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10,
              marginTop: 14,
            }}>
              {PLATFORM.proof.slice(0, 3).map((photo) => (
                <Photo key={photo.src} src={photo.src} label={photo.label} h={70} palette={p} style={{ borderRadius: 4 }}/>
              ))}
            </div>
            <div style={{
              marginTop: 14, paddingTop: 14, borderTop: `1px solid ${p.rule}`,
              display: "grid", gridTemplateColumns: "1fr 1fr 1.2fr", 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>
                <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>
            <a href={PLATFORM.past.link} target="_blank" rel="noreferrer" style={{
              display: "inline-block", marginTop: 16,
              fontFamily: p.sans, fontSize: 14, fontWeight: 500, color: p.deep,
              textDecoration: "none", borderBottom: `1px solid ${p.deep}`, paddingBottom: 2,
            }}>Visit protoville.xyz →</a>
          </div>
        </article>
      </section>

      {/* ===== STORIES — editorial spread + marquee ===== */}
      <section id="Stories" 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: "56px 56px 28px",
          display: "grid", gridTemplateColumns: "260px 1fr auto", gap: 48,
          alignItems: "end",
        }}>
          <Eyebrow c={p.accent}>Stories</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>

        {/* Editorial spread: 1 hero quote · 2 stacked side quotes */}
        <div style={{
          padding: "18px 56px 64px",
          display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 56,
          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: 20 }}>
            {PLATFORM.voices.slice(1, 3).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: "20px 20px 20px",
                  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: "72px 56px", background: p.bg,
      }}>
        <div style={{ maxWidth: 920, marginBottom: 26 }}>
          <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>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
          {[
            {
              k: "For builders",
              t: "Pledge into Dumo Season 2.",
              b: "Join the first open season and help unlock a month of protected mornings, local dinners, and village rhythm.",
              cta: "Join Dumo →",
              href: "dumo-s2.html",
              primary: true,
            },
            {
              k: "For hosts",
              t: "Open a season from your village.",
              b: "Bring the place, local partners, rooms, routes, and reason to gather. We help shape it into a fundable village season.",
              cta: "Propose a village →",
              href: "#",
              primary: false,
            },
          ].map((card) => (
            <a key={card.k} href={card.href} style={{
              display: "flex", flexDirection: "column", justifyContent: "space-between",
              minHeight: 220, padding: "26px 28px 24px",
              background: card.primary ? p.deep : p.tile,
              color: card.primary ? p.bg : p.ink,
              border: `1px solid ${card.primary ? `${p.bg}22` : p.rule}`,
              borderRadius: 8, textDecoration: "none",
            }}>
              <div>
                <div style={{
                  fontFamily: p.mono, fontSize: 10, letterSpacing: "0.16em",
                  textTransform: "uppercase", color: card.primary ? p.accent : p.inkSoft,
                  marginBottom: 18,
                }}>{card.k}</div>
                <h3 style={{
                  fontFamily: p.display, fontWeight: 500, fontSize: 42,
                  lineHeight: 1.05, letterSpacing: "-0.018em",
                  color: card.primary ? p.bg : p.deep, margin: "0 0 14px",
                }}>{card.t}</h3>
                <p style={{
                  fontFamily: p.sans, fontSize: 15, lineHeight: 1.55,
                  color: card.primary ? `${p.bg}cc` : p.inkSoft, margin: 0,
                  maxWidth: 520,
                }}>{card.b}</p>
              </div>
              <div style={{
                marginTop: 28, fontFamily: p.sans, fontSize: 14, fontWeight: 600,
                color: card.primary ? p.accent : p.deep,
              }}>{card.cta}</div>
            </a>
          ))}
        </div>
      </section>

      {/* ===== FOOTER ===== */}
      <footer style={{ padding: "72px 56px 28px", borderTop: `1px solid ${p.rule}`, background: p.tile }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, marginBottom: 48 }}>
          <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 38, lineHeight: 1.15, color: p.deep, maxWidth: 360 }}>
            Twenty people.<br/>One village.<br/>A season<br/><I c={p.deep}>at a time.</I>
          </div>
          <div style={{ display: "grid", gap: 36, alignContent: "start" }}>
            <div>
              <div style={{ fontFamily: p.mono, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: p.inkSoft, marginBottom: 14 }}>Contact</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }}>
                <li><a href="mailto:hello@popupvillage.life" style={{ color: p.ink, textDecoration: "none", fontFamily: p.sans, fontSize: 15 }}>hello@popupvillage.life</a></li>
                <li><a href="https://www.instagram.com/protoville/" target="_blank" rel="noopener noreferrer" style={{ color: p.ink, textDecoration: "none", fontFamily: p.sans, fontSize: 15 }}>Instagram ↗</a></li>
              </ul>
            </div>
            <div>
              <div style={{ fontFamily: p.mono, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: p.inkSoft, marginBottom: 14 }}>Letters</div>
              <a href="https://startofsomethingnew.substack.com/" target="_blank" rel="noopener noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 6, color: p.ink, textDecoration: "none", fontFamily: "'Newsreader', Georgia, serif", fontSize: 19, fontStyle: "italic", lineHeight: 1.25, borderBottom: `1px solid ${p.deep}`, paddingBottom: 4 }}>Start of Something New <span style={{ fontStyle: "normal", color: p.deep }}>↗</span></a>
              <div style={{ marginTop: 8, fontFamily: p.sans, fontSize: 13, color: p.inkSoft }}>Field notes between seasons.</div>
            </div>
          </div>
        </div>
        <div style={{ paddingTop: 20, borderTop: `1px solid ${p.rule}`, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 18, flexWrap: "wrap" }}>
          <a href="/" style={{ fontFamily: p.sans, fontSize: 21, fontWeight: 600, letterSpacing: "-0.02em", color: p.deep, textDecoration: "none" }}>popup<I c={p.deep}>village</I><span style={{ color: p.accent }}>.</span></a>
          <div style={{ fontFamily: p.mono, fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: p.inkSoft }}>© 2026</div>
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap", fontFamily: p.mono, fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: p.inkSoft }}>
            <a href="terms" style={{ color: p.inkSoft, textDecoration: "none" }}>Terms of Service</a>
            <a href="privacy" style={{ color: p.inkSoft, textDecoration: "none" }}>Privacy Policy</a>
            <a href="refund" style={{ color: p.inkSoft, textDecoration: "none" }}>Refund Policy</a>
          </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 });