<script setup lang="ts">
  import PageLayout from "../components/PageLayout.vue";
  import { Card, CardHeader, CardContent } from "@/components/ui/card";
  // You can add any component logic here using the script setup syntax
</script>

<template>
  <PageLayout header="About">
    <div class="max-w-4xl mx-auto space-y-8">
      <Card>
        <CardHeader class="bg-gray-50">
          <h2 class="text-lg leading-6 font-medium text-gray-900">
            Budget Manager PWA
          </h2>
          <p class="mt-1 max-w-2xl text-sm text-gray-500">
            A Progressive Web App for tracking your expenses and income with
            push notifications
          </p>
        </CardHeader>

        <CardContent>
          <h3 class="text-lg font-medium text-gray-900 mb-4">
            Our Application
          </h3>
          <p class="text-gray-700">
            Budget Manager PWA is designed to help you manage your finances
            effectively by tracking expenses and income. This application works
            offline and online, storing your data in both MongoDB and local
            storage for seamless experience.
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <h3 class="text-lg font-medium text-gray-900">Features</h3>
        </CardHeader>
        <CardContent>
          <ul class="space-y-2 list-disc pl-5">
            <li>Track expenses and income with categorization</li>
            <li>Budgeting tools to plan your monthly expenses</li>
            <li>Generate reports and financial analysis</li>
            <li>Works offline with local storage sync</li>
            <li>Push notifications for budget alerts and reminders</li>
            <li>Secure authentication system</li>
            <li>MongoDB backend for data persistence</li>
          </ul>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <h3 class="text-lg font-medium text-gray-900">Technology Stack</h3>
        </CardHeader>
        <CardContent>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <h4 class="font-medium mb-2">Frontend</h4>
              <ul class="space-y-1 list-disc pl-5">
                <li>Vue.js 3 with Composition API</li>
                <li>Tailwind CSS for styling</li>
                <li>PWA capabilities for offline use</li>
                <li>Service workers for push notifications</li>
              </ul>
            </div>
            <div>
              <h4 class="font-medium mb-2">Backend</h4>
              <ul class="space-y-1 list-disc pl-5">
                <li>Koa.js for REST API endpoints</li>
                <li>JWT for secure authentication</li>
                <li>MongoDB for data storage</li>
                <li>Bun for package management and runtime</li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <h3 class="text-lg font-medium text-gray-900">
            Privacy & Data Security
          </h3>
        </CardHeader>
        <CardContent>
          <p class="text-gray-700">
            Your financial data is important, which is why we've implemented
            secure authentication and local storage for offline access. The app
            doesn't share your data with third parties, and all sensitive
            information is encrypted.
          </p>
        </CardContent>
      </Card>
    </div>
  </PageLayout>
</template>
