import { Lock, Database, Search, Save } from "lucide-react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

const AIVault = () => {
  return (
    <div className="max-w-6xl mx-auto">
      <div className="flex items-center gap-3 mb-6">
        <Lock className="h-8 w-8 text-blue-800" />
        <h1 className="text-3xl font-bold">AI Application Questions Vault</h1>
      </div>
      
      <Card className="mb-8">
        <CardHeader>
          <CardTitle>Your Personal Answer Vault</CardTitle>
          <CardDescription>
            One vault, all your answers — ready for any funding application, anytime
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid md:grid-cols-3 gap-6">
            <div className="text-center">
              <Database className="h-12 w-12 text-primary mx-auto mb-2" />
              <h3 className="font-semibold">Centralized Storage</h3>
              <p className="text-sm text-muted-foreground">All your answers in one secure location</p>
            </div>
            <div className="text-center">
              <Search className="h-12 w-12 text-primary mx-auto mb-2" />
              <h3 className="font-semibold">Smart Search</h3>
              <p className="text-sm text-muted-foreground">Find the perfect answer instantly</p>
            </div>
            <div className="text-center">
              <Save className="h-12 w-12 text-primary mx-auto mb-2" />
              <h3 className="font-semibold">Reusable Content</h3>
              <p className="text-sm text-muted-foreground">Use answers across multiple applications</p>
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="grid md:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>Search Your Vault</CardTitle>
            <CardDescription>Find saved answers by keyword or category</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <Input placeholder="Search your saved answers..." />
              <Button className="w-full">Search Vault</Button>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Add New Answer</CardTitle>
            <CardDescription>Save a new answer to your vault</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <Input placeholder="Question title or category..." />
              <Textarea placeholder="Your answer..." rows={4} />
              <Button className="w-full">Save to Vault</Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default AIVault;