function PageOverview() {
  const seg = ["7d","30d","90d"];
  const [range, setRange] = React.useState("30d");
  const rangeDays = {"7d":7,"30d":30,"90d":60}[range];
  const revSlice   = REVENUE_SERIES.slice(-rangeDays);
  const signSlice  = SIGNUPS_SERIES.slice(-rangeDays);
  const storySlice = STORIES_SERIES.slice(-rangeDays);
  const dauSlice   = DAU_SERIES.slice(-rangeDays);

  const totalUsers = PLAN_DIST.reduce((a,p)=>a+p.users, 0);

  return (
    <>
      <div className="page-header">
        <div>
          <h1>Overview</h1>
          <div className="sub">Live dashboard · {new Date().toLocaleDateString('en-US',{weekday:'long',month:'long',day:'numeric',year:'numeric'})}</div>
        </div>
        <div className="actions">
          <div className="seg">
            {seg.map(s=><button key={s} data-active={range===s} onClick={()=>setRange(s)}>{s}</button>)}
          </div>
          <button className="btn sm"><Icon.filter size={12}/> All platforms</button>
          <button className="btn primary sm"><Icon.download size={12}/> Export report</button>
        </div>
      </div>

      <div className="kpi-grid">
        <KPI label="MRR"                value={money(KPIS.mrr,'USD')}  delta={KPIS.mrrDelta}      icon="money"/>
        <KPI label="Revenue today"      value={money(KPIS.revToday)}   delta={KPIS.revTodayDelta}/>
        <KPI label="Total users"        value={compact(KPIS.users)}    delta={KPIS.usersDelta}    icon="users"/>
        <KPI label="DAU"                value={compact(KPIS.dau)}      delta={KPIS.dauDelta}/>
        <KPI label="Stories today"      value={compact(KPIS.storiesToday)} delta={KPIS.storiesDelta} icon="book"/>
        <KPI label="Credits consumed"   value={compact(KPIS.creditsConsumed)} delta={KPIS.creditsDelta} icon="coin"/>
        <KPI label="Free→Paid"          value={KPIS.conv || "—"} unit={KPIS.conv ? "%" : ""} delta={KPIS.convDelta}/>
        <KPI label="Churn (30d)"        value={KPIS.churn || "—"} unit={KPIS.churn ? "%" : ""} delta={KPIS.churnDelta}/>
      </div>

      <div style={{display:"grid", gridTemplateColumns:"2fr 1fr", gap:16, marginBottom:16}}>
        <div className="card">
          <div className="card-header">
            <div>
              <h3>Revenue</h3>
              <div className="sub">Daily gross · {range}</div>
            </div>
          </div>
          <div className="card-body">
            <LineChart data={revSlice} color="var(--accent)" valueLabel={v=>"$"+compact(v)}/>
          </div>
        </div>

        <div className="card">
          <div className="card-header"><h3>Plan distribution</h3><div className="spacer"/><div className="sub">by user</div></div>
          <div className="card-body" style={{display:"flex", gap:16, alignItems:"center"}}>
            <Donut size={140} stroke={22}
              segments={PLAN_DIST.map(p=>({value:p.users, color:p.color}))}
              centerValue={totalUsers > 0 ? compact(totalUsers) : "—"}
              centerLabel="Users"/>
            <div className="bd" style={{flex:1}}>
              {PLAN_DIST.map((p,i)=>{
                const pct = totalUsers > 0 ? (p.users/totalUsers*100).toFixed(1) : "—";
                return (
                  <div key={i} className="bd-row">
                    <div className="sw" style={{"--c":p.color}}/>
                    <div className="name">{p.plan}</div>
                    <div className="v">{p.users > 0 ? p.users.toLocaleString() : "—"}</div>
                    <div className="p">{pct !== "—" ? pct+"%" : "—"}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:16, marginBottom:16}}>
        <div className="card">
          <div className="card-header"><h3>New signups</h3></div>
          <div className="card-body"><BarChart data={signSlice} color="var(--plum)" height={160} valueLabel={v=>compact(v)}/></div>
        </div>
        <div className="card">
          <div className="card-header"><h3>Stories generated</h3></div>
          <div className="card-body"><BarChart data={storySlice} color="var(--green)" height={160} valueLabel={v=>compact(v)}/></div>
        </div>
        <div className="card">
          <div className="card-header"><h3>Daily active users</h3></div>
          <div className="card-body"><LineChart data={dauSlice} color="var(--blue)" height={160} valueLabel={v=>compact(v)}/></div>
        </div>
      </div>

      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:16}}>
        {/* Live events */}
        <div className="card">
          <div className="card-header">
            <h3><span className="pulse" style={{marginRight:8}}/> Live events</h3>
          </div>
          <div className="card-body" style={{paddingTop:0, paddingBottom:0}}>
            {LIVE_EVENTS.length === 0
              ? <EmptyState icon="sparkle" message="No events yet" sub="Activity will appear here once users are using the app"/>
              : LIVE_EVENTS.slice(0,8).map(e => {
                  const Ic = Icon[e.icon] || Icon.sparkle;
                  return (
                    <div key={e.id} className="event-item">
                      <div className="icon" style={{color:`var(--${e.color})`}}><Ic size={13}/></div>
                      <div style={{flex:1, minWidth:0}}>
                        <div className="t">{e.t}</div>
                        <div className="m">{e.m}</div>
                      </div>
                      <div className="ago">{e.ago}m</div>
                    </div>
                  );
                })
            }
          </div>
        </div>

        {/* Top themes */}
        <div className="card">
          <div className="card-header"><h3>Top themes</h3><div className="spacer"/><div className="sub">last 30d</div></div>
          <div className="card-body">
            {THEME_DIST.every(t=>t.stories===0)
              ? <EmptyState icon="book" message="No stories yet" sub="Theme breakdown will appear once stories are generated"/>
              : (
                <div className="bd">
                  {THEME_DIST.slice(0,7).map((t,i) => {
                    const max = Math.max(...THEME_DIST.map(x=>x.stories));
                    return (
                      <div key={i} style={{display:"grid", gridTemplateColumns:"1fr 60px", gap:8, alignItems:"center"}}>
                        <div>
                          <div style={{fontSize:12, fontWeight:500}}>{t.theme}</div>
                          <div className="bar" style={{marginTop:5}}>
                            <span style={{width:(max>0?t.stories/max*100:0)+"%", background:i===0?"var(--accent)":i<3?"var(--plum)":"var(--ink-4)"}}/>
                          </div>
                        </div>
                        <div className="mono muted" style={{fontSize:12, textAlign:"right"}}>{compact(t.stories)}</div>
                      </div>
                    );
                  })}
                </div>
              )
            }
          </div>
        </div>

        {/* Top countries */}
        <div className="card">
          <div className="card-header"><h3>Where users are</h3><div className="spacer"/><div className="sub">all-time</div></div>
          <div className="card-body">
            {COUNTRY_DIST.length === 0
              ? <EmptyState icon="users" message="No user data yet" sub="Country breakdown will appear once users sign up"/>
              : (
                <div className="bd">
                  {COUNTRY_DIST.slice(0,8).map((c,i) => {
                    const max = COUNTRY_DIST[0].users;
                    return (
                      <div key={i} style={{display:"grid", gridTemplateColumns:"22px 1fr 60px", gap:8, alignItems:"center"}}>
                        <div style={{fontSize:15}}>{c.flag}</div>
                        <div>
                          <div style={{fontSize:12, fontWeight:500}}>{c.country}</div>
                          <div className="bar" style={{marginTop:5}}><span style={{width:(c.users/max*100)+"%"}}/></div>
                        </div>
                        <div className="mono muted" style={{fontSize:12, textAlign:"right"}}>{compact(c.users)}</div>
                      </div>
                    );
                  })}
                </div>
              )
            }
          </div>
        </div>
      </div>
    </>
  );
}

window.PageOverview = PageOverview;