/* Chameleon Space — sections B: opening soon, first gatherings, the scholarship. */
const CSB = window.ChameleonSpaceDesignSystem_1abbe1;
const { Button: BtnB, Badge: BadgeB, Card: CardB, Eyebrow: EyebrowB } = CSB;

/* ---------- OPENING SOON ---------- */
const PHASES = [
  { when: "Right now", time: "// Phase 01 · Open", status: ["ok", "Founding"], title: "The founding members move in.", body: "We’re welcoming our first members while the space settles, by application as always, and hosting our first events so anyone can come see the place. Join now and you lock the founding rate \u2014 the lowest membership will ever be \u2014 for as long as you stay. Early is the reward.", feat: true },
  { when: "In about a month", time: "// Phase 02 · Soon", status: ["info", "Wider"], title: "The doors open wider.", body: "Once the space finds its rhythm, we welcome more of the city in at our regular rate. The founding crew keeps the lower price they got for showing up first.", feat: false },
  { when: "By fall", time: "// Phase 03 · Full", status: ["warn", "Full bloom"], title: "Full bloom.", body: "Every room open, every evening busy, the whole place humming. Workshops, gatherings, late-night work sessions, and more going on than any one person can keep up with. The full thing, finally full.", feat: false },
];
function Opening({ onApply }) {
  return (
    <section id="opening" style={{ padding: "clamp(56px,8vw,96px) clamp(16px,4vw,36px)", background: "var(--paper-2)", borderTop: "3px solid var(--ink)", borderBottom: "3px solid var(--ink)" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <SectionHead kicker="Opening soon" title="We’re opening the way good things grow. A little at a time." note="3 phases" max={820} />
        <Reveal delay={80}>
          <p style={{ fontFamily: "var(--font-text)", fontSize: "clamp(16px,1.4vw,19px)", lineHeight: 1.6, color: "#332f28", maxWidth: 720, margin: "24px 0 0" }}>
            We are not quite open yet. The paint is barely dry and the kettle is still finding its spot on the shelf. Chameleon Space will not flip from closed to open overnight. It opens season by season, and the people who join early watch the whole thing happen from the first day.
          </p>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 48, alignItems: "stretch" }} className="cs-phases">
          {PHASES.map((p, i) => (
            <Reveal key={p.when} delay={i * 90}>
              <CardB variant={p.feat ? "accent" : "default"} style={{ display: "flex", flexDirection: "column", height: "100%", transform: p.feat ? "translateY(-8px)" : "none", boxShadow: p.feat ? "8px 8px 0 var(--ink)" : undefined }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", opacity: .75 }}>{p.time}</span>
                  <BadgeB tone={p.feat ? "ink" : p.status[0]} dot={!p.feat} square={p.feat}>{p.status[1]}</BadgeB>
                </div>
                <div style={{ fontFamily: "var(--font-display)", textTransform: "uppercase", fontSize: 15, letterSpacing: ".02em", marginBottom: 4, opacity: .8 }}>{p.when}</div>
                <h3 style={{ fontFamily: "var(--font-display)", textTransform: "uppercase", fontSize: 26, lineHeight: .96, margin: "0 0 14px" }}>{p.title}</h3>
                <p style={{ fontFamily: "var(--font-text)", fontSize: 15, lineHeight: 1.58, margin: 0, color: p.feat ? "var(--on-accent)" : "#3a362e" }}>{p.body}</p>
              </CardB>
            </Reveal>
          ))}
        </div>
        <Reveal delay={120}>
          <div style={{ marginTop: 44, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap", borderTop: "2px solid var(--ink)", paddingTop: 28 }}>
            <p style={{ fontFamily: "var(--font-display)", textTransform: "uppercase", fontSize: "clamp(22px,3vw,34px)", lineHeight: .95, margin: 0, maxWidth: 640, letterSpacing: "-.01em" }}>
              Get your name on the founding list while it still means something.
            </p>
            <BtnB size="lg" onClick={onApply}>Apply to join</BtnB>
          </div>
        </Reveal>
      </div>
      <style>{`@media (max-width: 860px){ .cs-phases{ grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

/* ---------- FIRST GATHERINGS (ink ground) ---------- */
const GATHERINGS = [
  { when: "Opening week", name: "Open house: come see if it’s your kind of place", who: "RSVP \u00b7 no membership needed", free: true },
  { when: "First Thursday", name: "Community night: show whatever you’re making", who: "Members and scholars", free: false },
  { when: "Tuesday evenings", name: "Crochet circle, slowly forming", who: "Members and a guest", free: false },
  { when: "A Wednesday soon", name: "Board game night, snacks provided", who: "Members, bring a friend", free: false },
];
function Gatherings() {
  return (
    <section id="gatherings" data-ground="ink" style={{ padding: "clamp(56px,8vw,96px) clamp(16px,4vw,36px)" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <SectionHead kicker="The first gatherings" title="The calendar is just starting to fill." note="// sample" invert max={760} />
        <div style={{ marginTop: 40, borderTop: "2px solid var(--ink-line)" }}>
          {GATHERINGS.map((g, i) => (
            <Reveal key={g.name} delay={i * 70}>
              <div style={{ display: "grid", gridTemplateColumns: "minmax(150px, 220px) 1fr auto", alignItems: "center", gap: 24, padding: "22px 4px", borderBottom: "2px solid var(--ink-line)" }} className="cs-gather-row">
                <div style={{ fontFamily: "var(--font-display)", textTransform: "uppercase", fontSize: "clamp(22px,2.4vw,30px)", lineHeight: .9, color: "var(--accent)", letterSpacing: "-.01em" }}>{g.when}</div>
                <div>
                  <div style={{ fontFamily: "var(--font-text)", fontWeight: 700, fontSize: "clamp(16px,1.4vw,19px)", color: "var(--paper)", lineHeight: 1.25 }}>{g.name}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".1em", color: "var(--text-dim)", marginTop: 8 }}>{g.who}</div>
                </div>
                <BadgeB tone={g.free ? "ok" : "outline"} style={g.free ? undefined : { color: "var(--paper)", borderColor: "var(--paper)" }}>{g.free ? "Open to all" : "Members"}</BadgeB>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={120}>
          <p style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".06em", color: "var(--text-dim)", marginTop: 22 }}>// a first taste \u2014 the real calendar fills in as members arrive.</p>
        </Reveal>
      </div>
      <style>{`@media (max-width: 620px){ .cs-gather-row{ grid-template-columns: 1fr auto !important; } }`}</style>
    </section>
  );
}

/* ---------- THE SCHOLARSHIP ---------- */
const SCHOL = [
  { tab: "Who", icon: "ph-sparkle", name: "Who it’s for", body: "Anyone with a project too big for their spare evenings. First-time novelists, garage inventors, quiet world-changers, people with a loom and a plan. Hobby or hustle, both count double." },
  { tab: "Get", icon: "ph-gift", name: "What you get", body: "Full membership, free for your run. A place to work, every room to gather in, every event on the calendar, and a crowd that asks how it’s going and means it." },
  { tab: "Ask", icon: "ph-handshake", name: "What we ask", body: "Show up. Tell us how it’s going at our monthly community night. Be the kind of person who warms a space just by walking into it. That is the whole rent." },
  { tab: "Count", icon: "ph-number-square-three", name: "How many", body: "Only a handful a season. We would rather hand a few people real momentum than sprinkle the magic so thin nobody feels it." },
];
function Scholarship({ onApply }) {
  return (
    <section id="scholarship" style={{ padding: "clamp(56px,8vw,100px) clamp(16px,4vw,36px)", maxWidth: 1180, margin: "0 auto" }}>
      <Reveal>
        <div style={{ background: "var(--accent)", color: "var(--on-accent)", border: "3px solid var(--ink)", borderRadius: "var(--radius-2)", boxShadow: "12px 12px 0 var(--ink)", padding: "clamp(28px,4vw,48px)", transform: "rotate(-1deg)" }}>
          <div style={{ transform: "rotate(1deg)" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 12, textTransform: "uppercase", letterSpacing: ".14em", marginBottom: 14, opacity: .85 }}>// The offer · the one free way in</div>
            <h2 style={{ fontFamily: "var(--font-display)", textTransform: "uppercase", fontSize: "clamp(34px,5.4vw,72px)", lineHeight: .9, letterSpacing: "-.02em", margin: 0, maxWidth: 900, textWrap: "balance" }}>
              You bring the dream. We’ll cover the months.
            </h2>
            <p style={{ fontFamily: "var(--font-text)", fontSize: "clamp(16px,1.4vw,19px)", lineHeight: 1.55, margin: "22px 0 0", maxWidth: 680, fontWeight: 500 }}>
              A few times a year we give a handful of scholarships to people who would do something real with the time. We hand you full membership, free, for one to three months, so you can finally build the thing that keeps you up at night. The novel. The prototype. The nonprofit. The album. The wild idea with nowhere to live yet. If it is real and you will show up for it, it might be you.
            </p>
          </div>
        </div>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 22, marginTop: 52 }} className="cs-schol">
        {SCHOL.map((s, i) => (
          <Reveal key={s.name} delay={i * 70}>
            <CardB tab={s.tab} hover style={{ display: "flex", flexDirection: "column", height: "100%" }}>
              <i className={"ph-bold " + s.icon} style={{ fontSize: 28, color: "var(--accent-deep)", marginBottom: 14 }} />
              <h3 style={{ fontFamily: "var(--font-display)", textTransform: "uppercase", fontSize: 22, lineHeight: .98, margin: "0 0 10px" }}>{s.name}</h3>
              <p style={{ fontFamily: "var(--font-text)", fontSize: 14, lineHeight: 1.55, color: "#3a362e", margin: 0 }}>{s.body}</p>
            </CardB>
          </Reveal>
        ))}
      </div>
      <Reveal delay={120}>
        <div style={{ marginTop: 40, display: "flex", justifyContent: "center" }}>
          <BtnB size="lg" onClick={onApply}>Apply for a scholarship</BtnB>
        </div>
      </Reveal>
      <style>{`
        @media (max-width: 980px){ .cs-schol{ grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 520px){ .cs-schol{ grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Opening, Gatherings, Scholarship });