import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

export const GivesBackProgram = () => {
  return (
    <Card className="shadow-lg border-0 bg-gradient-to-br from-card to-muted/50">
      <CardHeader className="pb-4">
        <h2 className="text-2xl font-bold text-foreground">Program Details</h2>
        <p className="text-muted-foreground">How our weekly cash award program works</p>
      </CardHeader>
      <CardContent className="p-6 space-y-4">
        <div className="prose max-w-none">
          <p className="text-muted-foreground">
            Each week, select members are chosen at random to receive cash awards. Winners are notified 
            by email and text, and featured on our website.
          </p>
        </div>

        <div className="bg-muted/50 rounded-lg p-4">
          <h3 className="text-lg font-semibold mb-3 text-foreground">Eligibility Requirements:</h3>
          <div className="grid sm:grid-cols-3 gap-3 text-sm">
            <div className="flex items-center gap-2">
              <div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs">✓</div>
              <span>Active account</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs">✓</div>
              <span>3 favorited grants</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs">✓</div>
              <span>Verified contact info</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};