// Page components for VizörHub.
// Exports to window: NavBar, Footer, LandingPage, ForumHomePage, TopicDetailPage, ProfilePage

const { useState } = React;

/* ------------- Shared atoms ------------- */

function Avatar({ user, size = 32, ring = false }) {
  const u = USERS[user] || { initials: "??", color: "#444" };
  return (
    <div className="avatar" style={{
      width:size, height:size, fontSize: size*0.36,
      background: `linear-gradient(135deg, ${u.color} 0%, #000 140%)`,
      boxShadow: ring ? `0 0 0 2px var(--bg), 0 0 0 3px var(--red)` : "none",
    }}>{u.initials}</div>
  );
}

function Chip({ children, tone, live }) {
  const cls = "chip " + (tone === "red" ? "chip-red" : tone === "orange" ? "chip-orange" : "") + (live ? " chip-live" : "");
  return (
    <span className={cls}>
      {live && <span className="lvdot" />}
      {children}
    </span>
  );
}

function CatDot({ catId }) {
  const c = CATEGORIES.find(c => c.id === catId);
  return <span style={{display:"inline-block",width:8,height:8,borderRadius:2,background:c?.color||"#555",boxShadow:`0 0 8px ${c?.color}66`}} />;
}

function ImagePlaceholder({ label, height = 360, accent = false }) {
  // SVG diagonal-stripe placeholder, with explainer text in mono
  return (
    <div style={{
      position:"relative", height, width:"100%", borderRadius:"var(--radius-lg)", overflow:"hidden",
      border:"1px solid var(--line-2)",
      background:`
        repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 14px, rgba(255,255,255,0) 14px 28px),
        linear-gradient(135deg, #14141a, #0c0c10)
      `,
    }}>
      {accent && (
        <div style={{position:"absolute",inset:0,background:"radial-gradient(circle at 70% 40%, color-mix(in oklab, var(--red) 35%, transparent), transparent 60%)",mixBlendMode:"screen"}} />
      )}
      <div style={{position:"absolute",left:14,top:12,display:"flex",gap:8,alignItems:"center"}}>
        <span style={{width:8,height:8,borderRadius:50,background:"var(--red)",boxShadow:"0 0 8px var(--red)"}} />
        <span className="mono" style={{fontSize:10.5,color:"var(--fg-3)",letterSpacing:".18em",textTransform:"uppercase"}}>img / placeholder</span>
      </div>
      <div style={{position:"absolute",inset:0,display:"grid",placeItems:"center",textAlign:"center",padding:"0 24px"}}>
        <div>
          <div className="mono" style={{fontSize:11,color:"var(--fg-3)",letterSpacing:".22em",textTransform:"uppercase"}}>drop image →</div>
          <div className="display" style={{fontSize:28,marginTop:8,color:"var(--fg-2)"}}>{label}</div>
        </div>
      </div>
      <div style={{position:"absolute",right:14,bottom:12}} className="mono">
        <span style={{fontSize:10,color:"var(--fg-3)",letterSpacing:".18em",textTransform:"uppercase"}}>16:9 · 2400×1350</span>
      </div>
    </div>
  );
}

/* ------------- Nav ------------- */

function NavBar({ page, go }) {
  const tabs = [
    { id: "landing", label: "Home" },
    { id: "forum",   label: "Forum" },
    { id: "topic",   label: "Topic" },
    { id: "profile", label: "Profile" },
  ];
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <div className="brand" onClick={() => go("landing")} style={{cursor:"pointer"}}>
          <div className="mark">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
              <path d="M3 17 L9 7 L15 13 L21 5" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <span className="brand-label">Vizör<span className="dot" />Hub</span>
        </div>
        <nav className="nav-links">
          {tabs.map(t => (
            <div key={t.id} className={"nav-link " + (page === t.id ? "active" : "")} onClick={() => go(t.id)}>{t.label}</div>
          ))}
        </nav>
        <div className="nav-spacer" />
        <div className="nav-search">
          <Icon.Search style={{color:"var(--fg-3)"}} />
          <input placeholder="Search threads, routes, bikes…" />
          <span className="kbd">⌘K</span>
        </div>
        <button className="icon-btn" title="Notifications"><Icon.Bell /></button>
        <button className="menu-btn icon-btn"><Icon.Menu /></button>
        <div onClick={() => go("profile")} style={{cursor:"pointer"}}>
          <Avatar user="ducati_diaz" />
        </div>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="wrap" style={{display:"grid",gridTemplateColumns:"1.4fr 1fr 1fr 1fr",gap:32}}>
        <div>
          <div className="brand" style={{marginBottom:14}}>
            <div className="mark"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M3 17 L9 7 L15 13 L21 5" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg></div>
            <span>Vizör<span className="dot" />Hub</span>
          </div>
          <p style={{maxWidth:320,lineHeight:1.55}}>The riders' forum. Built for the wrenchers, the trackday regulars, the slow-Sunday tourers. No engagement bait, just signal.</p>
        </div>
        <div>
          <div className="uppercase-eyebrow" style={{marginBottom:14}}>Community</div>
          <ul style={{listStyle:"none",padding:0,margin:0,display:"grid",gap:8}}>
            <li>Forum</li><li>Rules</li><li>Moderators</li><li>Become a mod</li>
          </ul>
        </div>
        <div>
          <div className="uppercase-eyebrow" style={{marginBottom:14}}>Resources</div>
          <ul style={{listStyle:"none",padding:0,margin:0,display:"grid",gap:8}}>
            <li>Maintenance wiki</li><li>Routes atlas</li><li>Gear database</li><li>Recall feed</li>
          </ul>
        </div>
        <div>
          <div className="uppercase-eyebrow" style={{marginBottom:14}}>Company</div>
          <ul style={{listStyle:"none",padding:0,margin:0,display:"grid",gap:8}}>
            <li>About</li><li>Press</li><li>Contact</li><li>Status</li>
          </ul>
        </div>
      </div>
      <div className="wrap" style={{marginTop:40,paddingTop:20,borderTop:"1px solid var(--line)",display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:12}}>
        <div className="mono" style={{fontSize:11,letterSpacing:".14em",textTransform:"uppercase",color:"var(--fg-3)"}}>© 2026 VizörHub Coop · Built in the paddock</div>
        <div className="telemetry"><span>v 4.2.1</span><span>uptime <b>99.98%</b></span><span>178,402 riders online</span></div>
      </div>
    </footer>
  );
}

/* ------------- 1. LANDING ------------- */

function LandingPage({ go }) {
  return (
    <main className="page-fade">
      {/* Hero */}
      <section className="carbon-soft" style={{position:"relative",borderBottom:"1px solid var(--line)",overflow:"hidden"}}>
        <div style={{position:"absolute",inset:0,background:"radial-gradient(800px 400px at 80% 30%, color-mix(in oklab, var(--red) 18%, transparent), transparent 70%), radial-gradient(700px 400px at 10% 90%, color-mix(in oklab, var(--orange) 12%, transparent), transparent 70%)",pointerEvents:"none"}} />
        <div className="wrap" style={{position:"relative",paddingTop:64,paddingBottom:72,display:"grid",gridTemplateColumns:"1.05fr 1fr",gap:48,alignItems:"center"}}>
          <div>
            <div style={{display:"flex",gap:8,marginBottom:22}}>
              <Chip live tone="red">Live · 178,402 riders</Chip>
              <Chip>v4.2 · New season</Chip>
            </div>
            <h1 className="display" style={{fontSize:"clamp(48px, 6.2vw, 88px)",lineHeight:.95,margin:0,letterSpacing:"-.035em"}}>
              The forum<br />for people who<br /><span style={{background:"var(--grad)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"}}>actually ride.</span>
            </h1>
            <p style={{fontSize:18,color:"var(--fg-2)",lineHeight:1.55,maxWidth:540,marginTop:24}}>
              Honest reviews. Real route reports. Service logs from owners, not influencers. A community of 312,000 riders across 78 marques — no engagement bait, no sponsored posts.
            </p>
            <div style={{display:"flex",gap:12,marginTop:32,flexWrap:"wrap"}}>
              <button className="btn btn-primary" onClick={() => go("forum")}>Join the community <Icon.Arrow /></button>
              <button className="btn btn-ghost" onClick={() => go("forum")}>Browse without signing up</button>
            </div>
            <div className="telemetry" style={{marginTop:40}}>
              <span>est. <b>2017</b></span><span>312,840 <b>riders</b></span><span>78 <b>marques</b></span><span>1.2M <b>threads</b></span>
            </div>
          </div>
          <div style={{position:"relative"}}>
            <ImagePlaceholder label="Sport motorcycle, three-quarter front" height={460} accent />
            {/* Telemetry overlays — small cards */}
            <div className="brushed" style={{position:"absolute",right:-14,top:24,padding:"12px 16px",borderRadius:6,border:"1px solid var(--line-2)",boxShadow:"0 18px 50px -20px #000",minWidth:170}}>
              <div className="uppercase-eyebrow" style={{fontSize:10}}>Topic of the day</div>
              <div className="display" style={{fontSize:15,marginTop:6,lineHeight:1.25}}>KTM 1390 SD R — first ride</div>
              <div className="mono" style={{fontSize:10.5,color:"var(--fg-3)",marginTop:8,letterSpacing:".12em",textTransform:"uppercase"}}>248 replies · 14.2k views</div>
            </div>
            <div className="brushed" style={{position:"absolute",left:-14,bottom:24,padding:"12px 16px",borderRadius:6,border:"1px solid var(--line-2)",boxShadow:"0 18px 50px -20px #000",display:"flex",gap:14,alignItems:"center"}}>
              <div style={{width:42,height:42,display:"grid",placeItems:"center",background:"color-mix(in oklab, var(--red) 18%, transparent)",borderRadius:4,color:"var(--red-hi)"}}><Icon.Speed /></div>
              <div>
                <div className="display" style={{fontSize:14,lineHeight:1}}>Pro-tip of the week</div>
                <div className="mono" style={{fontSize:10.5,color:"var(--fg-3)",marginTop:4,letterSpacing:".12em",textTransform:"uppercase"}}>Set sag before preload</div>
              </div>
            </div>
          </div>
        </div>
        {/* Bottom telemetry strip */}
        <div style={{borderTop:"1px solid var(--line)",background:"rgba(0,0,0,.25)"}}>
          <div className="wrap" style={{display:"flex",gap:48,padding:"14px 28px",overflowX:"auto"}}>
            {["HONDA","YAMAHA","BMW","KTM","DUCATI","KAWASAKI","SUZUKI","TRIUMPH","APRILIA","MV AGUSTA","HARLEY","MOTO GUZZI"].map(m => (
              <div key={m} className="mono" style={{fontSize:11,letterSpacing:".22em",color:"var(--fg-3)",whiteSpace:"nowrap"}}>· {m}</div>
            ))}
          </div>
        </div>
      </section>

      {/* Featured discussions */}
      <section className="wrap" style={{paddingTop:72,paddingBottom:8}}>
        <div style={{display:"flex",alignItems:"end",justifyContent:"space-between",marginBottom:28,flexWrap:"wrap",gap:12}}>
          <div>
            <div className="uppercase-eyebrow" style={{marginBottom:8}}>// Featured discussions</div>
            <h2 className="display" style={{fontSize:36,margin:0,letterSpacing:"-.02em"}}>What the paddock is talking about</h2>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={() => go("forum")}>All threads <Icon.Arrow /></button>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1.4fr 1fr 1fr",gap:18}}>
          {/* Big card */}
          <article className="card card-hot lift" style={{padding:0,overflow:"hidden",display:"flex",flexDirection:"column",cursor:"pointer"}} onClick={() => go("topic")}>
            <ImagePlaceholder label="KTM 1390 Super Duke R" height={260} accent />
            <div style={{padding:"22px 24px 24px"}}>
              <div style={{display:"flex",gap:8,marginBottom:14}}>
                <Chip tone="red"><Icon.Fire /> Trending</Chip>
                <Chip><CatDot catId="ktm"/> KTM</Chip>
                <Chip>Routes</Chip>
              </div>
              <h3 className="display" style={{fontSize:24,margin:0,letterSpacing:"-.02em",lineHeight:1.2}}>{FEATURED[0].title}</h3>
              <div style={{display:"flex",alignItems:"center",gap:10,marginTop:18,color:"var(--fg-2)",fontSize:13}}>
                <Avatar user={FEATURED[0].author} size={26} />
                <span style={{color:"var(--fg)",fontWeight:500}}>{USERS[FEATURED[0].author].name}</span>
                <span style={{color:"var(--fg-3)"}}>· {FEATURED[0].mins}m ago</span>
                <span style={{marginLeft:"auto"}} className="mono">{FEATURED[0].replies} replies · {FEATURED[0].views} views</span>
              </div>
            </div>
          </article>
          {/* Smaller cards */}
          {FEATURED.slice(1).map(t => (
            <article key={t.id} className="card lift" style={{padding:"20px 22px",cursor:"pointer",display:"flex",flexDirection:"column",justifyContent:"space-between",gap:16,minHeight:260}} onClick={() => go("topic")}>
              <div>
                <div style={{display:"flex",gap:8,marginBottom:12}}>
                  {t.hot && <Chip tone="red"><Icon.Fire/> Hot</Chip>}
                  <Chip><CatDot catId={t.cat}/> {CATEGORIES.find(c=>c.id===t.cat).name}</Chip>
                </div>
                <h3 className="display" style={{fontSize:18,margin:0,lineHeight:1.3,letterSpacing:"-.01em"}}>{t.title}</h3>
              </div>
              <div style={{display:"flex",alignItems:"center",gap:10,color:"var(--fg-2)",fontSize:12.5}}>
                <Avatar user={t.author} size={22} />
                <span style={{color:"var(--fg)"}}>{USERS[t.author].name}</span>
                <span style={{marginLeft:"auto"}} className="mono">{t.replies} · {t.views}</span>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* Categories preview */}
      <section className="wrap" style={{paddingTop:80,paddingBottom:80}}>
        <div style={{display:"flex",alignItems:"end",justifyContent:"space-between",marginBottom:28,flexWrap:"wrap",gap:12}}>
          <div>
            <div className="uppercase-eyebrow" style={{marginBottom:8}}>// By marque</div>
            <h2 className="display" style={{fontSize:36,margin:0,letterSpacing:"-.02em"}}>Pick your tribe</h2>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={() => go("forum")}>All categories <Icon.Arrow /></button>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(4, 1fr)",gap:14}}>
          {CATEGORIES.map(c => (
            <article key={c.id} className="card lift" style={{padding:"22px 20px",cursor:"pointer",position:"relative",overflow:"hidden"}} onClick={() => go("forum")}>
              <div style={{position:"absolute",inset:0,background:`linear-gradient(135deg, ${c.color}10, transparent 60%)`,pointerEvents:"none"}} />
              <div style={{position:"relative",display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:18}}>
                <span style={{width:34,height:34,borderRadius:4,background:c.color,display:"grid",placeItems:"center",color:"#fff",fontFamily:"var(--display)",fontWeight:700,fontSize:14,boxShadow:`0 0 18px ${c.color}55`}}>{c.name[0]}</span>
                <Icon.Chevron style={{color:"var(--fg-3)"}} />
              </div>
              <div className="display" style={{fontSize:20,letterSpacing:"-.01em"}}>{c.name}</div>
              <div style={{fontSize:12.5,color:"var(--fg-3)",marginTop:4}}>{c.model}</div>
              <div className="mono" style={{marginTop:18,display:"flex",justifyContent:"space-between",fontSize:11,color:"var(--fg-3)",letterSpacing:".12em",textTransform:"uppercase"}}>
                <span>{c.threads.toLocaleString()} threads</span>
                <span>{c.members}</span>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="carbon-soft" style={{borderTop:"1px solid var(--line)",borderBottom:"1px solid var(--line)"}}>
        <div className="wrap" style={{padding:"64px 28px",display:"grid",gridTemplateColumns:"1fr auto",gap:32,alignItems:"center"}}>
          <div>
            <div className="uppercase-eyebrow" style={{marginBottom:10}}>// Join the community</div>
            <div className="display" style={{fontSize:44,lineHeight:1.05,letterSpacing:"-.02em",maxWidth:780}}>
              Skip the algorithm.<br/>Talk to riders who know the road, the bike, the line.
            </div>
          </div>
          <div style={{display:"flex",flexDirection:"column",gap:10,minWidth:240}}>
            <button className="btn btn-primary" style={{justifyContent:"center"}} onClick={() => go("forum")}>Create your account <Icon.Arrow /></button>
            <button className="btn btn-ghost" style={{justifyContent:"center"}} onClick={() => go("forum")}>Already a member? Sign in</button>
            <div className="mono" style={{fontSize:10.5,color:"var(--fg-3)",letterSpacing:".12em",textTransform:"uppercase",textAlign:"center",marginTop:4}}>Free · Member-owned coop</div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ------------- 2. FORUM HOME ------------- */

function ForumHomePage({ go }) {
  const [tab, setTab] = useState("latest");
  return (
    <main className="page-fade">
      <section className="wrap" style={{paddingTop:36,paddingBottom:20}}>
        <div className="uppercase-eyebrow" style={{marginBottom:8}}>// Forum</div>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"end",gap:16,flexWrap:"wrap"}}>
          <h1 className="display" style={{fontSize:44,margin:0,letterSpacing:"-.02em"}}>The Hub</h1>
          <div style={{display:"flex",gap:8}}>
            <button className="btn btn-ghost btn-sm"><Icon.Settings /> Customize</button>
            <button className="btn btn-primary btn-sm"><Icon.Plus /> New thread</button>
          </div>
        </div>
      </section>

      <section className="wrap" style={{display:"grid",gridTemplateColumns:"260px 1fr 300px",gap:28,paddingBottom:80,alignItems:"start"}}>
        {/* Sidebar: subforums */}
        <aside style={{position:"sticky",top:76,display:"grid",gap:6}}>
          <div className="uppercase-eyebrow" style={{margin:"4px 4px 8px"}}>Subforums</div>
          {SUBFORUMS.map(s => {
            const Ic = Icon[s.icon];
            return (
              <div key={s.id} className="lift" style={{display:"flex",alignItems:"center",gap:12,padding:"10px 12px",border:"1px solid var(--line)",borderRadius:"var(--radius)",cursor:"pointer",background:"var(--bg-1)"}}>
                <div style={{width:30,height:30,display:"grid",placeItems:"center",background:"var(--bg-3)",borderRadius:3,color:"var(--fg-2)"}}><Ic /></div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontWeight:600,fontSize:13.5}}>{s.name}</div>
                  <div style={{fontSize:11.5,color:"var(--fg-3)"}}>{s.threads.toLocaleString()} threads</div>
                </div>
                <Icon.Chevron style={{color:"var(--fg-3)"}}/>
              </div>
            );
          })}
          <div className="uppercase-eyebrow" style={{margin:"20px 4px 8px"}}>Quick filters</div>
          <div style={{display:"flex",flexWrap:"wrap",gap:6}}>
            {["Unread","Watching","Subscribed","No replies","With photos"].map(f => (
              <span key={f} className="chip" style={{cursor:"pointer"}}>{f}</span>
            ))}
          </div>
        </aside>

        {/* Main column */}
        <div style={{display:"grid",gap:32}}>
          {/* Marques grid */}
          <div>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:14}}>
              <h2 className="display" style={{fontSize:22,margin:0,letterSpacing:"-.01em"}}>Categories — by marque</h2>
              <span className="mono" style={{fontSize:11,color:"var(--fg-3)",letterSpacing:".14em",textTransform:"uppercase"}}>8 marques · {CATEGORIES.reduce((a,c)=>a+c.threads,0).toLocaleString()} threads</span>
            </div>
            <div style={{display:"grid",gridTemplateColumns:"repeat(2, 1fr)",gap:10}}>
              {CATEGORIES.map(c => (
                <div key={c.id} className="lift" style={{display:"flex",alignItems:"center",gap:14,padding:"14px 16px",border:"1px solid var(--line)",borderRadius:"var(--radius)",cursor:"pointer",background:"var(--bg-1)",position:"relative",overflow:"hidden"}}>
                  <div style={{position:"absolute",left:0,top:0,bottom:0,width:3,background:c.color,boxShadow:`0 0 16px ${c.color}88`}} />
                  <div style={{width:40,height:40,marginLeft:6,display:"grid",placeItems:"center",background:"var(--bg-3)",borderRadius:3,fontFamily:"var(--display)",fontWeight:700,color:"#fff",fontSize:15,letterSpacing:"-.02em"}}>{c.name[0]}</div>
                  <div style={{flex:1,minWidth:0}}>
                    <div className="display" style={{fontSize:16}}>{c.name}</div>
                    <div style={{fontSize:12,color:"var(--fg-3)"}}>{c.model} · {c.threads.toLocaleString()} threads</div>
                  </div>
                  <div className="mono" style={{fontSize:11,color:"var(--fg-2)",letterSpacing:".1em",textTransform:"uppercase"}}>{c.members}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Latest topics */}
          <div>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}>
              <div style={{display:"flex",gap:2,padding:3,background:"var(--bg-2)",border:"1px solid var(--line)",borderRadius:"var(--radius)"}}>
                {["latest","top","unread","watched"].map(k => (
                  <button key={k} onClick={() => setTab(k)} style={{padding:"6px 12px",border:0,background:tab===k?"var(--bg-3)":"transparent",color:tab===k?"#fff":"var(--fg-2)",fontFamily:"var(--mono)",fontSize:11,letterSpacing:".14em",textTransform:"uppercase",borderRadius:2,cursor:"pointer"}}>{k}</button>
                ))}
              </div>
              <span className="mono" style={{fontSize:11,color:"var(--fg-3)",letterSpacing:".14em",textTransform:"uppercase"}}>showing 8 of 14,219</span>
            </div>

            <div style={{border:"1px solid var(--line)",borderRadius:"var(--radius-lg)",background:"var(--bg-1)",overflow:"hidden"}}>
              {TOPICS.map((t, i) => (
                <div key={t.id} className="topic-row" onClick={() => go("topic")} style={{display:"grid",gridTemplateColumns:"auto 1fr auto auto",gap:16,alignItems:"center",padding:"16px 18px",borderTop:i?"1px solid var(--line)":"0",cursor:"pointer",transition:"background .15s"}}
                  onMouseEnter={e => e.currentTarget.style.background="rgba(255,255,255,.025)"}
                  onMouseLeave={e => e.currentTarget.style.background="transparent"}>
                  <Avatar user={t.author} size={36} />
                  <div style={{minWidth:0}}>
                    <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:4,flexWrap:"wrap"}}>
                      {t.pinned && <Icon.Pin style={{color:"var(--orange)",flexShrink:0}}/>}
                      {t.hot && <Chip tone="red"><Icon.Fire/> Hot</Chip>}
                      <Chip><CatDot catId={t.cat}/> {CATEGORIES.find(c=>c.id===t.cat).name}</Chip>
                      <Chip>{SUBFORUMS.find(s=>s.id===t.sub)?.name||t.sub}</Chip>
                    </div>
                    <div style={{fontWeight:600,fontSize:15.5,letterSpacing:"-.005em",lineHeight:1.3,marginBottom:4,color:"var(--fg)"}}>{t.title}</div>
                    <div style={{fontSize:12,color:"var(--fg-3)"}}>by <span style={{color:"var(--fg-2)"}}>{USERS[t.author].name}</span> · {t.mins}m ago</div>
                  </div>
                  <div className="mono" style={{textAlign:"right",fontSize:11,color:"var(--fg-3)",letterSpacing:".1em",textTransform:"uppercase",minWidth:90}}>
                    <div><b style={{color:"var(--fg)",fontWeight:500}}>{t.replies}</b> replies</div>
                    <div style={{marginTop:3}}>{t.views} views</div>
                  </div>
                  <Icon.Chevron style={{color:"var(--fg-3)"}}/>
                </div>
              ))}
            </div>
            <div style={{display:"flex",justifyContent:"center",marginTop:18}}>
              <button className="btn btn-ghost btn-sm">Load 20 more <Icon.Chevron style={{transform:"rotate(90deg)"}}/></button>
            </div>
          </div>
        </div>

        {/* Right rail */}
        <aside style={{position:"sticky",top:76,display:"grid",gap:18}}>
          <div className="card carbon-soft" style={{padding:"18px 18px 20px"}}>
            <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:14}}>
              <Icon.Fire style={{color:"var(--red)"}}/>
              <div className="uppercase-eyebrow">Trending now</div>
            </div>
            <ol style={{listStyle:"none",padding:0,margin:0,display:"grid",gap:14}}>
              {TOPICS.filter(t=>t.hot).slice(0,4).concat([TOPICS[1]]).slice(0,5).map((t,i) => (
                <li key={t.id+"trend"} onClick={() => go("topic")} style={{cursor:"pointer",display:"flex",gap:12,alignItems:"start"}}>
                  <span className="mono" style={{fontSize:18,color:"var(--fg-3)",lineHeight:1,fontWeight:500,minWidth:18,fontVariantNumeric:"tabular-nums"}}>{String(i+1).padStart(2,"0")}</span>
                  <div style={{minWidth:0}}>
                    <div style={{fontSize:13.5,fontWeight:500,lineHeight:1.35}}>{t.title}</div>
                    <div className="mono" style={{fontSize:10.5,color:"var(--fg-3)",marginTop:4,letterSpacing:".12em",textTransform:"uppercase"}}>{CATEGORIES.find(c=>c.id===t.cat).name} · {t.replies} replies</div>
                  </div>
                </li>
              ))}
            </ol>
          </div>

          <div className="card" style={{padding:"18px 18px 20px"}}>
            <div className="uppercase-eyebrow" style={{marginBottom:12}}>Online now</div>
            <div style={{display:"flex",flexWrap:"wrap",gap:-4}}>
              {Object.keys(USERS).map((u,i) => (
                <div key={u} style={{marginLeft:i?-8:0}}><Avatar user={u} size={28} /></div>
              ))}
              <div style={{marginLeft:-8,width:28,height:28,display:"grid",placeItems:"center",background:"var(--bg-3)",border:"1px solid var(--line-2)",borderRadius:50,fontSize:10.5,fontWeight:600,color:"var(--fg-2)"}}>+42</div>
            </div>
            <hr className="hr" style={{margin:"14px 0"}}/>
            <div className="telemetry" style={{flexDirection:"column",gap:6}}>
              <span>178,402 <b>online</b></span>
              <span>312,840 <b>members</b></span>
              <span>1.2M <b>threads</b></span>
            </div>
          </div>

          <div className="card carbon-soft" style={{padding:"16px 18px"}}>
            <div className="uppercase-eyebrow" style={{marginBottom:10,color:"var(--orange)"}}>// Safety advisory</div>
            <div style={{fontSize:13.5,fontWeight:500,lineHeight:1.4}}>BMW S 1000 RR ’23–’24: quickshifter ECU update — dealer free</div>
            <button className="btn btn-ghost btn-sm" style={{marginTop:12}} onClick={() => go("topic")}>Read advisory <Icon.Arrow /></button>
          </div>
        </aside>
      </section>
    </main>
  );
}

/* ------------- 3. TOPIC DETAIL ------------- */

function Reaction({ icon, count, active, onClick, label }) {
  return (
    <button onClick={onClick} className="btn btn-sm" style={{
      background: active ? "color-mix(in oklab, var(--red) 14%, transparent)" : "transparent",
      border: "1px solid " + (active ? "color-mix(in oklab, var(--red) 50%, transparent)" : "var(--line)"),
      color: active ? "var(--red-hi)" : "var(--fg-2)",
      borderRadius: 3,
    }}>{icon}{count != null && <span className="mono" style={{fontVariantNumeric:"tabular-nums"}}>{count}</span>}{label && <span>{label}</span>}</button>
  );
}

function ReplyCard({ r, idx }) {
  const u = USERS[r.author];
  const [liked, setLiked] = useState(false);
  return (
    <article id={`post-${r.id}`} style={{display:"grid",gridTemplateColumns:"56px 1fr",gap:16,padding:"24px 4px",borderTop: idx ? "1px solid var(--line)" : "0"}}>
      <div style={{display:"flex",flexDirection:"column",alignItems:"center",gap:10}}>
        <Avatar user={r.author} size={48} ring={r.op}/>
        <div className="mono" style={{fontSize:10,color:"var(--fg-3)",letterSpacing:".14em",textTransform:"uppercase",textAlign:"center"}}>#{String(idx+1).padStart(3,"0")}</div>
      </div>
      <div>
        <div style={{display:"flex",alignItems:"center",gap:10,flexWrap:"wrap",marginBottom:4}}>
          <span style={{fontWeight:600,fontSize:14.5}}>{u.name}</span>
          <span style={{fontSize:12,color:"var(--fg-3)"}}>{COUNTRY_FLAGS[u.country]}</span>
          {r.op && <Chip tone="orange">OP</Chip>}
          {r.mod && <Chip tone="red">Mod</Chip>}
          <span className="mono" style={{fontSize:11,color:"var(--fg-3)",letterSpacing:".1em",textTransform:"uppercase"}}>{u.role} · {u.bike}</span>
          <span style={{marginLeft:"auto",fontSize:12,color:"var(--fg-3)"}}>{r.time}</span>
        </div>
        <div style={{display:"grid",gap:14,marginTop:10,fontSize:15,lineHeight:1.62,color:"var(--fg)"}}>
          {r.body.map((b, i) => b.type === "p" ? (
            <p key={i} style={{margin:0}}>{b.text}</p>
          ) : (
            <blockquote key={i} style={{margin:0,padding:"12px 16px",borderLeft:"2px solid var(--red)",background:"rgba(255,255,255,.025)",fontStyle:"italic",color:"var(--fg-2)",borderRadius:"0 3px 3px 0"}}>
              <div className="mono" style={{fontSize:10.5,textTransform:"uppercase",letterSpacing:".14em",color:"var(--fg-3)",marginBottom:4,fontStyle:"normal"}}>{b.who}</div>
              "{b.text}"
            </blockquote>
          ))}
        </div>
        <div style={{display:"flex",gap:8,marginTop:18,flexWrap:"wrap"}}>
          <Reaction icon={liked ? <Icon.HeartFill style={{color:"var(--red)"}}/> : <Icon.Heart/>} count={r.likes + (liked?1:0)} active={liked} onClick={() => setLiked(!liked)} />
          <Reaction icon={<Icon.Reply/>} label="Reply" />
          <Reaction icon={<Icon.Quote/>} label="Quote" />
          <Reaction icon={<Icon.Bookmark/>} label="Save" />
          <Reaction icon={<Icon.Share/>} />
          <span style={{flex:1}}/>
          <Reaction icon={<Icon.More/>} />
        </div>
      </div>
    </article>
  );
}

function TopicDetailPage({ go }) {
  const topic = TOPICS[2]; // KTM megathread
  const cat = CATEGORIES.find(c => c.id === topic.cat);
  const [draft, setDraft] = useState("");
  return (
    <main className="page-fade">
      {/* Breadcrumb + thread header */}
      <section className="wrap" style={{paddingTop:28,paddingBottom:16}}>
        <div className="mono" style={{fontSize:11,color:"var(--fg-3)",letterSpacing:".14em",textTransform:"uppercase",marginBottom:18,display:"flex",gap:8,alignItems:"center",flexWrap:"wrap"}}>
          <span onClick={() => go("forum")} style={{cursor:"pointer"}}>Forum</span>
          <Icon.Chevron style={{width:10,height:10}}/>
          <span onClick={() => go("forum")} style={{cursor:"pointer"}}>{cat.name}</span>
          <Icon.Chevron style={{width:10,height:10}}/>
          <span>Routes</span>
          <Icon.Chevron style={{width:10,height:10}}/>
          <span style={{color:"var(--fg)"}}>Thread #{topic.id}</span>
        </div>

        <div style={{display:"grid",gridTemplateColumns:"1fr auto",gap:24,alignItems:"start"}}>
          <div>
            <div style={{display:"flex",gap:8,marginBottom:14,flexWrap:"wrap"}}>
              <Chip tone="orange"><Icon.Pin/> Pinned</Chip>
              <Chip tone="red"><Icon.Fire/> Trending #1</Chip>
              <Chip><CatDot catId={topic.cat}/> {cat.name}</Chip>
              <Chip>Routes</Chip>
            </div>
            <h1 className="display" style={{fontSize:"clamp(28px, 3.4vw, 44px)",letterSpacing:"-.02em",lineHeight:1.08,margin:0}}>{topic.title}</h1>
            <div style={{display:"flex",alignItems:"center",gap:14,marginTop:18,flexWrap:"wrap"}}>
              <div style={{display:"flex",alignItems:"center",gap:10}}>
                <Avatar user={topic.author} size={32}/>
                <div>
                  <div style={{fontWeight:600,fontSize:13.5}}>{USERS[topic.author].name}</div>
                  <div className="mono" style={{fontSize:10.5,color:"var(--fg-3)",letterSpacing:".12em",textTransform:"uppercase"}}>{USERS[topic.author].role} · {topic.mins}m ago</div>
                </div>
              </div>
              <div style={{flex:1}}/>
              <div className="telemetry">
                <span><b>{topic.replies}</b> replies</span>
                <span><b>{topic.views}</b> views</span>
                <span><b>{topic.likes}</b> likes</span>
              </div>
            </div>
          </div>
          <div style={{display:"flex",flexDirection:"column",gap:8,minWidth:180}}>
            <button className="btn btn-primary btn-sm" style={{justifyContent:"center"}}><Icon.Reply/> Reply</button>
            <button className="btn btn-ghost btn-sm" style={{justifyContent:"center"}}><Icon.Bookmark/> Watch thread</button>
          </div>
        </div>
      </section>

      <hr className="hr"/>

      <section className="wrap" style={{display:"grid",gridTemplateColumns:"1fr 280px",gap:36,paddingTop:8,paddingBottom:80,alignItems:"start"}}>
        <div>
          {REPLIES.map((r, i) => <ReplyCard key={r.id} r={r} idx={i}/>)}

          {/* Reply composer */}
          <div className="card" style={{marginTop:24,padding:"18px 20px"}}>
            <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:12}}>
              <Avatar user="ducati_diaz" size={32}/>
              <div>
                <div style={{fontSize:13,fontWeight:600}}>Reply as ducati_diaz</div>
                <div className="mono" style={{fontSize:10.5,color:"var(--fg-3)",letterSpacing:".12em",textTransform:"uppercase"}}>Markdown supported · /commands</div>
              </div>
              <div style={{flex:1}}/>
              <Chip live tone="red">Drafting</Chip>
            </div>
            <textarea value={draft} onChange={e=>setDraft(e.target.value)} placeholder="Add to the discussion — be specific, ride safe."
              style={{width:"100%",minHeight:120,background:"var(--bg-1)",border:"1px solid var(--line)",borderRadius:"var(--radius)",padding:"14px 16px",color:"var(--fg)",fontFamily:"var(--body)",fontSize:14.5,lineHeight:1.55,outline:"none",resize:"vertical"}}/>
            <div style={{display:"flex",alignItems:"center",gap:8,marginTop:12,flexWrap:"wrap"}}>
              <button className="btn btn-sm btn-solid">B</button>
              <button className="btn btn-sm btn-solid" style={{fontStyle:"italic"}}>I</button>
              <button className="btn btn-sm btn-solid"><Icon.Quote/></button>
              <button className="btn btn-sm btn-solid">{"</>"}</button>
              <button className="btn btn-sm btn-solid">Attach</button>
              <div style={{flex:1}}/>
              <span className="mono" style={{fontSize:10.5,color:"var(--fg-3)",letterSpacing:".12em",textTransform:"uppercase"}}>{draft.length} / 20,000</span>
              <button className="btn btn-ghost btn-sm">Preview</button>
              <button className="btn btn-primary btn-sm">Post reply <Icon.Arrow/></button>
            </div>
          </div>
        </div>

        {/* Sidebar — thread meta */}
        <aside style={{position:"sticky",top:76,display:"grid",gap:14}}>
          <div className="card" style={{padding:"16px 18px"}}>
            <div className="uppercase-eyebrow" style={{marginBottom:12}}>Thread info</div>
            <div style={{display:"grid",gap:10,fontSize:13}}>
              <div style={{display:"flex",justifyContent:"space-between"}}><span style={{color:"var(--fg-3)"}}>Opened</span><span className="mono">Apr 14, 2026</span></div>
              <div style={{display:"flex",justifyContent:"space-between"}}><span style={{color:"var(--fg-3)"}}>Last reply</span><span className="mono">44m ago</span></div>
              <div style={{display:"flex",justifyContent:"space-between"}}><span style={{color:"var(--fg-3)"}}>Participants</span><span className="mono">87</span></div>
              <div style={{display:"flex",justifyContent:"space-between"}}><span style={{color:"var(--fg-3)"}}>Bike</span><span>KTM 1390 SD R</span></div>
            </div>
          </div>
          <div className="card" style={{padding:"16px 18px"}}>
            <div className="uppercase-eyebrow" style={{marginBottom:12}}>Top participants</div>
            <div style={{display:"grid",gap:10}}>
              {["highside_hana","ducati_diaz","torque_dad","apex_kira","knee_down"].map(u => (
                <div key={u} style={{display:"flex",alignItems:"center",gap:10}}>
                  <Avatar user={u} size={26}/>
                  <span style={{fontSize:13,flex:1}}>{USERS[u].name}</span>
                  <span className="mono" style={{fontSize:10.5,color:"var(--fg-3)",letterSpacing:".1em"}}>{Math.round(Math.random()*30+4)} posts</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card carbon-soft" style={{padding:"16px 18px"}}>
            <div className="uppercase-eyebrow" style={{marginBottom:10,color:"var(--red-hi)"}}>// Related</div>
            <div style={{display:"grid",gap:12}}>
              {TOPICS.filter(t=>t.cat==="ktm" || t.sub==="routes").slice(0,3).map(t => (
                <div key={t.id} style={{cursor:"pointer"}}>
                  <div style={{fontSize:13,fontWeight:500,lineHeight:1.35}}>{t.title}</div>
                  <div className="mono" style={{fontSize:10.5,color:"var(--fg-3)",marginTop:3,letterSpacing:".12em",textTransform:"uppercase"}}>{t.replies} replies</div>
                </div>
              ))}
            </div>
          </div>
        </aside>
      </section>
    </main>
  );
}

/* ------------- 4. PROFILE ------------- */

function ProfilePage({ go }) {
  const userKey = "ducati_diaz";
  const u = USERS[userKey];
  const [tab, setTab] = useState("activity");
  return (
    <main className="page-fade">
      {/* Banner */}
      <section className="carbon-soft" style={{borderBottom:"1px solid var(--line)",position:"relative",overflow:"hidden"}}>
        <div style={{position:"absolute",inset:0,background:"radial-gradient(700px 300px at 80% 0%, color-mix(in oklab, var(--red) 18%, transparent), transparent 70%)"}}/>
        <div className="wrap" style={{position:"relative",paddingTop:48,paddingBottom:36,display:"grid",gridTemplateColumns:"auto 1fr auto",gap:28,alignItems:"end"}}>
          <div style={{position:"relative"}}>
            <div style={{width:120,height:120,borderRadius:6,background:`linear-gradient(135deg, ${u.color}, #000 140%)`,display:"grid",placeItems:"center",fontFamily:"var(--display)",fontSize:48,fontWeight:700,color:"#fff",border:"1px solid var(--line-2)",boxShadow:`0 14px 50px -16px ${u.color}`}}>
              {u.initials}
            </div>
            <div style={{position:"absolute",right:-4,bottom:-4,width:22,height:22,borderRadius:50,background:"var(--red)",border:"3px solid var(--bg)",boxShadow:"0 0 12px var(--red)"}}/>
          </div>
          <div>
            <div className="uppercase-eyebrow" style={{marginBottom:6}}>// Moderator profile</div>
            <h1 className="display" style={{margin:0,fontSize:54,letterSpacing:"-.02em",lineHeight:1}}>{u.name} <span style={{fontSize:24,color:"var(--fg-3)",fontWeight:400}}>{u.handle}</span></h1>
            <div style={{display:"flex",alignItems:"center",gap:10,marginTop:14,flexWrap:"wrap"}}>
              <Chip tone="red">Mod</Chip>
              <Chip>{u.bike}</Chip>
              <Chip>{COUNTRY_FLAGS[u.country]} Barcelona, ES</Chip>
              <Chip>Joined Jul 2018</Chip>
            </div>
          </div>
          <div style={{display:"flex",gap:8}}>
            <button className="btn btn-primary btn-sm">Follow</button>
            <button className="btn btn-ghost btn-sm">Message</button>
            <button className="btn btn-ghost btn-sm" style={{padding:"7px 9px"}}><Icon.More/></button>
          </div>
        </div>
      </section>

      <section className="wrap" style={{display:"grid",gridTemplateColumns:"320px 1fr",gap:32,paddingTop:32,paddingBottom:80,alignItems:"start"}}>
        {/* Left: bio + stats */}
        <aside style={{display:"grid",gap:16}}>
          <div className="card" style={{padding:"18px 20px"}}>
            <div className="uppercase-eyebrow" style={{marginBottom:10}}>Bio</div>
            <p style={{margin:0,fontSize:14,lineHeight:1.6,color:"var(--fg)"}}>
              Track day instructor at Circuit de Barcelona-Catalunya. V4 obsessive. I post too much. If you DM me about Öhlins setup I will answer eventually, sorry in advance.
            </p>
            <div style={{display:"flex",gap:8,flexWrap:"wrap",marginTop:14}}>
              {PROFILE_BADGES.map(b => <Chip key={b.name} tone={b.tone}>{b.name}</Chip>)}
            </div>
          </div>

          <div className="card carbon-soft" style={{padding:"18px 20px"}}>
            <div className="uppercase-eyebrow" style={{marginBottom:14}}>Stats</div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
              {[
                {k:"Posts",       v:"12,408"},
                {k:"Threads",     v:"284"},
                {k:"Likes given", v:"3,201"},
                {k:"Likes recv.", v:"24.6k"},
                {k:"Best of",     v:"112"},
                {k:"Days seen",   v:"1,872"},
              ].map(s => (
                <div key={s.k} style={{padding:"12px 12px",background:"var(--bg-1)",border:"1px solid var(--line)",borderRadius:"var(--radius)"}}>
                  <div className="mono" style={{fontSize:10.5,color:"var(--fg-3)",letterSpacing:".14em",textTransform:"uppercase",marginBottom:6}}>{s.k}</div>
                  <div className="display" style={{fontSize:22,letterSpacing:"-.01em"}}>{s.v}</div>
                </div>
              ))}
            </div>
            <hr className="hr" style={{margin:"16px 0 12px"}}/>
            <div style={{display:"grid",gap:8}}>
              <div className="mono" style={{fontSize:10.5,color:"var(--fg-3)",letterSpacing:".14em",textTransform:"uppercase",display:"flex",justifyContent:"space-between"}}>
                <span>Reputation</span><span style={{color:"var(--red-hi)"}}>Top 0.4%</span>
              </div>
              <div style={{height:6,background:"var(--bg-1)",border:"1px solid var(--line)",borderRadius:50,overflow:"hidden"}}>
                <div style={{height:"100%",width:"94%",background:"var(--grad)",boxShadow:"0 0 12px var(--red)"}}/>
              </div>
            </div>
          </div>

          <div className="card" style={{padding:"18px 20px"}}>
            <div className="uppercase-eyebrow" style={{marginBottom:12}}>Garage</div>
            <div style={{display:"grid",gap:10}}>
              {[
                {name:"Ducati Panigale V4 SP2", year:"2024", color:"#dc2626"},
                {name:"Honda CB400F Restomod", year:"1976", color:"#f59e0b"},
                {name:"Yamaha XSR700",          year:"2022", color:"#3b82f6"},
              ].map(b => (
                <div key={b.name} style={{display:"flex",alignItems:"center",gap:12,padding:"10px 12px",background:"var(--bg-1)",border:"1px solid var(--line)",borderRadius:"var(--radius)"}}>
                  <div style={{width:8,height:36,background:b.color,borderRadius:1,boxShadow:`0 0 10px ${b.color}88`}}/>
                  <div style={{flex:1}}>
                    <div style={{fontSize:13.5,fontWeight:500}}>{b.name}</div>
                    <div className="mono" style={{fontSize:10.5,color:"var(--fg-3)",letterSpacing:".12em",textTransform:"uppercase",marginTop:2}}>{b.year}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </aside>

        {/* Right: activity */}
        <div>
          <div style={{display:"flex",gap:2,padding:3,background:"var(--bg-2)",border:"1px solid var(--line)",borderRadius:"var(--radius)",width:"fit-content",marginBottom:18}}>
            {["activity","threads","replies","likes","garage"].map(k => (
              <button key={k} onClick={() => setTab(k)} style={{padding:"7px 14px",border:0,background:tab===k?"var(--bg-3)":"transparent",color:tab===k?"#fff":"var(--fg-2)",fontFamily:"var(--mono)",fontSize:11,letterSpacing:".14em",textTransform:"uppercase",borderRadius:2,cursor:"pointer"}}>{k}</button>
            ))}
          </div>

          <div className="card" style={{overflow:"hidden"}}>
            {PROFILE_ACTIVITY.map((a, i) => {
              const kindLabel = a.kind === "thread" ? "Posted" : a.kind === "reply" ? "Replied" : "Liked";
              const kindColor = a.kind === "thread" ? "var(--red-hi)" : a.kind === "reply" ? "var(--orange)" : "var(--fg-2)";
              return (
                <div key={i} style={{display:"grid",gridTemplateColumns:"110px 1fr auto",gap:20,padding:"18px 22px",borderTop: i ? "1px solid var(--line)" : "0",alignItems:"center",cursor:"pointer"}}
                  onClick={() => go("topic")}>
                  <div className="mono" style={{fontSize:11,letterSpacing:".14em",textTransform:"uppercase",color:kindColor,fontWeight:500}}>{kindLabel}</div>
                  <div>
                    <div style={{fontSize:14.5,fontWeight:500,lineHeight:1.35}}>{a.title}</div>
                    <div className="mono" style={{fontSize:10.5,color:"var(--fg-3)",letterSpacing:".12em",textTransform:"uppercase",marginTop:5}}>{a.cat} · {a.time} {a.stat && "· " + a.stat}</div>
                  </div>
                  <Icon.Chevron style={{color:"var(--fg-3)"}}/>
                </div>
              );
            })}
          </div>

          {/* Contribution graph */}
          <div className="card" style={{marginTop:18,padding:"20px 22px"}}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:14}}>
              <div className="uppercase-eyebrow">// Posts · last 26 weeks</div>
              <span className="mono" style={{fontSize:10.5,color:"var(--fg-3)",letterSpacing:".14em",textTransform:"uppercase"}}>peak: 84 / week</span>
            </div>
            <div style={{display:"grid",gridTemplateColumns:"repeat(26, 1fr)",gap:4,alignItems:"end",height:90}}>
              {Array.from({length:26}).map((_, i) => {
                const seed = (Math.sin(i * 1.3) + 1.4) * 0.5 + (i % 5 === 0 ? 0.3 : 0);
                const h = Math.max(8, Math.min(90, seed * 80));
                const hot = h > 60;
                return (
                  <div key={i} title={`Week ${i+1}: ${Math.round(h)} posts`} style={{
                    height:h, borderRadius:1,
                    background: hot
                      ? `linear-gradient(180deg, var(--red), color-mix(in oklab, var(--red) 60%, var(--orange)))`
                      : "var(--bg-3)",
                    border: "1px solid " + (hot ? "color-mix(in oklab, var(--red) 60%, transparent)" : "var(--line)"),
                    boxShadow: hot ? "0 0 12px color-mix(in oklab, var(--red) 60%, transparent)" : "none",
                  }}/>
                );
              })}
            </div>
            <div className="telemetry" style={{marginTop:14,fontSize:10.5}}>
              <span>Avg <b>32</b>/wk</span><span>Streak <b>11 wks</b></span><span>Longest <b>34 wks</b></span>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { NavBar, Footer, LandingPage, ForumHomePage, TopicDetailPage, ProfilePage });