<script setup>
import Card from '@/components/ui/Card.vue'
import CardContent from '@/components/ui/CardContent.vue'

import {
  Network,
  Shield,
  Blocks
} from 'lucide-vue-next'
</script>

<template>
  <section class="container py-24">

    <div class="text-center mb-16">
      <h2 class="text-3xl md:text-4xl font-bold mb-4">
        Core Infrastructure Principles
      </h2>

      <p class="text-xl text-muted-foreground max-w-2xl mx-auto">
        Built to reduce dependency on centralized systems
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

      <Card class="border-2">
        <CardContent class="pt-6">

          <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
            <Network class="h-6 w-6 text-primary" />
          </div>

          <h3 class="text-2xl font-bold mb-3">
            Peer-to-Peer
          </h3>

          <p class="text-muted-foreground leading-relaxed">
            Systems communicate directly between peers without depending on centralized infrastructure or single points of control.
          </p>

        </CardContent>
      </Card>

      <Card class="border-2">
        <CardContent class="pt-6">

          <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
            <Shield class="h-6 w-6 text-primary" />
          </div>

          <h3 class="text-2xl font-bold mb-3">
            Sovereignty
          </h3>

          <p class="text-muted-foreground leading-relaxed">
            Identity, communication, and infrastructure belong to the participants of the network, not centralized providers.
          </p>

        </CardContent>
      </Card>

      <Card class="border-2">
        <CardContent class="pt-6">

          <div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
            <Blocks class="h-6 w-6 text-primary" />
          </div>

          <h3 class="text-2xl font-bold mb-3">
            Modularity
          </h3>

          <p class="text-muted-foreground leading-relaxed">
            Build different systems on top of the same decentralized infrastructure, from social platforms to autonomous machine networks.
          </p>

        </CardContent>
      </Card>

    </div>

  </section>
</template>