Enhance Indexer page with sorting functionality and size/age parsing; update News and Settings pages for improved layout and responsiveness; implement subscription tiers and donation options on Upgrade page.

app/news/page.tsx

@@ -62,9 +62,9 @@ export default function NewsPage() {
   // };
 
   return (
-    <div className="container mx-auto p-4 py-8 md:py-12 space-y-8">
+    <div className="container mx-auto p-4 py-8 md:py-12 lg:py-16 xl:max-w-7xl space-y-8 lg:space-y-10">
-      <div className="flex justify-between items-center mb-6">
+      <div className="flex justify-between items-center mb-6 lg:mb-8">
-        <h1 className="text-3xl font-bold tracking-tight">Site News & Announcements</h1>
+        <h1 className="text-3xl lg:text-4xl font-bold tracking-tight">Site News & Announcements</h1>
         <div className="space-x-2">
           <Link href="/upgrade" passHref>
             <Button variant="ghost">Upgrade</Button>
@@ -78,11 +78,11 @@ export default function NewsPage() {
         </div>
       </div>
 
-      <div className="space-y-6">
+      <div className="space-y-6 lg:space-y-8">
         {mockNewsData.map((article) => (
           <Card key={article.id} className="shadow-md hover:shadow-lg transition-shadow duration-200">
             <CardHeader>
-              <CardTitle>{article.title}</CardTitle>
+              <CardTitle className="text-xl lg:text-2xl">{article.title}</CardTitle>
               <CardDescription>
                 Posted by {article.author} on {article.date}
               </CardDescription>

app/page.tsx

@@ -29,7 +29,8 @@ import {
 } from "@/components/ui/carousel";
 import Autoplay from "embla-carousel-autoplay";
 import { Card, CardContent } from "@/components/ui/card";
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useMemo } from "react";
+import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
 
 // Mock data structure
 interface NzbItem {
@@ -63,9 +64,45 @@ const PlaceholderCarouselImage = ({ text }: { text: string }) => (
   </div>
 );
 
+// Helper function to parse size string (e.g., "1.2 GB") to bytes
+const parseSizeToBytes = (sizeStr: string): number => {
+  const parts = sizeStr.toLowerCase().split(" ");
+  if (parts.length !== 2) return 0;
+  const value = parseFloat(parts[0]);
+  const unit = parts[1];
+  if (isNaN(value)) return 0;
+
+  if (unit.startsWith("kb")) return value * 1024;
+  if (unit.startsWith("mb")) return value * 1024 * 1024;
+  if (unit.startsWith("gb")) return value * 1024 * 1024 * 1024;
+  if (unit.startsWith("tb")) return value * 1024 * 1024 * 1024 * 1024;
+  return value; // Assuming bytes if no unit or unknown unit
+};
+
+// Helper function to parse age string (e.g., "3 days", "5 hours") to a consistent unit (e.g., minutes)
+const parseAgeToMinutes = (ageStr: string): number => {
+  const parts = ageStr.toLowerCase().split(" ");
+  if (parts.length !== 2) return 0;
+  const value = parseInt(parts[0]);
+  const unit = parts[1];
+  if (isNaN(value)) return 0;
+
+  if (unit.startsWith("minute")) return value;
+  if (unit.startsWith("hour")) return value * 60;
+  if (unit.startsWith("day")) return value * 60 * 24;
+  if (unit.startsWith("week")) return value * 60 * 24 * 7;
+  if (unit.startsWith("month")) return value * 60 * 24 * 30; // Approximate
+  if (unit.startsWith("year")) return value * 60 * 24 * 365; // Approximate
+  return 0;
+};
+
 export default function IndexerPage() {
   const categories = ["All", "Movies", "Series", "Anime", "Music"];
   const [selectedItem, setSelectedItem] = useState<NzbItem | null>(null);
+  const [activeTab, setActiveTab] = useState<string>("All");
+
+  const [sortColumn, setSortColumn] = useState<keyof NzbItem | null>(null);
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
 
   // Autoplay plugin ref
   const autoplayPlugin = useRef(
@@ -151,10 +188,45 @@ export default function IndexerPage() {
       },
   ];
 
-  // Filter data based on category (simple filter for now)
+  const handleSort = (column: keyof NzbItem) => {
-  const getFilteredData = (category: string) => {
+    if (sortColumn === column) {
-    if (category === "All") return mockNzbData;
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
-    return mockNzbData.filter((item) => item.category === category);
+    } else {
+      setSortColumn(column);
+      setSortDirection('asc');
+    }
+  };
+
+  const sortedData = useMemo(() => {
+    let dataToFilter = activeTab === "All" ? mockNzbData : mockNzbData.filter(item => item.category === activeTab);
+    if (!sortColumn) return dataToFilter;
+
+    const currentSortColumn = sortColumn as keyof NzbItem;
+
+    return [...dataToFilter].sort((a, b) => {
+      const aVal = a[currentSortColumn];
+      const bVal = b[currentSortColumn];
+
+      let comparison = 0;
+
+      if (currentSortColumn === 'size') {
+        comparison = parseSizeToBytes(aVal as string) - parseSizeToBytes(bVal as string);
+      } else if (currentSortColumn === 'age') {
+        comparison = parseAgeToMinutes(aVal as string) - parseAgeToMinutes(bVal as string);
+      } else if (typeof aVal === 'number' && typeof bVal === 'number') {
+        comparison = aVal - bVal;
+      } else if (typeof aVal === 'string' && typeof bVal === 'string') {
+        comparison = aVal.localeCompare(bVal);
+      }
+
+      return sortDirection === 'asc' ? comparison : -comparison;
+    });
+  }, [mockNzbData, activeTab, sortColumn, sortDirection]);
+
+  const getSortIcon = (column: keyof NzbItem) => {
+    if (sortColumn !== column) return <ArrowUpDown className="ml-2 h-4 w-4" />;
+    if (sortDirection === 'asc') return <ArrowUp className="ml-2 h-4 w-4 text-primary" />;
+    return <ArrowDown className="ml-2 h-4 w-4 text-primary" />;
   };
 
   return (
@@ -212,7 +284,7 @@ export default function IndexerPage() {
         </Carousel>
       </div>
 
-      <Tabs defaultValue="All" className="w-full">
+      <Tabs defaultValue="All" className="w-full" onValueChange={setActiveTab}>
         <TabsList className="mb-4">
           {categories.map((category) => (
             <TabsTrigger key={category} value={category}>
@@ -221,29 +293,32 @@ export default function IndexerPage() {
           ))}
         </TabsList>
 
-        {categories.map((category) => (
-          <TabsContent key={category} value={category}>
-            <div className="flex w-full max-w-sm items-center space-x-2 mb-4">
-              <Input type="text" placeholder={`Search in ${category}...`} />
-              <Button type="submit">Search</Button>
-            </div>
         <Table>
             <TableCaption>
-                {category === "All"
+            {activeTab === "All"
-                  ? "A list of NZBs."
+                ? "A list of all NZBs."
-                  : `Results for ${category}.`}
+                : `Results for ${activeTab}.`}
+            {sortColumn && ` Sorted by ${sortColumn} (${sortDirection === 'asc' ? 'ascending' : 'descending'}).`}
             </TableCaption>
             <TableHeader>
             <TableRow>
-                  <TableHead className="w-[35%]">Name</TableHead>
+                <TableHead className="w-[35%] cursor-pointer hover:bg-muted/50 transition-colors" onClick={() => handleSort('name')}>
-                  <TableHead>Size</TableHead>
+                    <div className="flex items-center">Name {getSortIcon('name')}</div>
-                  <TableHead>Age</TableHead>
+                </TableHead>
-                  <TableHead>Downloads</TableHead>
+                <TableHead className="cursor-pointer hover:bg-muted/50 transition-colors" onClick={() => handleSort('size')}>
+                    <div className="flex items-center">Size {getSortIcon('size')}</div>
+                </TableHead>
+                <TableHead className="cursor-pointer hover:bg-muted/50 transition-colors" onClick={() => handleSort('age')}>
+                    <div className="flex items-center">Age {getSortIcon('age')}</div>
+                </TableHead>
+                <TableHead className="cursor-pointer hover:bg-muted/50 transition-colors" onClick={() => handleSort('downloads')}>
+                    <div className="flex items-center">Downloads {getSortIcon('downloads')}</div>
+                </TableHead>
                 <TableHead className="text-right">Actions</TableHead>
             </TableRow>
             </TableHeader>
             <TableBody>
-                {getFilteredData(category).map((item) => (
+            {sortedData.map((item) => (
                 <TableRow key={item.id}>
                 <TableCell className="font-medium">{item.name}</TableCell>
                 <TableCell>{item.size}</TableCell>
@@ -261,8 +336,6 @@ export default function IndexerPage() {
             ))}
             </TableBody>
         </Table>
-          </TabsContent>
-        ))}
       </Tabs>
 
       {/* Dialog for NZB Info - controlled by selectedItem state */}

app/settings/page.tsx

@@ -26,9 +26,9 @@ export default function SettingsPage() {
   const manualDownloadsPercentage = (userStats.manualDownloadsToday / userStats.manualDownloadLimitDaily) * 100;
 
   return (
-    <div className="container mx-auto p-4 py-8 md:py-12 space-y-8">
+    <div className="container mx-auto p-4 py-8 md:py-12 lg:py-16 xl:max-w-7xl space-y-8 lg:space-y-10">
-      <div className="flex justify-between items-center mb-6">
+      <div className="flex justify-between items-center mb-6 lg:mb-8">
-        <h1 className="text-3xl font-bold">User Settings</h1>
+        <h1 className="text-3xl lg:text-4xl font-bold">User Settings</h1>
         <div className="space-x-2">
           <Link href="/news" passHref>
             <Button variant="ghost">News</Button>
@@ -42,10 +42,12 @@ export default function SettingsPage() {
         </div>
       </div>
 
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10">
+        <div className="lg:col-span-2 space-y-8 lg:space-y-10">
           {/* User Statistics Card */}
-      <Card>
+          <Card className="shadow-sm">
             <CardHeader>
-          <CardTitle>Your Statistics</CardTitle>
+              <CardTitle className="text-xl lg:text-2xl">Your Statistics</CardTitle>
               <CardDescription>Overview of your account activity and limits.</CardDescription>
             </CardHeader>
             <CardContent className="space-y-6">
@@ -83,9 +85,9 @@ export default function SettingsPage() {
             </CardFooter>
           </Card>
 
-      <Card>
+          <Card className="shadow-sm">
             <CardHeader>
-          <CardTitle>Account Information</CardTitle>
+              <CardTitle className="text-xl lg:text-2xl">Account Information</CardTitle>
               <CardDescription>Manage your account details.</CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
@@ -107,9 +109,9 @@ export default function SettingsPage() {
             </CardFooter>
           </Card>
 
-      <Card>
+          <Card className="shadow-sm">
             <CardHeader>
-          <CardTitle>API Key</CardTitle>
+              <CardTitle className="text-xl lg:text-2xl">API Key</CardTitle>
               <CardDescription>
                 Manage your API key for external applications.
               </CardDescription>
@@ -133,10 +135,12 @@ export default function SettingsPage() {
               <Button variant="secondary" disabled>Regenerate API Key (Not Implemented)</Button>
             </CardFooter>
           </Card>
+        </div>
 
-      <Card className="border-destructive">
+        <div className="lg:col-span-1 space-y-8 lg:space-y-10">
+        <Card className="border-destructive shadow-sm">
           <CardHeader>
-          <CardTitle className="text-destructive">Danger Zone</CardTitle>
+            <CardTitle className="text-xl lg:text-2xl text-destructive">Danger Zone</CardTitle>
             <CardDescription>
               Permanent actions that cannot be undone.
             </CardDescription>
@@ -148,5 +152,7 @@ export default function SettingsPage() {
           </CardContent>
         </Card>
         </div>
+      </div>
+    </div>
   );
 } 

app/upgrade/page.tsx

@@ -1,3 +1,5 @@
+'use client'; // Make it a client component
+
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -5,9 +7,12 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
+  CardFooter,
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import Link from "next/link";
+import { CheckCircle2, RadioTower } from "lucide-react"; // Added RadioTower for selection indication
+import React, { useState } from "react"; // Import useState
 
 // Placeholder SVG for QR Code
 const PlaceholderQrCode = () => (
@@ -25,47 +30,205 @@ const PlaceholderQrCode = () => (
   </svg>
 );
 
+interface SubscriptionTier {
+  id: string;
+  name: string;
+  priceDisplay: string; // e.g., "Free", "$5"
+  priceUSD: number;    // Numeric price for calculations
+  priceDescription?: string;
+  features: string[];
+  ctaText: string;
+  isCurrentPlan?: boolean;
+  highlight?: boolean;
+  buttonVariant?: "default" | "outline" | "secondary" | "ghost" | "link";
+}
+
+const subscriptionTiersData: SubscriptionTier[] = [
+  {
+    id: "free",
+    name: "Basic Access",
+    priceDisplay: "Free",
+    priceUSD: 0,
+    features: [
+      "5 API hits/day",
+      "10 Manual downloads/day",
+      "Access to common categories",
+      "30-day access",
+      "Community support",
+    ],
+    ctaText: "Current Plan",
+    isCurrentPlan: true,
+    buttonVariant: "outline",
+  },
+  {
+    id: "pro",
+    name: "Pro User",
+    priceDisplay: "$15",
+    priceUSD: 5,
+    priceDescription: "/ year",
+    features: [
+      "500 API hits/day",
+      "100 Manual downloads/day",
+      "Access to all categories",
+      "Priority support",
+      "Early access to new features",
+    ],
+    ctaText: "Select Pro Plan",
+    highlight: true,
+    buttonVariant: "default",
+  },
+  {
+    id: "elite",
+    name: "Elite Contributor",
+    priceDisplay: "$25",
+    priceUSD: 10,
+    priceDescription: "/ year",
+    features: [
+      "Unlimited API hits/day",
+      "Unlimited Manual downloads/day",
+      "Access to all categories & archives",
+      "Dedicated VIP support",
+      "Direct influence on feature roadmap",
+      "Special badge in community",
+    ],
+    ctaText: "Select Elite Plan",
+    buttonVariant: "default",
+  },
+];
+
+// Placeholder conversion rates - replace with actual or dynamic rates if needed
+const XMR_PER_USD = 0.005;
+const LTC_PER_USD = 0.01;
+
 export default function UpgradePage() {
+  const [selectedTierId, setSelectedTierId] = useState<string | null>("pro");
+
   const xmrAddress = "4YOURXMRADDRESSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
   const ltcAddress = "LYOURLTCADDRESSXXXXXXXXXXXXXXXXXXXXXXX";
 
-  return (
+  const selectedTier = subscriptionTiersData.find(tier => tier.id === selectedTierId);
-    <div className="container mx-auto p-4 py-8 md:py-12 space-y-8">
-      <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold tracking-tight">Support & Upgrade</h1>
-        <div className="space-x-2">
-          <Link href="/news" passHref>
-            <Button variant="ghost">News</Button>
-          </Link>
-          <Link href="/settings" passHref>
-            <Button variant="ghost">Settings</Button>
-          </Link>
-          <Link href="/" passHref>
-            <Button variant="outline">Back to Indexer</Button>
-          </Link>
-        </div>
-      </div>
-      <CardDescription className="text-center text-xl text-muted-foreground max-w-2xl mx-auto">
-        If you find this NZB Indexer useful, please consider supporting its development and maintenance.
-        Your contributions help keep the servers running and allow us to introduce new features!
-      </CardDescription>
 
-      <div className="grid md:grid-cols-2 gap-10">
+  const getCryptoAmount = (usdAmount: number, rate: number, applyDiscount: boolean = false) => {
-        {/* Monero (XMR) Card */}
+    if (usdAmount <= 0) return "N/A";
-        <Card className="shadow-[0_8px_30px_rgb(160,32,240,0.3)] hover:shadow-[0_12px_40px_rgb(160,32,240,0.4)] transition-all duration-300 ease-out">
+    let finalUsdAmount = usdAmount;
-          <CardHeader className="pb-4">
+    if (applyDiscount) {
-            <div className="flex items-center justify-between">
+      finalUsdAmount *= 0.9; // Apply 10% discount
-                <CardTitle className="text-2xl font-semibold">Monero (XMR)</CardTitle>
+    }
-                {/* Optional: XMR Icon can go here */}
+    return (finalUsdAmount * rate).toFixed(5); // Show 5 decimal places for crypto
+  };
+
+  const isEliteXMRDiscountActive = selectedTier && selectedTier.id === 'elite';
+
+  const currentXMRAmount = selectedTier ? getCryptoAmount(selectedTier.priceUSD, XMR_PER_USD, isEliteXMRDiscountActive) : "Select a plan";
+  const originalXMRAmount = selectedTier ? getCryptoAmount(selectedTier.priceUSD, XMR_PER_USD) : "N/A";
+  const currentLTCAmount = selectedTier ? getCryptoAmount(selectedTier.priceUSD, LTC_PER_USD) : "Select a plan";
+  
+  const handleTierSelect = (tierId: string) => {
+    const tier = subscriptionTiersData.find(t => t.id === tierId);
+    if (tier && !tier.isCurrentPlan) {
+        setSelectedTierId(tierId);
+    } else if (tier && tier.isCurrentPlan) {
+        setSelectedTierId(null);
+    }
+  };
+
+  return (
+    <div className="container mx-auto p-4 py-8 md:py-12 lg:py-16 xl:max-w-7xl space-y-12 lg:space-y-16">
+      <div className="flex justify-between items-center mb-6 lg:mb-8">
+        <h1 className="text-3xl lg:text-4xl font-bold tracking-tight">Support & Upgrade</h1>
+        <div className="space-x-2">
+          <Link href="/news" passHref><Button variant="ghost">News</Button></Link>
+          <Link href="/settings" passHref><Button variant="ghost">Settings</Button></Link>
+          <Link href="/" passHref><Button variant="outline">Back to Indexer</Button></Link>
         </div>
+      </div>
+    
+
+      <section className="space-y-8 lg:space-y-10 p-6 lg:p-8 rounded-xl bg-card/20 shadow-sm">
+        <div className="text-center">
+            <h2 className="text-2xl lg:text-3xl font-semibold tracking-tight">Choose Your Plan</h2>
+            <p className="text-muted-foreground mt-2 lg:mt-3">
+                Select a plan to proceed with the donation.
+            </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
+          {subscriptionTiersData.map((tier) => (
+            <Card 
+              key={tier.id} 
+              className={`flex flex-col cursor-pointer transition-all duration-200 
+                          ${selectedTierId === tier.id ? 'border-primary ring-2 ring-primary shadow-[0_8px_30px_rgb(var(--primary-hsl)/0.4)]' : 
+                           (tier.highlight && !tier.isCurrentPlan && selectedTierId !== 'elite') ? 'border-primary/70 shadow-[0_8px_30px_rgb(var(--primary-hsl)/0.2)]' : 'shadow-md'}
+                           ${tier.isCurrentPlan ? 'border-dashed' : ''}
+                         `}
+              onClick={() => handleTierSelect(tier.id)}
+            >
+              <CardHeader className="pb-4 relative">
+                {selectedTierId === tier.id && (
+                    <RadioTower className="absolute top-3 right-3 h-5 w-5 text-primary" />
+                )}
+                <CardTitle className={`text-xl font-semibold ${ (tier.highlight && !tier.isCurrentPlan && selectedTierId !== 'elite') || selectedTierId === tier.id ? 'text-primary' : ''}`}>{tier.name}</CardTitle>
+                <div className="flex items-baseline">
+                    <span className="text-3xl font-extrabold tracking-tight">{tier.priceDisplay}</span>
+                    {tier.priceDescription && <span className="ml-1 text-sm text-muted-foreground">{tier.priceDescription}</span>}
+                </div>
+              </CardHeader>
+              <CardContent className="flex-grow space-y-3 pt-2">
+                <ul className="space-y-2">
+                  {tier.features.map((feature, index) => (
+                    <li key={index} className="flex items-center text-sm">
+                      <CheckCircle2 className={`mr-2 h-4 w-4 flex-shrink-0 ${selectedTierId === tier.id || (tier.highlight && !tier.isCurrentPlan && selectedTierId !== 'elite') ? 'text-primary' : 'text-green-500'}`} />
+                      {feature}
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+              <CardFooter className="mt-auto pt-6">
+                <Button 
+                    className="w-full" 
+                    variant={tier.isCurrentPlan ? "outline" : selectedTierId === tier.id ? "default" : (tier.highlight && selectedTierId !== 'elite') ? "default" : "outline"}
+                    disabled={tier.isCurrentPlan}
+                    onClick={(e) => {
+                        if (!tier.isCurrentPlan) {
+                            e.stopPropagation();
+                            handleTierSelect(tier.id);
+                        }
+                    }}
+                >
+                  {tier.isCurrentPlan ? "Current Plan" : selectedTierId === tier.id ? "Selected" : tier.ctaText}
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+        <div className="text-center">
+            <p className="text-muted-foreground mt-2">
+              {selectedTier 
+                ? `To support the ${selectedTier.name} tier (${selectedTier.priceDisplay}${selectedTier.priceDescription || ''}), please donate the equivalent amount shown below.`
+                : ""}
+            </p>
+        </div>
+        <div className="grid md:grid-cols-2 gap-10">
+            <Card className={`transition-all duration-300 ease-in-out rounded-lg border hover:border-primary/70 
+                          ${selectedTier && selectedTier.priceUSD > 0 ? 'border-primary/50 ring-2 ring-primary shadow-[0_10px_35px_rgb(var(--primary-hsl)/0.4)] hover:shadow-[0_12px_40px_rgb(var(--primary-hsl)/0.5)]' : 'border-border/30 opacity-70 hover:opacity-90'}`}>
+                <CardHeader className="pb-4">
+                    <CardTitle className="text-2xl font-semibold">Monero (XMR)</CardTitle>
                     <CardDescription className="pt-1">
-              Donate Monero for private, untraceable support.
+                        {selectedTier && selectedTier.priceUSD > 0 
+                          ? (
+                            <>
+                              {isEliteXMRDiscountActive && (
+                                <span className="block text-xs font-semibold text-green-500 mb-1">
+                                  10% DISCOUNT
+                                </span>
+                              )}
+                              Suggested for {selectedTier.name}: ~{currentXMRAmount} XMR
+                            </>
+                          )
+                          : "Donate Monero for private, untraceable support."}
                     </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-6 text-center pt-4">
-            <div className="flex justify-center my-6">
+                    <div className="flex justify-center my-6"><PlaceholderQrCode /></div>
-              <PlaceholderQrCode />
-            </div>
                     <p className="text-sm font-medium text-foreground/90">XMR Address:</p>
                     <div className="flex items-center space-x-2">
                         <Input type="text" value={xmrAddress} readOnly className="text-xs bg-background/30 border-foreground/20" />
@@ -76,22 +239,18 @@ export default function UpgradePage() {
                     </p>
                 </CardContent>
             </Card>
-
+            <Card className={`transition-all duration-300 ease-in-out rounded-lg border hover:border-primary/70 
-        {/* Litecoin (LTC) Card */}
+                          ${selectedTier && selectedTier.priceUSD > 0 ? 'border-primary/50 ring-2 ring-primary shadow-[0_10px_35px_rgb(var(--primary-hsl)/0.4)] hover:shadow-[0_12px_40px_rgb(var(--primary-hsl)/0.5)]' : 'border-border/30 opacity-70 hover:opacity-90'}`}>
-        <Card className="shadow-[0_8px_30px_rgb(56,189,248,0.3)] hover:shadow-[0_12px_40px_rgb(56,189,248,0.4)] transition-all duration-300 ease-out">
                 <CardHeader className="pb-4">
-            <div className="flex items-center justify-between">
                     <CardTitle className="text-2xl font-semibold">Litecoin (LTC)</CardTitle>
-                {/* Optional: LTC Icon can go here */}
-            </div>
                     <CardDescription className="pt-1">
-              Donate Litecoin for fast and low-fee transactions.
+                        {selectedTier && selectedTier.priceUSD > 0 
+                          ? `Suggested for ${selectedTier.name}: ~${currentLTCAmount} LTC`
+                          : "Donate Litecoin for fast and low-fee transactions."}
                     </CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-6 text-center pt-4">
-            <div className="flex justify-center my-6">
+                    <div className="flex justify-center my-6"><PlaceholderQrCode /></div>
-              <PlaceholderQrCode />
-            </div>
                     <p className="text-sm font-medium text-foreground/90">LTC Address:</p>
                     <div className="flex items-center space-x-2">
                         <Input type="text" value={ltcAddress} readOnly className="text-xs bg-background/30 border-foreground/20" />
@@ -103,6 +262,73 @@ export default function UpgradePage() {
                 </CardContent>
             </Card>
         </div>
+      </section>
+
+      <section className="space-y-8 lg:space-y-10 p-6 lg:p-8 rounded-xl bg-card/20 shadow-sm">
+        <div className="text-center pb-4 border-b border-border/50 mb-6 lg:mb-8" >
+            <h2 className="text-2xl lg:text-3xl font-semibold tracking-tight">Or, Make a One-Time Donation</h2>
+            <p className="text-muted-foreground mt-2 lg:mt-3">
+                {selectedTier && selectedTier.priceUSD > 0 
+                    ? `You've selected the ${selectedTier.name} plan. Suggested donation amounts are shown below.`
+                    : "Support our project with a custom crypto donation." }
+            </p>
+        </div>
+        <div className="grid md:grid-cols-2 lg:grid-cols-2 gap-8 lg:gap-12 xl:gap-16">
+            <Card className={`transition-all duration-300 ease-in-out rounded-lg border hover:border-primary/70 
+                          ${selectedTier && selectedTier.priceUSD > 0 ? 'border-primary/50 ring-2 ring-primary shadow-[0_10px_35px_rgb(var(--primary-hsl)/0.4)] hover:shadow-[0_12px_40px_rgb(var(--primary-hsl)/0.5)]' : 'border-border/30 opacity-70 hover:opacity-90'}`}>
+                <CardHeader className="pb-4">
+                    <CardTitle className="text-2xl font-semibold">Monero (XMR)</CardTitle>
+                    <CardDescription className="pt-1">
+                        {selectedTier && selectedTier.priceUSD > 0 
+                          ? (
+                            <>
+                              {isEliteXMRDiscountActive && (
+                                <span className="block text-xs font-semibold text-green-500 mb-1">
+                                  10% DISCOUNT
+                                </span>
+                              )}
+                              Suggested for {selectedTier.name}: ~{currentXMRAmount} XMR
+                            </>
+                          )
+                          : "Donate Monero for private, untraceable support."}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-6 text-center pt-4">
+                    <div className="flex justify-center my-6"><PlaceholderQrCode /></div>
+                    <p className="text-sm font-medium text-foreground/90">XMR Address:</p>
+                    <div className="flex items-center space-x-2">
+                        <Input type="text" value={xmrAddress} readOnly className="text-xs bg-background/30 border-foreground/20" />
+                        <Button variant="outline" size="sm" disabled>Copy</Button>
+                    </div>
+                    <p className="text-xs text-muted-foreground pt-2">
+                      Ensure you are sending XMR to this address. Transactions are irreversible.
+                    </p>
+                </CardContent>
+            </Card>
+            <Card className={`transition-all duration-300 ease-in-out rounded-lg border hover:border-primary/70 
+                          ${selectedTier && selectedTier.priceUSD > 0 ? 'border-primary/50 ring-2 ring-primary shadow-[0_10px_35px_rgb(var(--primary-hsl)/0.4)] hover:shadow-[0_12px_40px_rgb(var(--primary-hsl)/0.5)]' : 'border-border/30 opacity-70 hover:opacity-90'}`}>
+                <CardHeader className="pb-4">
+                    <CardTitle className="text-2xl font-semibold">Litecoin (LTC)</CardTitle>
+                    <CardDescription className="pt-1">
+                        {selectedTier && selectedTier.priceUSD > 0 
+                          ? `Suggested for ${selectedTier.name}: ~${currentLTCAmount} LTC`
+                          : "Donate Litecoin for fast and low-fee transactions."}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-6 text-center pt-4">
+                    <div className="flex justify-center my-6"><PlaceholderQrCode /></div>
+                    <p className="text-sm font-medium text-foreground/90">LTC Address:</p>
+                    <div className="flex items-center space-x-2">
+                        <Input type="text" value={ltcAddress} readOnly className="text-xs bg-background/30 border-foreground/20" />
+                        <Button variant="outline" size="sm" disabled>Copy</Button>
+                    </div>
+                     <p className="text-xs text-muted-foreground pt-2">
+                      Ensure you are sending LTC to this address. Transactions are irreversible.
+                    </p>
+                </CardContent>
+            </Card>
+        </div>
+      </section>
     </div>
   );
 }