// Pummel Tale — Header, Hero
const { useState, useEffect, useRef } = React;

function BrandMark({ size = 38 }) {
  return (
    <div className="brand-mark" style={{ width: size, height: size }}>
      <svg viewBox="0 0 40 40" fill="none">
        <defs>
          <linearGradient id="bm-grad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#f0c97a"/>
            <stop offset="60%" stopColor="#c8995a"/>
            <stop offset="100%" stopColor="#6a4a1a"/>
          </linearGradient>
        </defs>
        {/* outer diamond */}
        <path d="M20 2 38 20 20 38 2 20Z" stroke="url(#bm-grad)" strokeWidth="1.5"/>
        {/* inner inverted */}
        <path d="M20 8 32 20 20 32 8 20Z" stroke="url(#bm-grad)" strokeWidth="1.2" opacity="0.7"/>
        {/* central P (geometric) */}
        <path d="M16 13v14M16 13h5a4 4 0 0 1 0 8h-5" stroke="url(#bm-grad)" strokeWidth="2" strokeLinecap="square" fill="none"/>
        {/* corner pips */}
        <circle cx="20" cy="2" r="1" fill="#f0c97a"/>
        <circle cx="20" cy="38" r="1" fill="#f0c97a"/>
        <circle cx="2" cy="20" r="1" fill="#f0c97a"/>
        <circle cx="38" cy="20" r="1" fill="#f0c97a"/>
      </svg>
    </div>
  );
}

function Header({ active, setActive }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const nav = [
    { id: "home", label: "Início" },
    { id: "download", label: "Download" },
    { id: "ranking", label: "Ranking" },
    { id: "mix", label: "Sistema Mix" },
    { id: "news", label: "Notícias" },
    { id: "register", label: "Cadastro", href: "cadastro.html" },
  ];
  const go = (n) => {
    if (n.href) { window.location.href = n.href; return; }
    setActive(n.id);
    setMenuOpen(false);
    document.querySelector(`#${n.id}`)?.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <React.Fragment>
    <header className="header">
      <a href="#home" className="brand" onClick={(e) => { e.preventDefault(); go({id:"home"}); }}>
        <BrandMark/>
        <div>
          <div className="brand-name">Pummel Tale</div>
          <span className="brand-tag">Season III · Awaken</span>
        </div>
      </a>
      <nav className="nav">
        {nav.map(n => (
          <a key={n.id} href={n.href || `#${n.id}`}
             className={active === n.id ? "active" : ""}
             onClick={(e) => { if (!n.href) { e.preventDefault(); go(n); } }}>
            {n.label}
          </a>
        ))}
      </nav>
      <div className="header-spacer"></div>
      <div className="header-actions">
        <a className="discord-btn" href="#discord" onClick={(e)=>e.preventDefault()}>
          <Icons.Discord size={14}/>
          <span>Discord</span>
        </a>
        <button className="login-btn">Entrar</button>
        <button className="menu-btn" aria-label="Menu" onClick={() => setMenuOpen(o => !o)}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
            {menuOpen
              ? <path d="M6 6l12 12M18 6l-12 12"/>
              : <path d="M4 7h16M4 12h16M4 17h16"/>}
          </svg>
        </button>
      </div>
    </header>
    <div className={`mobile-nav ${menuOpen ? "open" : ""}`}>
      {nav.map(n => (
        <a key={n.id} href={n.href || `#${n.id}`}
           className={active === n.id ? "active" : ""}
           onClick={(e) => { if (!n.href) { e.preventDefault(); go(n); } }}>
          {n.label}
        </a>
      ))}
    </div>
    </React.Fragment>
  );
}

function ServerStat({ label, value, online }) {
  return (
    <div className="hero-stat">
      <div className="label">{label}</div>
      <div className={`value ${online ? "online" : ""}`}>{value}</div>
    </div>
  );
}

function Hero({ players }) {
  return (
    <section id="home" className="hero">
      <div className="hero-copy">
        <div className="hero-tag">
          <span className="pulse"></span>
          <span>Season III · Awaken · Online</span>
        </div>
        <h1>
          <span className="red">Forja</span> o<br/>
          <span className="gold">poder eterno</span>
        </h1>
        <p className="hero-slogan">"O verdadeiro poder do aging começa aqui."</p>
        <p className="hero-desc">
          Servidor brasileiro de Priston Tale com economia balanceada, sistema exclusivo
          de mix progressivo e endgame competitivo. Aging justo, drops controlados,
          eventos diários e clãs em guerra constante por território.
        </p>
        <div className="hero-ctas">
          <button className="btn btn-primary">
            <span className="glint"></span>
            <Icons.Bolt size={14}/>
            Jogar Agora
          </button>
          <button className="btn btn-ghost">
            <Icons.Download size={14}/>
            Download
          </button>
        </div>
        <div className="hero-stats">
          <ServerStat label="Status" value="ONLINE" online/>
          <ServerStat label="Players" value={players.toLocaleString("pt-BR")}/>
          <ServerStat label="XP Rate" value="x12"/>
          <ServerStat label="Drop" value="x6"/>
        </div>
      </div>

      <div className="hero-art">
        <div className="runes"></div>
        <div className="corner-tr"></div>
        <div className="corner-bl"></div>

        <div className="character">
          <div className="silhouette">
            <div className="silhouette-label">
              <strong>Hero Render</strong>
              hi-fi character art<br/>
              drop in 1200×1600 PNG
            </div>
          </div>
        </div>

        <div className="float-card tl">
          <div className="fc-label">World Boss</div>
          <div className="fc-row">
            <Icons.Skull size={16}/>
            <div>
              <div style={{fontFamily:"var(--font-display)", fontSize:"13px", letterSpacing:"0.12em", color:"var(--ink)"}}>TEMPSKRON</div>
              <div className="mono" style={{fontSize:"10px", color:"var(--ink-mute)", letterSpacing:"0.18em"}}>RESPAWN 02:14:08</div>
            </div>
          </div>
        </div>

        <div className="float-card br">
          <div className="fc-label">Server Latency</div>
          <div className="fc-row" style={{justifyContent:"space-between"}}>
            <div className="fc-value">28<span style={{fontSize:"12px", color:"var(--ink-mute)", marginLeft:"4px"}}>ms</span></div>
            <span className="ping-bars">
              <span></span><span></span><span></span><span></span>
            </span>
          </div>
          <div className="mono" style={{fontSize:"9px", color:"var(--ink-mute)", letterSpacing:"0.22em", marginTop:"6px"}}>SP / BRA-01</div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Header, Hero, BrandMark });