// Pummel Tale — Regions strip + Aging Showcase (PT-flavored sections)
const { useState: useStateAS, useEffect: useEffectAS, useRef: useRefAS } = React;

const REGIONS = [
  { name: "Ricarten",     kind: "Cidade Inicial",  level: "1–30",   status: "safe", note: "Praça do Reino" },
  { name: "Pillai",       kind: "Mina Antiga",     level: "30–60",  status: "safe", note: "Cavernas vivas" },
  { name: "Navisko",      kind: "Vila Élfica",     level: "60–90",  status: "safe", note: "Floresta dos espíritos" },
  { name: "Iron",         kind: "Cidadela",        level: "90–120", status: "warm", note: "Forja eterna" },
  { name: "Bless Castle", kind: "Castelo Sagrado", level: "PvP",    status: "boss", note: "Guerra de clãs" },
  { name: "Pillai Dungeon", kind: "Masmorra",      level: "130+",   status: "boss", note: "World Bosses" },
];

function Regions() {
  return (
    <section id="regions" className="section regions-section">
      <div className="regions-strip">
        {REGIONS.map(r => (
          <div key={r.name} className="region">
            <div className="region-name">{r.name}</div>
            <div className="region-kind">{r.kind}</div>
            <div className="region-meta">
              <span className="lvl">Lv. {r.level}</span>
              <span><span className={`dot ${r.status === "warm" ? "warm" : r.status === "boss" ? "boss" : ""}`}></span></span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ------------- Aging Showcase -------------
const AGING_TIERS = [
  { key: "t-1", label: "Comum",     range: "+1 → +3",  color: "#d8d0bd", glow: "rgba(216,208,189,0.45)", bright: "#fff3d6" },
  { key: "t-2", label: "Arcano",    range: "+4 → +6",  color: "#6aa6ff", glow: "rgba(106,166,255,0.55)", bright: "#9bc1f5" },
  { key: "t-3", label: "Solar",     range: "+7 → +9",  color: "#f0c97a", glow: "rgba(240,201,122,0.60)", bright: "#fff3d6" },
  { key: "t-4", label: "Infernal",  range: "+10 → +12", color: "#ff8a4a", glow: "rgba(255,138,74,0.65)",  bright: "#ffc8a0" },
  { key: "t-5", label: "Mítico",    range: "+13 → +15", color: "#ff4a5a", glow: "rgba(255,74,90,0.75)",   bright: "#ff9aa3" },
];

function tierFor(level) {
  if (level <= 3) return AGING_TIERS[0];
  if (level <= 6) return AGING_TIERS[1];
  if (level <= 9) return AGING_TIERS[2];
  if (level <= 12) return AGING_TIERS[3];
  return AGING_TIERS[4];
}

function Aging() {
  const [level, setLevel] = useStateAS(7);
  const tier = tierFor(level);
  const glowSize = `${20 + level * 4}px`;

  const cssVars = {
    "--aging-color":        tier.glow,
    "--aging-color-bright": tier.bright,
    "--aging-bg":           tier.glow.replace(/[\d.]+\)$/, "0.20)"),
    "--aging-glow":         glowSize,
  };

  return (
    <section id="aging" className="section aging-section">
      <div className="section-head">
        <div className="eyebrow">forja ancestral</div>
        <h2>Sistema de Aging</h2>
        <div className="ornament">
          <span className="line"></span>
          <span className="sheltom"></span>
          <span className="line"></span>
        </div>
        <p>O coração do Priston Tale. Quanto maior o aging, mais raro e poderoso — mas o risco aumenta. Cinco tiers icônicos, cores que todo veterano reconhece.</p>
      </div>

      <div className="aging-wrap">
        <div className="aging-copy">
          <div className="eyebrow-line">// progressão · +1 a +15</div>
          <h3>De forjado a lendário</h3>
          <p>Use <b style={{color:"var(--gold-bright)"}}>Sheltoms</b> da Pillai e essências de boss para evoluir seu equipamento. Cada tier desbloqueia um halo de luz característico — branco no início, sangue puro no ápice.</p>
          <p style={{color:"var(--ink-mute)", fontSize:"13px"}}>No Pummel Tale, o aging é <b style={{color:"var(--gold-bright)"}}>balanceado</b>: taxa de sucesso visível, sem proteção paga, sem ranks artificiais. Esforço bruto, recompensa justa.</p>

          <div className="aging-tiers">
            {AGING_TIERS.map(t => (
              <div key={t.key} className="aging-tier-card" style={tier.key === t.key ? { borderColor: "rgba(200,153,90,0.4)", boxShadow: `0 0 18px ${t.glow}` } : null}>
                <div className="at-label">{t.label}</div>
                <div className={`at-range ${t.key}`}>{t.range}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="aging-showcase" style={cssVars}>
          <div className="corner tl"></div>
          <div className="corner tr"></div>
          <div className="corner bl"></div>
          <div className="corner br"></div>
          <div className="aging-hint">arraste para forjar</div>

          <div className="aging-item">
            <div className="aging-badge">+{level}</div>
            <Icons.Sword/>
            <div className="aging-name" style={{color: tier.bright}}>Espada · {tier.label}</div>
          </div>

          <div className="aging-slider">
            <span className="lvl-label">+1</span>
            <div className="aging-slider-track" onClick={(e) => {
              const r = e.currentTarget.getBoundingClientRect();
              const pct = (e.clientX - r.left) / r.width;
              setLevel(Math.max(1, Math.min(15, Math.round(pct * 15))));
            }}>
              <div className="aging-slider-fill" style={{ width: `${(level / 15) * 100}%` }}></div>
              <div className="aging-slider-marks">
                {Array.from({ length: 15 }).map((_, i) => <span key={i}></span>)}
              </div>
            </div>
            <span className="lvl-label val">+{level}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Regions, Aging });