Airdrop: remove chart, redesign milestones for clarity

[realproject7]

Problem

The current desktop airdrop view has a complex SVG timeline chart (CampaignHero lines 157-496) that is hard to understand. The key message — "as FDV grows, you earn more AND each token is worth more" — is not clear from the current UI.

Users need to instantly understand:

1. There are 4 milestone tiers with different FDV targets
2. Each milestone unlocks a bigger % of the airdrop pool (10% → 30% → 50% → 100%)
3. The pool value itself grows because higher FDV = higher per-PLOT price
4. Missing a milestone means most of the pool gets burned

Solution

Remove the SVG chart entirely. Replace with a segmented progress bar + milestone cards.

Wireframe

┌─────────────────────────────────────────────────────────────┐
│               PLOT Big or Nothing Airdrop                   │
│  50,000 PLOT locked. Reach milestones or it burns forever.  │
│              🔒 View lock-up proof on Basescan              │
│                                                             │
│              142 : 08 : 35 : 12                             │
│              days  hrs   min  sec                            │
└─────────────────────────────────────────────────────────────┘

        Segmented Progress Bar (4 segments = 4 milestones)
 ┌──────────┬──────────┬──────────┬──────────┐
 │▓▓▓▓▓▓▓▓▓▓│░░░░░░░░░░│░░░░░░░░░░│░░░░░░░░░░│
 └──────────┴──────────┴──────────┴──────────┘
  🥉 $1M      🥈 $10M    🥇 $50M    💎 $100M
           ▲ Current: $1,200

 ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐
 │  🥉 Bronze   │ │  🥈 Silver   │ │  🥇 Gold     │ │  💎 Diamond  │
 │              │ │              │ │              │ │              │
 │  FDV  $1M   │ │  FDV  $10M  │ │  FDV  $50M  │ │  FDV  $100M │
 │  ≈ CMC #1900│ │  ≈ CMC #950 │ │  ≈ CMC #400 │ │  ≈ CMC #250 │
 │              │ │              │ │              │ │              │
 │  Unlock 10% │ │  Unlock 30% │ │  Unlock 50% │ │  Unlock 100%│
 │  5,000 PLOT │ │  15,000 PLOT│ │  25,000 PLOT│ │  50,000 PLOT│
 │              │ │              │ │              │ │              │
 │  Pool  ~$5K │ │  Pool ~$150K│ │  Pool ~$1.3M│ │  Pool  ~$5M │
 │  Burn  90%  │ │  Burn  70%  │ │  Burn  50%  │ │  Burn   0%  │
 └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘
    (dimmed)        (dimmed)        (dimmed)        (dimmed)

Design decisions

1. Segmented progress bar instead of linear
A single bar to Diamond makes Bronze look like 1% — discouraging. A 4-segment bar means reaching Bronze fills 25% of the bar. Each segment represents one milestone. The current FDV position is marked with a triangle/arrow indicator below.

2. Streamlined card content (6 lines, not 7)
Removed per-PLOT value — it's just FDV ÷ 1M, which is the same info as the FDV line repackaged. Each card shows:

• Tier emoji + name (header)
• FDV target
• CMC rank (muted, prod only)
• Unlock % + PLOT amount
• Pool USD value at that FDV
• Burn % (the tension — 90% burn at Bronze makes Diamond feel urgent)

3. Burn % creates visual tension
The proposal table shows Pool Burned (90% / 70% / 50% / 0%). This is powerful — at Bronze, 90% of the pool is destroyed. Showing this on each card makes the stakes visceral and motivates pushing for higher milestones.

4. Keep existing elements above cards
Title, description, lock-up proof link (#1003), and countdown timer remain unchanged above the new layout. The 3-column StatsRow (Participants / FDV / Progress) is removed — its info is now redundant with the segmented progress bar and cards.

5. Reached milestone visual treatment

• Reached: accent border, full opacity, checkmark or glow
• Current target (next unreached): normal border, full opacity
• Future: dimmed/muted, reduced opacity

CMC Rank References (prod mode only)

Milestone	FDV	~CMC Rank
Bronze	$1M	~#1900
Silver	$10M	~#950
Gold	$50M	~#400
Diamond	$100M	~#250

Static approximate values. Shown as muted text below FDV. Skipped in test mode.

Responsive behavior

• Desktop: 4 cards in a row
• Tablet: 2×2 grid
• Mobile: 2×2 grid (same as current mobile milestone list, but as cards)

Files to modify

• src/components/airdrop/CampaignHero.tsx — remove TimelineChart (lines 157-496), remove StatsRow, replace with segmented progress bar + milestone cards
• src/components/airdrop/MilestoneTrack.tsx — remove entirely (CampaignHero handles everything)
• All milestone values from API response, not hardcoded — depends on Airdrop: MilestoneTrack uses hardcoded FDV targets instead of config #1004

Acceptance Criteria

• SVG chart removed
• StatsRow removed (info absorbed into new layout)
• Segmented progress bar with 4 milestone segments + current FDV indicator
• 4 milestone cards: FDV target, CMC rank, unlock %, PLOT amount, pool USD value, burn %
• CMC rank shown in prod mode only
• Burn % shown on each card
• Reached milestones visually distinct (accent border/glow)
• Responsive: 4-col desktop, 2×2 mobile
• All values from config (test/prod respected)
• Pool USD values calculated dynamically