/* Weapon showcase — "Choose Your Poison" */
function CrtWeapons() {
  const t = window.TWEAKS;
  const bp = window.useBreakpoint();

  const rarityColor = {
    COMMON: t.cream,
    RARE: t.accentCyan,
    CURSED: t.accentMagenta,
  };

  const weapons = [
    {
      name: 'ESPRESSO PISTOL',
      rarity: 'COMMON',
      tagline: 'One shot. No milk. No mercy.',
      img: 'assets/weapons/espresso-pistol.png?v=7',
      stats: [
        { label: '12 damage · 2 shots/sec · 200px range', positive: true },
        { label: 'Damage scales +30% at Optimal Zone (50–80% caffeine)', positive: true },
        { label: 'no trade-off · reliable baseline', positive: null },
      ],
      pick: 'safe pick',
    },
    {
      name: 'LATTE LAUNCHER',
      rarity: 'RARE',
      tagline: 'Frothed. Pressurized. Extremely your problem.',
      img: 'assets/weapons/latte-launcher.png?v=7',
      stats: [
        { label: '35 AOE damage · 80px blast radius on impact', positive: true },
        { label: 'Blast radius grows with caffeine level above 50%', positive: true },
        { label: 'Active skill [Space] — costs 15 caffeine per shot · 1.0s cooldown', positive: false },
      ],
      pick: 'crowd clearer',
    },
    {
      name: 'COLD BREW CANNON',
      rarity: 'RARE',
      tagline: 'Cold-pressed. Slow-burn. Wide-spread.',
      img: 'assets/weapons/cold-brew-cannon.png?v=7',
      stats: [
        { label: 'Sustained beam · 25 dps · 240px range', positive: true },
        { label: 'Slows on hit — stacks with overdose damage', positive: true },
        { label: 'Charge-up 0.4s before fire · cannot move while firing', positive: false },
      ],
      pick: 'control freak',
    },
    {
      name: 'MACCHIATO MORTAR',
      rarity: 'RARE',
      tagline: 'Lobbed. Layered. Lethal on the descent.',
      img: 'assets/weapons/macchiato-mortar.png?v=7',
      stats: [
        { label: 'Arc projectile · 50 damage on impact + 15 splash', positive: true },
        { label: 'Hits over walls / obstacles — true indirect fire', positive: true },
        { label: '1.5s travel time · slow targets escape', positive: false },
      ],
      pick: 'siege specialist',
    },
    {
      name: 'DECAF SHOTGUN',
      rarity: 'CURSED',
      tagline: 'You should leave this where you found it.',
      img: 'assets/weapons/decaf-shotgun.png?v=7',
      stats: [
        { label: '60° spread · high pellet count · strong knockback', positive: true },
        { label: 'No cooldown — fire as fast as you pull the trigger', positive: true },
        { label: 'Each shot drains 5% caffeine · no reduction possible · no cap', positive: false },
      ],
      pick: 'cursed gambit',
    },
  ];

  return (
    <CrtSection id="weapons" tag="S01b :: WEAPONS" title="CHOOSE YOUR POISON.">
      <div style={{ display: 'grid', gridTemplateColumns: bp.isNarrow ? '1fr' : bp.isTablet ? 'repeat(2, 1fr)' : 'repeat(5, 1fr)', gap: 12 }}>
        {weapons.map((w) => {
          const rc = rarityColor[w.rarity];
          return (
            <div key={w.name} style={{ border: `1px solid ${rc}44`, background: 'rgba(0,0,0,0.4)', display: 'flex', flexDirection: 'column' }}>
              {/* weapon image */}
              <div style={{ position: 'relative', aspectRatio: '4 / 3', overflow: 'hidden', borderBottom: `1px solid ${rc}33` }}>
                <img
                  src={w.img}
                  alt={w.name}
                  style={{ width: '100%', height: '100%', objectFit: 'contain', padding: 24, filter: 'drop-shadow(0 0 16px rgba(255,179,71,0.3))' }}
                />
                <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 3px)', pointerEvents: 'none' }} />
                {/* rarity tag */}
                <div style={{ position: 'absolute', top: 10, left: 10, fontSize: 10, color: rc, letterSpacing: '0.2em', border: `1px solid ${rc}`, padding: '3px 8px' }}>
                  {w.rarity}
                </div>
              </div>

              {/* card body */}
              <div style={{ padding: '16px 18px 20px', flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ fontFamily: '"Oswald",sans-serif', color: rc, fontSize: 17, letterSpacing: '0.06em' }}>{w.name}</div>
                <div style={{ fontSize: 12, color: '#a88250', fontStyle: 'italic', lineHeight: 1.4 }}>{w.tagline}</div>

                {/* stats */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 5, marginTop: 4 }}>
                  {w.stats.map((s, i) => (
                    <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12 }}>
                      <span style={{ color: s.positive === true ? '#55d088' : s.positive === false ? '#ff3d2e' : '#6e5a44', flexShrink: 0, marginTop: 1 }}>
                        {s.positive === true ? '▲' : s.positive === false ? '▼' : '─'}
                      </span>
                      <span style={{ color: s.positive === false ? '#c96655' : '#c9b896', lineHeight: 1.4 }}>{s.label}</span>
                    </div>
                  ))}
                </div>

                {/* pick label */}
                <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: `1px dashed ${rc}33`, fontSize: 11, color: rc, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                  &gt; {w.pick}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </CrtSection>
  );
}

window.CrtWeapons = CrtWeapons;