// Pummel Tale — Features section + Mix System
//
// === CENTRAL MIX TABLE ===
// Fonte única de verdade. Ajuste apenas valores aqui — UI lê via MIX_TABLE.
// Tiers oficiais: arcano / ancestral / celestial
// Regras:
//   - 1 item = 1 tipo de mix = 1 tier = 1 bônus aplicado (sorteado do pool)
//   - Restrições:
//       restrict: "ranged" → só aplicável a armas ranged
//       Velocidade de Ataque → só em luvas
//       Velocidade de Movimento → só em botas
//       Block → escudo/orbital e acessórios (anéis/amuletos)
//
const FEATURES = [
  { num: "01", icon: "Flame", title: "Sistema Mix Exclusivo", desc: "Receitas progressivas Arcano, Ancestral e Celestial com taxas balanceadas e materiais únicos do servidor." },
  { num: "02", icon: "Gem", title: "Aging Balanceado", desc: "Curva de aging refinada — recompensa o esforço sem destruir contas casuais. +1 a +15 com transparência total." },
  { num: "03", icon: "Skull", title: "Bosses de Mundo", desc: "Tempskron, Lorenoid e Karuk reaparecem em ciclos cronometrados, com loot lendário e cooldowns globais." },
  { num: "04", icon: "Sword", title: "PvP Competitivo", desc: "Arena 3v3, Battleground 9v9 e duelos pessoais com ranking de temporada e recompensas exclusivas." },
  { num: "05", icon: "Calendar", title: "Eventos Automáticos", desc: "Mais de 14 eventos automáticos diários — Pearl Raid, Tower of Trial, Caos Hour e mais." },
  { num: "06", icon: "Banner", title: "Clãs & Guerras", desc: "Guerras de território aos sábados, base de clã instanciada e bônus de farm coletivo por aliança." },
  { num: "07", icon: "Bolt", title: "Farm Progressivo", desc: "Mapas escalam com seu nível. Sem grind eterno em um único spot — cada zona oferece progressão real." },
  { num: "08", icon: "Crown", title: "Itens Exclusivos", desc: "Conjuntos lendários, asas únicas e relíquias que só existem no Pummel Tale. Caçar é colecionar." },
];

function Features() {
  return (
    <section id="features" className="section">
      <div className="section-head">
        <div className="eyebrow">o que define o pummel</div>
        <h2>Recursos do Servidor</h2>
        <div className="ornament">
          <span className="line"></span>
          <Icons.Diamond size={12}/>
          <span className="line"></span>
        </div>
        <p>Sistemas pensados para uma jornada longa, justa e competitiva — do primeiro mob ao último boss.</p>
      </div>

      <div className="features-grid">
        {FEATURES.map(f => {
          const I = Icons[f.icon];
          return (
            <div key={f.num} className="feature-card">
              <span className="feature-num">{f.num}</span>
              <div className="feature-icon">
                <I/>
              </div>
              <h3>{f.title}</h3>
              <p>{f.desc}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ------------ TIERS (apresentação) ------------
const TIERS = {
  arcano: {
    label: "Arcano",
    sub: "Nível 1 → 80",
    title: "Fundação do Aventureiro",
    desc: "As primeiras receitas garantem que todo novo jogador tenha caminho claro até o mid-game. Materiais comuns, taxas altas, sem barreira de entrada.",
    success: 82,
    rarity: "rare",
    sigil: "I",
    levelReq: "1",
  },
  ancestral: {
    label: "Ancestral",
    sub: "Nível 80 → 130",
    title: "A Era da Maestria",
    desc: "Receitas exclusivas do Pummel que combinam itens de boss, runas e fragmentos arcanos. Aqui começa o aging real — escolhas pesam.",
    success: 54,
    rarity: "epic",
    sigil: "III",
    levelReq: "80",
  },
  celestial: {
    label: "Celestial",
    sub: "Nível 130+",
    title: "Lendas que se Forjam",
    desc: "Receitas raras com componentes de world boss e essências de aging. Itens lendários únicos por temporada — somente os mais persistentes os tocam.",
    success: 21,
    rarity: "legend",
    sigil: "VII",
    levelReq: "130",
  },
};

// ------------ CATEGORIAS (slots) ------------
const CATEGORIES = [
  { id: "weapon",   label: "Arma",      icon: "Sword" },
  { id: "armor",    label: "Armadura",  icon: "Shield" },
  { id: "bracelet", label: "Bracelete", icon: "Gem" },
  { id: "gloves",   label: "Luvas",     icon: "Glove" },
  { id: "boots",    label: "Botas",     icon: "Boot" },
  { id: "shield",   label: "Escudo",    icon: "Helm" },
  { id: "ring",     label: "Anel/Amuleto", icon: "Ring" },
];

// ------------ TABELA CENTRAL DE MIX ------------
// MIX_TABLE[categoryId].bonuses[tier] -> Array<{ label, value, restrict?: 'ranged' }>
// Cada item recebe APENAS UM bônus (sorteado do pool ao aplicar o mix).
const MIX_TABLE = {
  weapon: {
    itemName: { arcano: "Lâmina Arcana", ancestral: "Espada Ancestral", celestial: "Espada Celestial" },
    bonuses: {
      arcano: [
        { label: "Taxa de Ataque",     value: "+40" },
        { label: "Atq. Mín/Máx",       value: "+10 / +10" },
        { label: "Crítico",            value: "+3%" },
        { label: "HP",                 value: "+200" },
        { label: "STR / INT / AGI",    value: "+25" },
        { label: "Alcance",            value: "+25", restrict: "ranged" },
      ],
      ancestral: [
        { label: "Taxa de Ataque",     value: "+80" },
        { label: "Atq. Mín/Máx",       value: "+20 / +20" },
        { label: "Crítico",            value: "+6%" },
        { label: "HP",                 value: "+400" },
        { label: "STR / INT / AGI",    value: "+40" },
        { label: "Alcance",            value: "+50", restrict: "ranged" },
      ],
      celestial: [
        { label: "Taxa de Ataque",     value: "+120" },
        { label: "Atq. Mín/Máx",       value: "+30 / +30" },
        { label: "Crítico",            value: "+10%" },
        { label: "HP",                 value: "+600" },
        { label: "STR / INT / AGI",    value: "+80" },
        { label: "Alcance",            value: "+70", restrict: "ranged" },
      ],
    },
  },
  armor: {
    itemName: { arcano: "Vestes Arcanas", ancestral: "Couraça Ancestral", celestial: "Égide Celestial" },
    bonuses: {
      arcano:    [{ label: "Defesa", value: "+200" }, { label: "Abs", value: "+10" }, { label: "HP", value: "+100" }],
      ancestral: [{ label: "Defesa", value: "+500" }, { label: "Abs", value: "+25" }, { label: "HP", value: "+250" }],
      celestial: [{ label: "Defesa", value: "+600" }, { label: "Abs", value: "+40" }, { label: "HP", value: "+500" }],
    },
  },
  bracelet: {
    itemName: { arcano: "Bracelete Arcano", ancestral: "Bracelete Ancestral", celestial: "Bracelete Celestial" },
    bonuses: {
      arcano:    [{ label: "STR", value: "+20" }, { label: "INT", value: "+20" }, { label: "AGI", value: "+20" }, { label: "Defesa", value: "+100" }, { label: "Taxa de Ataque", value: "+40" }],
      ancestral: [{ label: "STR", value: "+40" }, { label: "INT", value: "+40" }, { label: "AGI", value: "+40" }, { label: "Defesa", value: "+200" }, { label: "Taxa de Ataque", value: "+80" }],
      celestial: [{ label: "STR", value: "+60" }, { label: "INT", value: "+60" }, { label: "AGI", value: "+60" }, { label: "Defesa", value: "+350" }, { label: "Taxa de Ataque", value: "+120" }],
    },
  },
  gloves: {
    itemName: { arcano: "Manoplas Arcanas", ancestral: "Manoplas Ancestrais", celestial: "Manoplas Celestiais" },
    bonuses: {
      arcano:    [{ label: "Defesa", value: "+100" }, { label: "Abs", value: "+10" }],
      ancestral: [{ label: "Defesa", value: "+200" }, { label: "Abs", value: "+20" }],
      celestial: [{ label: "Velocidade de Ataque", value: "+1" }, { label: "Defesa", value: "+350" }, { label: "Abs", value: "+30" }],
    },
  },
  boots: {
    itemName: { arcano: "Grevas Arcanas", ancestral: "Grevas Ancestrais", celestial: "Grevas Celestiais" },
    bonuses: {
      arcano:    [{ label: "Defesa", value: "+100" }, { label: "Abs", value: "+10" }, { label: "Vel. Movimento", value: "+1" }],
      ancestral: [{ label: "Defesa", value: "+200" }, { label: "Abs", value: "+20" }, { label: "Vel. Movimento", value: "+3" }],
      celestial: [{ label: "Defesa", value: "+350" }, { label: "Abs", value: "+30" }, { label: "Vel. Movimento", value: "+5" }],
    },
  },
  shield: {
    itemName: { arcano: "Escudo Arcano", ancestral: "Égide Ancestral", celestial: "Égide Celestial" },
    bonuses: {
      arcano:    [{ label: "Block", value: "+3" }, { label: "Defesa", value: "+100" }, { label: "Abs", value: "+10" }, { label: "HP", value: "+100" }],
      ancestral: [{ label: "Block", value: "+6" }, { label: "Defesa", value: "+200" }, { label: "Abs", value: "+20" }, { label: "HP", value: "+150" }],
      celestial: [{ label: "Block", value: "+9" }, { label: "Defesa", value: "+300" }, { label: "Abs", value: "+30" }, { label: "HP", value: "+250" }],
    },
  },
  ring: {
    itemName: { arcano: "Anel Arcano", ancestral: "Amuleto Ancestral", celestial: "Relíquia Celestial" },
    bonuses: {
      arcano:    [{ label: "HP", value: "+30" }, { label: "Evasão", value: "+3%" }, { label: "Block", value: "+3" }],
      ancestral: [{ label: "HP", value: "+50" }, { label: "Evasão", value: "+5%" }, { label: "Block", value: "+5" }],
      celestial: [{ label: "HP", value: "+90" }, { label: "Evasão", value: "+10%" }, { label: "Block", value: "+10" }],
    },
  },
};

window.MIX_TABLE = MIX_TABLE; // expor para debug/integração futura

function MixSystem() {
  const [tier, setTier] = React.useState("ancestral");
  const [catId, setCatId] = React.useState("weapon");
  const t = TIERS[tier];
  const cat = CATEGORIES.find(c => c.id === catId);
  const CatIcon = Icons[cat.icon];
  const itemData = MIX_TABLE[catId];
  const bonuses = itemData.bonuses[tier];
  const itemName = itemData.itemName[tier];
  const rarityColor = t.rarity === "legend" ? "var(--legend)" : t.rarity === "epic" ? "var(--epic)" : "var(--rare)";
  const hasRestricted = bonuses.some(b => b.restrict);

  return (
    <section id="mix" className="section mix-section">
      <div className="section-head">
        <div className="eyebrow">sistema exclusivo</div>
        <h2>Sistema Mix</h2>
        <div className="ornament">
          <span className="line"></span>
          <Icons.Gem size={12}/>
          <span className="line"></span>
        </div>
        <p>Combine materiais, runas e relíquias para forjar equipamentos progressivos em três eras de poder.</p>
      </div>

      <div className="mix-tabs">
        {Object.entries(TIERS).map(([k, v]) => (
          <button key={k} className={`mix-tab ${tier === k ? "active" : ""}`} onClick={() => setTier(k)}>
            {v.label}
          </button>
        ))}
      </div>

      <div className="mix-stage">
        <div className="mix-preview">
          <div className="corner tl"></div>
          <div className="corner tr"></div>
          <div className="corner bl"></div>
          <div className="corner br"></div>
          <div className="mix-preview-label">{t.label} · {t.sub}</div>
          <div className="mix-orb"></div>
          <div className="mix-item-display">
            <div className={`mix-item-card ${t.rarity}`}>
              <div className="rune-icon" style={{color: rarityColor}}>
                <CatIcon size={56}/>
              </div>
              <div className="item-tier">{t.label}</div>
              <div className="item-name">{itemName}</div>
            </div>
          </div>
          <div className="mix-preview-stats">
            <span>Lvl <b>{t.levelReq}+</b></span>
            <span>Sigil <b>{t.sigil}</b></span>
            <span>Slot <b>{cat.label}</b></span>
          </div>
        </div>

        <div className="mix-recipe">
          <span className="mix-eyebrow">{t.sub}</span>
          <h3>{t.title}</h3>
          <p className="mix-recipe-desc">{t.desc}</p>

          <div className="mix-items-grid" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
            {CATEGORIES.map(c => {
              const SI = Icons[c.icon];
              return (
                <button key={c.id} className={`mix-slot ${catId === c.id ? "active" : ""}`} onClick={() => setCatId(c.id)}>
                  <SI/>
                  <span className="slot-label">{c.label}</span>
                </button>
              );
            })}
          </div>

          <div className="mix-success">
            <div className="mix-success-row">
              <span className="mix-success-label">Taxa de Sucesso</span>
              <span className="mix-success-value">{t.success}%</span>
            </div>
            <div className="success-bar">
              <div className="fill" style={{ width: `${t.success}%` }}></div>
            </div>
          </div>

          <div className="mix-rewards">
            {bonuses.map((b, i) => (
              <div key={i} className="mix-reward" title={b.restrict ? `Restrito a armas ${b.restrict}` : undefined}>
                <div className="r-label">
                  {b.label}{b.restrict ? <span style={{color:"var(--blood-bright)", marginLeft:"4px"}}>*</span> : null}
                </div>
                <div className={`r-value`} style={{color: rarityColor}}>{b.value}</div>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: "14px",
            padding: "12px 14px",
            border: "1px solid var(--panel-edge-soft)",
            background: "rgba(7,6,10,0.5)",
            fontFamily: "var(--font-mono)",
            fontSize: "10.5px",
            letterSpacing: "0.14em",
            color: "var(--ink-mute)",
            lineHeight: 1.7,
          }}>
            <div style={{color: "var(--gold)", marginBottom: "4px", fontSize: "10px", letterSpacing: "0.28em", textTransform: "uppercase"}}>
              // regras de aplicação
            </div>
            Cada mix possui <b style={{color:"var(--ink)"}}>sua própria receita</b> · 1 tier por item · 1 bônus por receita · sem stack.
            {hasRestricted && (
              <span> · <span style={{color:"var(--blood-bright)"}}>*</span> bônus restrito a categoria específica.</span>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Features, MixSystem });