import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export default function SupportPage() {
  return (
    <div className="container mx-auto py-10 max-w-4xl">
      <div className="text-center mb-10">
        <h1 className="text-4xl font-bold mb-4">
          Support Memento Development ☕
        </h1>
        <p className="text-muted-foreground text-lg">
          Memento is 100% free and open-source. Your support helps keep it that way.
        </p>
      </div>

      <div className="grid gap-6 md:grid-cols-2 mb-10">
        {/* Ko-fi Card */}
        <Card className="border-2 border-primary">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <span className="text-2xl">☕</span>
              Buy me a coffee
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="mb-4">
              Make a one-time donation or become a monthly supporter.
            </p>
            <Button asChild className="w-full">
              <a href="https://ko-fi.com/yourusername" target="_blank" rel="noopener noreferrer">
                Donate on Ko-fi
              </a>
            </Button>
            <p className="text-xs text-muted-foreground mt-2">
              No platform fees • Instant payouts • Secure
            </p>
          </CardContent>
        </Card>

        {/* GitHub Sponsors Card */}
        <Card className="border-2 border-primary">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <span className="text-2xl">💚</span>
              Sponsor on GitHub
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="mb-4">
              Become a monthly sponsor and get recognition.
            </p>
            <Button asChild variant="outline" className="w-full">
              <a href="https://github.com/sponsors/yourusername" target="_blank" rel="noopener noreferrer">
                Sponsor on GitHub
              </a>
            </Button>
            <p className="text-xs text-muted-foreground mt-2">
              Recurring support • Public recognition • Developer-focused
            </p>
          </CardContent>
        </Card>
      </div>

      {/* How Donations Are Used */}
      <Card className="mb-10">
        <CardHeader>
          <CardTitle>How Your Support Helps</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <h3 className="font-semibold mb-2">💰 Direct Impact</h3>
              <ul className="space-y-2 text-sm">
                <li>☕ Keeps me fueled with coffee</li>
                <li>🐛 Covers hosting and server costs</li>
                <li>✨ Funds development of new features</li>
                <li>📚 Improves documentation</li>
                <li>🌍 Keeps Memento 100% open-source</li>
              </ul>
            </div>
            <div>
              <h3 className="font-semibold mb-2">🎁 Sponsor Perks</h3>
              <ul className="space-y-2 text-sm">
                <li>🥉 $5/month - Bronze: Name in supporters list</li>
                <li>🥈 $15/month - Silver: Priority feature requests</li>
                <li>🥇 $50/month - Gold: Logo in footer, priority support</li>
                <li>💎 $100/month - Platinum: Custom features, consulting</li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Transparency */}
      <Card>
        <CardHeader>
          <CardTitle>💡 Transparency</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm mb-4">
            I believe in complete transparency. Here's how donations are used:
          </p>
          <div className="space-y-2 text-sm">
            <div className="flex justify-between">
              <span>Hosting & servers:</span>
              <span className="font-mono">~$20/month</span>
            </div>
            <div className="flex justify-between">
              <span>Domain & SSL:</span>
              <span className="font-mono">~$15/year</span>
            </div>
            <div className="flex justify-between">
              <span>AI API costs:</span>
              <span className="font-mono">~$30/month</span>
            </div>
            <div className="flex justify-between border-t pt-2">
              <span className="font-semibold">Total expenses:</span>
              <span className="font-mono font-semibold">~$50/month</span>
            </div>
          </div>
          <p className="text-xs text-muted-foreground mt-4">
            Any amount beyond these costs goes directly into improving Memento
            and funding new features. Thank you for your support! 💚
          </p>
        </CardContent>
      </Card>

      {/* Alternative Ways to Support */}
      <div className="mt-10 text-center">
        <h2 className="text-2xl font-bold mb-4">Other Ways to Support</h2>
        <div className="flex flex-wrap justify-center gap-4">
          <Button variant="outline" asChild>
            <a href="https://github.com/yourusername/memento" target="_blank" rel="noopener noreferrer">
              ⭐ Star on GitHub
            </a>
          </Button>
          <Button variant="outline" asChild>
            <a href="https://github.com/yourusername/memento/issues" target="_blank" rel="noopener noreferrer">
              🐛 Report a bug
            </a>
          </Button>
          <Button variant="outline" asChild>
            <a href="https://github.com/yourusername/memento" target="_blank" rel="noopener noreferrer">
              📝 Contribute code
            </a>
          </Button>
          <Button variant="outline" asChild>
            <a href="https://twitter.com/intent/tweet?text=Check%20out%20Memento%20-%20a%20great%20open-source%20note-taking%20app!%20https://github.com/yourusername/memento" target="_blank" rel="noopener noreferrer">
              🐦 Share on Twitter
            </a>
          </Button>
        </div>
      </div>
    </div>
  );
}