import { useSeoMeta } from '@unhead/react';
import { SupportSkateSpots } from '@/components/SupportSkateSpots';
import { SilentPaymentsCard } from '@/components/SilentPaymentsCard';
import { AngorProjectCard } from '@/components/AngorProjectCard';
import { WaysToSupport } from '@/components/WaysToSupport';
import { useTranslation } from '@/contexts/language';

/**
 * Focused, shareable donation page: the three rails and nothing else.
 * Reuses the same cards as /supporters (via the shared components).
 */
export default function DonatePage() {
  const { t } = useTranslation();
  useSeoMeta({
    title: t('seoUi.donateTitle'),
    description: t('seoUi.donateDesc'),
    ogTitle: 'Support SkateSpots',
    ogDescription: 'Keep the map free, ad-free and open-source.',
    ogImage: 'https://skate-spots.org/images/og-card.png',
  });

  return (
    <div className="container max-w-3xl space-y-6 px-4 py-12 md:py-16">
      <header className="text-center">
        <div className="mb-4 text-6xl">⚡</div>
        <h1 className="mb-3 text-4xl font-black uppercase leading-none md:text-5xl">
          <span className="neon-lime">{t('walletUi.supporters.donateTitle')}</span>
        </h1>
        <p className="mx-auto max-w-lg text-gray-400">{t('walletUi.supporters.donateDesc')}</p>
      </header>

      <WaysToSupport />

      <div id="support-lightning" className="scroll-mt-24">
        <SupportSkateSpots />
      </div>
      <div id="support-silent" className="scroll-mt-24">
        <SilentPaymentsCard />
      </div>
      <div id="support-angor" className="scroll-mt-24">
        <AngorProjectCard />
      </div>
    </div>
  );
}