{cmode === "story" && setCtitle(e.target.value)} />}

setCtext(e.target.value)} />
            <div className="hc-foot">
              {cmode === "post"
                ? <select className="hc-sub" value={csub} onChange={e => setCsub(e.target.value)}>{comms.map(c => <option key={c.id} value={c.name}>{c.name}</option>)}</select>
                : <span className="hc-hint">Publishing to Stories</span>}
              <button className="btn btn-primary hc-post" data-dim={cbusy || !ctext.trim() || (cmode === "story" && !ctitle.trim())} onClick={composerPublish}>{cbusy ? "Posting…" : (cmode === "story" ? "Publish" : "Post")}</button>
            </div>
          </div>

<div className="home-list">
            {feed.map((f, idx) => f.t === "post"
              ? <PostRow key={"p" + f.x.id} post={f.x} i={idx} go={go} onOpen={(id) => go("community/" + id)} />
              : (
                <article key={"a" + f.x.id} className="home-story" style={{ "--i": idx }} onClick={() => go("read/" + f.x.id)}>
                  <span className="kicker">{f.x.kicker}<span className="home-tag">Story</span></span>
                  <h3 className="art-title serif" style={{ marginTop: 8 }}>{f.x.title}</h3>
                  <p className="art-dek">{f.x.dek}</p>
                  <div className="byline sm" style={{ marginTop: 6 }}><Avatar seed={f.x.authorU} label={f.x.author} size={24} /><span><b>{f.x.author}</b><i>{f.x.date} · {f.x.read} read</i></span></div>
                </article>
              )
            )}
          </div>
        </main>

<aside className="home-right">
          <div className="surface side-card">
            <span className="kicker">Communities</span>
            <ul className="comm-list">
              {comms.map(c => (
                <li key={c.id}>
                  <button className="comm-item" onClick={() => go("c/" + c.name)}>
                    <span className="comm-badge" style={{ background: c.color }}>{c.name[0]}</span>
                    <span className="comm-item-txt">
                      <b>{c.name}</b>
                      <span>{c.members} {Number(c.members) === 1 ? "member" : "members"}{myComms.indexOf(c.name) >= 0 ? " · Joined" : ""}</span>
                    </span>
                    <Icon name="arrowRight" size={15} className="comm-item-go" />
                  </button>
                </li>
              ))}
            </ul>
          </div>
          <div className="surface side-card side-cta">
            <Icon name="users" size={22} />
            <b className="serif">Start a community</b>
            <p>Got a niche? Gather the people who care about it.</p>
            <button className="btn btn-soft" onClick={() => go("compose")}>Create one</button>
          </div>
        </aside>

</div>
    </div>
  );
}

const TWEAK_DEFAULTS = {
  accent: "#E8482A",
  dark: false,
  radius: 14,
  headline: "editorial",
  motion: true,
};

function App() {
  const [route, setRoute] = useState(() => (location.hash.replace(/^#\/?/, "") || "home"));
  const [favs, setFavs] = useState(() => new Set(EVENTS.filter(e => e.fav).map(e => e.id)));
  const [posts, setPosts] = useState(POSTS);
  const addPost = (p) => setPosts(prev => [p, ...prev]);
  const [trans, setTrans] = useState(false);
  const scrollerRef = useRef(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-deep", `color-mix(in oklch, ${t.accent} 76%, black)`);
    root.style.setProperty("--accent-soft", `color-mix(in oklch, ${t.accent} 15%, var(--card))`);
    root.setAttribute("data-theme", t.dark ? "dark" : "light");
    root.style.setProperty("--radius", t.radius + "px");
    root.style.setProperty("--radius-sm", Math.round(t.radius * 0.64) + "px");
    root.style.setProperty("--radius-lg", Math.round(t.radius * 1.6) + "px");
    root.style.setProperty("--serif", t.headline === "modern"
      ? '"Hanken Grotesk", system-ui, sans-serif'
      : '"Newsreader", Georgia, "Times New Roman", serif');
    root.classList.toggle("no-motion", !t.motion);
  }, [t.accent, t.dark, t.radius, t.headline, t.motion]);

useEffect(() => {
    const onHash = () => {
      const r = location.hash.replace(/^#\/?/, "") || "home";
      setRoute(r);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

const toggleFav = (id) => setFavs(prev => {
    const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n;
  });

const [top, sub] = route.split("/");
  let view;
  if (top === "home") view = <Home go={go} posts={posts} />;
  else if (top === "community" && sub) view = <PostThread id={sub} go={go} posts={posts} />;
  else if (top === "community") view = <Community go={go} posts={posts} />;
  else if (top === "c") view = <CommunityPage name={sub} go={go} posts={posts} />;
  else if (top === "compose") view = <NewPost go={go} addPost={addPost} editId={sub || null} />;
  else if (top === "read" && sub) view = <Reader id={sub} go={go} />;
  else if (top === "read") view = <Read go={go} />;
  else if (top === "write") view = <StoryCompose go={go} editId={sub || null} />;
  else if (top === "notifications") view = <NotificationsPage go={go} />;
  else if (top === "people") view = <PeoplePage go={go} />;
  else if (top === "inbox") view = <InboxPage sub={sub} go={go} />;
  else if (top === "search") view = <SearchPage go={go} />;
  else if (top === "profile") view = <Profile sub={sub} go={go} favs={favs} toggleFav={toggleFav} posts={posts} />;
  else if (top === "settings") view = <Settings go={go} tweaks={t} setTweak={setTweak} />;
  else view = <Home go={go} posts={posts} />;

return (
    <React.Fragment>
      <Nav route={route} go={go} />
      <main className={"stage" + (trans ? " leaving" : " entering")} key={route} ref={scrollerRef}>
        {view}
      </main>
      <Footer go={go} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Color" />
        <TweakColor label="Accent" value={t.accent}
          options={["#E8482A", "#2C4A6E", "#5E7355", "#6B3F5E", "#B98326"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />
        <TweakSection label="Shape & type" />
        <TweakSlider label="Corner radius" value={t.radius} min={2} max={24} unit="px"
          onChange={(v) => setTweak("radius", v)} />
        <TweakRadio label="Headlines" value={t.headline}
          options={["editorial", "modern"]}
          onChange={(v) => setTweak("headline", v)} />
        <TweakSection label="Motion" />
        <TweakToggle label="Animations" value={t.motion} onChange={(v) => setTweak("motion", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);