import { Component } from '@angular/core';
import { NgFor } from '@angular/common';

interface Tier {
  name: string;
  amount: number;
  icon: string;
  benefits: string[];
}

@Component({
  selector: 'app-donate',
  standalone: true,
  imports: [NgFor],
  templateUrl: './donate.component.html',
  styleUrl: './donate.component.scss',
})
export class DonateComponent {
  readonly tiers: Tier[] = [
    {
      name: 'Seed',
      amount: 5,
      icon: '🌱',
      benefits: [
        'Digital thank-you card',
        'Name listed on our website',
        'Quarterly newsletter',
      ],
    },
    {
      name: 'Stream',
      amount: 15,
      icon: '🎵',
      benefits: [
        'All Seed benefits',
        'KMountain Flower pin',
        'Priority show-request line',
        'Annual station update call',
      ],
    },
    {
      name: 'Ridge',
      amount: 30,
      icon: '🏔️',
      benefits: [
        'All Stream benefits',
        'Official member patch',
        'Exclusive show invitations',
        'Annual station tour',
      ],
    },
    {
      name: 'Summit',
      amount: 60,
      icon: '⭐',
      benefits: [
        'All Ridge benefits',
        'Featured on the Summit Wall',
        'Name on-air during anniversary special',
        'Lifetime patron recognition',
      ],
    },
  ];
}