<script setup>
import Card from '@/components/ui/Card.vue';
import CardContent from '@/components/ui/CardContent.vue';
import { Target } from 'lucide-vue-next';
</script>

<template>
    <section class="">
      <div class="container py-24">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <Card class="border-2 order-2 lg:order-1">
            <CardContent class="p-8">
              <div class="space-y-6">
                <div class="flex items-start gap-4">
                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
                  <div>
                    <h3 class="font-semibold mb-1">No Central Authority</h3>
                    <p class="text-sm text-muted-foreground">
                      Peer-to-peer connections remove central control
                    </p>
                  </div>
                </div>

                <div class="flex items-start gap-4">
                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
                  <div>
                    <h3 class="font-semibold mb-1">End-to-End Encryption</h3>
                    <p class="text-sm text-muted-foreground">
                      Communications secured and private
                    </p>
                  </div>
                </div>

                <div class="flex items-start gap-4">
                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
                  <div>
                    <h3 class="font-semibold mb-1">User Ownership</h3>
                    <p class="text-sm text-muted-foreground">
                      You own your identity and data
                    </p>
                  </div>
                </div>

                <div class="flex items-start gap-4">
                  <div class="h-2 w-2 rounded-full bg-primary mt-2" />
                  <div>
                    <h3 class="font-semibold mb-1">Open Source</h3>
                    <p class="text-sm text-muted-foreground">
                      Transparency through open code
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          <div class="order-1 lg:order-2">
            <div
              class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10
                     text-primary rounded-full border border-primary/20 mb-6"
            >
              <Target class="h-4 w-4" />
              Our Mission
            </div>

            <h2 class="text-3xl md:text-4xl font-bold mb-6">
              Giving Control Back to Users
            </h2>

            <div class="space-y-4 text-muted-foreground leading-relaxed">
              <p>
                We're building a social network based on privacy, free expression and autonomy.
              </p>

              <p class="text-lg font-semibold text-foreground">
                A truly peer-to-peer network where no one can censor or exploit you.
              </p>

              <p>
                Decentralization + encryption + open source = independence.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
</template>