// Shovel logo + small shared bits
const { useState, useEffect, useRef, useMemo } = React;

// Original shovel mark — geometric square-shouldered spade.
function ShovelMark({ size = 28, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" aria-hidden="true">
      {/* handle */}
      <rect x="29" y="4"  width="6" height="22" fill={color} />
      {/* T-grip */}
      <path d="M22 4 H42 V10 H36 V14 H28 V10 H22 Z" fill={color} />
      {/* shaft collar */}
      <rect x="27" y="24" width="10" height="4" fill={color} />
      {/* blade — square-shouldered spade */}
      <path d="M16 28 H48 L44 50 L32 60 L20 50 Z" fill={color} />
      {/* blade highlight */}
      <path d="M22 32 H42 L40 44 L32 52 L24 44 Z" fill="none" stroke={color} strokeOpacity="0.25" strokeWidth="1.5" />
    </svg>
  );
}

function BigShovel({ color = "currentColor" }) {
  return (
    <svg viewBox="0 0 64 64" fill="none" aria-hidden="true" style={{width:"100%",height:"100%"}}>
      <rect x="29" y="4"  width="6" height="22" fill={color} />
      <path d="M22 4 H42 V10 H36 V14 H28 V10 H22 Z" fill={color} />
      <rect x="27" y="24" width="10" height="4" fill={color} />
      <path d="M16 28 H48 L44 50 L32 60 L20 50 Z" fill={color} />
    </svg>
  );
}

function Pip({ label = "ONLINE" }) {
  return (
    <span className="pip">
      <span className="pip-dot"></span>
      <span>{label}</span>
    </span>
  );
}

function SectionHead({ num, title, sub }) {
  return (
    <div className="section-head">
      <div>
        <div className="section-num">{num}</div>
        <h2>{title}</h2>
      </div>
      {sub && <div className="right muted">{sub}</div>}
    </div>
  );
}

function Nav({ live, onOpenAccount, onOpenAdmin, staff }) {
  return (
    <nav className="nav">
      <div className="shell nav-inner">
        <a href="#top" className="brand">
          <ShovelMark size={22} color="var(--accent)" />
          SHOVELHEAD<span className="dot">.</span>NET
        </a>
        <div className="nav-links">
          <a href="#status">Status</a>
          <a href="#rules">Rules</a>
          <a href="#mods">Mods</a>
          <a href="#map" data-nav="map">Map</a>
          <a href="#staff">Staff</a>
        </div>
        <div className="nav-right">
          <Pip label={`${live} / ${SERVER.slots} ONLINE`} />
          <a href={`https://${SERVER.discord}`} className="btn btn-primary" style={{fontSize:12,padding:"10px 16px",letterSpacing:"0.1em"}}>JOIN DISCORD</a>
        </div>
      </div>
    </nav>
  );
}

function Marquee() {
  const items = [
    "VANILLA+ CHERNARUS",
    `${SERVER.slots} SLOTS`,
    "LOOT × 1.8",
    "ACTIVE ADMINS",
    "MISSIONS",
    "PLAYER TO PLAYER TRADER",
    "BASE RAIDING",
    "TIMED RAIDS",
  ];
  const line = items.join("  ");
  return (
    <div className="scrolling-marquee">
      <div className="marquee-track">
        <span>{line}</span>
        <span>{line}</span>
      </div>
    </div>
  );
}

Object.assign(window, { ShovelMark, BigShovel, Pip, SectionHead, Nav, Marquee });