/* ============================================================
   The Carnation — pages
   ============================================================ */

/* ===================== HOME / FRONT PAGE ===================== */
function HomePage() {
  const D = C();
  useStore();
  const latest = D.latest();
  const [lead, ...restByDate] = latest;
  const latestRail = restByDate.slice(0, 6);
  const mostRead = D.mostRead(5);
  const grid = D.byDept("business").concat(D.byDept("culture")).filter((a) => a.slug !== lead.slug).slice(0, 3);
  const tags = D.allTags().slice(0, 9);

  // Local Index home picks: featured first, then random others, 4 total, rotating each visit
  const localIndexPicks = React.useMemo(() => {
    const feat = D.DIRECTORY_LISTINGS.filter((l) => l.spot);
    const rest = D.DIRECTORY_LISTINGS.filter((l) => !l.spot);
    const shuffle = (arr) => arr.map((v) => [Math.random(), v]).sort((a, b) => a[0] - b[0]).map(([, v]) => v);
    return [...shuffle(feat), ...shuffle(rest)].slice(0, 3);
  }, []);

  return (
    <main className="route">

      {/* FRONT PAGE HERO */}
      <section className="front">
        <div className="wrap">
          <Reveal>
            <div className="front__grid rise">
              <article className="front__lead">
                <a href={"#/article/" + lead.slug} style={{display:"block"}}>
                  <Cover variant={lead.cover} tag={lead.category} slot={"cover:art:" + lead.slug} className="card__cover" />
                </a>
                <div className="front__lead-top">
                  <span className="card__cat">{lead.category}</span>
                  <span className="front__live"><span className="front__live-dot" /> Updated <TimeAgo ts={lead.ts} /></span>
                </div>
                <a href={"#/article/" + lead.slug}><h2 className="card__title">{lead.title}</h2></a>
                <p className="card__dek"><span className="dateline">{lead.dateline} —</span> {lead.dek}</p>
                <div className="byline">
                  <Avatar slot={"author:" + lead.authorKey} initials={D.authorOf(lead.authorKey).initials} size={30} />
                  <span>{lead.author}</span><span>·</span>{lead.read} read
                </div>
                <TagRow tags={lead.tags} className="tagrow--lead" />
              </article>

              <div className="front__divider" />

              <div className="front__side">
                <span className="meta meta--rail">Latest</span>
                <div className="latest">
                  {latestRail.map((a) => (
                    <a className="latest__row" href={"#/article/" + a.slug} key={a.slug}>
                      <span className="latest__cat">{a.category}</span>
                      <span className="latest__t">{a.title}</span>
                      <span className="latest__time"><TimeAgo ts={a.ts} /></span>
                    </a>
                  ))}
                </div>
                <a className="latest__all" href="#/stories">All stories <span className="arw">→</span></a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* MOST READ + TOPICS */}
      <section className="section section--tight">
        <div className="wrap">
          <Reveal>
            <div className="front__two rise">
              <div>
                <SecRule title="Most Read" meta="This week" />
                <div className="mostread">
                  {mostRead.map((a, i) => (
                    <a className="mr" href={"#/article/" + a.slug} key={a.slug}>
                      <span className="mr__n">{String(i+1).padStart(2,"0")}</span>
                      <span className="mr__body">
                        <span className="mr__t">{a.title}</span>
                        <span className="mr__meta">{a.category} · {D.views(a.slug).toLocaleString()} reads</span>
                      </span>
                    </a>
                  ))}
                </div>
              </div>
              <div>
                <SecRule title="Topics" meta="Browse" />
                <div className="topiccloud">
                  {tags.map((t) => (
                    <a className="topicchip" href={"#/tag/" + t.tag} key={t.tag}>{t.label}<span className="topicchip__n">{t.n}</span></a>
                  ))}
                </div>
                <div className="frontnl">
                  <span className="frontnl__h">The Dispatch</span>
                  <span className="frontnl__p">An email with local stories, events, business updates, civic questions, and ideas for the next Alliance. No paywall, ever.</span>
                  <Newsletter />
                  <a className="frontnl__spon" href="#/advertise">Sponsor the Dispatch <span className="arw">→</span></a>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* OPEN QUESTIONS */}
      <section className="section section--ink">
        <div className="wrap">
          <Reveal>
            <SecRule title="Open Questions" meta="The town is talking" href="#/ideas" />
            <p className="rise" style={{fontFamily:"var(--serif)", fontStyle:"italic", fontSize:"clamp(1.15rem,1.8vw,1.45rem)", color:"rgba(244,239,227,.78)", maxWidth:"60ch", textWrap:"balance", marginBottom:"32px"}}>
              The Carnation puts real questions to the city, then publishes what Alliance has to say.
            </p>
            <div className="oq-grid oq-grid--four rail rise d1">
              {D.OPEN_QUESTIONS.slice(0, 4).map((q) => <QuestionCard q={q} key={q.id} />)}
            </div>
            <div className="rail-hint" aria-hidden="true">Swipe <span className="arw">→</span></div>
            <ProposeQuestion />
          </Reveal>
        </div>
      </section>

      {/* SPOTLIGHT PREVIEW */}
      <section className="section">
        <div className="wrap">
          <Reveal>
            <SecRule title="Spotlight" meta="See all" href="#/spotlight" />
            <p className="rise" style={{fontFamily:"var(--serif)", fontStyle:"italic", fontSize:"clamp(1.05rem,1.6vw,1.3rem)", color:"var(--muted)", maxWidth:"62ch", textWrap:"balance", margin:"0 0 clamp(20px,2.4vw,30px)"}}>
              The people, businesses, and ideas shaping the next Alliance, told one story at a time.
            </p>
            <div className="listgrid rail rise d1">
              {D.SPOTLIGHTS.slice(0,3).map((s) => <SpotlightCard s={s} key={s.slug} />)}
            </div>
            <div className="rail-hint" aria-hidden="true">Swipe <span className="arw">→</span></div>
          </Reveal>
        </div>
      </section>

      {/* DIRECTORY PREVIEW */}
      <section className="section section--tint">
        <div className="wrap">
          <Reveal>
            <SecRule title="The Local Index" meta="A guide to the city" href="#/local-index" />
            <div className="profile-grid rail rise d1">
              {localIndexPicks.map((l) => <ProfileCard l={l} key={l.slug} />)}
            </div>
            <div className="rail-hint" aria-hidden="true">Swipe <span className="arw">→</span></div>
          </Reveal>
        </div>
      </section>

      {/* FOUR DOORS — ways in */}
      <section className="section">
        <div className="wrap">
          <Reveal>
            <SecRule title="How The Carnation Works" meta="Readers · Businesses · Builders · Partners" />
            <p className="note rise" style={{maxWidth:"60ch", fontSize:"1rem", marginBottom:"clamp(20px,2.4vw,30px)"}}>However you arrive, there is a place in the record.</p>
            <div className="doors rise d1">
              <div className="door">
                <span className="door__kick">For local businesses</span>
                <h3 className="door__h">Be listed where the city looks.</h3>
                <p className="door__p">Add your business to The Local Index, request a profile, or commission a Spotlight feature written with editorial care.</p>
                <a className="door__cta" href="#/add-business">Feature your business <span className="arw">→</span></a>
              </div>
              <div className="door">
                <span className="door__kick">For readers</span>
                <h3 className="door__h">Follow the weekly signal.</h3>
                <p className="door__p">One dispatch on the stories, openings, ideas, people, and public questions shaping Alliance and the region.</p>
                <a className="door__cta" href="#/membership">Read the Dispatch <span className="arw">→</span></a>
              </div>
              <div className="door">
                <span className="door__kick">For owners &amp; builders</span>
                <h3 className="door__h">Put a space into circulation.</h3>
                <p className="door__p">Share a vacant storefront, upper floor, lot, or opportunity so the city can see what is waiting to become useful again.</p>
                <a className="door__cta" href="#/list-space">List a space <span className="arw">→</span></a>
              </div>
              <div className="door door--ink">
                <span className="door__kick">For partners</span>
                <h3 className="door__h">Underwrite independent civic media.</h3>
                <p className="door__p">Sponsor a section, issue, or recurring column and help keep The Carnation open, useful, and free to read.</p>
                <a className="door__cta" href="#/advertise?at=founding">Become a founding partner <span className="arw">→</span></a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

    </main>
  );
}

/* ---------- shared cards ---------- */
function QuestionCard({ q }) {
  useStore();
  const total = q.seed + S().responses.count(q.id) + (q.seedResponses ? q.seedResponses.length : 0);
  const hot = total >= 50;
  return (
    <a className="oq" href={"#/question/" + q.id}>
      <span className="oq__top">
        <span className="oq__n">№ {q.n}</span>
        {q.topic && <span className="oq__topic">{q.topic}</span>}
        {hot && <span className="oq__hot" title="Hot topic">🔥</span>}
      </span>
      <span className="oq__q">{q.q}</span>
      <span className="oq__foot">
        <span><CountUp to={total} /> responses · {q.ts ? <TimeAgo ts={q.ts} /> : "open"}</span>
        <span className="oq__cta">Weigh in →</span>
      </span>
    </a>
  );
}
function SpotlightCard({ s }) {
  return (
    <a className="card spot" href={"#/spotlight/" + s.slug}>
      <Cover variant={s.cover} tag={s.kind} slot={"cover:spot:" + s.slug} className="card__cover" />
      {s.sponsored && <span className="spot__spon">Sponsored</span>}
      <div className="card__cat">{s.kind}</div>
      <h3 className="card__title">{s.name}</h3>
      <p className="card__dek">{s.blurb}</p>
      <div className="card__meta">{s.meta}</div>
    </a>
  );
}

/* ===================== SECTION / LISTING ===================== */
function SectionPage({ deptKey }) {
  const D = C();
  const isStories = deptKey === "stories";
  const dept = D.DEPARTMENTS.find((d) => d.key === deptKey);
  const articles = D.byDept(deptKey);
  const label = isStories ? "Stories" : dept.label;
  const title = isStories ? "Stories" : dept.label;
  const dek = isStories
    ? "Reported local stories — the people, businesses, and places shaping Alliance right now."
    : dept.desc;
  const kick = isStories ? "The Carnation · Local desk" : "Department · " + dept.n;

  return (
    <main className="route">
      <section className="phead">
        <div className="wrap">
          <div className="phead__kick">{kick}</div>
          <h1 className="phead__title">{title}</h1>
          <p className="phead__dek">{dek}</p>
          <hr className="rule rule--double phead__rule" />
        </div>
      </section>
      <section className="section section--tight">
        <div className="wrap">
          <Reveal>
            {articles.length ? (
              <div className="listgrid rise">
                {articles.map((a) => <ArticleCard a={a} size="md" key={a.slug} />)}
              </div>
            ) : (
              <p className="note">No stories in this section yet — <a href="#/submit" style={{color:"var(--red)"}}>submit one</a>.</p>
            )}
          </Reveal>
        </div>
      </section>
      {deptKey === "spaces" && (
        <section className="section">
          <div className="wrap">
            <div className="dual">
              <div className="dual__cell">
                <span className="dual__stamp" aria-hidden="true"><CarnationMark compact /></span>
                <span className="dual__kick">Owners & builders</span>
                <h3 className="dual__h">Every vacant storefront is a question.</h3>
                <p className="dual__p">We document available spaces, reuse ideas, and the people trying to bring life back to underused places. Send us a storefront, a project, or an idea.</p>
                <div style={{display:"flex", gap:"12px", flexWrap:"wrap", marginTop:"auto"}}>
                  <a className="btn btn--red" href="#/submit">Submit a space <span className="arw">→</span></a>
                  <a className="btn btn--line" href="#/local-index">See available spaces</a>
                </div>
              </div>
              <div className="dual__cell dual__cell--ink">
                <span className="dual__kick">For partners</span>
                <h3 className="dual__h">Sponsor the Downtown Report.</h3>
                <p className="dual__p">Brokers, developers, and civic partners: put your name beside the coverage of where Alliance builds next.</p>
                <a className="btn btn--line" href="#/advertise" style={{marginTop:"auto", alignSelf:"flex-start"}}>Become a partner <span className="arw">→</span></a>
              </div>
            </div>
          </div>
        </section>
      )}

      <section className="section section--tight">
        <div className="wrap">
          <a className="secsponsor" href="#/advertise">
            <span className="secsponsor__l">The {label} desk is open for sponsorship</span>
            <span className="secsponsor__cta">Support local journalism — put your business beside the stories Alliance reads <span className="arw">→</span></span>
          </a>
        </div>
      </section>

      <SectionCrossLinks current={deptKey} />
    </main>
  );
}

function SectionCrossLinks({ current }) {
  const others = C().DEPARTMENTS.filter((d) => d.key !== current).slice(0, 3);
  return (
    <section className="section section--tint">
      <div className="wrap">
        <SecRule title="Keep reading" />
        <div className="dir-grid">
          {others.map((d) => (
            <a className="dircat" href={"#/" + d.key} key={d.key}>
              <div className="dircat__top"><span className="dircat__n">{d.n}</span></div>
              <div className="dircat__label">{d.label}</div>
              <div className="dircat__desc">{d.desc}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===================== IDEAS (with Open Questions) ===================== */
function IdeasPage() {
  const D = C();
  const list = D.byDept("ideas");
  return (
    <main className="route">
      <section className="phead">
        <div className="wrap">
          <div className="phead__kick">Department · 04</div>
          <h1 className="phead__title">Ideas</h1>
          <p className="phead__dek">Essays and field notes on the future of Alliance — technology, energy, public space, local business, culture, and the small-town systems that could shape what comes next. Always grounded here.</p>
          <hr className="rule rule--double phead__rule" />
        </div>
      </section>

      <section className="section section--tight">
        <div className="wrap">
          <Reveal>
            <div className="listgrid rise">
              {list.map((a) => <ArticleCard a={a} size="md" key={a.slug} />)}
            </div>
          </Reveal>
        </div>
      </section>

      <section className="section section--tint">
        <div className="wrap">
          <Reveal>
            <SecRule title="Open Questions" meta="Add Your Voice" />
            <p className="note" style={{marginBottom:"clamp(20px,2.4vw,30px)", maxWidth:"60ch", fontSize:"1rem"}}>
              We put a real question to the city and publish the answers. Pick one, read what Alliance is saying, and add your own.
            </p>
            <div className="oq-grid oq-grid--light rise d1">
              {D.OPEN_QUESTIONS.map((q) => <QuestionCard q={q} key={q.id} />)}
            </div>
            <ProposeQuestion />
          </Reveal>
        </div>
      </section>
    </main>
  );
}

/* ---- propose a new Open Question ---- */
function ProposeQuestion() {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (!q.trim()) return;
    const ok = await window.captureOrAlert("submissions", { type: "Proposed Open Question", title: q.trim(), body: q.trim(), email: email.trim() });
    if (!ok) return;
    setSent(true); setQ(""); setEmail("");
  };
  return (
    <div className="propose">
      {!open && !sent && (
        <button type="button" className="propose__open" onClick={() => setOpen(true)}>
          <span className="propose__kick">Have a question for the city?</span>
          <span className="propose__cta">Propose it <span className="arw">→</span></span>
        </button>
      )}
      {open && !sent && (
        <form className="propose__form" onSubmit={submit}>
          <label className="propose__label">Propose an Open Question</label>
          <p className="propose__note">A good one is short, specific, and something the whole city could answer. We review proposals and publish a selection.</p>
          <textarea className="textarea" required value={q} onChange={(e) => setQ(e.target.value)} placeholder="e.g. What would make Main Street worth walking on a Tuesday night?" style={{minHeight:"90px"}} />
          <input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Your email (optional, if you'd like a reply)" style={{marginTop:"12px"}} />
          <div style={{display:"flex", gap:"12px", marginTop:"14px", flexWrap:"wrap"}}>
            <button className="btn btn--red" type="submit">Send it to the editors <span className="arw">→</span></button>
            <button type="button" className="btn btn--line" onClick={() => setOpen(false)}>Cancel</button>
          </div>
        </form>
      )}
      {sent && <div className="propose__ok">Thank you. Your question is with the editors. If it's a fit, you'll see it published for the whole city to answer.</div>}
    </div>
  );
}

/* ===================== DIRECTORY ===================== */
function ProfileCard({ l, featured }) {
  const D = C();
  const kind = D.kindOf(l);
  const related = D.articlesFor(l.slug).length;
  return (
    <a className={"profile" + (featured ? " profile--feat" : "")} href={"#/place/" + l.slug}>
      <Cover variant={l.plate} tag={D.KIND_LABELS[kind]} slot={"cover:dir:" + l.slug} className="profile__cover" alt={l.name} />
      <div className="profile__body">
        <div className="profile__cat">{l.cat}</div>
        <h3 className="profile__name">{l.name}</h3>
        <p className="profile__blurb">{l.blurb}</p>
        {(l.tags && l.tags.length > 0) && <div className="profile__tags">{l.tags.map((t) => <span className="profile__tag" key={t}>{t}</span>)}</div>}
        <div className="profile__foot">
          <span className="profile__related">{related > 0 ? (related + " related " + (related === 1 ? "story" : "stories")) : "Read profile"}</span>
          <span className="profile__go arw">→</span>
        </div>
      </div>
    </a>
  );
}

function DirectoryPage() {
  const D = C();
  useStore();
  const [q, setQ] = useState("");
  const [tag, setTag] = useState("All");
  const readCat = () => decodeURIComponent(((location.hash.split("?")[1] || "").match(/cat=([^&]+)/) || [])[1] || "");
  const [cat, setCat] = useState(readCat);
  useEffect(() => {
    const onHash = () => { setCat(readCat()); window.scrollTo(0, 0); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  const all = D.DIRECTORY_LISTINGS;
  const featured = all.filter((l) => l.spot);
  const usedTags = ["All", ...D.EDITORIAL_TAGS.filter((t) => all.some((l) => (l.tags || []).includes(t)))];
  const ql = q.trim().toLowerCase();
  const filtered = all.filter((l) => {
    const okCat = !cat || l.cat === cat;
    const okTag = tag === "All" || (l.tags || []).includes(tag);
    const hay = [l.name, l.blurb, l.cat, (l.tags || []).join(" ")].join(" ").toLowerCase();
    return okCat && okTag && (!ql || hay.includes(ql));
  });
  const browsing = tag === "All" && !ql && !cat;
  return (
    <main className="route">
      <section className="phead">
        <div className="wrap">
          <div className="phead__kick">The Local Index</div>
          <h1 className="phead__title">A curated guide to Alliance.</h1>
          <p className="phead__dek">A living index of Alliance businesses, places, builders, and organizations — built to make the local economy easier to find, support, and understand. Not a database; a guide, written through the lens of the publication.</p>
          <hr className="rule rule--double phead__rule" />
        </div>
      </section>

      <section className="section section--tight">
        <div className="wrap">
          <div className="lx-controls">
            <div className="lx-search">
              <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input type="search" placeholder="Search places, shops, makers & spaces…" value={q} onChange={(e) => setQ(e.target.value)} aria-label="Search the Local Index" />
            </div>
            {(() => {
              const mid = Math.ceil(usedTags.length / 2);
              return [usedTags.slice(0, mid), usedTags.slice(mid)].map((row, ri) => (
                <div className="lx-tags" key={ri}>
                  {row.map((t) => (
                    <button key={t} className={"lx-tag" + (t === tag ? " on" : "")} onClick={() => setTag(t)}>{t}</button>
                  ))}
                </div>
              ));
            })()}
          </div>
          {cat && (
            <div style={{marginTop:"16px", display:"flex", alignItems:"center", gap:"12px", flexWrap:"wrap"}}>
              <span style={{fontFamily:"var(--mono)", fontSize:".64rem", letterSpacing:".16em", textTransform:"uppercase", color:"var(--muted)"}}>Category</span>
              <span style={{fontFamily:"var(--serif)", fontWeight:600, fontSize:"1.1rem", letterSpacing:"-.01em"}}>{cat}</span>
              <a href="#/local-index" style={{fontFamily:"var(--mono)", fontSize:".62rem", letterSpacing:".12em", textTransform:"uppercase", color:"var(--red)", display:"inline-flex", alignItems:"center", gap:"6px"}}>Clear <span aria-hidden="true">✕</span></a>
            </div>
          )}
        </div>
      </section>

      {browsing && featured.length > 0 && (
        <section className="section section--tint section--tight">
          <div className="wrap">
            <SecRule title="Featured Profiles" meta="Editor's picks" />
            <div className="profile-grid">
              {featured.map((l) => <ProfileCard l={l} key={l.slug} featured />)}
            </div>
          </div>
        </section>
      )}

      <section className="section section--tight">
        <div className="wrap">
          <SecRule title={browsing ? "Every Profile" : "Results"} meta={filtered.length + (browsing ? " profiles" : " of " + all.length)} />
          {filtered.length ? (
            <div className="profile-grid">{filtered.map((l) => <ProfileCard l={l} key={l.slug} />)}</div>
          ) : (
            <p className="note">No profiles match that yet. <button className="linklike" onClick={() => { setQ(""); setTag("All"); }}>Clear filters</button> or <a href="#/add-business" style={{color:"var(--red)"}}>suggest a place →</a></p>
          )}
        </div>
      </section>

      <section className="section section--tint section--tight">
        <div className="wrap">
          <SecRule title="Local Index Visibility" meta="Three ways to appear" />
          <p className="note" style={{maxWidth:"62ch", fontSize:"1rem", marginBottom:"clamp(20px,2.4vw,30px)"}}>Every Alliance business can start with a free Basic Record. Some choose a fuller presence, or a written Editorial Spotlight — each one tasteful, useful, and part of the publication.</p>
          <div className="levels">
            {D.LISTING_LEVELS.map((lv) => (
              <div className="level" key={lv.id}>
                <span className="level__label">{lv.label}</span>
                <span className="level__price">{lv.price}{lv.cadence && <span className="level__cadence">{lv.cadence}</span>}{lv.alt && <span className="level__alt">{lv.alt}</span>}</span>
                <span className="level__desc">{lv.desc}</span>
                <span className="level__perks">
                  {lv.perks.map((p) => <span className="level__perk" key={p}><span className="level__check">✓</span>{p}</span>)}
                </span>
                <a className={"btn " + (lv.feat ? "btn--red" : "btn--line")} href={lv.ctaPath} style={{marginTop:"auto", alignSelf:"flex-start"}}>{lv.cta} <span className="arw">→</span></a>
                {lv.note && <span className="level__note">{lv.note}</span>}
              </div>
            ))}
          </div>
          <p className="note" style={{marginTop:"clamp(20px,2.4vw,30px)", fontSize:".95rem"}}>Founding listing options are available for Alliance businesses, organizations, and property owners. <a href="#/advertise" style={{color:"var(--red)"}}>Request listing options →</a></p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="dual">
            <div className="dual__cell">
              <span className="dual__stamp" aria-hidden="true"><CarnationMark compact /></span>
              <span className="dual__kick">For local businesses</span>
              <h3 className="dual__h">Add your business to the Index.</h3>
              <p className="dual__p">Run a shop, a kitchen, a studio, or a space worth knowing? Claim a free listing in minutes, list an available space, or ask about an enhanced profile or a Spotlight Feature.</p>
              <div style={{display:"flex", gap:"12px", flexWrap:"wrap", marginTop:"auto"}}>
                <a className="btn btn--red" href="#/add-business">Claim your listing <span className="arw">→</span></a>
                <a className="btn btn--line" href="#/list-space">List a space</a>
              </div>
            </div>
            <div className="dual__cell dual__cell--ink">
              <span className="dual__kick">The full picture</span>
              <h3 className="dual__h">Looking for the civic directory?</h3>
              <p className="dual__p">The Local Index is our editorial guide. For the complete civic &amp; business directory — projects, spaces, partners, and opportunities across the city — visit Alliance Renaissance.</p>
              <a className="btn btn--red" href={AR_URL} target="_blank" rel="noopener" style={{marginTop:"auto", alignSelf:"flex-start"}}>Visit Alliance Renaissance <span className="arw">→</span></a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.HomePage = HomePage;
window.SectionPage = SectionPage;
window.IdeasPage = IdeasPage;
window.DirectoryPage = DirectoryPage;
window.ProfileCard = ProfileCard;
window.QuestionCard = QuestionCard;
window.SpotlightCard = SpotlightCard;
window.ProposeQuestion = ProposeQuestion;