'use client'

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

export default function SupportPage() {
  const { t } = useLanguage();

  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">
          {t('support.title')}
        </h1>
        <p className="text-muted-foreground text-lg">
          {t('support.description')}
        </p>
      </div>

      <div className="grid gap-6 md:grid-cols-2 mb-10">
        <Card className="border-2 border-primary">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <span className="text-2xl">☕</span>
              {t('support.buyMeACoffee')}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="mb-4">
              {t('support.donationDescription')}
            </p>
            <Button asChild className="w-full">
              <a href="https://ko-fi.com/yourusername" target="_blank" rel="noopener noreferrer">
                {t('support.donateOnKofi')}
              </a>
            </Button>
            <p className="text-xs text-muted-foreground mt-2">
              {t('support.kofiDescription')}
            </p>
          </CardContent>
        </Card>

        <Card className="border-2 border-primary">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <span className="text-2xl">💚</span>
              {t('support.sponsorOnGithub')}
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="mb-4">
              {t('support.sponsorDescription')}
            </p>
            <Button asChild variant="outline" className="w-full">
              <a href="https://github.com/sponsors/yourusername" target="_blank" rel="noopener noreferrer">
                {t('support.sponsorOnGithub')}
              </a>
            </Button>
            <p className="text-xs text-muted-foreground mt-2">
              {t('support.githubDescription')}
            </p>
          </CardContent>
        </Card>
      </div>

      <Card className="mb-10">
        <CardHeader>
          <CardTitle>{t('support.howSupportHelps')}</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <h3 className="font-semibold mb-2">💰 {t('support.directImpact')}</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">🎁 {t('support.sponsorPerks')}</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>

      <Card>
        <CardHeader>
          <CardTitle>💡 {t('support.transparency')}</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm mb-4">
            {t('support.transparencyDescription')}
          </p>
          <div className="space-y-2 text-sm">
            <div className="flex justify-between">
              <span>{t('support.hostingServers')}</span>
              <span className="font-mono">~$20/month</span>
            </div>
            <div className="flex justify-between">
              <span>{t('support.domainSSL')}</span>
              <span className="font-mono">~$15/year</span>
            </div>
            <div className="flex justify-between">
              <span>{t('support.aiApiCosts')}</span>
              <span className="font-mono">~$30/month</span>
            </div>
            <div className="flex justify-between border-t pt-2">
              <span className="font-semibold">{t('support.totalExpenses')}</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>

      <div className="mt-10 text-center">
        <h2 className="text-2xl font-bold mb-4">{t('support.otherWaysTitle')}</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">
              ⭐ {t('support.starGithub')}
            </a>
          </Button>
          <Button variant="outline" asChild>
            <a href="https://github.com/yourusername/memento/issues" target="_blank" rel="noopener noreferrer">
              🐛 {t('support.reportBug')}
            </a>
          </Button>
          <Button variant="outline" asChild>
            <a href="https://github.com/yourusername/memento" target="_blank" rel="noopener noreferrer">
              📝 {t('support.contributeCode')}
            </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">
              🐦 {t('support.shareTwitter')}
            </a>
          </Button>
        </div>
      </div>
    </div>
  );
}