import { FaCoffee, FaBatteryFull, FaMicrochip } from "react-icons/fa";

import type { ReactNode } from 'react';
type Tier = { id: string; title: string; price: number; desc: string; color: string; icon: ReactNode };

const tiers: Tier[] = [
  { id: 'coffee', title: 'Coffee', price: 3, desc: 'Fuel late-night coding sessions.', color: 'var(--c-other)', icon: <FaCoffee /> },
  { id: 'battery', title: 'Drone Battery', price: 30, desc: 'Extend aerial filming time.', color: 'var(--c-other)', icon: <FaBatteryFull /> },
  { id: 'gpu', title: 'GPU Upgrade', price: 200, desc: 'Speed up rendering and ML tasks.', color: 'var(--c-other)', icon: <FaMicrochip /> },
];

export default function DonationShop() {
  return (
    <section id="shop" className="section">
      <div className="container">
    <h2 className="text-3xl md:text-4xl font-bold mb-2 text-rainbow">Support My Creative Journey</h2>
  <p className="text-brand-text/80">Instead of buying products, consider donating to support my creative journey.</p>
        <div className="grid md:grid-cols-3 gap-6 mt-6">
          {tiers.map(t => (
            <div key={t.id} className="card p-5 flex flex-col">
              <div className="text-5xl mb-3 inline-flex items-center justify-center w-20 h-20 rounded-xl bg-brandGradient text-white shadow-glow">
                {t.icon}
              </div>
              <h3 className="text-xl font-semibold" style={{ color: t.color }}>{t.title}</h3>
              <p className="text-[var(--c-lines)] mt-1">{t.desc}</p>
              <div className="mt-auto flex items-center justify-between pt-4">
                <span className="text-2xl font-bold" style={{ color: t.color }}>${t.price}</span>
                <button className="px-4 py-2 rounded-lg font-semibold text-brand-text bg-gradient-to-r from-[var(--c-other)] to-[var(--c-lines)] hover:shadow-glow transition-all" onClick={() => alert(`Thank you for supporting with ${t.title}!`)}>Donate</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}