// Staff + CTA + Footer

function StaffSection() {
  return (
    <section id="staff">
      <div className="shell">
        <SectionHead
          num="§07 — STAFF"
          title={<>HUMAN<br/>ADMINS.</>}
          sub={<>Three admins. No paid mod positions. Appeals reviewed by hand.</>}
        />
        <div className="staff-grid">
          {STAFF.map(s => (
            <div className="staff-card" key={s.name}>
              {s.photo
                ? <div className="avatar avatar-photo" style={{backgroundImage:`url(${s.photo})`}} aria-label={s.name}></div>
                : <div className="avatar">{s.name[0]}</div>}
              <div className="role">— {s.role}</div>
              <div className="sname">{s.name}</div>
              <div className="stag">{s.tag}</div>
              <div className="sbio">{s.bio}</div>
              <div className="ssince">SINCE {s.since}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DiscordCTA() {
  const w = useDiscordWidget();
  const online = w?.presenceCount;
  const channels = w?.channels;
  return (
    <section className="cta">
      <div className="shell cta-inner">
        <div>
          <div className="eyebrow" style={{marginBottom:16}}>— JOIN US</div>
          <h2>
            <span className="accent">{online != null ? online.toLocaleString() : "2,400+"}</span> survivors<br/>
            {online != null ? "online right now." : "are already inside."}
          </h2>
          <p className="cta-sub">
            Patch notes, base raids, helicrash callouts, screenshot wall, server downtime — all of it lives in Discord. Voice channels run 24/7.
          </p>
          <a href={`https://${SERVER.discord}`} className="btn btn-primary" style={{fontSize:13,padding:"14px 22px"}}>
            OPEN DISCORD →
          </a>
        </div>
        <div className="cta-box">
          <div className="eyebrow">PERMANENT INVITE</div>
          <div className="invite">{SERVER.discord}</div>
          <div className="members">
            {online != null
              ? <><span style={{color:"var(--good)"}}>● {online.toLocaleString()} ONLINE</span> · {channels ?? "—"} VOICE CHANNELS</>
              : <><span style={{color:"var(--good)"}}>● 384 ONLINE</span> · 2,471 MEMBERS · 12 CHANNELS</>}
          </div>
          <div style={{marginTop:10, fontFamily:"JetBrains Mono", fontSize:10, color:"var(--ink-4)", letterSpacing:"0.14em"}}>
            {w?.source === "widget"
              ? <>SRC · DISCORD WIDGET · <span style={{color:"var(--good)"}}>LIVE</span></>
              : <>SRC · DEMO · <span style={{color:"var(--ink-3)"}}>SET discordGuildId IN live-data.js</span></>}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="shell foot-row">
        <div className="row gap-3 center">
          <ShovelMark size={20} color="var(--accent)" />
          <span className="mono" style={{fontSize:12,color:"var(--ink-3)",letterSpacing:"0.14em"}}>SHOVELHEAD.NET · NA-EAST · {new Date().getFullYear()}</span>
        </div>
        <div className="legal">
          UNOFFICIAL COMMUNITY · NOT AFFILIATED WITH BOHEMIA INTERACTIVE
        </div>
        <div className="row gap-4 center">
          <a href={`https://${SERVER.discord}`} className="mono" style={{fontSize:12,letterSpacing:"0.1em"}}>DISCORD</a>
          <a href="#" className="mono" style={{fontSize:12,letterSpacing:"0.1em"}}>WORKSHOP</a>
          <a
            href={`https://www.battlemetrics.com/servers/dayz/${window.SHOVELHEAD_CONFIG.battleMetricsServerId || ""}`}
            target="_blank" rel="noopener"
            className="mono" style={{fontSize:12,letterSpacing:"0.1em"}}
          >BATTLEMETRICS</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { StaffSection, DiscordCTA, Footer });